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

add option to toggle player names

Browse source
This commit is contained in:
Zutatensuppe 2021-07-07 20:54:34 +02:00
parent b44ccbf819
commit a406d8abe8
12 changed files with 135 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

2
build/public/assets/index.d345f13f.css → build/public/assets/index.22dc307c.css
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.c8fb176c.js Normal file
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.e0d48db2.js
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.e0d48db2.js"></script> <script type="module" crossorigin src="/assets/index.c8fb176c.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js"> <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.d345f13f.css"> <link rel="stylesheet" href="/assets/index.22dc307c.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2
build/server/main.js
View file

@ -361,6 +361,7 @@ const INPUT_EV_TOGGLE_SOUNDS = 11;
const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12; const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12;
const INPUT_EV_REPLAY_SPEED_UP = 13; const INPUT_EV_REPLAY_SPEED_UP = 13;
const INPUT_EV_REPLAY_SPEED_DOWN = 14; const INPUT_EV_REPLAY_SPEED_DOWN = 14;
const INPUT_EV_TOGGLE_PLAYER_NAMES = 15;
const CHANGE_DATA = 1; const CHANGE_DATA = 1;
const CHANGE_TILE = 2; const CHANGE_TILE = 2;
const CHANGE_PLAYER = 3; const CHANGE_PLAYER = 3;
@ -387,6 +388,7 @@ var Protocol = {
INPUT_EV_REPLAY_TOGGLE_PAUSE, INPUT_EV_REPLAY_TOGGLE_PAUSE,
INPUT_EV_REPLAY_SPEED_UP, INPUT_EV_REPLAY_SPEED_UP,
INPUT_EV_REPLAY_SPEED_DOWN, INPUT_EV_REPLAY_SPEED_DOWN,
INPUT_EV_TOGGLE_PLAYER_NAMES,
CHANGE_DATA, CHANGE_DATA,
CHANGE_TILE, CHANGE_TILE,
CHANGE_PLAYER, CHANGE_PLAYER,

4
src/common/Protocol.ts
View file

@ -64,6 +64,8 @@ const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12
const INPUT_EV_REPLAY_SPEED_UP = 13 const INPUT_EV_REPLAY_SPEED_UP = 13
const INPUT_EV_REPLAY_SPEED_DOWN = 14 const INPUT_EV_REPLAY_SPEED_DOWN = 14
const INPUT_EV_TOGGLE_PLAYER_NAMES = 15
const CHANGE_DATA = 1 const CHANGE_DATA = 1
const CHANGE_TILE = 2 const CHANGE_TILE = 2
const CHANGE_PLAYER = 3 const CHANGE_PLAYER = 3
@ -98,6 +100,8 @@ export default {
INPUT_EV_REPLAY_SPEED_UP, INPUT_EV_REPLAY_SPEED_UP,
INPUT_EV_REPLAY_SPEED_DOWN, INPUT_EV_REPLAY_SPEED_DOWN,
INPUT_EV_TOGGLE_PLAYER_NAMES,
CHANGE_DATA, CHANGE_DATA,
CHANGE_TILE, CHANGE_TILE,
CHANGE_PLAYER, CHANGE_PLAYER,

2
src/frontend/components/HelpOverlay.vue
View file

@ -12,6 +12,8 @@
<tr><td>🖼️ Toggle preview:</td><td><div><kbd>Space</kbd></div></td></tr> <tr><td>🖼️ Toggle preview:</td><td><div><kbd>Space</kbd></div></td></tr>
<tr><td>🧩✔️ Toggle fixed pieces:</td><td><div><kbd>F</kbd></div></td></tr> <tr><td>🧩✔️ Toggle fixed pieces:</td><td><div><kbd>F</kbd></div></td></tr>
<tr><td>🧩❓ Toggle loose pieces:</td><td><div><kbd>G</kbd></div></td></tr> <tr><td>🧩❓ Toggle loose pieces:</td><td><div><kbd>G</kbd></div></td></tr>
<tr><td>👤 Toggle player names:</td><td><div><kbd>N</kbd></div></td></tr>
<tr><td>🔉 Toggle sounds:</td><td><div><kbd>M</kbd></div></td></tr> <tr><td>🔉 Toggle sounds:</td><td><div><kbd>M</kbd></div></td></tr>
<tr><td>⏫ Speed up (replay):</td><td><div><kbd>I</kbd></div></td></tr> <tr><td>⏫ Speed up (replay):</td><td><div><kbd>I</kbd></div></td></tr>

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

@ -31,6 +31,10 @@
<span @click="increaseVolume">🔊</span> <span @click="increaseVolume">🔊</span>
</td> </td>
</tr> </tr>
<tr>
<td><label>Show player names: </label></td>
<td><input type="checkbox" v-model="modelValue.showPlayerNames" /></td>
</tr>
</table> </table>
</div> </div>
</template> </template>

64
src/frontend/game.ts
View file

@ -11,6 +11,8 @@ import Game from './../common/GameCommon'
import fireworksController from './Fireworks' import fireworksController from './Fireworks'
import Protocol from '../common/Protocol' import Protocol from '../common/Protocol'
import Time from '../common/Time' import Time from '../common/Time'
import settings from './settings'
import { SETTINGS } from './settings'
import { Dim, Point } from '../common/Geometry' import { Dim, Point } from '../common/Geometry'
import { import {
FixedLengthArray, FixedLengthArray,
@ -53,6 +55,7 @@ interface Hud {
setConnectionState: (v: number) => void setConnectionState: (v: number) => void
togglePreview: () => void togglePreview: () => void
toggleSoundsEnabled: () => void toggleSoundsEnabled: () => void
togglePlayerNames: () => void
setReplaySpeed?: (v: number) => void setReplaySpeed?: (v: number) => void
setReplayPaused?: (v: boolean) => void setReplayPaused?: (v: boolean) => void
} }
@ -205,6 +208,9 @@ function EventAdapter (
if (ev.code === 'KeyM') { if (ev.code === 'KeyM') {
addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS]) addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
} }
if (ev.code === 'KeyN') {
addEvent([Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES])
}
}) })
const addEvent = (event: GameEvent) => { const addEvent = (event: GameEvent) => {
@ -441,19 +447,13 @@ export async function main(
const justFinished = () => finished && !longFinished const justFinished = () => finished && !longFinished
const playerSoundVolume = (): number => { const playerSoundVolume = (): number => {
const volume = localStorage.getItem('sound_volume') return settings.getInt(SETTINGS.SOUND_VOLUME, 100)
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') return settings.getBool(SETTINGS.SOUND_ENABLED, false)
if (enabled === null) {
return false
} }
return enabled === '1' const showPlayerNames = (): boolean => {
return settings.getBool(SETTINGS.SHOW_PLAYER_NAMES, true)
} }
const playClick = () => { const playClick = () => {
@ -464,27 +464,24 @@ export async function main(
const playerBgColor = () => { const playerBgColor = () => {
if (MODE === MODE_REPLAY) { if (MODE === MODE_REPLAY) {
return localStorage.getItem('bg_color') || '#222222' return settings.getStr(SETTINGS.COLOR_BACKGROUND, '#222222')
} }
return (Game.getPlayerBgColor(gameId, clientId) return Game.getPlayerBgColor(gameId, clientId)
|| localStorage.getItem('bg_color') || settings.getStr(SETTINGS.COLOR_BACKGROUND, '#222222')
|| '#222222')
} }
const playerColor = () => { const playerColor = () => {
if (MODE === MODE_REPLAY) { if (MODE === MODE_REPLAY) {
return localStorage.getItem('player_color') || '#ffffff' return settings.getStr(SETTINGS.PLAYER_COLOR, '#ffffff')
} }
return (Game.getPlayerColor(gameId, clientId) return Game.getPlayerColor(gameId, clientId)
|| localStorage.getItem('player_color') || settings.getStr(SETTINGS.PLAYER_COLOR, '#ffffff')
|| '#ffffff')
} }
const playerName = () => { const playerName = () => {
if (MODE === MODE_REPLAY) { if (MODE === MODE_REPLAY) {
return localStorage.getItem('player_name') || '#ffffff' return settings.getStr(SETTINGS.PLAYER_NAME, 'anon')
} }
return (Game.getPlayerName(gameId, clientId) return Game.getPlayerName(gameId, clientId)
|| localStorage.getItem('player_name') || settings.getStr(SETTINGS.PLAYER_NAME, 'anon')
|| 'anon')
} }
let cursorDown: string = '' let cursorDown: string = ''
@ -718,6 +715,8 @@ export async function main(
HUD.togglePreview() HUD.togglePreview()
} else if (type === Protocol.INPUT_EV_TOGGLE_SOUNDS) { } else if (type === Protocol.INPUT_EV_TOGGLE_SOUNDS) {
HUD.toggleSoundsEnabled() HUD.toggleSoundsEnabled()
} else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
HUD.togglePlayerNames()
} }
// LOCAL + SERVER CHANGES // LOCAL + SERVER CHANGES
@ -784,6 +783,10 @@ export async function main(
viewport.zoom('out', viewport.worldToViewport(pos)) viewport.zoom('out', viewport.worldToViewport(pos))
} else if (type === Protocol.INPUT_EV_TOGGLE_PREVIEW) { } else if (type === Protocol.INPUT_EV_TOGGLE_PREVIEW) {
HUD.togglePreview() HUD.togglePreview()
} else if (type === Protocol.INPUT_EV_TOGGLE_SOUNDS) {
HUD.toggleSoundsEnabled()
} else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
HUD.togglePlayerNames()
} }
} }
} }
@ -859,12 +862,14 @@ export async function main(
bmp = await getPlayerCursor(p) bmp = await getPlayerCursor(p)
pos = viewport.worldToViewport(p) pos = viewport.worldToViewport(p)
ctx.drawImage(bmp, pos.x - CURSOR_W_2, pos.y - CURSOR_H_2) ctx.drawImage(bmp, pos.x - CURSOR_W_2, pos.y - CURSOR_H_2)
if (showPlayerNames()) {
// performance: // performance:
// not drawing text directly here, to have less ctx // not drawing text directly here, to have less ctx
// switches between drawImage and fillTxt // switches between drawImage and fillTxt
texts.push([`${p.name} (${p.points})`, pos.x, pos.y + CURSOR_H]) texts.push([`${p.name} (${p.points})`, pos.x, pos.y + CURSOR_H])
} }
} }
}
// Names // Names
ctx.fillStyle = 'white' ctx.fillStyle = 'white'
@ -900,25 +905,27 @@ export async function main(
evts.setHotkeys(state) evts.setHotkeys(state)
}, },
onBgChange: (value: string) => { onBgChange: (value: string) => {
localStorage.setItem('bg_color', value) settings.setStr(SETTINGS.COLOR_BACKGROUND, value)
evts.addEvent([Protocol.INPUT_EV_BG_COLOR, value]) evts.addEvent([Protocol.INPUT_EV_BG_COLOR, value])
}, },
onColorChange: (value: string) => { onColorChange: (value: string) => {
localStorage.setItem('player_color', value) settings.setStr(SETTINGS.PLAYER_COLOR, value)
evts.addEvent([Protocol.INPUT_EV_PLAYER_COLOR, value]) evts.addEvent([Protocol.INPUT_EV_PLAYER_COLOR, value])
}, },
onNameChange: (value: string) => { onNameChange: (value: string) => {
localStorage.setItem('player_name', value) settings.setStr(SETTINGS.PLAYER_NAME, value)
evts.addEvent([Protocol.INPUT_EV_PLAYER_NAME, value]) evts.addEvent([Protocol.INPUT_EV_PLAYER_NAME, value])
}, },
onSoundsEnabledChange: (value: boolean) => { onSoundsEnabledChange: (value: boolean) => {
localStorage.setItem('sound_enabled', value ? '1' : '0') settings.setBool(SETTINGS.SOUND_ENABLED, value)
}, },
onSoundsVolumeChange: (value: number) => { onSoundsVolumeChange: (value: number) => {
log.info('vol changed', value) settings.setInt(SETTINGS.SOUND_VOLUME, value)
localStorage.setItem('sound_volume', `${value}`)
playClick() playClick()
}, },
onShowPlayerNamesChange: (value: boolean) => {
settings.setBool(SETTINGS.SHOW_PLAYER_NAMES, value)
},
replayOnSpeedUp, replayOnSpeedUp,
replayOnSpeedDown, replayOnSpeedDown,
replayOnPauseToggle, replayOnPauseToggle,
@ -929,6 +936,7 @@ export async function main(
name: playerName(), name: playerName(),
soundsEnabled: playerSoundEnabled(), soundsEnabled: playerSoundEnabled(),
soundsVolume: playerSoundVolume(), soundsVolume: playerSoundVolume(),
showPlayerNames: showPlayerNames(),
}, },
disconnect: Communication.disconnect, disconnect: Communication.disconnect,
connect: connect, connect: connect,

