sound when pieces connect
This commit is contained in:
Zutatensuppe
parent
472113ad74
commit
21d7db5677
14 changed files with 75 additions and 8 deletions
BIN
build/public/assets/click.550555f3.mp3
Normal file
BIN
build/public/assets/click.550555f3.mp3
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
1
build/public/assets/index.d7fe3ee6.js
Normal file
1
build/public/assets/index.d7fe3ee6.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,8 +4,8 @@
|
|||
<meta charset="UTF-8">
|
||||
|
||||
<title>🧩 jigsaw.hyottoko.club</title>
|
||||
<script type="module" crossorigin src="/assets/index.4d785533.js"></script>
|
||||
<link rel="modulepreload" href="/assets/vendor.b622ee49.js">
|
||||
<script type="module" crossorigin src="/assets/index.d7fe3ee6.js"></script>
|
||||
<link rel="modulepreload" href="/assets/vendor.18cd2d7e.js">
|
||||
<link rel="stylesheet" href="/assets/index.f7304069.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -344,6 +344,7 @@ const INPUT_EV_PLAYER_COLOR = 7;
|
|||
const INPUT_EV_PLAYER_NAME = 8;
|
||||
const INPUT_EV_MOVE = 9;
|
||||
const INPUT_EV_TOGGLE_PREVIEW = 10;
|
||||
const INPUT_EV_TOGGLE_SOUNDS = 11;
|
||||
const CHANGE_DATA = 1;
|
||||
const CHANGE_TILE = 2;
|
||||
const CHANGE_PLAYER = 3;
|
||||
|
|
@ -366,6 +367,7 @@ var Protocol = {
|
|||
INPUT_EV_PLAYER_COLOR,
|
||||
INPUT_EV_PLAYER_NAME,
|
||||
INPUT_EV_TOGGLE_PREVIEW,
|
||||
INPUT_EV_TOGGLE_SOUNDS,
|
||||
CHANGE_DATA,
|
||||
CHANGE_TILE,
|
||||
CHANGE_PLAYER,
|
||||
|
|
@ -871,7 +873,7 @@ const getPuzzleWidth = (gameId) => {
|
|||
const getPuzzleHeight = (gameId) => {
|
||||
return GAMES[gameId].puzzle.info.height;
|
||||
};
|
||||
function handleInput$1(gameId, playerId, input, ts) {
|
||||
function handleInput$1(gameId, playerId, input, ts, onSnap) {
|
||||
const puzzle = GAMES[gameId].puzzle;
|
||||
const evtInfo = getEvtInfo(gameId, playerId);
|
||||
const changes = [];
|
||||
|
|
@ -1054,6 +1056,9 @@ function handleInput$1(gameId, playerId, input, ts) {
|
|||
changeData(gameId, { finished: ts });
|
||||
_dataChange();
|
||||
}
|
||||
if (onSnap) {
|
||||
onSnap(playerId);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Snap to other tiles
|
||||
|
|
@ -1101,6 +1106,9 @@ function handleInput$1(gameId, playerId, input, ts) {
|
|||
changePlayer(gameId, playerId, { d, ts });
|
||||
_playerChange();
|
||||
}
|
||||
if (snapped && onSnap) {
|
||||
onSnap(playerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -530,7 +530,8 @@ function handleInput(
|
|||
gameId: string,
|
||||
playerId: string,
|
||||
input: Input,
|
||||
ts: Timestamp
|
||||
ts: Timestamp,
|
||||
onSnap?: (playerId: string) => void
|
||||
): Array<Change> {
|
||||
const puzzle = GAMES[gameId].puzzle
|
||||
const evtInfo = getEvtInfo(gameId, playerId)
|
||||
|
|
@ -734,6 +735,9 @@ function handleInput(
|
|||
changeData(gameId, { finished: ts })
|
||||
_dataChange()
|
||||
}
|
||||
if (onSnap) {
|
||||
onSnap(playerId)
|
||||
}
|
||||
} else {
|
||||
// Snap to other tiles
|
||||
const check = (
|
||||
|
|
@ -789,6 +793,9 @@ function handleInput(
|
|||
changePlayer(gameId, playerId, { d, ts })
|
||||
_playerChange()
|
||||
}
|
||||
if (snapped && onSnap) {
|
||||
onSnap(playerId)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
changePlayer(gameId, playerId, { d, ts })
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ const INPUT_EV_PLAYER_COLOR = 7
|
|||
const INPUT_EV_PLAYER_NAME = 8
|
||||
const INPUT_EV_MOVE = 9
|
||||
const INPUT_EV_TOGGLE_PREVIEW = 10
|
||||
const INPUT_EV_TOGGLE_SOUNDS = 11
|
||||
|
||||
const CHANGE_DATA = 1
|
||||
const CHANGE_TILE = 2
|
||||
|
|
@ -87,6 +88,7 @@ export default {
|
|||
INPUT_EV_PLAYER_NAME,
|
||||
|
||||
INPUT_EV_TOGGLE_PREVIEW,
|
||||
INPUT_EV_TOGGLE_SOUNDS,
|
||||
|
||||
CHANGE_DATA,
|
||||
CHANGE_TILE,
|
||||
|
|
|
|||
BIN
src/frontend/click.mp3
Normal file
BIN
src/frontend/click.mp3
Normal file
Binary file not shown.
|
|
@ -12,6 +12,7 @@
|
|||
<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 sounds:</td><td><div><kbd>M</kbd></div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@
|
|||
<td><label>Name: </label></td>
|
||||
<td><input type="text" maxLength="16" v-model="modelValue.name" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>Sounds: </label></td>
|
||||
<td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ declare global {
|
|||
// @ts-ignore
|
||||
const images = import.meta.globEager('./*.png')
|
||||
|
||||
// @ts-ignore
|
||||
const sounds = import.meta.globEager('./*.mp3')
|
||||
|
||||
export const MODE_PLAY = 'play'
|
||||
export const MODE_REPLAY = 'replay'
|
||||
|
||||
|
|
@ -46,6 +49,7 @@ interface Hud {
|
|||
setPiecesTotal: (v: number) => void
|
||||
setConnectionState: (v: number) => void
|
||||
togglePreview: () => void
|
||||
toggleSoundsEnabled: () => void
|
||||
setReplaySpeed?: (v: number) => void
|
||||
setReplayPaused?: (v: boolean) => void
|
||||
}
|
||||
|
|
@ -171,6 +175,9 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
|
|||
PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
|
||||
RERENDER = true
|
||||
}
|
||||
if (ev.key === 'M' || ev.key === 'm') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
|
||||
}
|
||||
})
|
||||
|
||||
const addEvent = (event: GameEvent) => {
|
||||
|
|
@ -233,6 +240,9 @@ export async function main(
|
|||
return MODE === MODE_REPLAY || player.id !== clientId
|
||||
}
|
||||
|
||||
const click = sounds['./click.mp3'].default
|
||||
const clickAudio = new Audio(click)
|
||||
|
||||
const cursorGrab = await Graphics.loadImageToBitmap(images['./grab.png'].default)
|
||||
const cursorHand = await Graphics.loadImageToBitmap(images['./hand.png'].default)
|
||||
const cursorGrabMask = await Graphics.loadImageToBitmap(images['./grab_mask.png'].default)
|
||||
|
|
@ -404,6 +414,13 @@ export async function main(
|
|||
let finished = longFinished
|
||||
const justFinished = () => finished && !longFinished
|
||||
|
||||
const playerSoundEnabled = (): boolean => {
|
||||
const enabled = localStorage.getItem('sound_enabled')
|
||||
if (enabled === null) {
|
||||
return false
|
||||
}
|
||||
return enabled === '1'
|
||||
}
|
||||
const playerBgColor = () => {
|
||||
return (Game.getPlayerBgColor(gameId, clientId)
|
||||
|| localStorage.getItem('bg_color')
|
||||
|
|
@ -614,12 +631,24 @@ 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()
|
||||
}
|
||||
|
||||
// LOCAL + SERVER CHANGES
|
||||
// -------------------------------------------------------------
|
||||
const ts = TIME()
|
||||
const changes = Game.handleInput(gameId, clientId, evt, ts)
|
||||
const changes = Game.handleInput(
|
||||
gameId,
|
||||
clientId,
|
||||
evt,
|
||||
ts,
|
||||
(playerId: string) => {
|
||||
if (playerSoundEnabled()) {
|
||||
clickAudio.play()
|
||||
}
|
||||
}
|
||||
)
|
||||
if (changes.length > 0) {
|
||||
RERENDER = true
|
||||
}
|
||||
|
|
@ -787,6 +816,9 @@ export async function main(
|
|||
localStorage.setItem('player_name', value)
|
||||
evts.addEvent([Protocol.INPUT_EV_PLAYER_NAME, value])
|
||||
},
|
||||
onSoundsEnabledChange: (value: boolean) => {
|
||||
localStorage.setItem('sound_enabled', value ? '1' : '0')
|
||||
},
|
||||
replayOnSpeedUp,
|
||||
replayOnSpeedDown,
|
||||
replayOnPauseToggle,
|
||||
|
|
@ -795,6 +827,7 @@ export async function main(
|
|||
background: playerBgColor(),
|
||||
color: playerColor(),
|
||||
name: playerName(),
|
||||
soundsEnabled: playerSoundEnabled(),
|
||||
},
|
||||
disconnect: Communication.disconnect,
|
||||
connect: connect,
|
||||
|
|
|
|||
|
|
@ -70,12 +70,14 @@ export default defineComponent({
|
|||
background: '',
|
||||
color: '',
|
||||
name: '',
|
||||
soundsEnabled: false,
|
||||
},
|
||||
previewImageUrl: '',
|
||||
setHotkeys: (v: boolean) => {},
|
||||
onBgChange: (v: string) => {},
|
||||
onColorChange: (v: string) => {},
|
||||
onNameChange: (v: string) => {},
|
||||
onSoundsEnabledChange: (v: boolean) => {},
|
||||
disconnect: () => {},
|
||||
connect: () => {},
|
||||
},
|
||||
|
|
@ -94,6 +96,9 @@ export default defineComponent({
|
|||
this.$watch(() => this.g.player.name, (value: string) => {
|
||||
this.g.onNameChange(value)
|
||||
})
|
||||
this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
|
||||
this.g.onSoundsEnabledChange(value)
|
||||
})
|
||||
this.g = await main(
|
||||
`${this.$route.params.id}`,
|
||||
// @ts-ignore
|
||||
|
|
@ -111,6 +116,7 @@ export default defineComponent({
|
|||
setPiecesTotal: (v: number) => { this.piecesTotal = v },
|
||||
setConnectionState: (v: number) => { this.connectionState = v },
|
||||
togglePreview: () => { this.toggle('preview', false) },
|
||||
toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -69,12 +69,14 @@ export default defineComponent({
|
|||
background: '',
|
||||
color: '',
|
||||
name: '',
|
||||
soundsEnabled: false,
|
||||
},
|
||||
previewImageUrl: '',
|
||||
setHotkeys: (v: boolean) => {},
|
||||
onBgChange: (v: string) => {},
|
||||
onColorChange: (v: string) => {},
|
||||
onNameChange: (v: string) => {},
|
||||
onSoundsEnabledChange: (v: boolean) => {},
|
||||
replayOnSpeedUp: () => {},
|
||||
replayOnSpeedDown: () => {},
|
||||
replayOnPauseToggle: () => {},
|
||||
|
|
@ -100,6 +102,9 @@ export default defineComponent({
|
|||
this.$watch(() => this.g.player.name, (value: string) => {
|
||||
this.g.onNameChange(value)
|
||||
})
|
||||
this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
|
||||
this.g.onSoundsEnabledChange(value)
|
||||
})
|
||||
this.g = await main(
|
||||
`${this.$route.params.id}`,
|
||||
// @ts-ignore
|
||||
|
|
@ -119,6 +124,7 @@ export default defineComponent({
|
|||
setConnectionState: (v: number) => { this.connectionState = v },
|
||||
setReplaySpeed: (v: number) => { this.replay.speed = v },
|
||||
setReplayPaused: (v: boolean) => { this.replay.paused = v },
|
||||
toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue