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"> <meta charset="UTF-8">
<title>🧩 jigsaw.hyottoko.club</title> <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="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.84d14088.css"> <link rel="stylesheet" href="/assets/index.a9024809.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

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

@ -17,6 +17,20 @@
<td><label>Sounds: </label></td> <td><label>Sounds: </label></td>
<td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td> <td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td>
</tr> </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> </table>
</div> </div>
</template> </template>
@ -30,7 +44,23 @@ export default defineComponent({
'update:modelValue': null, 'update:modelValue': null,
}, },
props: { 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 () { created () {
// TODO: ts type PlayerSettings // TODO: ts type PlayerSettings
@ -40,3 +70,7 @@ export default defineComponent({
}, },
}) })
</script> </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 let finished = longFinished
const justFinished = () => 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 playerSoundEnabled = (): boolean => {
const enabled = localStorage.getItem('sound_enabled') const enabled = localStorage.getItem('sound_enabled')
if (enabled === null) { if (enabled === null) {
@ -446,6 +454,13 @@ export async function main(
} }
return enabled === '1' return enabled === '1'
} }
const playClick = () => {
const vol = playerSoundVolume()
clickAudio.volume = vol / 100
clickAudio.play()
}
const playerBgColor = () => { const playerBgColor = () => {
return (Game.getPlayerBgColor(gameId, clientId) return (Game.getPlayerBgColor(gameId, clientId)
|| localStorage.getItem('bg_color') || localStorage.getItem('bg_color')
@ -709,7 +724,7 @@ export async function main(
ts, ts,
(playerId: string) => { (playerId: string) => {
if (playerSoundEnabled()) { if (playerSoundEnabled()) {
clickAudio.play() playClick()
} }
} }
) )
@ -889,6 +904,11 @@ export async function main(
onSoundsEnabledChange: (value: boolean) => { onSoundsEnabledChange: (value: boolean) => {
localStorage.setItem('sound_enabled', value ? '1' : '0') localStorage.setItem('sound_enabled', value ? '1' : '0')
}, },
onSoundsVolumeChange: (value: number) => {
log.info('vol changed', value)
localStorage.setItem('sound_volume', `${value}`)
playClick()
},
replayOnSpeedUp, replayOnSpeedUp,
replayOnSpeedDown, replayOnSpeedDown,
replayOnPauseToggle, replayOnPauseToggle,
@ -899,6 +919,7 @@ export async function main(
color: playerColor(), color: playerColor(),
name: playerName(), name: playerName(),
soundsEnabled: playerSoundEnabled(), soundsEnabled: playerSoundEnabled(),
soundsVolume: playerSoundVolume(),
}, },
disconnect: Communication.disconnect, disconnect: Communication.disconnect,
connect: connect, connect: connect,

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

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

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

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