+100 text asset

packages/frontend/src/game/HUD/HUD.tsx

@@ -5,6 +5,7 @@ import { CannotRise } from "./components/warnings/CannotRise";
 import { Crosshairs } from "./components/crosshairs/Crosshairs";
 import { GameScore } from "./components/gameScore/GameScore";
 import { Respawn } from "./components/respawn/Respawn";
+import { ScoreDisplay } from "./components/scoreDisplay/ScoreDisplay";
 import { useLoop } from "./hooks/useLoop";
 import type { GamePlayerState } from "../utils/geckos/geckos";
 import type { GameStateRef } from "../World";
@@ -34,6 +35,7 @@ export const HUD: React.FC<HUDProps> = (props) => {
             <Crosshairs {...props} />
             <CannotRise {...props} />
             <Respawn {...props} isAlive={isAlive} />
+            {isAlive && <ScoreDisplay scoreToIncrease={100} />}
         </div>
     );
 };

packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.module.scss

@@ -0,0 +1,25 @@
+@import "../../../../Variables.scss";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    transform: translate(-50%, -50%);
+    left: 52%;
+    top: 48%;
+    position: absolute;
+    margin: 0;
+    gap: 0;
+}
+
+.score {
+    font-size: 28px;
+    text-shadow: $standard-text-shadow;
+    color: white;
+}
+
+.message {
+    display: flex;
+    justify-content: flex-end;
+    color: white;
+    text-shadow: $standard-text-shadow;
+}

packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./ScoreDisplay.module.scss";
+import { useLoop } from "../../hooks/useLoop";
+
+interface ScoreDisplayProps {
+    message?: string;
+    scoreToIncrease: number; // ? Prob remove this
+}
+
+export const ScoreDisplay: React.FC<ScoreDisplayProps> = ({ message, scoreToIncrease }) => {
+    return (
+        <div className={styles.container}>
+            <span className={styles.score}>+100</span>
+            <span className={styles.message}>{message}</span>
+        </div>
+    );
+};