From 6d5f4047e28a0e7c936354612e13b62d9068ca83 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Thu, 5 Jan 2023 18:50:55 +0100
Subject: [PATCH] Feat: skip me

---
 index.css         | 4 ++++
 index.html        | 8 +++++++-
 js/remoteState.js | 7 ++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.css b/index.css
index 5f76f16..b603ad3 100644
--- a/index.css
+++ b/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);
diff --git a/index.html b/index.html
index 6e9cd50..b98ff24 100644
--- a/index.html
+++ b/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>
 
diff --git a/js/remoteState.js b/js/remoteState.js
index f8ee322..9f8dd8b 100644
--- a/js/remoteState.js
+++ b/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;
         }