More SFX and BGM

This commit is contained in:
thepaperpilot 2023-03-01 21:30:57 -06:00
parent 0b87c9941f
commit 00019d72cb
12 changed files with 112 additions and 8 deletions

BIN
public/Increase Stats.wav Normal file

Binary file not shown.

BIN
public/bgm.mp3 Normal file

Binary file not shown.

Binary file not shown.

BIN
public/error.wav Normal file

Binary file not shown.

BIN
public/sell.wav Normal file

Binary file not shown.

BIN
public/start stream.wav Normal file

Binary file not shown.

BIN
public/win.wav Normal file

Binary file not shown.

View file

@ -4,6 +4,8 @@
<h2>Settings</h2>
</template>
<template v-slot:body>
<Slider title="BGM Volume" :min="0" :max="1" v-model="bgmVolume" />
<Slider title="SFX Volume" :min="0" :max="1" v-model="sfxVolume" />
<component :is="settingFieldsComponent" />
<Text title="Private room name" v-model="privateRoomName" />
<Text title="Private room PW" :password="true" v-model="privateRoomPassword" />
@ -22,6 +24,7 @@ import settings, { settingFields } from "game/settings";
import { save } from "util/save";
import { coerceComponent, render } from "util/vue";
import { computed, ref, toRefs } from "vue";
import Slider from "./fields/Slider.vue";
import Text from "./fields/Text.vue";
const isOpen = ref(false);
@ -48,7 +51,7 @@ const settingFieldsComponent = computed(() => {
return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
});
const { privateRoomName, privateRoomPassword } = toRefs(settings);
const { privateRoomName, privateRoomPassword, bgmVolume, sfxVolume } = toRefs(settings);
function joinRoom() {
roomConnectionError.value = "";

View file

@ -2,7 +2,7 @@
<div class="field">
<span class="field-title" v-if="title">{{ title }}</span>
<Tooltip :display="`${value}`" :class="{ fullWidth: !title }" :direction="Direction.Down">
<input type="range" v-model="value" :min="min" :max="max" />
<input type="range" v-model="value" :min="min" :max="max" step=".01" />
</Tooltip>
</div>
</template>
@ -35,7 +35,12 @@ const value = computed({
</script>
<style scoped>
.fullWidth {
.fullWidth,
input {
width: 100%;
}
.tooltip-container {
width: 50%;
}
</style>

View file

@ -96,6 +96,40 @@ const droppingCoots = new Audio("dropping coots in field.wav");
const lose = new Audio("lose.wav");
const reroll = new Audio("reroll.wav");
const freeze = new Audio("freeze.wav");
const statIncrease = new Audio("Increase Stats.wav");
const sell = new Audio("sell.wav");
const startStreamAudio = new Audio("start stream.wav");
const win = new Audio("win.wav");
const bgm = new Audio("bgm.mp3");
watch(
() => settings.bgmVolume,
volume => {
bgm.volume = volume;
},
{ immediate: true }
);
watch(
() => settings.sfxVolume,
volume => {
buttonClick.volume = volume;
cootFaints.volume = volume;
damage.volume = volume;
droppingCoots.volume = volume;
lose.volume = volume;
reroll.volume = volume;
freeze.volume = volume;
statIncrease.volume = volume;
sell.volume = volume;
startStreamAudio.volume = volume;
win.volume = volume;
},
{ immediate: true }
);
bgm.loop = true;
bgm.play();
export const characters: Record<string, CharacterInfo> = {
// Tier 1
@ -162,6 +196,8 @@ export const characters: Record<string, CharacterInfo> = {
);
}
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
qt: {
@ -184,6 +220,8 @@ export const characters: Record<string, CharacterInfo> = {
performAbility(char) {
const goldGain = char.exp >= 6 ? 3 : char.exp >= 3 ? 2 : 1;
main.gold.value += goldGain;
sell.currentTime = 0;
sell.play();
}
},
mario: {
@ -243,6 +281,8 @@ export const characters: Record<string, CharacterInfo> = {
for (let i = 0; i < relevancyGain; i++) {
poof(`team-char-${team.length - 1}`, healthParticles);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
nick: {
@ -280,6 +320,8 @@ export const characters: Record<string, CharacterInfo> = {
}
});
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
// Tier 2
@ -308,6 +350,8 @@ export const characters: Record<string, CharacterInfo> = {
poof(`team-char-${main.team.value.indexOf(char)}`, healthParticles);
poof(`team-char-${main.team.value.indexOf(char)}`, presenceParticles);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
});
}
@ -424,6 +468,8 @@ export const characters: Record<string, CharacterInfo> = {
for (let i = 0; i < gain; i++) {
poof(`team-char-${main.team.value.indexOf(m)}`, healthParticles);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
});
}
@ -445,6 +491,8 @@ export const characters: Record<string, CharacterInfo> = {
performAbility(char) {
const gain = char.exp >= 6 ? 6 : char.exp >= 3 ? 4 : 2;
main.gold.value += gain;
sell.currentTime = 0;
sell.play();
}
},
frog: {
@ -519,6 +567,8 @@ export const characters: Record<string, CharacterInfo> = {
);
}
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
// Tier 3
@ -545,6 +595,8 @@ export const characters: Record<string, CharacterInfo> = {
for (let i = 0; i < presenceGain; i++) {
poof(`team-char-${i}`, presenceParticles);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
}
},
@ -605,6 +657,8 @@ export const characters: Record<string, CharacterInfo> = {
for (let i = 0; i < gain; i++) {
poof(`battle-streamer-${main.team.value.indexOf(char)}`, healthParticles);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
connor: {
@ -726,6 +780,8 @@ export const characters: Record<string, CharacterInfo> = {
}
}
}
statIncrease.currentTime = 0;
statIncrease.play();
}
},
awards: {
@ -748,6 +804,8 @@ export const characters: Record<string, CharacterInfo> = {
}
const gain = char.exp >= 6 ? 3 : char.exp >= 3 ? 2 : 1;
main.gold.value += gain * main.wins.value;
sell.currentTime = 0;
sell.play();
}
},
// Other
@ -787,6 +845,8 @@ export const characters: Record<string, CharacterInfo> = {
presenceParticles
);
}
statIncrease.currentTime = 0;
statIncrease.play();
}
}
};
@ -925,6 +985,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
}
if (outcome.value === "Victory") {
wins.value++;
win.currentTime = 0;
win.play();
} else if (outcome.value === "Defeat") {
lives.value--;
lose.currentTime = 0;
@ -1052,8 +1114,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
const handleShop = () => {
if (selectedCharacter.value != null) {
emit("sell", selectedCharacter.value!);
buttonClick.currentTime = 0;
buttonClick.play();
sell.currentTime = 0;
sell.play();
} else if (selectedShopItem.value != null) {
emit("freeze", selectedShopItem.value!);
freeze.currentTime = 0;
@ -1378,8 +1440,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
class="startStream"
draggable="false"
onClick={() => {
buttonClick.currentTime = 0;
buttonClick.play();
startStreamAudio.currentTime = 0;
startStreamAudio.play();
emit("stream");
findingMatch.value = true;
}}

View file

@ -21,6 +21,18 @@ import presenceParticles from "./presence.json";
import { EmitterConfigV3 } from "@pixi/particle-emitter";
const levelUp = new Audio("level up coot v2.wav");
const error = new Audio("error.wav");
const statIncrease = new Audio("Increase Stats.wav");
watch(
() => settings.sfxVolume,
volume => {
levelUp.volume = volume;
error.volume = volume;
statIncrease.volume = volume;
},
{ immediate: true }
);
export const connected = ref<boolean>(false);
export const nickname = ref<string>("");
@ -134,6 +146,10 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
if (message === "Failed to start streaming") {
main.findingMatch.value = false;
}
if (message.includes("Failed")) {
error.currentTime = 0;
error.play();
}
});
socket.on("nickname", nick => {
nickname.value = nick;
@ -241,6 +257,8 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
poof(`team-char-${index}`, healthParticles);
});
needsWait = true;
statIncrease.currentTime = 0;
statIncrease.play();
}
main.team.value.forEach(m => {
if (m == null) {
@ -352,6 +370,8 @@ function startStream(
healthParticles
);
}
statIncrease.currentTime = 0;
statIncrease.play();
});
setTimeout(main.prepareMove, 1250);
}, 1250);
@ -378,6 +398,8 @@ function startStream(
`battle-enemy-member-${main.battle.value!.enemyTeam.indexOf(host)}`,
presenceParticles
);
statIncrease.currentTime = 0;
statIncrease.play();
}
setTimeout(main.prepareMove, 1250);
}, 1250);
@ -391,6 +413,8 @@ function startStream(
`battle-enemy-member-${main.battle.value!.enemyTeam.indexOf(host)}`,
healthParticles
);
statIncrease.currentTime = 0;
statIncrease.play();
}
if (main.battle.value!.team.length > 0) {
const host = main.battle.value!.team[main.battle.value!.team.length - 1];
@ -421,6 +445,8 @@ function startStream(
healthParticles
);
}
statIncrease.currentTime = 0;
statIncrease.play();
});
checkEnemyStreamType();
}, 1250);
@ -446,6 +472,8 @@ function startStream(
`battle-member-${main.battle.value!.enemyTeam.indexOf(host)}`,
presenceParticles
);
statIncrease.currentTime = 0;
statIncrease.play();
}
checkEnemyStreamType();
}, 1250);
@ -458,6 +486,8 @@ function startStream(
`battle-enemy-member-${main.battle.value!.enemyTeam.indexOf(host)}`,
healthParticles
);
statIncrease.currentTime = 0;
statIncrease.play();
}
if (main.battle.value!.enemyTeam.length > 0) {
const host = main.battle.value!.enemyTeam[main.battle.value!.enemyTeam.length - 1];

View file

@ -27,6 +27,8 @@ export interface Settings {
privateRoomPassword: string;
victories: number;
losses: number;
sfxVolume: number;
bgmVolume: number;
}
const state = reactive<Partial<Settings>>({
@ -42,7 +44,9 @@ const state = reactive<Partial<Settings>>({
privateRoomName: "",
privateRoomPassword: "",
victories: 0,
losses: 0
losses: 0,
sfxVolume: 1,
bgmVolume: 1
});
watch(