66
src/frontend/settings.ts Normal file
View file

@ -0,0 +1,66 @@
/**
* Player settings
*/
export const SETTINGS = {
SOUND_VOLUME: 'sound_volume',
SOUND_ENABLED: 'sound_enabled',
COLOR_BACKGROUND: 'bg_color',
PLAYER_COLOR: 'player_color',
PLAYER_NAME: 'player_name',
SHOW_PLAYER_NAMES: 'show_player_names',
}
const set = (setting: string, value: string): void => {
localStorage.setItem(setting, value)
}
const get = (setting: string): any => {
return localStorage.getItem(setting)
}
const setInt = (setting: string, val: number): void => {
set(setting, `${val}`)
}
const getInt = (setting: string, def: number): number => {
const value = get(setting)
if (value === null) {
return def
}
const vol = parseInt(value, 10)
return isNaN(vol) ? def : vol
}
const setBool = (setting: string, val: boolean): void => {
set(setting, val ? '1' : '0')
}
const getBool = (setting: string, def: boolean): boolean => {
const value = get(setting)
if (value === null) {
return def
}
return value === '1'
}
const setStr = (setting: string, val: string): void => {
set(setting, val)
}
const getStr = (setting: string, def: string): string => {
const value = get(setting)
if (value === null) {
return def
}
return value
}
export default {
setInt,
getInt,
setBool,
getBool,
setStr,
getStr,
}

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

