From cc1714d2a6113c6c86d8ca837ec0b467390bcf16 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Thu, 29 Dec 2022 17:59:24 +0100
Subject: [PATCH] Feat: diffrent visuals

---
 index.css  | 12 ++++++++++++
 index.html |  6 +++---
 index.js   | 11 ++++++-----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/index.css b/index.css
index 6e3c5ed..b67b459 100644
--- a/index.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f802e6e..bf77b68 100644
--- a/index.html
+++ b/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()"
diff --git a/index.js b/index.js
index 470b6a2..cd07e11 100644
--- a/index.js
+++ b/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;
                 }
             })