para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

add volume setting

Browse source
This commit is contained in:
Zutatensuppe 2021-06-06 17:05:10 +02:00
parent d9ab766e18
commit 0882d3befd
8 changed files with 71 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
build/public/assets/index.6b00de5a.js Normal file
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.99efb0e9.js
View file

File diff suppressed because one or more lines are too long

2
build/public/assets/index.84d14088.css → build/public/assets/index.a9024809.css
View file

File diff suppressed because one or more lines are too long

4
build/public/index.html
View file

@ -4,9 +4,9 @@
<meta charset="UTF-8">
<title>🧩 jigsaw.hyottoko.club</title>
<script type="module" crossorigin src="/assets/index.99efb0e9.js"></script>
<script type="module" crossorigin src="/assets/index.6b00de5a.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.84d14088.css">
<link rel="stylesheet" href="/assets/index.a9024809.css">
</head>
<body>
<div id="app"></div>

36
src/frontend/components/SettingsOverlay.vue
View file

@ -17,6 +17,20 @@
<td><label>Sounds: </label></td>
<td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td>
</tr>
<tr>
<td><label>Sounds Volume: </label></td>
<td class="sound-volume">
<span @click="decreaseVolume">🔉</span>
<input
type="range"
min="0"
max="100"
:value="modelValue.soundsVolume"
@change="updateVolume"
/>
<span @click="increaseVolume">🔊</span>
</td>
</tr>
</table>
</div>
</template>
@ -30,7 +44,23 @@ export default defineComponent({
'update:modelValue': null,
},
props: {
modelValue: Object,
modelValue: {
type: Object,
required: true,
},
},
methods: {
updateVolume (ev: Event): void {
(this.modelValue as any).soundsVolume = (ev.target as HTMLInputElement).value
},
decreaseVolume (): void {
const vol = parseInt(this.modelValue.soundsVolume, 10) - 5
this.modelValue.soundsVolume = Math.max(0, vol)
},
increaseVolume (): void {
const vol = parseInt(this.modelValue.soundsVolume, 10) + 5
this.modelValue.soundsVolume = Math.min(100, vol)
},
},
created () {
// TODO: ts type PlayerSettings
@ -40,3 +70,7 @@ export default defineComponent({
},
})
</script>
<style scoped>
.sound-volume span { cursor: pointer; user-select: none; }
.sound-volume input { vertical-align: middle; }
</style>

23
src/frontend/game.ts
View file

@ -439,6 +439,14 @@ export async function main(
let finished = longFinished
const justFinished = () => finished && !longFinished
const playerSoundVolume = (): number => {
const volume = localStorage.getItem('sound_volume')
if (volume === null) {
return 100
}
const vol = parseInt(volume, 10)
return isNaN(vol) ? 100 : vol
}
const playerSoundEnabled = (): boolean => {
const enabled = localStorage.getItem('sound_enabled')
if (enabled === null) {
@ -446,6 +454,13 @@ export async function main(
}
return enabled === '1'
}
const playClick = () => {
const vol = playerSoundVolume()
clickAudio.volume = vol / 100
clickAudio.play()
}
const playerBgColor = () => {
return (Game.getPlayerBgColor(gameId, clientId)
|| localStorage.getItem('bg_color')
@ -709,7 +724,7 @@ export async function main(
ts,
(playerId: string) => {
if (playerSoundEnabled()) {
clickAudio.play()
playClick()
}
}
)
@ -889,6 +904,11 @@ export async function main(
onSoundsEnabledChange: (value: boolean) => {
localStorage.setItem('sound_enabled', value ? '1' : '0')
},
onSoundsVolumeChange: (value: number) => {
log.info('vol changed', value)
localStorage.setItem('sound_volume', `${value}`)
playClick()
},
replayOnSpeedUp,
replayOnSpeedDown,
replayOnPauseToggle,
@ -899,6 +919,7 @@ export async function main(
color: playerColor(),
name: playerName(),
soundsEnabled: playerSoundEnabled(),
soundsVolume: playerSoundVolume(),
},
disconnect: Communication.disconnect,
connect: connect,

5
src/frontend/views/Game.vue
View file

@ -71,6 +71,7 @@ export default defineComponent({
color: '',
name: '',
soundsEnabled: false,
soundsVolume: 100,
},
previewImageUrl: '',
setHotkeys: (v: boolean) => {},
@ -78,6 +79,7 @@ export default defineComponent({
onColorChange: (v: string) => {},
onNameChange: (v: string) => {},
onSoundsEnabledChange: (v: boolean) => {},
onSoundsVolumeChange: (v: number) => {},
connect: () => {},
disconnect: () => {},
unload: () => {},
@ -100,6 +102,9 @@ export default defineComponent({
this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
this.g.onSoundsEnabledChange(value)
})
this.$watch(() => this.g.player.soundsVolume, (value: number) => {
this.g.onSoundsVolumeChange(value)
})
this.g = await main(
`${this.$route.params.id}`,
// @ts-ignore

5
src/frontend/views/Replay.vue
View file

@ -77,6 +77,7 @@ export default defineComponent({
color: '',
name: '',
soundsEnabled: false,
soundsVolume: 100,
},
previewImageUrl: '',
setHotkeys: (v: boolean) => {},
@ -84,6 +85,7 @@ export default defineComponent({
onColorChange: (v: string) => {},
onNameChange: (v: string) => {},
onSoundsEnabledChange: (v: boolean) => {},
onSoundsVolumeChange: (v: number) => {},
replayOnSpeedUp: () => {},
replayOnSpeedDown: () => {},
replayOnPauseToggle: () => {},
@ -115,6 +117,9 @@ export default defineComponent({
this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
this.g.onSoundsEnabledChange(value)
})
this.$watch(() => this.g.player.soundsVolume, (value: number) => {
this.g.onSoundsVolumeChange(value)
})
this.g = await main(
`${this.$route.params.id}`,
// @ts-ignore