feat: partially solve 3rd stage of the project

Author: sswietoniowski

hyperskill/05_minesweeper/03/.gitkeep

@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+* {
+    box-sizing: border-box;
+}
+
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.App p {
+    font-family: 'Roboto', sans-serif;
+}
+
+.minesweeper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Roboto', sans-serif;
+    margin: 20px;
+    border: none;
+    border-radius: 20px;
+    box-shadow: 0px 0px 20px red;
+    width: 60vmin;
+}
+
+.game-title {
+    font-size: 36px;
+    padding: 10px;
+}
+
+.game-title img {
+    height: 24px;
+}
+
+.control-panel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 20px 20px;
+    width: 100%;
+}
+
+.flags-counter {
+    font-size: 24px;
+}
+
+.reset-button {
+    font-size: 24px;
+    cursor: pointer;
+    background-color: inherit;
+    border: none;
+    border-radius: 25%;
+}
+
+.reset-button:hover {
+    cursor: pointer;
+}
+
+.timer {
+    font-size: 24px;
+}
+
+.field {
+    display: grid;
+    gap: 10px;
+    width: 60vmin;
+    height: 60vmin;
+    padding: 20px;
+}
+
+.cell {
+    width: 48px;
+    height: 48px;
+    justify-self: center;
+    align-self: center;
+    background-color: black;
+    border: black;
+    outline: black;
+}
+
+.is-revealed {
+    background-color: #282c34;
+    border: red;
+    border-radius: 5px;
+    box-shadow: 0px 0px 5px red;
+    outline: red;
+}

hyperskill/05_minesweeper/03/game.png

@@ -0,0 +1,22 @@
+import React from 'react';
+import './App.css';
+import Minesweeper from "./components/Minesweeper";
+import Spinner from "./components/Spinner";
+
+function App() {
+    const isReady = true;
+
+    const rows = 9;
+    const columns = 8;
+    const minesQuantity = 10;
+
+    return (
+        <div className="App">
+            <header className="App-header">
+                {isReady ? <Minesweeper rows={rows} columns={columns} minesQuantity={minesQuantity}/> : <Spinner/>}
+            </header>
+        </div>
+    );
+}
+
+export default App;

hyperskill/05_minesweeper/03/src/App.css

@@ -0,0 +1,26 @@
+import React from "react";
+
+const Cell = ({cell, onCellClick, onCellContext}) => {
+    return (
+        <div
+            className={`cell ${cell.isRevealed ? "is-revealed" : ""}`}
+            onClick={() => onCellClick(cell.x, cell.y)}
+            onContextMenu={(e) => {
+                e.preventDefault();
+                onCellContext(cell.x, cell.y);
+            }}
+        >
+            {cell.isRevealed && !cell.isMine && cell.neighbours === 0
+                ? ""
+                : cell.isRevealed && !cell.isMine
+                    ? cell.neighbours
+                    : cell.isRevealed && cell.isMine
+                        ? "💥"
+                        : cell.isFlagged
+                            ? "🚩"
+                            : ""}
+        </div>
+    );
+}
+
+export default Cell;

hyperskill/05_minesweeper/03/src/App.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+import FlagsCounter from "./FlagsCounter";
+import ResetButton from "./ResetButton";
+import Timer from "./Timer";
+
+const ControlPanel = ({flags, time, onResetGame}) => {
+    return (
+        <div className="control-panel">
+            <FlagsCounter flags={flags}/>
+            <ResetButton onResetGame={onResetGame}/>
+            <Timer time={time}/>
+        </div>
+    );
+}
+
+export default ControlPanel;

hyperskill/05_minesweeper/03/src/bomb.svg

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Row from "./Row";
+
+const Field = ({field, onCellClick, onCellContext}) => {
+    const rows = field.length;
+    const columns = field[0].length;
+
+    return (
+        <div className="field" style={{
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gridTemplateRows: `repeat(${rows}, 1fr)`,
+        }}>
+            {field.map((row, rowIndex) => (
+                <Row
+                    key={rowIndex}
+                    row={row}
+                    onCellClick={onCellClick}
+                    onCellContext={onCellContext}
+                />
+            ))}
+        </div>
+    );
+}
+
+export default Field;

hyperskill/05_minesweeper/03/src/components/Cell.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const FlagsCounter = ({flags}) => {
+    return (
+        <div className="flags-counter"><span role="img" aria-label="flag">🚩</span> {flags}</div>
+    );
+}
+
+export default FlagsCounter;

hyperskill/05_minesweeper/03/src/components/ControlPanel.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+import bomb from "../bomb.svg";
+
+const GameTitle = () => {
+    return (
+        <div className="game-title">
+        <p>Minesweeper <span role="img"><img src={bomb} alt="logo"/></span></p>
+        </div>
+    );
+}
+
+export default GameTitle;