Merge pull request #12 from ger-benjamin/add-colors

Add colors

Author: ger-benjamin

package-lock.json

@@ -30,5 +30,9 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.0",
     "vitest": "^2.1.8"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "node-emoji": "^2.2.0"
   }
 }

package.json

@@ -37,3 +37,13 @@ export enum GameMode {
 export const validPositiveAnswers = ["yes", "y", "1", "true", "t"];
 /** Valid negative answers to yes or no questions. */
 export const validNegativeAnswers = ["no", "n", "0", "false", "f"];
+
+/**
+ * Available (background) colors for texts.
+ */
+export enum Colors {
+  Red = "Red",
+  Blue = "Blue",
+  Green = "Green",
+  White = "White",
+}

src/enums.ts

@@ -1,9 +1,10 @@
 import type { Item, Side, SourceJson } from "./source-json.js";
 import type { Answer } from "./game-state-types.js";
 import { EventValue } from "./event.js";
-import { GameMode } from "./enums.js";
 import {
+  Colors,
   CorrectionStrategies,
+  GameMode,
   GameStateScene,
   HintStrategies,
   SelectionStrategies,
@@ -22,6 +23,7 @@ class GameState {
   private answers: Answer[] = [];
   private sourcePath: URL | null = null;
   private sourceJson: SourceJson | null = null;
+  private cardColor: Colors = Colors.Blue;
   private gameMode: GameMode | null = null;
   private cardsLimit: number | null = null;
   private time: number | null = null;
@@ -55,6 +57,14 @@ class GameState {
     this.activeScene.setValue(value);
   }
 
+  getCardColor(): Colors {
+    return this.cardColor;
+  }
+
+  setCardColor(color: Colors) {
+    this.cardColor = color;
+  }
+
   getGameMode(): GameMode | null {
     return this.gameMode;
   }

src/game-state.ts

@@ -7,7 +7,9 @@ import { CorrectionStrategy } from "../correction-strategy.js";
 import { drawCard } from "./draw-card.js";
 import { getCardWidth } from "./card-utils.js";
 import { SelectionStrategy } from "../selection-strategy.js";
-import { GameStateScene } from "../enums.js";
+import { Colors, GameStateScene } from "../enums.js";
+import { colorize } from "./colorize-card.js";
+import { emojify } from "node-emoji";
 
 /**
  * A UI for cards questions.
@@ -68,7 +70,7 @@ export class CardScene extends Scene {
     const question = getOneSideText(gs.getSideA(item));
     const hintText = hint ? `(${this.hintStrategy.getHint(item)})` : "";
     const card = drawCard([question, hintText], getCardWidth(this.tWidth));
-    this.setContent("card", card);
+    this.setContent("card", colorize(card));
   }
 
   /**
@@ -121,12 +123,12 @@ export class CardScene extends Scene {
     const isCorrect = this.correctionStrategy.isCorrect(this.item, answer);
     this.handleAnswer(displayedQuestion, answer, isCorrect);
     if (!isCorrect) {
-      this.setContent("info", `WRONG !`);
+      gs.setCardColor(Colors.Red);
       gs.setLivesRemaining((gs.getLivesRemaining() ?? 1) - 1);
+      this.showQuestion(this.item, this.hint);
       this.checkEnd(this.item);
       return;
     }
-    this.setContent("info", `Correct :-)`);
     this.nextQuestion();
   }
 
@@ -162,6 +164,7 @@ export class CardScene extends Scene {
    * @private
    */
   private nextQuestion() {
+    gs.setCardColor(Colors.Blue);
     gs.setQuestionIndex(gs.getQuestionIndex() + 1);
     const item = this.selectItem();
     if (this.checkEnd(item)) {
@@ -190,6 +193,7 @@ export class CardScene extends Scene {
     }
     const cardLimit = gs.getCardsLimit();
     if (!item || !cardLimit || gs.getQuestionIndex() >= cardLimit) {
+      gs.setCardColor(Colors.Blue);
       this.exit(GameStateScene.RESULTS);
       return true;
     }
@@ -229,6 +233,11 @@ export class CardScene extends Scene {
     this.updateBanner();
   }
 
+  /**
+   * Generate and print a "game-settings" banner, to let the user know
+   * the current settings and some game states.
+   * @private
+   */
   private updateBanner() {
     const gameMode = gs.getGameMode();
     const selectionStrategy = gs.getSelectionStrategy();
@@ -241,19 +250,19 @@ export class CardScene extends Scene {
     const lives = gs.getLivesRemaining();
     const hints = gs.getHintRemaining();
     const time = gs.getTime();
-    let questionCounter = `Q:${questionIndex + 1}`;
+    let questionCounter = emojify(`:books::${questionIndex + 1}`);
     if (cardLimit !== Infinity) {
       questionCounter = `${questionCounter}/${cardLimit}`;
     }
     gameInfos.push(questionCounter);
     if (lives !== Infinity) {
-      gameInfos.push(`L:${lives}`);
+      gameInfos.push(emojify(`:heart: :${lives}`));
     }
     if (hints !== Infinity) {
-      gameInfos.push(`H:${hints}`);
+      gameInfos.push(emojify(`:bulb::${hints}`));
     }
     if (time !== Infinity) {
-      gameInfos.push(`T:${time}`);
+      gameInfos.push(emojify(`:hourglass_flowing_sand::${time}`));
     }
     this.setContent("mode", mode, true);
     this.setContent("game", gameInfos.join(" - "), false);

src/scenes/card.ts

@@ -0,0 +1,40 @@
+import gs from "../game-state.js";
+import { Colors } from "../enums.js";
+import chalk from "chalk";
+
+/**
+ * Use Chalk to colorize the text with the given (background) color.
+ * If no color is provided, take the CardColor in the game-state.
+ * BrightParam is to use the "bright" color variation.
+ * @returns The colorized text or the text as is.
+ */
+export const colorize = (
+  text: string,
+  colorParam?: Colors,
+  brightParam?: boolean,
+): string => {
+  const color = colorParam ?? gs.getCardColor();
+  const bright = brightParam ?? gs.getQuestionIsFront() !== false;
+  if (color === Colors.Blue) {
+    if (bright) {
+      return chalk.bgBlueBright.black(text);
+    }
+    return chalk.bgBlue(text);
+  }
+  if (color === Colors.Red) {
+    if (bright) {
+      return chalk.bgRedBright.black(text);
+    }
+    return chalk.bgRed(text);
+  }
+  if (color === Colors.Green) {
+    if (bright) {
+      return chalk.bgGreenBright.black(text);
+    }
+    return chalk.bgGreen(text);
+  }
+  if (bright) {
+    return chalk.bgWhite.black(text);
+  }
+  return text;
+};

src/scenes/colorize-card.ts

@@ -3,6 +3,8 @@ import gs from "../game-state.js";
 import { drawCard } from "./draw-card.js";
 import { getCardWidth } from "./card-utils.js";
 import { GameStateScene } from "../enums.js";
+import { colorize } from "./colorize-card.js";
+import { emojify } from "node-emoji";
 
 /**
  * A nice exit screen to the user.
@@ -11,8 +13,8 @@ export class ExitScene extends Scene {
   constructor() {
     super();
     this.canWrite = false;
-    const card = drawCard(["Bye o/"], getCardWidth(this.tWidth));
-    this.content.set("all", card);
+    const card = drawCard([emojify("Bye :wave:")], getCardWidth(this.tWidth));
+    this.content.set("all", colorize(card, undefined, false));
   }
 
   override start() {

src/scenes/exit.ts

@@ -6,11 +6,13 @@ import { getSideTexts } from "../utils.js";
 import { drawCard } from "./draw-card.js";
 import { getCardWidth } from "./card-utils.js";
 import {
+  Colors,
   GameStateScene,
   validNegativeAnswers,
   validPositiveAnswers,
 } from "../enums.js";
 import { fromAnyItemToItem } from "../json-to-source.js";
+import { colorize } from "./colorize-card.js";
 
 /**
  * A UI for results.
@@ -159,7 +161,7 @@ Results:
       getCardWidth(this.tWidth),
     );
     this.setContent("head", "", false);
-    this.setContent("title", card);
+    this.setContent("title", colorize(card, undefined, false));
     return false;
   }
 
@@ -172,7 +174,7 @@ Results:
       ["Ok, the results are left unsaved."],
       getCardWidth(this.tWidth),
     );
-    this.setContent("title", card);
+    this.setContent("title", colorize(card, undefined, false));
   }
 
   /**
@@ -206,7 +208,7 @@ Results:
       return;
     }
     const card = drawCard(["Results saved!"], getCardWidth(this.tWidth));
-    this.setContent("title", card);
+    this.setContent("title", colorize(card, Colors.Green, false));
   }
 
   /**