From 92058e63a79b6ac36aec7f056630cf59f5b747d3 Mon Sep 17 00:00:00 2001 From: sigmasternchen Date: Fri, 20 Sep 2024 22:12:31 +0200 Subject: [PATCH] feat: Add new game button --- html/static/styles.css | 10 ++++++++-- src/components/Game.jsx | 5 +++-- src/components/GameResult.jsx | 10 ++++++++++ 3 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/components/GameResult.jsx diff --git a/html/static/styles.css b/html/static/styles.css index f560f8d..90e2007 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -130,13 +130,19 @@ body { transform: translate(-50%, -50%); text-align: center; border-radius: 5px; - font-size: 70px; - padding-top: 100px; pointer-events: none; opacity: 0; transition: opacity 0.5s; } +.result h1 { + font-size: 70px; +} + +.result button { + font-size: 20px; +} + .result.won { background-color: #090; } diff --git a/src/components/Game.jsx b/src/components/Game.jsx index 70a5f79..1b5cf5e 100644 --- a/src/components/Game.jsx +++ b/src/components/Game.jsx @@ -6,6 +6,7 @@ import {CellState, sortCellStates} from "../model/CellState"; import {Field} from "./Field"; import {Keyboard} from "./Keyboard"; import {Toast} from "./Toast"; +import {GameResult} from "./GameResult"; export const Game = ({wordLength, numberOfGuesses, correctWord, availableWords, reset}) => { const [gameState, setGameState] = useState(GameState.Active); @@ -96,7 +97,7 @@ export const Game = ({wordLength, numberOfGuesses, correctWord, availableWords, /> -
You won!
-
You lost!
+ + } \ No newline at end of file diff --git a/src/components/GameResult.jsx b/src/components/GameResult.jsx new file mode 100644 index 0000000..ad33a2a --- /dev/null +++ b/src/components/GameResult.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +export const GameResult = ({show, className, text, reset}) => { + + + return
+

{text}

+ +
+} \ No newline at end of file