@ -72,6 +72,7 @@ export default defineComponent({
name: '', name: '',
soundsEnabled: false, soundsEnabled: false,
soundsVolume: 100, soundsVolume: 100,
showPlayerNames: true,
}, },
previewImageUrl: '', previewImageUrl: '',
setHotkeys: (v: boolean) => {}, setHotkeys: (v: boolean) => {},
@ -80,6 +81,7 @@ export default defineComponent({
onNameChange: (v: string) => {}, onNameChange: (v: string) => {},
onSoundsEnabledChange: (v: boolean) => {}, onSoundsEnabledChange: (v: boolean) => {},
onSoundsVolumeChange: (v: number) => {}, onSoundsVolumeChange: (v: number) => {},
onShowPlayerNamesChange: (v: boolean) => {},
connect: () => {}, connect: () => {},
disconnect: () => {}, disconnect: () => {},
unload: () => {}, unload: () => {},
@ -105,6 +107,9 @@ export default defineComponent({
this.$watch(() => this.g.player.soundsVolume, (value: number) => { this.$watch(() => this.g.player.soundsVolume, (value: number) => {
this.g.onSoundsVolumeChange(value) this.g.onSoundsVolumeChange(value)
}) })
this.$watch(() => this.g.player.showPlayerNames, (value: boolean) => {
this.g.onShowPlayerNamesChange(value)
})
this.g = await main( this.g = await main(
`${this.$route.params.id}`, `${this.$route.params.id}`,
// @ts-ignore // @ts-ignore
@ -123,6 +128,7 @@ export default defineComponent({
togglePreview: () => { this.toggle('preview', false) }, togglePreview: () => { this.toggle('preview', false) },
setConnectionState: (v: number) => { this.connectionState = v }, setConnectionState: (v: number) => { this.connectionState = v },
toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled }, toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
togglePlayerNames: () => { this.g.player.showPlayerNames = !this.g.player.showPlayerNames },
} }
) )
}, },

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

@ -72,6 +72,7 @@ export default defineComponent({
name: '', name: '',
soundsEnabled: false, soundsEnabled: false,
soundsVolume: 100, soundsVolume: 100,
showPlayerNames: true,
}, },
previewImageUrl: '', previewImageUrl: '',
setHotkeys: (v: boolean) => {}, setHotkeys: (v: boolean) => {},
@ -80,6 +81,7 @@ export default defineComponent({
onNameChange: (v: string) => {}, onNameChange: (v: string) => {},
onSoundsEnabledChange: (v: boolean) => {}, onSoundsEnabledChange: (v: boolean) => {},
onSoundsVolumeChange: (v: number) => {}, onSoundsVolumeChange: (v: number) => {},
onShowPlayerNamesChange: (v: boolean) => {},
replayOnSpeedUp: () => {}, replayOnSpeedUp: () => {},
replayOnSpeedDown: () => {}, replayOnSpeedDown: () => {},
replayOnPauseToggle: () => {}, replayOnPauseToggle: () => {},
@ -113,6 +115,9 @@ export default defineComponent({
this.$watch(() => this.g.player.soundsVolume, (value: number) => { this.$watch(() => this.g.player.soundsVolume, (value: number) => {
this.g.onSoundsVolumeChange(value) this.g.onSoundsVolumeChange(value)
}) })
this.$watch(() => this.g.player.showPlayerNames, (value: boolean) => {
this.g.onShowPlayerNamesChange(value)
})
this.g = await main( this.g = await main(
`${this.$route.params.id}`, `${this.$route.params.id}`,
// @ts-ignore // @ts-ignore
@ -133,6 +138,7 @@ export default defineComponent({
setReplaySpeed: (v: number) => { this.replay.speed = v }, setReplaySpeed: (v: number) => { this.replay.speed = v },
setReplayPaused: (v: boolean) => { this.replay.paused = v }, setReplayPaused: (v: boolean) => { this.replay.paused = v },
toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled }, toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
togglePlayerNames: () => { this.g.player.showPlayerNames = !this.g.player.showPlayerNames },
} }
) )
}, },