add timer animation

internal/handlers/moveHandler.go

@@ -68,15 +68,16 @@ func HandleMove(message []byte, conn *websocket.Conn) error {
 			}
 
 			message := "next round in 3s"
-			if err := senders.SendMessage(conn, message); err != nil {
+			timer := "3s"
+			if err := senders.SendMessage(conn, message, &timer); err != nil {
 				log.Println("Error sending message to player:", err)
 			}
 
 			opponent, err := services.GetOpponent(player.Name)
 			if err != nil {
 				log.Println("Failed getting opponent:", err)
 			} else {
-				if err := senders.SendMessage(opponent.Conn, message); err != nil {
+				if err := senders.SendMessage(opponent.Conn, message, &timer); err != nil {
 					log.Println("Error sending message to opponent:", err)
 				}
 			}
@@ -138,6 +139,15 @@ func HandleMove(message []byte, conn *websocket.Conn) error {
 					log.Println("Failed to send player score:", err)
 				}
 
+				message = "Please make a move"
+				if err := senders.SendMessage(conn, message, nil); err != nil {
+					log.Println("Error sending message to player:", err)
+				}
+
+				if err := senders.SendMessage(opponent.Conn, message, nil); err != nil {
+					log.Println("Error sending message to opponent:", err)
+				}
+
 				finished, err := services.IsGameFinish()
 				if err != nil {
 					log.Println("Failed to check if game has finsihed", err)
@@ -163,15 +173,15 @@ func HandleMove(message []byte, conn *websocket.Conn) error {
 		messagePlayer := "Waiting for your opponent to make a move"
 		messageOpponent := fmt.Sprintf("%s is waiting on you, please select a move", player.Name)
 
-		if err := senders.SendMessage(conn, messagePlayer); err != nil {
+		if err := senders.SendMessage(conn, messagePlayer, nil); err != nil {
 			log.Println("Error sending message to player:", err)
 		}
 
 		opponent, err := services.GetOpponent(player.Name)
 		if err != nil {
 			log.Println("Failed getting opponent:", err)
 		} else {
-			if err := senders.SendMessage(opponent.Conn, messageOpponent); err != nil {
+			if err := senders.SendMessage(opponent.Conn, messageOpponent, nil); err != nil {
 				log.Println("Error sending message to opponent:", err)
 			}
 		}

internal/senders/messsage.go

@@ -9,10 +9,11 @@ import (
 	"github.com/gorilla/websocket"
 )
 
-func SendMessage(conn *websocket.Conn, message string) error {
+func SendMessage(conn *websocket.Conn, message string, timer *string) error {
 
 	messenger := templatedata.Messenger{
 		Message: message,
+		Timer:   timer,
 	}
 
 	var tplBuffer bytes.Buffer

internal/types/template-data/messenger.go

@@ -2,4 +2,5 @@ package templatedata
 
 type Messenger struct {
 	Message string
+	Timer   *string
 }

static/styles/input.css

@@ -27,4 +27,19 @@
 
 .border-primary{
     border-color: var(--primary-color);
+}
+
+.empty-3s{
+  animation: 3s ease-out 0s empty;
+  animation-fill-mode: forwards;
+}
+
+.empty-5s{
+  animation: 5s ease-out 0s empty;
+  animation-fill-mode: forwards;
+}
+
+@keyframes empty {
+  from { width: 100%; }
+  to   { width: 0%; }
 }

template/messenger.html.tmpl

@@ -1,7 +1,14 @@
 {{ define "messenger" }}
-    <div id="console" class="flex items-center h-16 w-full justify-center">
+    <div id="console" class="flex items-center h-16 w-full justify-center flex-col">
     {{ if .Message }}
       <p>{{.Message}}</p>
       {{ end }}
+
+      {{ if .Timer}}
+      <div class="rounded-full bg-slate-400 w-[28rem] h-[1rem] flex justify-center">
+         <div class="rounded-full bg-orange-400 empty-3s w-full h-full">
+         </div>
+      </div>
+      {{ end}}
    </div>
 {{ end }}