Add electron for desktop application

.gitignore

@@ -23,3 +23,5 @@ package-lock.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+out/

main.js

@@ -0,0 +1,51 @@
+const { app, BrowserWindow, Menu, dialog } = require("electron");
+const path = require("path");
+
+function createWindow () {
+    const win = new BrowserWindow({
+        width: 1300,
+        height: 750,
+        resizable: false,
+        webPreferences: {
+            preload: path.join(__dirname, "preload.js")
+        }
+    });
+
+    win.setIcon(new URL(path.join(__dirname, "./build/icon_snake.png"), "file:").href);
+    win.loadURL(new URL(path.join(__dirname, "./build/index.html"), "file:").href);
+
+    Menu.setApplicationMenu(Menu.buildFromTemplate([
+        {
+            label: "Back",
+            click: function() {
+                win.loadURL(new URL(path.join(__dirname, "./build/index.html"), "file:").href);
+            }
+        },
+        {
+            label: "About",
+            click: function() {
+                dialog.showMessageBox(win, {
+                    title: "About",
+                    message: "This is a Snake Game, and it's written in React + TypeScript.\nThe project is open source on Github. You can build and play it on your computer or play it online.\n\nCopyright (c) NriotHrreion "+ new Date().getFullYear(),
+                    type: "info"
+                });
+            }
+        }
+    ]));
+}
+
+app.whenReady().then(() => {
+    createWindow();
+
+    app.on("activate", () => {
+        if(BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+
+app.on("window-all-closed", () => {
+    if(process.platform !== "darwin") {
+        app.quit();
+    }
+});

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "license": "MIT",
+  "main": "main.js",
+  "homepage": ".",
   "dependencies": {
     "@babel/core": "7.12.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
@@ -28,6 +30,7 @@
     "css-loader": "4.3.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
+    "electron-squirrel-startup": "^1.0.0",
     "eslint": "^7.11.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -80,9 +83,12 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "electron-forge start",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js",
+    "electron-start": "electron .",
+    "package": "electron-forge package",
+    "make": "electron-forge make"
   },
   "eslintConfig": {
     "extends": [
@@ -160,6 +166,39 @@
     ]
   },
   "devDependencies": {
+    "@electron-forge/cli": "^6.0.0-beta.63",
+    "@electron-forge/maker-deb": "^6.0.0-beta.63",
+    "@electron-forge/maker-rpm": "^6.0.0-beta.63",
+    "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
+    "@electron-forge/maker-zip": "^6.0.0-beta.63",
+    "electron": "^16.0.7",
     "less-loader": "^6.0.0"
+  },
+  "config": {
+    "forge": {
+      "packagerConfig": {},
+      "makers": [
+        {
+          "name": "@electron-forge/maker-squirrel",
+          "config": {
+            "name": "snake_ts"
+          }
+        },
+        {
+          "name": "@electron-forge/maker-zip",
+          "platforms": [
+            "darwin"
+          ]
+        },
+        {
+          "name": "@electron-forge/maker-deb",
+          "config": {}
+        },
+        {
+          "name": "@electron-forge/maker-rpm",
+          "config": {}
+        }
+      ]
+    }
   }
 }

src/Main.tsx

@@ -81,7 +81,7 @@ export default class SnakeGame<P> extends Component<{}, MainState> {
                                 <p className="tip-message">{this.state.tipMessage}</p>
 
                                 {/* The quit button can't use "href" attribute because of the CSS */}
-                                <Button className="bottom-button" onClick={() => window.location.href = "/"}>Quit</Button>
+                                <Button className="bottom-button" onClick={() => window.location.href = "./index.html"}>Quit</Button>
                                 <Button className="bottom-button" onClick={() => this.startHandle()}>Start</Button>
                             </div>
                         </Fragment>

src/index.tsx

@@ -5,8 +5,6 @@ import SnakeGame from "Main";
 console.log("I wonder why there is a man seeing this sentence.");
 
 ReactDOM.render(
-  <React.StrictMode>
-    <SnakeGame/>
-  </React.StrictMode>,
+  <SnakeGame/>,
   document.getElementById("root")
 );

src/pages/HomePage.tsx

@@ -21,10 +21,10 @@ export default class HomePage extends Component<HomePageProps, {}> {
                         <img src={icon} alt="icon"/>
                     </div>
                     <div className="buttons-container">
-                        <MenuButton link="/#/play">Play</MenuButton>
-                        <MenuButton link="/#/settings">Settings</MenuButton>
-                        <MenuButton link="/#/docs">Help</MenuButton>
-                        <MenuButton link="/#/about">About</MenuButton>
+                        <MenuButton link="#/play">Play</MenuButton>
+                        <MenuButton link="#/settings">Settings</MenuButton>
+                        <MenuButton link="#/docs">Help</MenuButton>
+                        <MenuButton link="#/about">About</MenuButton>
                     </div>
                 </div>
                 <div className="info-container">