From a38bf9631f88d8c6260104dd8e449a51c819bc70 Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Sat, 3 Feb 2024 22:29:07 -0600
Subject: [PATCH] add indicator for move timer

For #11.
---
 site/src/App.vue             |  8 ++++++--
 site/src/components/Game.vue | 17 ++++++++++++++++-
 site/src/lib/game.ts         |  5 +++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/site/src/App.vue b/site/src/App.vue
index d025cdb..dd71389 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -67,7 +67,7 @@ const loading = computed(() => status.value === 'CONNECTING' || status.value ===
 
 function clickPlay() {
 	if (local) {
-		data.value = JSON.stringify({
+		game.value = {
 			action: "Start",
 			damage: 1,
 			dealer: false,
@@ -77,9 +77,12 @@ function clickPlay() {
 			],
 			previous: null,
 			round: 1,
+			deadline: Date.now() + 15000,
 			blank: 3,
 			live: 2,
-		});
+		}
+		data.value = JSON.stringify(game.value);
+		dealer.value = false;
 		return;
 	}
 	open();
@@ -89,6 +92,7 @@ function clickPlay() {
 function action(evt: Action) {
 	if (local && game.value != null) {
 		game.value.dealer = !game.value.dealer;
+		game.value.deadline = Date.now() + 15000;
 		return;
 	}
 	if (evt.action === 'quit') {
diff --git a/site/src/components/Game.vue b/site/src/components/Game.vue
index aaff001..77b917a 100644
--- a/site/src/components/Game.vue
+++ b/site/src/components/Game.vue
@@ -2,6 +2,7 @@
     <v-container>
         <v-row class="d-flex justify-center">
             <v-sheet :elevation="2" width="800">
+                <v-progress-linear :model-value="timeLeft" :max="initTimeLeft" :color="moveColor"></v-progress-linear>
                 <v-row class="d-flex justify-center">
                     <v-col cols="auto">
                         <GameStatus :game="props.game" />
@@ -49,7 +50,8 @@
 
 <script setup lang="ts">
 import type { Game, Action } from '@/lib/game';
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useTimestamp } from '@vueuse/core';
 
 export interface Props {
     /**
@@ -76,6 +78,19 @@ const currentTurn = computed(() => props.game.dealer ? 'DEALER' : 'CHALLENGER');
 const dealerTarget = computed(() => props.dealer ? 'YOURSELF' : 'THE DEALER');
 const challTarget = computed(() => props.dealer ? 'THE CHALLENGER' : 'YOURSELF');
 
+const initTimeLeft = ref(15000);
+const timeLeft = ref(15000);
+const timestamp = useTimestamp({
+    callback: (t) => {
+        timeLeft.value = props.game.deadline - t;
+    },
+    interval: 60,
+});
+watch(props.game, (now) => {
+    initTimeLeft.value = now.deadline - timestamp.value;
+});
+const moveColor = computed(() => timeLeft.value > 3000 ? 'primary' : 'red');
+
 function attack(left: boolean) {
     const action = left === props.dealer ? 'self' : 'across';
     emit('action', { action });
diff --git a/site/src/lib/game.ts b/site/src/lib/game.ts
index 9d906c5..34a699d 100644
--- a/site/src/lib/game.ts
+++ b/site/src/lib/game.ts
@@ -30,6 +30,11 @@ export interface Game {
      * Damage that a live round will deal this turn.
      */
     damage: number;
+    /**
+     * Deadline for the current player's next action in milliseconds since the
+     * Unix epoch.
+     */
+    deadline: number;
     /**
      * The current shell if it is revealed for the player receiving this state.
      */