add counter and timer

generate-table.ts

@@ -5,9 +5,9 @@ const baseUrl = 'https://t1ckbase-minesweeper.hf.space';
 const html = '<table id="toc">\n' +
   '  <tr>\n' +
   '    <td align="center">\n' +
-  `      <img src="${baseUrl}/mines/count" height="48px" />\n` +
+  `      <img src="${baseUrl}/mines/count" height="48px" align="left" />\n` +
   `      <a href="${baseUrl}/game/reset"><img src="${baseUrl}/game/status" width="48px" height="48px" /></a>\n` +
-  `      <img src="${baseUrl}/mines/count" height="48px" />\n` +
+  `      <img src="${baseUrl}/timer" height="48px" align="right" />\n` +
   '    </td>\n' +
   '  </tr>\n' +
   Array.from({ length: rows }, (_, r) =>

main.ts

@@ -1,6 +1,5 @@
 import { Hono } from 'hono';
 // import { logger } from 'hono/logger';
-import { serveStatic } from 'hono/deno';
 import { Minesweeper } from './minesweeper.ts';
 import { isGithubUserPath } from './utils.ts';
 
@@ -8,7 +7,8 @@ import { isGithubUserPath } from './utils.ts';
 
 const USER = 'T1ckbase';
 
-const minesweeper = new Minesweeper(8, 8, 10, './images');
+const MINE_COUNT = 10;
+const minesweeper = new Minesweeper(8, 8, MINE_COUNT, './images');
 
 const app = new Hono();
 
@@ -23,8 +23,6 @@ if (Deno.env.get('DENO_ENV') === 'development') {
   app.get('/board', (c) => c.text(minesweeper.getBoard().map((row) => row.map((cell) => cell.isMine ? 'b' : cell.adjacentMines).join('')).join('\n')));
 }
 
-app.use('/mines/count', serveStatic({ path: './images/counter.svg' }));
-
 app.get('/cell/:row/:col/image', (c) => {
   const row = Number(c.req.param('row'));
   const col = Number(c.req.param('col'));
@@ -95,6 +93,22 @@ app.get('/game/reset', (c) => {
   return c.redirect(redirectUrl + '#minesweeper');
 });
 
+app.get('/mines/count', (c) => {
+  const image = minesweeper.getCounterImage(MINE_COUNT);
+  if (!image) return c.text('Counter image is not available.', 404);
+  c.header('Content-Type', 'image/svg+xml');
+  c.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
+  return c.body(image);
+});
+
+app.get('/timer', (c) => {
+  const image = minesweeper.getTimerImage();
+  if (!image) return c.text('Timer image is not available.', 404);
+  c.header('Content-Type', 'image/svg+xml');
+  c.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
+  return c.body(image);
+});
+
 Deno.serve(app.fetch);
 
 Deno.cron('keep alive', '0 0 * * *', async () => { // keep alive?

minesweeper.ts

@@ -23,7 +23,9 @@ export type ImageKey =
   | 'mine_hit' // mine-red.svg (for the mine that was clicked and caused loss)
   | 'status_playing' // emoji-smile.svg
   | 'status_won' // emoji-sunglasses.svg
-  | 'status_lost'; // emoji-dead.svg
+  | 'status_lost' // emoji-dead.svg
+  | 'counter' // counter.svg
+  | 'timer'; // timer.svg
 
 export class Minesweeper {
   // deno-fmt-ignore
@@ -49,6 +51,9 @@ export class Minesweeper {
   private imageCache: Map<ImageKey, Uint8Array>;
   private imageDirectory: string;
 
+  private decoder = new TextDecoder('utf-8');
+  private encoder = new TextEncoder();
+
   constructor(rows: number, cols: number, mineCount: number, imageDirectory: string = './image') {
     // Validate input parameters
     if (rows <= 0 || cols <= 0) throw new Error('Board dimensions (rows, cols) must be positive integers.');
@@ -94,6 +99,8 @@ export class Minesweeper {
       status_playing: 'emoji-surprise-smile.svg',
       status_won: 'emoji-sunglasses.svg',
       status_lost: 'emoji-dead.svg',
+      counter: 'counter.svg',
+      timer: 'timer.svg',
     };
   }
 
@@ -110,7 +117,7 @@ export class Minesweeper {
         const filePath = path.join(this.imageDirectory, fileName); // Use path.join for cross-platform compatibility
         try {
           const fileBuffer = Deno.readFileSync(filePath);
-          this.imageCache.set(typedKey, new Uint8Array(fileBuffer)); // Deno.readFileSync returns a Buffer, which is a Uint8Array
+          this.imageCache.set(typedKey, fileBuffer); // Deno.readFileSync returns a Buffer, which is a Uint8Array
           // console.log(`Loaded image: ${filePath} for key: ${typedKey}`);
         } catch (error) {
           console.error(`Failed to load image ${filePath} for key ${typedKey}:`, error);
@@ -374,4 +381,22 @@ export class Minesweeper {
         return this.imageCache.get('status_playing'); // Fallback
     }
   }
+
+  public getCounterImage(count: number): Uint8Array | undefined {
+    const image = this.imageCache.get('counter');
+    if (!image) return;
+    const decodedImage = this.decoder.decode(image);
+    const newImage = decodedImage.replace('--count: 0;', `--count: ${count};`);
+    return this.encoder.encode(newImage);
+  }
+
+  public getTimerImage(): Uint8Array | undefined {
+    const seconds = Math.floor(((this.gameState === 'playing' ? Date.now() : +this.endTime!) - +this.startTime) / 1000);
+    if (this.gameState !== 'playing') return this.getCounterImage(seconds);
+    const image = this.imageCache.get('timer');
+    if (!image) return;
+    const decodedImage = this.decoder.decode(image);
+    const newImage = decodedImage.replace('animation: timer 1000s linear infinite;', `animation: timer 1000s linear infinite -${seconds}s;`);
+    return this.encoder.encode(newImage);
+  }
 }