Feat: diffrent visuals

index.css

@@ -5,6 +5,18 @@
     line-height: 1.2;
 }
 
+
+@keyframes blinker {
+    50% {
+      opacity: 0;
+    }
+  }
+
+.timer.my-turn {
+    color: #0f0;
+    animation: blinker 1s linear infinite;
+}
+
 .timer.over {
     color: #f00;
 }

index.html

@@ -16,13 +16,13 @@
         <div x-data>
             <div x-show="$store.localState.joined">
                 <hgroup>
-                    <h1 x-text="'Currently playing: ' + $store.remoteState.players[$store.remoteState.currentPlayer]">
+                    <h1 x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
                     </h1>
-                    <h2 x-text="'I am ' + $store.localState.name"></h2>
+                    <h2 x-text="'You are ' + $store.localState.name"></h2>
                 </hgroup>
 
                 <div x-data="Timer">
-                    <p :class="time < 0 ? 'timer over':'timer'" x-text="time + 's'"></p>
+                    <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')" x-text="time + 's'"></p>
                 </div>
 
                 <button @click="$store.remoteState.giveTurnToNextPlayer()"

index.js

@@ -20,7 +20,7 @@ function Timer() {
         time: 0,
         init() {
           setInterval(() => {
-            this.time = parseInt((30000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
+            this.time = parseInt((90000 - ((new Date()).getTime() - Alpine.store("remoteState").lastPlayerSwitch)) / 1000);
           }, 1000);
         },
     }
@@ -43,9 +43,6 @@ document.addEventListener('alpine:init', () => {
                 }
             })
 
-            Alpine.effect(() => {
-                console.log(this.nextPlayer)
-            })
             this.restore();
         },
 
@@ -82,6 +79,7 @@ document.addEventListener('alpine:init', () => {
         currentPlayer: null,
         lastPlayerSwitch: 0,
         connected: false,
+        isMyTurn: false,
         _client: null,
 
         init() {
@@ -97,7 +95,10 @@ document.addEventListener('alpine:init', () => {
             Alpine.effect(() => {
                 this.lastPlayerSwitch = new Date().getTime();
                 if(this.currentPlayer == Alpine.store("localState").id) {
-                    alert("It's your turn!")
+                    this.isMyTurn = true;
+                }
+                else {
+                    this.isMyTurn = false;
                 }
             })