Feat: full screen loader

This commit is contained in:
Dorian Zedler 2023-01-05 12:16:28 +01:00
parent 223c5c251a
commit 0e10b00b37
Signed by: dorian
GPG key ID: 989DE36109AFA354

View file

@ -14,7 +14,7 @@
<body> <body>
<main class="container"> <main class="container">
<div x-data> <div x-data>
<div x-show="$store.localState.room"> <div x-show="$store.remoteState.connected && $store.localState.room">
<hgroup> <hgroup>
<h1 <h1
x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])"> x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
@ -84,6 +84,11 @@
</button> </button>
</details> </details>
</div> </div>
<div x-show="!$store.remoteState.connected && $store.localState.room">
<h1 class="timer loading" aria-busy="true">Connecting...</h1>
</div>
<div x-show="!$store.localState.room"> <div x-show="!$store.localState.room">
<form x-data="JoinForm()" @submit.prevent="submitForm"> <form x-data="JoinForm()" @submit.prevent="submitForm">
<input type="text" x-model="formData.name" placeholder="Name" /> <input type="text" x-model="formData.name" placeholder="Name" />