├── .editorconfig ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierrc.json ├── LICENSE ├── README.md ├── docs └── demo.gif ├── package-lock.json ├── package.json ├── public ├── assets │ └── img │ │ └── github.svg ├── favicon.ico ├── icon-128x128.png ├── icon-144x144.png ├── icon-152x152.png ├── icon-192x192.png ├── icon-384x384.png ├── icon-512x512.png ├── icon-72x72.png ├── icon-96x96.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── components │ ├── App │ │ ├── index.tsx │ │ └── style.module.css │ ├── Field │ │ ├── index.tsx │ │ └── style.module.css │ ├── Game │ │ ├── index.tsx │ │ └── style.module.css │ ├── Panel │ │ ├── index.tsx │ │ └── style.module.css │ ├── Settings │ │ ├── index.tsx │ │ └── style.module.css │ └── Statistics │ │ ├── index.tsx │ │ └── style.module.css ├── hooks │ ├── useGame.ts │ ├── useGameController.ts │ ├── useInterval.ts │ └── useSettings.ts ├── index.tsx ├── react-app-env.d.ts ├── styles │ ├── colors.css │ ├── main.css │ └── vendor │ │ └── reset.css ├── types.ts └── utils │ └── helpers.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # misc 26 | *.pem 27 | 28 | # local env files 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # Logs 35 | logs 36 | *.log 37 | 38 | # Runtime data 39 | pids 40 | *.pid 41 | *.seed 42 | *.pid.lock 43 | 44 | # Directory for instrumented libs generated by jscoverage/JSCover 45 | lib-cov 46 | 47 | # Coverage directory used by tools like istanbul 48 | coverage 49 | 50 | # nyc test coverage 51 | .nyc_output 52 | 53 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 54 | .grunt 55 | 56 | # Bower dependency directory (https://bower.io/) 57 | bower_components 58 | 59 | # node-waf configuration 60 | .lock-wscript 61 | 62 | # Compiled binary addons (https://nodejs.org/api/addons.html) 63 | build/Release 64 | 65 | # Dependency directories 66 | node_modules/ 67 | jspm_packages/ 68 | 69 | # TypeScript v1 declaration files 70 | typings/ 71 | 72 | # Optional npm cache directory 73 | .npm 74 | 75 | # Optional eslint cache 76 | .eslintcache 77 | 78 | # Optional REPL history 79 | .node_repl_history 80 | 81 | # Output of 'npm pack' 82 | *.tgz 83 | 84 | # Yarn Integrity file 85 | .yarn-integrity 86 | 87 | # JetBrains IDEs 88 | .idea 89 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "jsxBracketSameLine": true, 6 | "bracketSpacing": false, 7 | "tabWidth": 2, 8 | "semi": true 9 | } 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Igor Sebelev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Minesweeper React Typescript Game 2 | 3 | Legendary game written in React with Hooks and Typescript 4 | 5 | ![Game demo](./docs/demo.gif) 6 | 7 | ## Demo 8 | See demo [here](https://minesweeper-react-typescript.vercel.app/) 9 | 10 | ## How to play 11 | - Mines are scattered throughout a board, which is divided into fields. 12 | - Fields have three states: uncovered, covered and flagged. 13 | - A covered field is blank and clickable, while an uncovered field is exposed. 14 | - Flagged fields indicate a potential mine location. The number of flags is equal to the number of bombs on the board. 15 | - A left click uncovers a field. If you uncover a mined field, the game ends. 16 | - Otherwise, the uncovered field displays either a number, indicating the number of mines diagonally and/or adjacent to it, or an empty field, and all adjacent non-mined fields will automatically be uncovered. 17 | - Right-clicking on a field will flag it, causing a flag to appear on it. Flagged fields are still considered covered, and you can't click on them to uncover them. They must first be unflagged with an additional right-click. 18 | - The first click in any game will never be a mine. 19 | - To win the game, you must uncover all non-mine fields, at which point, the timer is stopped. 20 | - Flagging all the mined fields is not required. 21 | 22 | ## What’s Inside? 23 | - Project based on [create-react-app with TypeScript](https://create-react-app.dev/docs/adding-typescript/) 24 | - `tsconfig.json` is in strict mode 25 | - No implicit and explicit `any`, only static types, only hardcore :) 26 | - Written entirely with hooks 27 | - Loops optimizations and components memoization for preventing unnecessary renders 28 | - Formatted with Prettier 29 | - Precommit Husky hooks and lint-staged 30 | 31 | ## Available Scripts 32 | 33 | In the project directory, you can run: 34 | 35 | ### `npm start` 36 | 37 | Runs the app in the development mode.\ 38 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 39 | 40 | The page will reload if you make edits.\ 41 | You will also see any lint errors in the console. 42 | 43 | ### `npm test` 44 | 45 | Launches the test runner in the interactive watch mode.\ 46 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 47 | 48 | ### `npm run build` 49 | 50 | Builds the app for production to the `build` folder.\ 51 | It correctly bundles React in production mode and optimizes the build for the best performance. 52 | 53 | The build is minified and the filenames include the hashes.\ 54 | Your app is ready to be deployed! 55 | 56 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 57 | 58 | ### `npm run eject` 59 | 60 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 61 | 62 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 63 | 64 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 65 | 66 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 67 | 68 | ## Maintainers 69 | [Igor Sebelev](https://github.com/adlite) 70 | 71 | ## License 72 | MIT 73 | -------------------------------------------------------------------------------- /docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/docs/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "minesweeper-react-typescript", 3 | "version": "1.1.2", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "@types/jest": "^26.0.24", 10 | "@types/node": "^12.20.25", 11 | "@types/react": "^17.0.21", 12 | "@types/react-dom": "^17.0.9", 13 | "classnames": "^2.3.1", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "4.0.3", 17 | "typescript": "^4.4.3", 18 | "web-vitals": "^1.1.2" 19 | }, 20 | "scripts": { 21 | "app:start": "react-scripts start", 22 | "app:build": "react-scripts build", 23 | "app:test": "react-scripts test", 24 | "app:eject": "react-scripts eject", 25 | "prettier:inspect": "prettier --check \"./**/*.{js,jsx,ts,tsx,json,css}\" --ignore-path .gitignore", 26 | "prettier:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css}\" --ignore-path .gitignore", 27 | "eslint:inspect": "eslint \"./**/*.{js,jsx,ts,tsx}\" --ignore-path .gitignore .", 28 | "eslint:fix": "npm run eslint:inspect -- --fix", 29 | "linters:fix": "npm-run-all -p prettier:fix eslint:fix", 30 | "prepare": "husky install" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | }, 50 | "devDependencies": { 51 | "husky": "^7.0.2", 52 | "lint-staged": "^11.1.2", 53 | "npm-run-all": "^4.1.5", 54 | "prettier": "^2.4.1" 55 | }, 56 | "lint-staged": { 57 | "*.{js,jsx,ts,tsx,json,css}": "prettier --write --ignore-path .gitignore", 58 | "*.{js,jsx,ts,tsx}": "eslint --ignore-path .gitignore --fix" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/favicon.ico -------------------------------------------------------------------------------- /public/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-128x128.png -------------------------------------------------------------------------------- /public/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-144x144.png -------------------------------------------------------------------------------- /public/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-152x152.png -------------------------------------------------------------------------------- /public/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-192x192.png -------------------------------------------------------------------------------- /public/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-384x384.png -------------------------------------------------------------------------------- /public/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-512x512.png -------------------------------------------------------------------------------- /public/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-72x72.png -------------------------------------------------------------------------------- /public/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adlite/minesweeper-react-typescript/1bc4d02416f2f13a489ace21ab2e1cc185baf487/public/icon-96x96.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 17 | 26 | Minesweeper React Typescript Game 27 | 28 | 29 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Minesweeper React Typescript", 3 | "short_name": "Minesweeper", 4 | "theme_color": "#3c3f41", 5 | "background_color": "#3c3f41", 6 | "display": "standalone", 7 | "orientation": "landscape", 8 | "start_url": ".", 9 | "icons": [ 10 | { 11 | "src": "favicon.ico", 12 | "sizes": "64x64 32x32 24x24 16x16", 13 | "type": "image/x-icon" 14 | }, 15 | { 16 | "src": "icon-96x96.png", 17 | "type": "image/png", 18 | "sizes": "96x96" 19 | }, 20 | { 21 | "src": "icon-128x128.png", 22 | "type": "image/png", 23 | "sizes": "128x128" 24 | }, 25 | { 26 | "src": "icon-144x144.png", 27 | "type": "image/png", 28 | "sizes": "144x144" 29 | }, 30 | { 31 | "src": "icon-152x152.png", 32 | "type": "image/png", 33 | "sizes": "152x152" 34 | }, 35 | { 36 | "src": "icon-192x192.png", 37 | "type": "image/png", 38 | "sizes": "192x192" 39 | }, 40 | { 41 | "src": "icon-512x512.png", 42 | "type": "image/png", 43 | "sizes": "512x512" 44 | } 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/App/index.tsx: -------------------------------------------------------------------------------- 1 | import Game from '../Game'; 2 | import style from './style.module.css'; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |

💣minesweeper

9 | 10 |
11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/components/App/style.module.css: -------------------------------------------------------------------------------- 1 | .App { 2 | display: flex; 3 | justify-content: center; 4 | align-items: stretch; 5 | min-height: 100vh; 6 | padding: 15px 0; 7 | } 8 | 9 | .container { 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | } 14 | 15 | .title { 16 | text-transform: uppercase; 17 | font-size: 32px; 18 | letter-spacing: 5px; 19 | text-align: center; 20 | margin-bottom: 10px; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Field/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import cn from 'classnames'; 3 | import {GameState, IField} from '../../types'; 4 | 5 | import style from './style.module.css'; 6 | 7 | interface IProps { 8 | field: IField; 9 | isSmall: boolean; 10 | gameState: GameState; 11 | onOpen: (field: IField) => void; 12 | onSetFlag: (field: IField) => void; 13 | onDeleteFlag: (field: IField) => void; 14 | } 15 | 16 | function Field({field, isSmall, gameState, onOpen, onSetFlag, onDeleteFlag}: IProps) { 17 | const isDisabled = gameState === GameState.Pause || gameState === GameState.GameOver; 18 | let label: number | string = ''; 19 | 20 | if (field.isOpened) { 21 | if (field.hasBomb) { 22 | label = '💣'; 23 | } else if (field.bombsAround) { 24 | label = field.bombsAround; 25 | } 26 | } else if (field.hasFlag) { 27 | label = '🚩'; 28 | } 29 | 30 | const classes = cn({ 31 | [style.Field]: true, 32 | [style.isOpened]: field.isOpened, 33 | [style.isSmall]: isSmall, 34 | [style.hasOpenedBomb]: field.isOpened && field.hasBomb, 35 | [style.dangerLevel1]: field.isOpened && field.bombsAround === 1, 36 | [style.dangerLevel2]: field.isOpened && field.bombsAround === 2, 37 | [style.dangerLevel3]: field.isOpened && field.bombsAround === 3, 38 | [style.dangerLevel4]: field.isOpened && field.bombsAround === 4, 39 | [style.dangerLevel5]: field.isOpened && field.bombsAround === 5, 40 | [style.dangerLevel6]: field.isOpened && field.bombsAround >= 6, 41 | }); 42 | 43 | // Handlers 44 | const handleClick = useCallback(() => { 45 | if (!field.hasFlag) { 46 | onOpen(field); 47 | } 48 | }, [field, onOpen]); 49 | 50 | const handleContextMenuClick = useCallback( 51 | (event: React.MouseEvent) => { 52 | // Disable context menu 53 | event.preventDefault(); 54 | 55 | if (gameState === GameState.Playing && !field.isOpened) { 56 | if (field.hasFlag) { 57 | onDeleteFlag(field); 58 | } else { 59 | onSetFlag(field); 60 | } 61 | } 62 | }, 63 | [field, onSetFlag, onDeleteFlag, gameState], 64 | ); 65 | 66 | return ( 67 | 70 | ); 71 | } 72 | 73 | export default React.memo(Field); 74 | -------------------------------------------------------------------------------- /src/components/Field/style.module.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --field-bg-color: #b0b0b0; 3 | --field-bg-active-color: #f5f5f5; 4 | --field-bg-has-bomb-color: #984b4b; 5 | --field-bg-disabled-color: #999b99; 6 | --field-border-color: #2b2b2b; 7 | --field-danger-lvl-1-color: #2a9a0b; 8 | --field-danger-lvl-2-color: #ff9900; 9 | --field-danger-lvl-3-color: #ff2a04; 10 | --field-danger-lvl-4-color: #7a0000; 11 | --field-danger-lvl-5-color: #600707; 12 | --field-danger-lvl-6-color: #431d04; 13 | } 14 | 15 | .Field { 16 | padding: 0; 17 | width: 40px; 18 | height: 40px; 19 | background-color: var(--field-bg-color); 20 | border: 1px solid var(--field-border-color); 21 | border-radius: 4px; 22 | cursor: pointer; 23 | font-weight: bold; 24 | font-size: 16px; 25 | } 26 | 27 | .Field:hover { 28 | background-color: var(--field-bg-active-color); 29 | } 30 | 31 | .Field:active { 32 | background-color: var(--field-bg-active-color); 33 | box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.4); 34 | } 35 | 36 | .isSmall { 37 | width: 25px; 38 | height: 25px; 39 | font-size: 14px; 40 | } 41 | 42 | .isOpened { 43 | background-color: var(--field-bg-active-color); 44 | box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.4); 45 | cursor: default; 46 | } 47 | 48 | .Field[disabled]:not(.hasOpenedBomb), 49 | .Field[disabled]:not(.hasOpenedBomb):hover, 50 | .Field[disabled]:not(.hasOpenedBomb):active { 51 | cursor: default; 52 | background-color: var(--field-bg-disabled-color); 53 | } 54 | 55 | .hasOpenedBomb, 56 | .hasOpenedBomb:hover, 57 | .hasOpenedBomb:active { 58 | color: black; 59 | background-color: var(--field-bg-has-bomb-color); 60 | } 61 | 62 | .dangerLevel1 { 63 | color: var(--field-danger-lvl-1-color); 64 | } 65 | 66 | .dangerLevel2 { 67 | color: var(--field-danger-lvl-2-color); 68 | } 69 | 70 | .dangerLevel3 { 71 | color: var(--field-danger-lvl-3-color); 72 | } 73 | 74 | .dangerLevel4 { 75 | color: var(--field-danger-lvl-4-color); 76 | } 77 | 78 | .dangerLevel5 { 79 | color: var(--field-danger-lvl-5-color); 80 | } 81 | 82 | .dangerLevel6 { 83 | color: var(--field-danger-lvl-6-color); 84 | } 85 | -------------------------------------------------------------------------------- /src/components/Game/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useMemo} from 'react'; 2 | import cn from 'classnames'; 3 | import Panel from '../Panel'; 4 | import Field from '../Field'; 5 | import Settings from '../Settings'; 6 | import Statistics from '../Statistics'; 7 | import useGameController from '../../hooks/useGameController'; 8 | import {GameState, SettingsLevel} from '../../types'; 9 | 10 | import style from './style.module.css'; 11 | 12 | export default function Game() { 13 | const { 14 | settings, 15 | setSettingsByLevel, 16 | fields, 17 | onFieldOpen, 18 | fieldsOpened, 19 | formattedTimer, 20 | prepareGame, 21 | continuePlaying, 22 | pause, 23 | gameState, 24 | flagsCount, 25 | setFlag, 26 | deleteFlag, 27 | } = useGameController(); 28 | 29 | // Button labels getters 30 | const playButtonLabel = useMemo(() => { 31 | switch (gameState) { 32 | case GameState.Idle: 33 | return 'Play'; 34 | default: 35 | return 'Play again'; 36 | } 37 | }, [gameState]); 38 | 39 | const pauseButtonLabel = useMemo(() => { 40 | switch (gameState) { 41 | case GameState.Pause: 42 | return 'Continue'; 43 | default: 44 | return 'Pause'; 45 | } 46 | }, [gameState]); 47 | 48 | // Grid styles for specific settings 49 | const fieldsStyle = useMemo( 50 | () => ({ 51 | gridTemplateColumns: `repeat(${settings.xFieldsCount}, 1fr)`, 52 | gridTemplateRows: `repeat(${settings.yFieldsCount}, 1fr)`, 53 | }), 54 | [settings], 55 | ); 56 | 57 | // Event handlers 58 | const handlePauseButtonClick = useCallback(() => { 59 | if (gameState === GameState.Pause) { 60 | continuePlaying(); 61 | } else { 62 | pause(); 63 | } 64 | }, [gameState, pause, continuePlaying]); 65 | 66 | return ( 67 | <> 68 | 69 | 70 |
71 | {Array.from(fields.values()).map((field) => ( 72 | 81 | ))} 82 |
83 | 120 | 121 | 122 | ); 123 | } 124 | -------------------------------------------------------------------------------- /src/components/Game/style.module.css: -------------------------------------------------------------------------------- 1 | .Game { 2 | display: flex; 3 | justify-content: space-between; 4 | } 5 | 6 | .fields { 7 | display: grid; 8 | gap: 0; 9 | } 10 | 11 | .aside { 12 | min-width: 200px; 13 | padding: 15px; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: space-between; 17 | } 18 | 19 | .button { 20 | display: block; 21 | width: 100%; 22 | height: 40px; 23 | margin-bottom: 5px; 24 | color: var(--text-primary-color); 25 | background-color: var(--button-bg-color); 26 | border: 2px solid var(--button-border-color); 27 | font-size: 14px; 28 | border-radius: 6px; 29 | text-decoration: none; 30 | cursor: pointer; 31 | text-align: center; 32 | transition: background-color 200ms; 33 | } 34 | 35 | .button:hover { 36 | background-color: var(--button-bg-hover-color); 37 | } 38 | 39 | .button:active { 40 | background-color: var(--button-bg-active-color); 41 | } 42 | 43 | .button:last-child { 44 | margin-bottom: 0; 45 | } 46 | 47 | .button.buttonGitHub { 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | } 52 | 53 | .button.buttonGitHub .githubIcon { 54 | margin-right: 5px; 55 | width: 20px; 56 | height: 20px; 57 | } 58 | 59 | .stats { 60 | display: grid; 61 | grid-template-rows: 1fr 1fr; 62 | grid-template-columns: 1fr 1fr; 63 | gap: 5px; 64 | text-align: center; 65 | } 66 | -------------------------------------------------------------------------------- /src/components/Panel/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import cn from 'classnames'; 3 | 4 | import style from './style.module.css'; 5 | 6 | interface IProps { 7 | children: React.ReactNode; 8 | className?: string; 9 | } 10 | 11 | export default function Panel({className = '', children}: IProps) { 12 | return
{children}
; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Panel/style.module.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --panel-bg-color: #2b2b2b; 3 | --panel-border-color: #1f1f1f; 4 | } 5 | 6 | .Panel { 7 | border: 1px solid var(--panel-border-color); 8 | border-radius: 6px; 9 | background-color: var(--panel-bg-color); 10 | overflow: hidden; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/Settings/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import cn from 'classnames'; 3 | 4 | import Panel from '../Panel'; 5 | import {settings} from '../../hooks/useSettings'; 6 | import {SettingsLevel} from '../../types'; 7 | import style from './style.module.css'; 8 | 9 | interface IProps { 10 | className?: string; 11 | level: SettingsLevel; 12 | onLevelChange: (level: SettingsLevel) => void; 13 | } 14 | 15 | function Settings({className = '', level, onLevelChange}: IProps) { 16 | const handleLevelChange = useCallback( 17 | (settingsLevel: SettingsLevel) => () => onLevelChange(settingsLevel), 18 | [onLevelChange], 19 | ); 20 | 21 | return ( 22 | 23 | {settings.map((s) => ( 24 | 31 | ))} 32 | 33 | ); 34 | } 35 | 36 | export default React.memo(Settings); 37 | -------------------------------------------------------------------------------- /src/components/Settings/style.module.css: -------------------------------------------------------------------------------- 1 | .Settings { 2 | padding: 10px; 3 | margin-bottom: 15px; 4 | } 5 | 6 | .button { 7 | margin-right: 10px; 8 | padding: 10px 15px; 9 | border: none; 10 | color: var(--text-primary-color); 11 | border-radius: 6px; 12 | background-color: transparent; 13 | cursor: pointer; 14 | transition: background-color 200ms; 15 | } 16 | 17 | .button:last-child { 18 | margin-right: 0; 19 | } 20 | 21 | .button:not(.isActive):hover { 22 | background-color: var(--button-bg-active-color); 23 | } 24 | 25 | .button.isActive { 26 | background-color: var(--button-bg-active-color); 27 | cursor: default; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Statistics/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import cn from 'classnames'; 3 | 4 | import style from './style.module.css'; 5 | 6 | interface IProps { 7 | value: string; 8 | icon: string; 9 | title: string; 10 | className?: string; 11 | } 12 | 13 | function Statistics({className = '', title, icon, value}: IProps) { 14 | return ( 15 |
16 |
{icon}
17 |
{value}
18 |
19 | ); 20 | } 21 | 22 | export default React.memo(Statistics); 23 | -------------------------------------------------------------------------------- /src/components/Statistics/style.module.css: -------------------------------------------------------------------------------- 1 | .Statistics { 2 | border: 1px solid var(--border-primary-color); 3 | border-radius: 6px; 4 | cursor: default; 5 | } 6 | 7 | .emoji { 8 | font-size: 20px; 9 | } 10 | 11 | .value { 12 | font-weight: bold; 13 | font-size: 16px; 14 | } 15 | -------------------------------------------------------------------------------- /src/hooks/useGame.ts: -------------------------------------------------------------------------------- 1 | import {useCallback, useEffect, useState} from 'react'; 2 | import {IField, FieldsMap, FieldCoords, ISettings} from '../types'; 3 | import {randomNumber} from '../utils/helpers'; 4 | 5 | // Debug cycles counter 6 | let cycles = 0; 7 | 8 | // Changes field coords into convenient Map key 9 | function coordsToKey([x, y]: FieldCoords): string { 10 | return `[${x},${y}]`; 11 | } 12 | 13 | export default function useGame(settings: ISettings) { 14 | // Array of game fields 15 | const [fields, setFields] = useState(new Map()); 16 | // Array of game fields which has been opened 17 | const [fieldsOpened, setFieldsOpened] = useState(0); 18 | // Flags count 19 | const [flagsCount, setFlagsCount] = useState(0); 20 | 21 | // Private methods 22 | // Checks if given X and Y coordinates are in game field boundaries 23 | const areCoordsInBoundaries = useCallback( 24 | ([x, y]: FieldCoords): boolean => { 25 | return x >= 1 && x <= settings.xFieldsCount && y >= 1 && y <= settings.yFieldsCount; 26 | }, 27 | [settings], 28 | ); 29 | 30 | const findCoordsAround = useCallback( 31 | ([x, y]: FieldCoords): FieldCoords[] => { 32 | const coords = [ 33 | [x - 1, y - 1], 34 | [x, y - 1], 35 | [x + 1, y - 1], 36 | [x - 1, y], 37 | [x + 1, y], 38 | [x - 1, y + 1], 39 | [x, y + 1], 40 | [x + 1, y + 1], 41 | ]; 42 | 43 | return coords.filter(([x, y]) => { 44 | cycles += 1; 45 | return areCoordsInBoundaries([x, y]); 46 | }) as FieldCoords[]; 47 | }, 48 | [areCoordsInBoundaries], 49 | ); 50 | 51 | const generateEmptyFields = useCallback((): FieldsMap => { 52 | const fields: FieldsMap = new Map(); 53 | 54 | for (let y = 0; y < settings.yFieldsCount; y++) { 55 | for (let x = 0; x < settings.xFieldsCount; x++) { 56 | cycles += 1; 57 | const coords: FieldCoords = [x + 1, y + 1]; 58 | fields.set(coordsToKey(coords), { 59 | id: x + 1 + settings.xFieldsCount * y, 60 | coords, 61 | isOpened: false, 62 | hasBomb: false, 63 | hasFlag: false, 64 | bombsAround: 0, 65 | }); 66 | } 67 | } 68 | 69 | return fields; 70 | }, [settings]); 71 | 72 | const generateFieldsWithBombs = useCallback( 73 | (firstClicked: IField): FieldsMap => { 74 | const fields: FieldsMap = generateEmptyFields(); 75 | const fieldsWithBombsIds: Set = new Set(); 76 | 77 | // Generate reserved fields which can't have bombs due to the first clicked field 78 | const reservedIdsAround = findCoordsAround(firstClicked.coords).map((coords) => { 79 | cycles += 1; 80 | return fields.get(coordsToKey(coords))?.id as number; 81 | }); 82 | const reservedIds = new Set([firstClicked.id, ...reservedIdsAround]); 83 | 84 | // Random generator for bombs IDs 85 | while (fieldsWithBombsIds.size < settings.bombsCount) { 86 | cycles += 1; 87 | const randomBombId = randomNumber(1, settings.xFieldsCount * settings.yFieldsCount); 88 | 89 | if (!reservedIds.has(randomBombId)) { 90 | fieldsWithBombsIds.add(randomBombId); 91 | } 92 | } 93 | 94 | for (const field of fields.values()) { 95 | cycles += 1; 96 | field.hasBomb = fieldsWithBombsIds.has(field.id); 97 | 98 | if (field.hasBomb) { 99 | findCoordsAround(field.coords) 100 | // eslint-disable-next-line no-loop-func 101 | .map((coords) => { 102 | cycles += 1; 103 | return fields.get(coordsToKey(coords)); 104 | }) 105 | // eslint-disable-next-line no-loop-func 106 | .forEach((field) => { 107 | cycles += 1; 108 | return field && field.bombsAround++; 109 | }); 110 | } 111 | } 112 | 113 | return fields; 114 | }, 115 | [findCoordsAround, generateEmptyFields, settings], 116 | ); 117 | 118 | const openEmptyFields = useCallback( 119 | (clickedField: IField, fields: FieldsMap): void => { 120 | const emptiesStack: IField[] = [clickedField]; 121 | const verifiedEmptiesIds = new Set(); 122 | let opened = 0; 123 | let deletedFlags = 0; 124 | 125 | // Open currently clicked field 126 | const clickedFieldToOpen = fields.get(coordsToKey(clickedField.coords)); 127 | 128 | if (clickedFieldToOpen) { 129 | clickedFieldToOpen.isOpened = true; 130 | opened += 1; 131 | } 132 | 133 | // Recursively check all empty fields around clicked field 134 | // and change their `isOpened` flag 135 | const verifyEmptiesAround = (field: IField) => { 136 | const coordsAround = findCoordsAround(field.coords); 137 | 138 | for (const coords of coordsAround) { 139 | cycles += 1; 140 | const sibling = fields.get(coordsToKey(coords)); 141 | 142 | if (sibling && !sibling.isOpened) { 143 | sibling.isOpened = true; 144 | opened += 1; 145 | 146 | if (sibling.hasFlag) { 147 | sibling.hasFlag = false; 148 | deletedFlags += 1; 149 | } 150 | 151 | if ( 152 | sibling.bombsAround === 0 && 153 | !emptiesStack.find(({id}) => id === sibling.id) && 154 | !verifiedEmptiesIds.has(sibling.id) 155 | ) { 156 | emptiesStack.push(sibling); 157 | } 158 | } 159 | } 160 | 161 | verifiedEmptiesIds.add(field.id); 162 | emptiesStack.shift(); 163 | 164 | if (emptiesStack.length > 0) { 165 | verifyEmptiesAround(emptiesStack[0]); 166 | } 167 | }; 168 | 169 | verifyEmptiesAround(clickedField); 170 | 171 | if (deletedFlags) { 172 | setFlagsCount(flagsCount - deletedFlags); 173 | } 174 | 175 | setFields(new Map(fields)); 176 | setFieldsOpened(fieldsOpened + opened); 177 | }, 178 | [findCoordsAround, fieldsOpened, flagsCount], 179 | ); 180 | 181 | const openFieldWithBombsAround = useCallback( 182 | (clickedField: IField): void => { 183 | for (const field of fields.values()) { 184 | cycles += 1; 185 | if (clickedField.id === field.id) { 186 | field.isOpened = true; 187 | break; 188 | } 189 | } 190 | 191 | setFields(new Map(fields)); 192 | setFieldsOpened(fieldsOpened + 1); 193 | }, 194 | [fields, fieldsOpened], 195 | ); 196 | 197 | const openAllBombs = useCallback((): void => { 198 | let opened = 0; 199 | for (const field of fields.values()) { 200 | cycles += 1; 201 | if (field.hasBomb) { 202 | field.isOpened = true; 203 | opened += 1; 204 | } 205 | if (opened >= settings.bombsCount) { 206 | break; 207 | } 208 | } 209 | 210 | setFields(new Map(fields)); 211 | }, [fields, settings]); 212 | 213 | const setFlagValue = useCallback( 214 | (clickedField: IField, value: boolean) => { 215 | for (const field of fields.values()) { 216 | cycles += 1; 217 | if (clickedField.id === field.id) { 218 | field.hasFlag = value; 219 | break; 220 | } 221 | } 222 | 223 | setFields(new Map(fields)); 224 | setFlagsCount(value ? flagsCount + 1 : flagsCount - 1); 225 | }, 226 | [fields, flagsCount], 227 | ); 228 | 229 | // Public methods 230 | const initFields = useCallback(() => { 231 | setFields(generateEmptyFields()); 232 | setFieldsOpened(0); 233 | setFlagsCount(0); 234 | }, [generateEmptyFields]); 235 | 236 | // Main public handler for field click 237 | const openField = useCallback( 238 | (clickedField: IField) => { 239 | if (clickedField.isOpened) { 240 | return; 241 | } 242 | 243 | if (clickedField.hasBomb) { 244 | // Handle click on field with bomb 245 | openAllBombs(); 246 | } else if (fieldsOpened === 0) { 247 | // Handle first click. 248 | // Regenerate fields with bombs and then open fields around first clicked field. 249 | // The first click in any game will never be a mine. 250 | openEmptyFields(clickedField, generateFieldsWithBombs(clickedField)); 251 | } else if (clickedField.bombsAround === 0) { 252 | // Handle click on empty field and open fields around it. 253 | openEmptyFields(clickedField, fields); 254 | } else { 255 | openFieldWithBombsAround(clickedField); 256 | } 257 | }, 258 | [fields, fieldsOpened, generateFieldsWithBombs, openEmptyFields, openAllBombs, openFieldWithBombsAround], 259 | ); 260 | 261 | const setFlag = useCallback( 262 | (clickedField: IField) => { 263 | if (flagsCount >= settings.bombsCount) { 264 | return; 265 | } 266 | 267 | setFlagValue(clickedField, true); 268 | }, 269 | [setFlagValue, flagsCount, settings], 270 | ); 271 | 272 | const deleteFlag = useCallback( 273 | (clickedField: IField) => { 274 | if (flagsCount < 1) { 275 | return; 276 | } 277 | 278 | setFlagValue(clickedField, false); 279 | }, 280 | [setFlagValue, flagsCount], 281 | ); 282 | 283 | // Update debug cycles counter on every fields change 284 | useEffect(() => { 285 | console.log(`Cycles count: ${cycles}`); 286 | cycles = 0; 287 | }, [fields]); 288 | 289 | return { 290 | fields, 291 | fieldsOpened, 292 | openField, 293 | initFields, 294 | flagsCount, 295 | setFlag, 296 | deleteFlag, 297 | }; 298 | } 299 | -------------------------------------------------------------------------------- /src/hooks/useGameController.ts: -------------------------------------------------------------------------------- 1 | import {useCallback, useEffect, useState} from 'react'; 2 | import {GameState, IField, SettingsLevel} from '../types'; 3 | import {formatSeconds} from '../utils/helpers'; 4 | import useSettings from './useSettings'; 5 | import useGame from './useGame'; 6 | import useInterval from './useInterval'; 7 | 8 | export default function useGameController() { 9 | // Use game settings hook 10 | const {settings, setSettingsByLevel} = useSettings(SettingsLevel.Beginner); 11 | // Game main logic hook 12 | const {fields, fieldsOpened, openField, initFields, flagsCount, setFlag, deleteFlag} = useGame(settings); 13 | // Time in seconds spent on the game 14 | const [timer, setTimer] = useState(0); 15 | // Formatted HH:MM:SS `timer` 16 | const [formattedTimer, setFormattedTimer] = useState('00:00'); 17 | // Current state of the game 18 | const [gameState, setGameState] = useState(GameState.Idle); 19 | 20 | // Public methods 21 | const prepareGame = useCallback(() => { 22 | initFields(); 23 | setTimer(0); 24 | setGameState(GameState.Idle); 25 | }, [initFields]); 26 | 27 | const continuePlaying = useCallback(() => { 28 | setGameState(GameState.Playing); 29 | }, []); 30 | 31 | const pause = useCallback(() => { 32 | setGameState(GameState.Pause); 33 | }, []); 34 | 35 | const onFieldOpen = useCallback( 36 | (clickedField: IField) => { 37 | if (clickedField.hasBomb) { 38 | // Handle click on field with bomb 39 | setGameState(GameState.GameOver); 40 | } else if (fieldsOpened === 0) { 41 | // Handle first click. 42 | // Set game state to `Playing` 43 | setGameState(GameState.Playing); 44 | } 45 | 46 | // Open field with `useGame` handler 47 | openField(clickedField); 48 | }, 49 | [fieldsOpened, openField], 50 | ); 51 | 52 | // Run `setInterval` every time when `gameState` is GameState.Playing 53 | useInterval( 54 | () => { 55 | setTimer(timer + 1); 56 | }, 57 | gameState === GameState.Playing ? 1000 : null, 58 | ); 59 | 60 | // Initialize game on mount 61 | useEffect(() => { 62 | prepareGame(); 63 | }, [prepareGame]); 64 | 65 | // Regenerate game fields when settings changed 66 | useEffect(() => { 67 | prepareGame(); 68 | }, [settings, prepareGame]); 69 | 70 | // Format seconds on each `timer` change 71 | useEffect(() => { 72 | setFormattedTimer(formatSeconds(timer)); 73 | }, [timer]); 74 | 75 | // Check game win state 76 | useEffect(() => { 77 | if (fieldsOpened + settings.bombsCount === settings.xFieldsCount * settings.yFieldsCount) { 78 | alert('Congratulations! You won!'); 79 | setGameState(GameState.GameOver); 80 | } 81 | }, [fieldsOpened, settings]); 82 | 83 | return { 84 | settings, 85 | setSettingsByLevel, 86 | fields, 87 | fieldsOpened, 88 | timer, 89 | formattedTimer, 90 | gameState, 91 | prepareGame, 92 | continuePlaying, 93 | pause, 94 | onFieldOpen, 95 | flagsCount, 96 | setFlag, 97 | deleteFlag, 98 | }; 99 | } 100 | -------------------------------------------------------------------------------- /src/hooks/useInterval.ts: -------------------------------------------------------------------------------- 1 | import {useEffect, useRef} from 'react'; 2 | 3 | type IntervalCallback = () => void; 4 | 5 | export default function useInterval(callback: IntervalCallback, delay: number | null) { 6 | const savedCallback = useRef(); 7 | 8 | useEffect(() => { 9 | savedCallback.current = callback; 10 | }, [callback]); 11 | 12 | useEffect(() => { 13 | const tick = () => { 14 | if (savedCallback.current) { 15 | savedCallback.current(); 16 | } 17 | }; 18 | if (delay !== null) { 19 | let id = setInterval(tick, delay); 20 | return () => clearInterval(id); 21 | } 22 | }, [delay]); 23 | } 24 | -------------------------------------------------------------------------------- /src/hooks/useSettings.ts: -------------------------------------------------------------------------------- 1 | import {useCallback, useState} from 'react'; 2 | import {ISettings, SettingsLevel} from '../types'; 3 | 4 | export const settings: ISettings[] = [ 5 | { 6 | level: SettingsLevel.Beginner, 7 | xFieldsCount: 8, 8 | yFieldsCount: 8, 9 | bombsCount: 10, 10 | }, 11 | { 12 | level: SettingsLevel.Intermediate, 13 | xFieldsCount: 16, 14 | yFieldsCount: 16, 15 | bombsCount: 40, 16 | }, 17 | { 18 | level: SettingsLevel.Expert, 19 | xFieldsCount: 30, 20 | yFieldsCount: 16, 21 | bombsCount: 99, 22 | }, 23 | ]; 24 | 25 | function getSettingsByLevel(level: SettingsLevel): ISettings { 26 | return settings.find((s) => s.level === level) || settings[0]; 27 | } 28 | 29 | export default function useSettings(initialLevel: SettingsLevel) { 30 | const [settings, setSettings] = useState(getSettingsByLevel(initialLevel)); 31 | 32 | const setSettingsByLevel = useCallback((level: SettingsLevel) => { 33 | setSettings(getSettingsByLevel(level)); 34 | }, []); 35 | 36 | return { 37 | settings, 38 | setSettings, 39 | setSettingsByLevel, 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | import './styles/vendor/reset.css'; 6 | import './styles/colors.css'; 7 | import './styles/main.css'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | document.getElementById('root'), 14 | ); 15 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/styles/colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --text-primary-color: #e5e5e5; 3 | --bg-primary-color: #3c3f41; 4 | --bg-secondary-color: #3c3f41; 5 | --border-primary-color: #1f1f1f; 6 | --button-bg-color: #54595b; 7 | --button-bg-hover-color: #6a7173; 8 | --button-bg-active-color: #3c3f41; 9 | --button-border-color: #2b2b2b; 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body, 6 | html { 7 | margin: 0; 8 | padding: 0; 9 | background-color: var(--bg-primary-color); 10 | color: var(--text-primary-color); 11 | font-family: sans-serif; 12 | font-weight: normal; 13 | font-size: 16px; 14 | line-height: 1.618; /* based on https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a; */ 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /src/styles/vendor/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | /* HTML5 display-role reset for older browsers */ 95 | article, 96 | aside, 97 | details, 98 | figcaption, 99 | figure, 100 | footer, 101 | header, 102 | hgroup, 103 | menu, 104 | nav, 105 | section { 106 | display: block; 107 | } 108 | body { 109 | line-height: 1; 110 | } 111 | ol, 112 | ul { 113 | list-style: none; 114 | } 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | blockquote:before, 120 | blockquote:after, 121 | q:before, 122 | q:after { 123 | content: ''; 124 | content: none; 125 | } 126 | table { 127 | border-collapse: collapse; 128 | border-spacing: 0; 129 | } 130 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type FieldCoords = [number, number]; 2 | export type FieldsMap = Map; 3 | 4 | export interface IField { 5 | id: number; 6 | coords: FieldCoords; 7 | isOpened: boolean; 8 | hasBomb: boolean; 9 | hasFlag: boolean; 10 | bombsAround: number; 11 | } 12 | 13 | export interface ISettings { 14 | level: SettingsLevel; 15 | bombsCount: number; 16 | xFieldsCount: number; 17 | yFieldsCount: number; 18 | } 19 | 20 | export enum SettingsLevel { 21 | Beginner = 'Beginner', 22 | Intermediate = 'Intermediate', 23 | Expert = 'Expert', 24 | SuperExpert = 'SuperExpert', 25 | } 26 | 27 | export enum GameState { 28 | Idle = 'Idle', 29 | Playing = 'Playing', 30 | Pause = 'Pause', 31 | GameOver = 'GameOver', 32 | } 33 | -------------------------------------------------------------------------------- /src/utils/helpers.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generates random number from `min` to `max` 3 | */ 4 | export function randomNumber(min: number, max: number): number { 5 | return Math.floor(Math.random() * (max - min)) + min; 6 | } 7 | 8 | /** 9 | * Parses number of seconds to HH:MM:SS format 10 | */ 11 | export function formatSeconds(secondsCount: number): string { 12 | let hours: number | string = Math.floor(secondsCount / 3600); 13 | let minutes: number | string = Math.floor((secondsCount - hours * 3600) / 60); 14 | let seconds: number | string = secondsCount - hours * 3600 - minutes * 60; 15 | 16 | if (hours < 10) { 17 | hours = `0${hours}`; 18 | } 19 | 20 | if (minutes < 10) { 21 | minutes = `0${minutes}`; 22 | } 23 | 24 | if (seconds < 10) { 25 | seconds = `0${seconds}`; 26 | } 27 | 28 | return `${hours !== '00' ? `${hours}:` : ``}${minutes}:${seconds}`; 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "downlevelIteration": true, 18 | "jsx": "react-jsx" 19 | }, 20 | "include": ["src"] 21 | } 22 | --------------------------------------------------------------------------------