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> <h2>Settings</h2>
</template> </template>
<template v-slot:body> <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" /> <component :is="settingFieldsComponent" />
<Text title="Private room name" v-model="privateRoomName" /> <Text title="Private room name" v-model="privateRoomName" />
<Text title="Private room PW" :password="true" v-model="privateRoomPassword" /> <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 { save } from "util/save";
import { coerceComponent, render } from "util/vue"; import { coerceComponent, render } from "util/vue";
import { computed, ref, toRefs } from "vue"; import { computed, ref, toRefs } from "vue";
import Slider from "./fields/Slider.vue";
import Text from "./fields/Text.vue"; import Text from "./fields/Text.vue";
const isOpen = ref(false); const isOpen = ref(false);
@ -48,7 +51,7 @@ const settingFieldsComponent = computed(() => {
return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>))); return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
}); });
const { privateRoomName, privateRoomPassword } = toRefs(settings); const { privateRoomName, privateRoomPassword, bgmVolume, sfxVolume } = toRefs(settings);
function joinRoom() { function joinRoom() {
roomConnectionError.value = ""; roomConnectionError.value = "";

View file

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

View file

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

View file

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

View file

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