Load fonts

dev-env/quick-versus.json

@@ -1,6 +1,16 @@
 {
   "frame": true,
   "characterColumns": 3,
+  "sound": {
+    "volume": 30,
+    "background": "sound/title.mp3",
+    "selectCharacter": "sound/confirm.wav",
+    "selectStyle": "sound/confirm.wav",
+    "selectColor": "sound/confirm.wav",
+    "selectAILevel": "sound/confirm.wav",
+    "moveCursor": "sound/move-cursor.wav",
+    "cancel": "sound/cancel.wav"
+},
   "categories": [
     {
       "name": "Capcom",

index.js

@@ -86,15 +86,19 @@ function createWindow() {
   });
   window.loadFile("build/index.html");
   //window.webContents.openDevTools();
+
+  return window;
 }
 
 app.on("window-all-closed", () => {
   app.quit();
 });
 
 
-async function executeFile (event, filePath, args, options, callback) {
-  execFile(filePath, args, options, callback);
+async function executeFile (event, filePath, args, options) {
+  execFile(filePath, args, options, () => {
+    event.returnValue = true;
+  });
 }
 
 function getConfigYaml(event, filePath) {
@@ -117,18 +121,6 @@ function dirname(event, filePath) {
   event.returnValue = path.dirname(filePath);
 }
 
-async function minimize() {
-  app.getCurrentWindow().minimize();
-}
-
-async function minimize() {
-  app.getCurrentWindow().minimize();
-}
-
-async function restore() {
-  app.getCurrentWindow().restore();
-}
-
 function getCurrentDirectoryExported(event) {
   event.returnValue = getCurrentDirectory();
 }
@@ -142,8 +134,8 @@ async function start() {
   ipcMain.on("dirname", dirname);
   ipcMain.on("configYaml", getConfigYaml);
   ipcMain.on("getCurrentDirectory", getCurrentDirectoryExported);
-  ipcMain.handle("minimize", minimize);
-  ipcMain.handle("restore", restore);
-  createWindow();
+  const window = createWindow();
+  ipcMain.handle("minimize", () => window.minimize());
+  ipcMain.handle("restore", () => window.restore());
 }
 start();

preload.js

@@ -1,7 +1,7 @@
 const { contextBridge, ipcRenderer } = require("electron/renderer");
 
 contextBridge.exposeInMainWorld("mainAPI", {
-  execFile: (filePath, args, options, callback) => ipcRenderer.invoke("execFile", filePath, args, options, callback),
+  execFile: async (filePath, args, options) => ipcRenderer.send("execFile", filePath, args, options),
   existsSync: (filePath) => ipcRenderer.sendSync("existsSync", filePath),
   readFileSync: (filePath) => ipcRenderer.sendSync("readFileSync", filePath),
   resolve: (...args) => ipcRenderer.sendSync("resolve", args),

src/fight/fight.presenter.jsx

@@ -64,13 +64,12 @@ export default function Fight() {
       options,
       {
         cwd: environment.currentDirectory
-      },
-      () => {
-        dispatch(endFight());
-        backgroundSound.play();
-        mainAPI.restore();
       }
-    );
+    ).then(() => {
+      dispatch(endFight());
+      backgroundSound.play();
+      mainAPI.restore();
+    });
     console.log(environment.mugenPath, options);
 
     return <BlackScreen>Fighting ...</BlackScreen>;

src/style.css

@@ -1,2 +1,64 @@
-@import "style/fonts.css";
-@import "style/window.css";
+@font-face {
+  font-family: "BadaBoom";
+  src: url("./fonts/BadaBoom BB.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Ubuntu";
+  src: url("./fonts/Ubuntu Title.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Gobold";
+  src: url("./fonts/Gobold High Thin.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: #333;
+  cursor: none;
+  overflow: hidden;
+  user-select: none;
+  transform: translateZ(0);
+}
+
+#root {
+  z-index: 2;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-loading {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-family: BadaBoom;
+  font-size: 3rem;
+  letter-spacing: 0.1em;
+}
+

webpack.config.js

@@ -1,6 +1,5 @@
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = (env, { mode = "development" }) => {
   process.env.NODE_ENV = mode;
@@ -22,19 +21,17 @@ module.exports = (env, { mode = "development" }) => {
         patterns:
           [
             { from: "src/index.html", to: "index.html" },
+            { from: "src/style.css", to: "style.css" },
             { from: "src/assets/icon.png", to: "icon.png" },
             { from: "src/assets/background.jpg", to: "assets/background.jpg" }
           ]
-      }),
-      new MiniCssExtractPlugin({
-        filename: "style.css"
       })
     ],
     module: {
       rules: [
         {
           test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
+          use: ["css-loader"]
         },
         {
           test: /\.(jpg|png|wav)$/,