From c98a07695233d6f3f1e829ed6b6258eb0561e31e Mon Sep 17 00:00:00 2001 From: quentin Date: Tue, 4 Mar 2025 18:16:21 +0100 Subject: [PATCH] Footer is now an Object to respect React logic. Adapted game board to diminish with screen reducing --- index.html | 24 ----------- src/App.css | 6 ++- src/App.tsx | 3 ++ src/index.css | 75 ++-------------------------------- src/objects/Footer/Footer.css | 77 +++++++++++++++++++++++++++++++++++ src/objects/Footer/Footer.tsx | 39 ++++++++++++++++++ src/objects/Game/Game.css | 8 ++++ 7 files changed, 136 insertions(+), 96 deletions(-) create mode 100644 src/objects/Footer/Footer.css create mode 100644 src/objects/Footer/Footer.tsx diff --git a/index.html b/index.html index 9dd88bc..1c68208 100644 --- a/index.html +++ b/index.html @@ -9,29 +9,5 @@
- diff --git a/src/App.css b/src/App.css index eaa8e05..daa15cf 100644 --- a/src/App.css +++ b/src/App.css @@ -1,12 +1,15 @@ #root { width: 100%; + height: 100%; margin: 0 0; - padding: 2rem; + padding: 0; text-align: center; display: flex; flex-direction: column; align-content: center; justify-content: center; + overflow-x: hidden; + overflow-y: scroll; } #play-button { @@ -20,6 +23,7 @@ flex-direction: column; align-items: center; justify-content: center; + margin-top: 10rem; } .card { diff --git a/src/App.tsx b/src/App.tsx index 9aa6e6e..7b247a8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import './App.css' import Game from "./objects/Game/Game.tsx"; import { useState } from "react"; import { colors } from "./objects/Color.ts"; +import Footer from "./objects/Footer/Footer.tsx"; // From MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) function getRandomInt(min: number, max: number) { @@ -37,6 +38,7 @@ function App() {

Mastermind

+