Skip to content

Commit a966cfc

Browse files
rgbabaevrgbabaev
committed
Replaces obsolete libraries and tools
* vite instead of create-react-app * @blueprintjs instead of @tarantool.io/ui-kit * a lot of related changes in own code
1 parent eac5ba9 commit a966cfc

File tree

20 files changed

+1999
-14152
lines changed

20 files changed

+1999
-14152
lines changed

‎index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
11+
manifest.json provides metadata used when your web app is added to the
12+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13+
-->
14+
<link rel="shortcut icon" href="/favicon.ico" />
15+
<link rel="stylesheet" href="/style.css" />
16+
<link
17+
rel="stylesheet"
18+
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap"
19+
/>
20+
<title>Minesweeper</title>
21+
</head>
22+
23+
<body>
24+
<noscript> You need to enable JavaScript to run this app. </noscript>
25+
<div id="root"></div>
26+
<script type="module" src="/src/index.jsx"></script>
27+
</body>
28+
</html>

‎package-lock.json‎

Lines changed: 1725 additions & 13868 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
{
22
"name": "minesweeper-react",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "Classic Minesweeper game",
55
"keywords": [
66
"react",
77
"starter"
88
],
99
"main": "src/index.js",
1010
"dependencies": {
11-
"@tarantool.io/ui-kit": "0.16.0",
12-
"b_": "1.3.4",
13-
"ramda": "0.27.0",
14-
"react": "16.12.0",
15-
"react-dom": "16.12.0",
16-
"react-scripts": "3.0.1"
11+
"@blueprintjs/core": "^5.10.3",
12+
"b_": "^1.3.4",
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1"
1715
},
1816
"devDependencies": {
19-
"typescript": "3.8.3"
17+
"@vitejs/plugin-react": "^4.3.0",
18+
"vite": "^5.2.11"
2019
},
2120
"scripts": {
22-
"start": "react-scripts start",
23-
"build": "react-scripts build",
24-
"test": "react-scripts test --env=jsdom",
25-
"eject": "react-scripts eject"
21+
"dev": "vite",
22+
"build": "vite build",
23+
"serve": "vite preview",
24+
"test": "node --test"
25+
},
26+
"engines": {
27+
"node": "^18.0.0 || >=20.0.0"
2628
},
2729
"browserslist": [
2830
">0.2%",

‎public/index.html‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

src/App/index.js renamed to src/App/index.jsx

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
1-
import React from "react";
2-
import { Arena } from "../Arena";
3-
import { FooterPanel } from "../FooterPanel";
4-
import { Hat } from "../Hat";
5-
import { Minesweeper } from "../core";
6-
import { Options } from "../Options";
7-
import {
8-
ZOOM_MIN,
9-
ZOOM_MAX,
10-
ZOOM_DEFAULT
11-
} from '../constants';
12-
import "./styles.css";
1+
import React from 'react';
2+
import { Arena } from '../Arena';
3+
import { FooterPanel } from '../FooterPanel';
4+
import { Hat } from '../Hat';
5+
import { Minesweeper } from '../core';
6+
import { Options } from '../Options';
7+
import { ZOOM_MIN, ZOOM_MAX, ZOOM_DEFAULT } from '../constants';
8+
import './styles.css';
139

1410
function preventZoom(event) {
1511
event = event.originalEvent || event;
16-
if(event.scale !== undefined && event.scale !== 1) event.preventDefault();
12+
if (event.scale !== undefined && event.scale !== 1) event.preventDefault();
1713
}
1814

1915
export default class App extends React.Component {
2016
constructor(props) {
2117
super(props);
2218
this.state = {
2319
showOptions: false,
24-
zoom: 1
20+
zoom: 1,
2521
};
2622

2723
this.game = new Minesweeper(null, null, this.forceUpdate.bind(this));
@@ -40,13 +36,12 @@ export default class App extends React.Component {
4036
toggleOptions = () =>
4137
this.setState(({ showOptions }) => ({ showOptions: !showOptions }));
4238

43-
handleZoomChange = zoom => zoom && zoom > 0 && this.setState({
44-
zoom: zoom > ZOOM_MAX
45-
? ZOOM_MAX
46-
: zoom < ZOOM_MIN
47-
? ZOOM_MIN
48-
: zoom
49-
});
39+
handleZoomChange = (zoom) =>
40+
zoom &&
41+
zoom > 0 &&
42+
this.setState({
43+
zoom: zoom > ZOOM_MAX ? ZOOM_MAX : zoom < ZOOM_MIN ? ZOOM_MIN : zoom,
44+
});
5045

5146
newGame = (arena, mines) => this.game.configure(arena, mines);
5247

@@ -58,12 +53,12 @@ export default class App extends React.Component {
5853
minesCountTotal,
5954
arena,
6055
flagged,
61-
timerValue
56+
timerValue,
6257
} = this.game.getStats();
6358
const { showOptions, zoom } = this.state;
6459

6560
return (
66-
<div className="App">
61+
<div className='App'>
6762
<Hat
6863
gameState={gameState}
6964
timerValue={timerValue}
@@ -86,14 +81,13 @@ export default class App extends React.Component {
8681
onFlaggingSwitch={this.game.toggleFlaggingMode}
8782
onZoomChange={this.handleZoomChange}
8883
/>
89-
{showOptions && (
90-
<Options
91-
onApply={this.newGame}
92-
onClose={this.toggleOptions}
93-
arena={arena}
94-
mines={minesCountTotal}
95-
/>
96-
)}
84+
<Options
85+
onApply={this.newGame}
86+
onClose={this.toggleOptions}
87+
isOpen={showOptions}
88+
arena={arena}
89+
mines={minesCountTotal}
90+
/>
9791
</div>
9892
);
9993
}

src/Arena/index.js renamed to src/Arena/index.jsx

File renamed without changes.

‎src/Arena/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
flex-grow: 1;
44
width: 100%;
5+
box-sizing: content-box;
56
overflow: auto;
67
outline: none;
78
user-select: none;

src/ArenaCell/index.js renamed to src/ArenaCell/index.jsx

File renamed without changes.

‎src/FooterPanel/index.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/FooterPanel/index.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Button, ControlGroup, Switch } from '@blueprintjs/core';
3+
import b_ from 'b_';
4+
import { ZOOM_STEP } from '../constants';
5+
import './styles.css';
6+
7+
const b = b_.lock('FooterPanel');
8+
9+
export const FooterPanel = ({
10+
flaggingMode,
11+
zoom,
12+
onFlaggingSwitch,
13+
onZoomChange,
14+
}) => (
15+
<ControlGroup>
16+
<Button text='+' size='xs' onClick={() => onZoomChange(zoom + ZOOM_STEP)} />
17+
<Button text='-' size='xs' onClick={() => onZoomChange(zoom - ZOOM_STEP)} />
18+
<Switch onChange={onFlaggingSwitch} title='Flag' checked={flaggingMode}>
19+
Flag
20+
</Switch>
21+
</ControlGroup>
22+
);

0 commit comments

Comments
 (0)