diff --git a/src/App.tsx b/src/App.tsx index 6eaa471..6308d82 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,6 +21,7 @@ import Help from './components/Help/Help'; import Logo from './assets/logo'; import './App.scss'; import Question from './assets/question'; +import Home from './components/Home/Home'; // --------------------------------------------------------------------------------------------------------------------- const App = () => { @@ -28,7 +29,7 @@ const App = () => { return (
- + {/*
@@ -49,7 +50,10 @@ const App = () => { displayHelp(false); }} /> - )} + )} */} +
+ +
); }; diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx new file mode 100644 index 0000000..247fae8 --- /dev/null +++ b/src/components/Home/Home.tsx @@ -0,0 +1,30 @@ +import './styles.scss'; + +const Home = () => { + return ( +
+

Démineur

+
+
+

Choisissez la taille de la grille

+ +
+
+

Choisissez votre niveau

+ +
+ +
+
+ ); +}; + +export default Home; diff --git a/src/components/Home/styles.scss b/src/components/Home/styles.scss new file mode 100644 index 0000000..d95c961 --- /dev/null +++ b/src/components/Home/styles.scss @@ -0,0 +1,47 @@ +.gameContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.gameTitle { + font-size: 2rem; + font-weight: bold; +} + +.settingsContainer { + display: grid; + grid-template-rows: repeat(2, 1fr); + margin: 1rem 0 1rem 0; + gap: 10px; +} + +.selectorBox { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.chooseTitle{ + font-size: 1.2rem; +} + +.parameterBox { + font-size: 1rem; + border-radius: 5px; + padding: 2.5px 5px; +} + +.startGameBtn { + margin: 1rem 0 1rem 0; + padding: 0.7rem 1rem; + border-radius: 10px; + font-size: 1.2rem; + font-weight: bold; + background-color: #333; + color: #FFF; + border: #FFF 0.5px solid; + cursor: pointer; +} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 5829c73..58571fc 100644 --- a/src/index.scss +++ b/src/index.scss @@ -5,17 +5,12 @@ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - user-select: none; } #root { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 20px; width: 100svw; height: 100svh; background: #598b8e; overflow: hidden; + color: #fff; }