rgbabaev · rgbabaev · May 24, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap"
+    />
+    <title>Minesweeper</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,28 +1,30 @@
 {
   "name": "minesweeper-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Classic Minesweeper game",
   "keywords": [
     "react",
     "starter"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@tarantool.io/ui-kit": "0.16.0",
-    "b_": "1.3.4",
-    "ramda": "0.27.0",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-scripts": "3.0.1"
+    "@blueprintjs/core": "^5.10.3",
+    "b_": "^1.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "typescript": "3.8.3"
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^5.2.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test": "node --test"
+  },
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
   },
   "browserslist": [
     ">0.2%",

diff --git a/public/index.html b/public/index.html
diff --git a/src/App/index.js → src/App/index.jsx b/src/App/index.js → src/App/index.jsx
@@ -1,27 +1,23 @@
-import React from "react";
-import { Arena } from "../Arena";
-import { FooterPanel } from "../FooterPanel";
-import { Hat } from "../Hat";
-import { Minesweeper } from "../core";
-import { Options } from "../Options";
-import {
-  ZOOM_MIN,
-  ZOOM_MAX,
-  ZOOM_DEFAULT
-} from '../constants';
-import "./styles.css";
+import React from 'react';
+import { Arena } from '../Arena';
+import { FooterPanel } from '../FooterPanel';
+import { Hat } from '../Hat';
+import { Minesweeper } from '../core';
+import { Options } from '../Options';
+import { ZOOM_MIN, ZOOM_MAX, ZOOM_DEFAULT } from '../constants';
+import './styles.css';
 
 function preventZoom(event) {
   event = event.originalEvent || event;
-  if(event.scale !== undefined && event.scale !== 1) event.preventDefault();
+  if (event.scale !== undefined && event.scale !== 1) event.preventDefault();
 }
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       showOptions: false,
-      zoom: 1
+      zoom: 1,
     };
 
     this.game = new Minesweeper(null, null, this.forceUpdate.bind(this));
@@ -40,13 +36,12 @@ export default class App extends React.Component {
   toggleOptions = () =>
     this.setState(({ showOptions }) => ({ showOptions: !showOptions }));
 
-  handleZoomChange = zoom => zoom && zoom > 0 && this.setState({
-    zoom: zoom > ZOOM_MAX
-      ? ZOOM_MAX
-      : zoom < ZOOM_MIN
-        ? ZOOM_MIN
-        : zoom
-  });
+  handleZoomChange = (zoom) =>
+    zoom &&
+    zoom > 0 &&
+    this.setState({
+      zoom: zoom > ZOOM_MAX ? ZOOM_MAX : zoom < ZOOM_MIN ? ZOOM_MIN : zoom,
+    });
 
   newGame = (arena, mines) => this.game.configure(arena, mines);
 
@@ -58,12 +53,12 @@ export default class App extends React.Component {
       minesCountTotal,
       arena,
       flagged,
-      timerValue
+      timerValue,
     } = this.game.getStats();
     const { showOptions, zoom } = this.state;
 
     return (
-      <div className="App">
+      <div className='App'>
         <Hat
           gameState={gameState}
           timerValue={timerValue}
@@ -86,14 +81,13 @@ export default class App extends React.Component {
           onFlaggingSwitch={this.game.toggleFlaggingMode}
           onZoomChange={this.handleZoomChange}
         />
-        {showOptions && (
-          <Options
-            onApply={this.newGame}
-            onClose={this.toggleOptions}
-            arena={arena}
-            mines={minesCountTotal}
-          />
-        )}
+        <Options
+          onApply={this.newGame}
+          onClose={this.toggleOptions}
+          isOpen={showOptions}
+          arena={arena}
+          mines={minesCountTotal}
+        />
       </div>
     );
   }

diff --git a/src/Arena/index.js → src/Arena/index.jsx b/src/Arena/index.js → src/Arena/index.jsx
diff --git a/src/Arena/styles.css b/src/Arena/styles.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-grow: 1;
   width: 100%;
+  box-sizing: content-box;
   overflow: auto;
   outline: none;
   user-select: none;

diff --git a/src/ArenaCell/index.js → src/ArenaCell/index.jsx b/src/ArenaCell/index.js → src/ArenaCell/index.jsx
diff --git a/src/FooterPanel/index.js b/src/FooterPanel/index.js
diff --git a/src/FooterPanel/index.jsx b/src/FooterPanel/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, ControlGroup, Switch } from '@blueprintjs/core';
+import b_ from 'b_';
+import { ZOOM_STEP } from '../constants';
+import './styles.css';
+
+const b = b_.lock('FooterPanel');
+
+export const FooterPanel = ({
+  flaggingMode,
+  zoom,
+  onFlaggingSwitch,
+  onZoomChange,
+}) => (
+  <ControlGroup>
+    <Button text='+' size='xs' onClick={() => onZoomChange(zoom + ZOOM_STEP)} />
+    <Button text='-' size='xs' onClick={() => onZoomChange(zoom - ZOOM_STEP)} />
+    <Switch onChange={onFlaggingSwitch} title='Flag' checked={flaggingMode}>
+      Flag
+    </Switch>
+  </ControlGroup>
+);
diff --git a/src/FooterPanel/styles.css b/src/FooterPanel/styles.css
@@ -1,9 +1,4 @@
 .FooterPanel {
-  flex-shrink: 0;
-  margin: 6px;
-  user-select: none;
+  /* flex-shrink: 0; */
+  /* user-select: none; */
 }
-
-.FooterPanel__zoomButton {
-  width: 35px;
-}
diff --git a/src/Hat/index.js b/src/Hat/index.js
diff --git a/src/Hat/index.jsx b/src/Hat/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, ControlGroup, Text } from '@blueprintjs/core';
+import b_ from 'b_';
+import './styles.css';
+
+const b = b_.lock('Hat');
+
+export const Hat = ({
+  gameState,
+  minesLeftCount,
+  timerValue,
+  onOptionsClick,
+  onResetClick,
+}) => (
+  <ControlGroup className={b()} thin>
+    <Text key='c' className={b('output')} title='Mines counter'>
+      💣{minesLeftCount}
+    </Text>
+    <Text key='t' className={b('output')} title='Timer'>
+      ⏱{timerValue === null ? 0 : Math.round(timerValue / 1000)}
+    </Text>
+    <Button
+      key='n'
+      onClick={onResetClick}
+      title='New game (Space)'
+      intent={gameState === 'playing' ? 'secondary' : 'primary'}
+    >
+      {gameState === 'playing' ? '🙂' : gameState === 'won' ? '😎' : '😵'}
+      New game
+    </Button>
+    <Button key='o' onClick={onOptionsClick} title='Options'>
+      Options
+    </Button>
+  </ControlGroup>
+);