chore(gui): add bootstrap and update electron

Author: Yasamato

main.js

@@ -71,7 +71,7 @@ process.on('unhandledRejection', (reason, promise) => {
 function createWindow() {
   let args = process.argv.slice(2)
   let isDev = args.some(value => value === '--dev')
-  if (!global.kioskMode) {
+  if(!global.kioskMode) {
     global.kioskMode = args.some(value => value === '--kiosk')
   }
 
@@ -116,11 +116,10 @@ function createWindow() {
   // Open the DevTools.
   if(isDev) {
     win.webContents.openDevTools()
-  } else if (kioskMode) {
+  } else if(kioskMode) {
     win.removeMenu()
     win.setMenu(null)
-  }
-  else {
+  } else {
     win.removeMenu()
     win.setMenu(null)
     appUpdater()

package.json

@@ -78,7 +78,8 @@
   },
   "dependencies": {
     "body-parser": "^1.19.0",
-    "deep-equal": "^1.1.1",
+    "bootstrap": "^4.4.1",
+    "deep-equal": "^2.0.1",
     "electron-updater": "^4.2.0",
     "express": "^4.17.1",
     "gl-matrix": "^3.1.0",
@@ -87,6 +88,7 @@
     "portfinder": "^1.0.25",
     "promise-retry": "^1",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-photonkit": "git+https://github.com/octoth0rpe/react-photonkit.git",
     "request": "^2.88.0",
@@ -105,7 +107,7 @@
     "@types/react-dom": "^16.9.4",
     "@types/request": "^2.48.3",
     "@types/sax": "^1.2.0",
-    "electron": "^5.0.12",
+    "electron": "^7.1.7",
     "electron-builder": "^21.2.0",
     "jasmine": "^3.5.0",
     "jasmine-console-reporter": "^3.1.0",

socha

@@ -59,7 +59,7 @@ export class App extends React.Component<any, State> {
 
   constructor(props) {
     super(props)
-    var remote = require('electron').remote
+    let remote = require('electron').remote
     this.state = {
       menuRetracted:    remote.getGlobal('kioskMode'),
       consoleRetracted: true,
@@ -89,38 +89,37 @@ export class App extends React.Component<any, State> {
 
   private loadReplay() {
     dialog.showOpenDialog(
+      remote.require('browser-window'),
       {
         title:      'Wähle ein Replay',
         properties: ['openFile'],
-      },
-      (filenames) => {
-        // dialog returns undefined when user clicks cancel or an array of strings (paths) if user selected a file
-        if (filenames && filenames.length > 0 && filenames[0]) {
-          //window.localStorage[localStorageProgramPath] = filenames[0]
-          console.log('Attempting to load ' + filenames[0])
-          let liofs = filenames[0].lastIndexOf('/')
-          if (liofs == -1) {
-            liofs = filenames[0].lastIndexOf('\\')
-          }
-          let replayName = filenames[0]
-          if (liofs != -1) {
-            replayName = replayName.substring(liofs + 1)
-          }
-          const liofp = replayName.lastIndexOf('.')
-          if (liofp != -1) {
-            replayName = replayName.substring(0, liofp)
-          }
-          let gco: Replay = {
-            gameId:   Api.getGameManager().createGameId(replayName, true),
-            gameName: replayName,
-            kind:     GameType.Replay,
-            path:     filenames[0],
-          }
-          //new GameCreationOptions(null, null, filenames[0], StartType.Replay, null, null, null, null, replayName)
-          this.startGameWithOptions(gco)
+      }).then(result => {
+      // dialog returns undefined when user clicks cancel or an array of strings (paths) if user selected a file
+      if (!result.canceled && result.filePaths.length > 0 && result.filePaths[0]) {
+        //window.localStorage[localStorageProgramPath] = filenames[0]
+        console.log('Attempting to load ' + result.filePaths[0])
+        let liofs = result.filePaths[0].lastIndexOf('/')
+        if (liofs == -1) {
+          liofs = result.filePaths[0].lastIndexOf('\\')
         }
-      },
-    )
+        let replayName = result.filePaths[0]
+        if (liofs != -1) {
+          replayName = replayName.substring(liofs + 1)
+        }
+        const liofp = replayName.lastIndexOf('.')
+        if (liofp != -1) {
+          replayName = replayName.substring(0, liofp)
+        }
+        let gco: Replay = {
+          gameId:   Api.getGameManager().createGameId(replayName, true),
+          gameName: replayName,
+          kind:     GameType.Replay,
+          path:     result.filePaths[0],
+        }
+        //new GameCreationOptions(null, null, filenames[0], StartType.Replay, null, null, null, null, replayName)
+        this.startGameWithOptions(gco)
+      }
+    })
   }
 
   private startGameWithOptions(o: GameCreationOptions): Promise<GameInfo> {
@@ -186,8 +185,7 @@ export class App extends React.Component<any, State> {
     Api.getGameManager().deleteGame(id)
     if (require('electron').remote.getGlobal('kioskMode')) {
       this.show(AppContent.GameCreation)
-    }
-    else {
+    } else {
       this.show(AppContent.Empty)
     }
   }
@@ -315,7 +313,7 @@ export class App extends React.Component<any, State> {
           {this.state.contentState == AppContent.GameLive ?
             <button title="Close Game" className="svg-button close-game"
                     onClick={() => this.closeGame(this.state.activeGameId)}>
-              <img className="svg-icon" src={'resources/x-circled.svg'}/>
+              <img className="svg-icon" src={'resources/x-circled.svg'} alt="Close Game"/>
             </button> : null}
           <Button icon="doc-text" onClick={() => { this.toggleConsole() }} pullRight={true}/>
         </ToolbarActions>
@@ -336,7 +334,7 @@ export class App extends React.Component<any, State> {
                         this.closeGame(t.id)
                         e.stopPropagation()
                       }}>
-                        <img className="svg-icon" src={'resources/x-circled.svg'}/></button></span></NavItem>
+                        <img className="svg-icon" src={'resources/x-circled.svg'} alt={"Close Game"}/></button></span></NavItem>
                 ))}
 
               <NavTitle title="Informationen"/>

src/gui/App.tsx

@@ -8,6 +8,7 @@ import { Logger }                                            from '../api/Logger
 import { MessageContent }                                    from '../api/rules/Message'
 import { AppSettings }                                       from './App'
 import * as ReactDOM                                         from 'react-dom'
+const ipc = require('electron').ipcRenderer
 
 const dialog = remote.dialog
 
@@ -129,7 +130,6 @@ export class Game extends React.Component<{ gameId: number, name: string, isRepl
           }
         })
       } else {
-        const ipc = require('electron').ipcRenderer
         ipc.send('showGameErrorBox', 'Ungültiger Zug', this.props.gameId, 'Der Zug von ' + move.fromField + ' nach ' + move.toField + ' ist ungültig!')
       }
     })
@@ -220,19 +220,17 @@ export class Game extends React.Component<{ gameId: number, name: string, isRepl
   saveReplay() {
     if (!this.props.isReplay) {
       dialog.showSaveDialog(
+        remote.require('browser-window'),
         {
           title:       'Wähle einen Ort zum Speichern des Replays',
           defaultPath: this.props.name + '.xml',
           filters:     [{ name: 'Replay-Dateien', extensions: ['xml'] }],
-        },
-        filename => {
-          // dialog returns undefined when user clicks cancel or an array of strings (paths) if user selected a file
-          if (filename) {
-            console.log('Attempting to save', filename)
-            Api.getGameManager().saveReplayOfGame(this.props.gameId, filename)
-          }
-        },
-      )
+        }).then(result => {
+        if (!result.canceled && result.filePath) {
+          console.log('Attempting to save', result.filePath)
+          Api.getGameManager().saveReplayOfGame(this.props.gameId, result.filePath)
+        }
+      })
     }
   }
 
@@ -252,8 +250,7 @@ export class Game extends React.Component<{ gameId: number, name: string, isRepl
               `Gewinner: ${gameResult.winner.displayName} (${gameResult.winner.color == 'RED' ? 'Rot' : 'Blau'})` :
               'Unentschieden!'}</h2>
             <h5>
-              <button className="green-button" onClick={e => {
-                const ipc = require('electron').ipcRenderer
+              <button className="green-button" onClick={() => {
                 ipc.send('kioskGameOver', this.props.gameId)
               }}>Neues Spiel beginnen
               </button>
@@ -277,8 +274,7 @@ export class Game extends React.Component<{ gameId: number, name: string, isRepl
                    value={turnActive}
                    step="1"
                    onChange={e => this.updateTurn(Number(e.target.value))}/>
-            <button id="close-game" onClick={e => {
-              const ipc = require('electron').ipcRenderer
+            <button id="close-game" onClick={() => {
               ipc.send('kioskGameOver', this.props.gameId)
             }}>Spiel beenden
             </button>