After win, display time to completion (fix #92)

jcreedcmu · Nov 24, 2023 · 4fc6899 · 4fc6899
1 parent 94b2d09
commit 4fc6899
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/core/state-helpers.ts b/src/core/state-helpers.ts
@@ -126,8 +126,9 @@ export function checkValid(state: CoreState): CoreState {
 
   let panic = state.panic;
   if (allValid) panic = undefined;
+  const currentTime_in_game = now_in_game(state.game_from_clock);
   if (!allValid && panic === undefined && shouldStartPanicBar(state.winState)) {
-    const currentTime_in_game = now_in_game(state.game_from_clock);
+
     const debug_offset = DEBUG.skipAheadPanic ? PANIC_INTERVAL_MS - 10000 : 0;
     panic = { currentTime_in_game, lastClear_in_game: currentTime_in_game - debug_offset };
   }
@@ -136,7 +137,7 @@ export function checkValid(state: CoreState): CoreState {
   let animations = state.animations;
 
   if (state.score >= WIN_SCORE && canWinFromState(state.winState)) {
-    winState = { t: 'won' };
+    winState = { t: 'won', winTime_in_game: currentTime_in_game };
     animations = [...animations, mkWinAnimation(state.game_from_clock)];
   }
 

diff --git a/src/core/winState.ts b/src/core/winState.ts
@@ -1,7 +1,7 @@
 export const WIN_SCORE = 1000;
 
 export type WinState =
-  | { t: 'won' }
+  | { t: 'won', winTime_in_game: number }
   | { t: 'lost' }
   | { t: 'playing' }
   | { t: 'creative' }

diff --git a/src/ui/drawAnimation.ts b/src/ui/drawAnimation.ts
@@ -1,5 +1,4 @@
 import { Animation } from '../core/animations';
-import { doOnce } from '../util/debug';
 import { fillText, pathCircle, strokeText } from '../util/dutil';
 import { SE2 } from '../util/se2';
 import { apply_to_rect } from "../util/se2-extra";
@@ -45,8 +44,9 @@ export function drawAnimation(d: CanvasRenderingContext2D, pan_canvas_from_world
           d.fill();
         }
       });
-      strokeText(d, 'You win!', midpointOfRect(canvas_bds_in_canvas), 'white', 4, '96px sans-serif');
-      fillText(d, 'You win!', midpointOfRect(canvas_bds_in_canvas), 'rgb(0,128,0)', '96px sans-serif');
+      const mp = midpointOfRect(canvas_bds_in_canvas);
+      strokeText(d, 'You win!', mp, 'white', 4, '96px sans-serif');
+      fillText(d, 'You win!', mp, 'rgb(0,128,0)', '96px sans-serif');
       return;
     } break;
   }

diff --git a/src/ui/render.ts b/src/ui/render.ts
@@ -95,6 +95,16 @@ function drawToolbar(d: CanvasRenderingContext2D, state: CoreState): void {
   });
 }
 
+function formatTime(x: number) {
+  var date = new Date(0);
+  date.setMilliseconds(x);
+  let rv = date.toISOString().substr(11, 8);
+  rv = rv.replace(/^0/, '');
+  rv = rv.replace(/^0:/, '');
+  rv = rv.replace(/^0/, '');
+  return rv;
+}
+
 export function rawPaint(ci: CanvasInfo, state: GameState) {
   const cs = state.coreState;
 
@@ -366,17 +376,24 @@ export function rawPaint(ci: CanvasInfo, state: GameState) {
   drawShadows();
   drawHand();
   drawShuffleButton();
-  if (cs.winState.t != 'lost') {
+  const mp = midpointOfRect(canvas_bds_in_canvas);
+  if (cs.winState.t == 'lost') {
+    d.textAlign = 'center';
+    d.textBaseline = 'middle';
+    fillText(d, 'You lost :(', mp, 'rgba(0,0,0,0.3)', '96px sans-serif');
+  }
+  else {
     drawOtherUi();
     drawAnimations(now_in_game(cs.game_from_clock));
   }
-  else {
+  if (cs.winState.t == 'won') {
     d.textAlign = 'center';
     d.textBaseline = 'middle';
-    fillText(d, 'You lost :(', midpointOfRect(canvas_bds_in_canvas), 'rgba(0,0,0,0.3)', '96px sans-serif');
+    fillText(d, `Time: ${formatTime(cs.winState.winTime_in_game)}`, { x: mp.x, y: canvas_bds_in_canvas.sz.y - 12 }, 'black', 'bold 24px sans-serif');
   }
 }
 
+
 export class RenderPane {
   d: CanvasRenderingContext2D;
   constructor(public c: HTMLCanvasElement) {