2022-12-30 13:28:28 +01:00
|
|
|
<!DOCTYPE html>
|
2022-12-29 17:19:36 +01:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
2022-12-30 13:28:28 +01:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2022-12-29 17:19:36 +01:00
|
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
2023-01-05 18:40:06 +01:00
|
|
|
<script src="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
|
2023-01-05 12:23:15 +01:00
|
|
|
<script src="js/index.js"></script>
|
|
|
|
|
<script src="js/localState.js"></script>
|
|
|
|
|
<script src="js/remoteState.js"></script>
|
2022-12-30 13:28:28 +01:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="index.css" />
|
2022-12-29 17:19:36 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<main class="container">
|
|
|
|
|
<div x-data>
|
2023-01-05 12:16:28 +01:00
|
|
|
<div x-show="$store.remoteState.connected && $store.localState.room">
|
2022-12-29 17:19:36 +01:00
|
|
|
<hgroup>
|
2022-12-29 20:26:40 +01:00
|
|
|
<h1
|
2023-01-05 13:05:28 +01:00
|
|
|
x-text="'It\'s ' + ($store.remoteState.isMyTurn ? 'YOUR':($store.remoteState.players[$store.remoteState.currentPlayer] + '\'s')) + ' turn!'">
|
2022-12-29 17:19:36 +01:00
|
|
|
</h1>
|
2023-01-05 13:05:28 +01:00
|
|
|
<h2>You are <b x-text="$store.localState.name"></b> in the room <b
|
|
|
|
|
x-text="$store.localState.room"></b></h2>
|
2022-12-29 17:19:36 +01:00
|
|
|
</hgroup>
|
|
|
|
|
|
|
|
|
|
<div x-data="Timer">
|
2023-01-05 13:05:28 +01:00
|
|
|
<p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
|
|
|
|
|
x-text="time + 's'"></p>
|
2022-12-29 17:19:36 +01:00
|
|
|
</div>
|
|
|
|
|
|
2023-01-05 18:50:55 +01:00
|
|
|
<button x-show="!$store.remoteState.skipMe" @click="$store.remoteState.giveTurnToNextPlayer()"
|
2022-12-30 13:28:28 +01:00
|
|
|
x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">
|
|
|
|
|
I'm done!
|
|
|
|
|
</button>
|
2022-12-29 20:26:40 +01:00
|
|
|
|
2023-01-05 18:50:55 +01:00
|
|
|
<label for="skip_switch" class="mb">
|
|
|
|
|
<input x-model="$store.remoteState.skipMe"
|
|
|
|
|
type="checkbox" id="skip_switch" role="switch" />
|
|
|
|
|
Skip me
|
|
|
|
|
</label>
|
|
|
|
|
|
2023-01-05 10:22:17 +01:00
|
|
|
<details class="first-details">
|
2023-01-05 10:24:28 +01:00
|
|
|
<summary>Options</summary>
|
2022-12-29 20:26:40 +01:00
|
|
|
|
|
|
|
|
|
2023-01-05 10:22:17 +01:00
|
|
|
<fieldset>
|
|
|
|
|
<label for="nextPlayer_select">Player after me:
|
|
|
|
|
<b x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b>
|
|
|
|
|
</label>
|
|
|
|
|
<select x-model="$store.localState.nextPlayer" id="nextPlayer_select">
|
|
|
|
|
<template
|
|
|
|
|
x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
|
|
|
|
|
:key="playerId">
|
|
|
|
|
<option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
|
|
|
|
|
</template>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<label for="sound_enabled">
|
|
|
|
|
<input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()"
|
|
|
|
|
type="checkbox" id="sound_enabled" name="sound_enabled" role="switch" />
|
|
|
|
|
Enable sound
|
|
|
|
|
</label>
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
<button class="invalid outline" @click="$store.localState.leave()" type="submit">
|
|
|
|
|
Leave room
|
2022-12-30 13:28:28 +01:00
|
|
|
</button>
|
2023-01-05 10:22:17 +01:00
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
<summary>This room</summary>
|
|
|
|
|
|
2023-01-05 12:58:08 +01:00
|
|
|
<label for="roomForm_interval">Interval (seconds):</label>
|
2023-01-05 18:41:40 +01:00
|
|
|
<input id="roomForm_interval" type="number" x-model.lazy="$store.remoteState.interval"
|
2023-01-05 13:05:28 +01:00
|
|
|
placeholder="Interval" />
|
2023-01-05 12:58:08 +01:00
|
|
|
|
2023-01-05 10:22:17 +01:00
|
|
|
<p>
|
|
|
|
|
Other players:
|
|
|
|
|
<ul>
|
|
|
|
|
<template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">
|
|
|
|
|
<li x-text="$store.remoteState.players[playerId]"></li>
|
|
|
|
|
</template>
|
|
|
|
|
</ul>
|
|
|
|
|
</p>
|
|
|
|
|
|
2022-12-30 13:28:28 +01:00
|
|
|
<button class="secondary outline" @click="$store.remoteState.clear()">
|
2023-01-05 10:22:17 +01:00
|
|
|
Clear player list
|
2022-12-30 13:28:28 +01:00
|
|
|
</button>
|
2023-01-05 10:22:17 +01:00
|
|
|
</details>
|
2022-12-29 17:19:36 +01:00
|
|
|
</div>
|
2023-01-05 12:16:28 +01:00
|
|
|
|
|
|
|
|
<div x-show="!$store.remoteState.connected && $store.localState.room">
|
|
|
|
|
<h1 class="timer loading" aria-busy="true">Connecting...</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-05 10:22:17 +01:00
|
|
|
<div x-show="!$store.localState.room">
|
2023-01-05 19:38:09 +01:00
|
|
|
<hgroup>
|
|
|
|
|
<h1>
|
|
|
|
|
Whose turn is it?
|
|
|
|
|
</h1>
|
|
|
|
|
<h2>Please create or join a room</h2>
|
|
|
|
|
</hgroup>
|
2022-12-29 17:19:36 +01:00
|
|
|
<form x-data="JoinForm()" @submit.prevent="submitForm">
|
2023-01-05 19:38:09 +01:00
|
|
|
<label for="joinForm_name">Name:</label>
|
|
|
|
|
<input id="joinForm_name" type="text" x-model="formData.name" placeholder="Name" />
|
|
|
|
|
<small>How others will see you</small>
|
|
|
|
|
<label for="joinForm_room">Room:</label>
|
|
|
|
|
<input id="joinForm_room" type="text" x-model="formData.room" placeholder="Room" />
|
|
|
|
|
<small>Make sure, this is exactly the same for all players</small>
|
2022-12-29 17:19:36 +01:00
|
|
|
<button type="submit">Join</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
