diff --git a/packages/frontend/src/game/HUD/HUD.tsx b/packages/frontend/src/game/HUD/HUD.tsx index 5797ac6..f47dfb1 100644 --- a/packages/frontend/src/game/HUD/HUD.tsx +++ b/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 = (props) => { + {isAlive && } ); }; diff --git a/packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.module.scss b/packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.module.scss new file mode 100644 index 0000000..cc15756 --- /dev/null +++ b/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; +} diff --git a/packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.tsx b/packages/frontend/src/game/HUD/components/scoreDisplay/ScoreDisplay.tsx new file mode 100644 index 0000000..3b48ce8 --- /dev/null +++ b/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 = ({ message, scoreToIncrease }) => { + return ( +
+ +100 + {message} +
+ ); +};