Feat: skip me

index.css

@@ -28,6 +28,10 @@
   margin-top: 2.5em;
 }
 
+.mb {
+  margin-bottom: var(--spacing) !important;
+}
+
 .first-details {
   padding-top: var(--spacing);
     border-bottom: var(--border-width) solid var(--accordion-border-color);

index.html

@@ -31,11 +31,17 @@
                         x-text="time + 's'"></p>
                 </div>
 
-                <button @click="$store.remoteState.giveTurnToNextPlayer()"
+                <button x-show="!$store.remoteState.skipMe" @click="$store.remoteState.giveTurnToNextPlayer()"
                     x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">
                     I'm done!
                 </button>
 
+                <label for="skip_switch" class="mb">
+                    <input x-model="$store.remoteState.skipMe"
+                        type="checkbox" id="skip_switch" role="switch" />
+                    Skip me
+                </label>
+
                 <details class="first-details">
                     <summary>Options</summary>
 

js/remoteState.js

@@ -6,6 +6,7 @@ document.addEventListener("alpine:init", () => {
     lastPlayerSwitch: null,
     connected: false,
     isMyTurn: false,
+    skipMe: false,
 
     _client: null,
     _currentPlayerTopic: null,
@@ -29,9 +30,13 @@ document.addEventListener("alpine:init", () => {
       });
 
       Alpine.effect(() => {
-        if (this.currentPlayer == Alpine.store("localState").id) {
+        const myTurn = this.currentPlayer == Alpine.store("localState").id
+        if (myTurn && !this.skipMe) {
           this.isMyTurn = true;
           Alpine.store("audio").playDing();
+        } 
+        else if(myTurn && this.skipMe) {
+          this.giveTurnToNextPlayer()
         } else {
           this.isMyTurn = false;
         }