Chore: format

index.css

@@ -38,12 +38,24 @@
   border-top: var(--border-width) solid var(--accordion-border-color);
 }
 
-:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.invalid, input[type="reset"].outline {
+:is(
+    button,
+    input[type="submit"],
+    input[type="button"],
+    [role="button"]
+  ).outline.invalid,
+input[type="reset"].outline {
   --color: var(--form-element-invalid-border-color);
   --background-color: transparent;
 }
 
-:is(button, input[type="submit"], input[type="button"], [role="button"]).invalid, input[type="reset"] {
+:is(
+    button,
+    input[type="submit"],
+    input[type="button"],
+    [role="button"]
+  ).invalid,
+input[type="reset"] {
   --background-color: var(--form-element-invalid-border-color);
   --border-color: var(--form-element-invalid-border-color);
   cursor: pointer;

index.html

@@ -37,8 +37,7 @@
                 </button>
 
                 <label for="skip_switch" class="mb">
-                    <input x-model="$store.remoteState.skipMe"
+                    <input x-model="$store.remoteState.skipMe" type="checkbox" id="skip_switch" role="switch" />
-                        type="checkbox" id="skip_switch" role="switch" />
                     Skip me
                 </label>
 

js/remoteState.js

@@ -30,13 +30,12 @@ document.addEventListener("alpine:init", () => {
       });
 
       Alpine.effect(() => {
-        const myTurn = 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) {
-        else if(myTurn && this.skipMe) {
+          this.giveTurnToNextPlayer();
-          this.giveTurnToNextPlayer()
         } else {
           this.isMyTurn = false;
         }