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">
<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="stylesheet" href="/assets/index.d345f13f.css">
<link rel="stylesheet" href="/assets/index.22dc307c.css">
</head>
<body>
<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_SPEED_UP = 13;
const INPUT_EV_REPLAY_SPEED_DOWN = 14;
const INPUT_EV_TOGGLE_PLAYER_NAMES = 15;
const CHANGE_DATA = 1;
const CHANGE_TILE = 2;
const CHANGE_PLAYER = 3;
@ -387,6 +388,7 @@ var Protocol = {
INPUT_EV_REPLAY_TOGGLE_PAUSE,
INPUT_EV_REPLAY_SPEED_UP,
INPUT_EV_REPLAY_SPEED_DOWN,
INPUT_EV_TOGGLE_PLAYER_NAMES,
CHANGE_DATA,
CHANGE_TILE,
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_DOWN = 14
const INPUT_EV_TOGGLE_PLAYER_NAMES = 15
const CHANGE_DATA = 1
const CHANGE_TILE = 2
const CHANGE_PLAYER = 3
@ -98,6 +100,8 @@ export default {
INPUT_EV_REPLAY_SPEED_UP,
INPUT_EV_REPLAY_SPEED_DOWN,
INPUT_EV_TOGGLE_PLAYER_NAMES,
CHANGE_DATA,
CHANGE_TILE,
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 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 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>⏫ 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>
</td>
</tr>
<tr>
<td><label>Show player names: </label></td>
<td><input type="checkbox" v-model="modelValue.showPlayerNames" /></td>
</tr>
</table>
</div>
</template>

74
src/frontend/game.ts
View file

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