First crack at hot reloading

.gitignore

@@ -2,5 +2,5 @@ node_modules
 out
 .DS_store
 src/dist
-*.css
-.sass-cache
+.sass-cache
+.webpack

package.json

@@ -3,7 +3,7 @@
   "productName": "illthorn",
   "version": "1.0.0",
   "description": "modern front-end for Gemstone IV",
-  "main": "./src/main.js",
+  "main": ".webpack/main",
   "scripts": {
     "dev": "sass --watch src/app/styles/:src/dist",
     "start": "ENV=dev electron-forge start",
@@ -49,10 +49,32 @@
             "icon": "build/icons/64x64.png"
           }
         }
+      ],
+      "plugins": [
+        [
+          "@electron-forge/plugin-webpack",
+          {
+            "mainConfig": "./webpack.main.config.js",
+            "renderer": {
+              "config": "./webpack.renderer.config.js",
+              "entryPoints": [
+                {
+                  "html": "./src/index.html",
+                  "js": "./src/renderer.js",
+                  "name": "main_window"
+                }
+              ]
+            }
+          }
+        ]
       ]
     }
   },
   "dependencies": {
+    "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/runtime": "^7.11.2",
+    "babel-loader": "^8.1.0",
     "debug": "^4.1.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^4.0.0",
@@ -62,19 +84,41 @@
     "mark.js": "^8.11.1",
     "mithril": "^1.1.6",
     "ps-list": "^6.3.0",
-    "sass": "^1.26.10"
+    "sass": "^1.26.10",
+    "sass-loader": "^10.0.1",
+    "webpack": "^4.44.1"
   },
   "devDependencies": {
-    "@electron-forge/cli": "6.0.0-beta.39",
-    "@electron-forge/maker-deb": "6.0.0-beta.39",
-    "@electron-forge/maker-rpm": "6.0.0-beta.39",
-    "@electron-forge/maker-squirrel": "6.0.0-beta.39",
-    "@electron-forge/maker-zip": "6.0.0-beta.39",
-    "@electron-forge/plugin-webpack": "^6.0.0-beta.39",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@electron-forge/cli": "6.0.0-beta.52",
+    "@electron-forge/maker-deb": "6.0.0-beta.52",
+    "@electron-forge/maker-rpm": "6.0.0-beta.52",
+    "@electron-forge/maker-squirrel": "6.0.0-beta.52",
+    "@electron-forge/maker-zip": "6.0.0-beta.52",
+    "@electron-forge/plugin-webpack": "^6.0.0-beta.52",
+    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
+    "css-loader": "^3.0.0",
     "electron": "5.0.6",
+    "file-loader": "^6.0.0",
     "husky": "^4.2.5",
+    "node-loader": "^0.6.0",
     "prettier": "2.0.5",
     "pretty-quick": "^2.0.1",
-    "typescript": "^3.5.3"
+    "style-loader": "^0.23.1"
+  },
+  "babel": {
+    "sourceType": "unambiguous",
+    "presets": [
+      "@babel/preset-env"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      [
+        "@babel/plugin-transform-runtime",
+        {
+          "regenerator": true
+        }
+      ]
+    ]
   }
 }

src/app/styles/_cli.scss

@@ -52,8 +52,7 @@ button.ui-help-button {
   background-color: rgba(white, 0.33);
   width: 22px;
   height: 22px;
-  -webkit-mask: url(../app/svg/icon-help.svg) no-repeat 50%
-    50%;
+  -webkit-mask: url(../svg/icon-help.svg) no-repeat 50% 50%;
   -webkit-mask-size: contain;
 }
 button.ui-help-button:hover {

src/app/styles/_hands.scss

@@ -17,13 +17,12 @@
   display: flex;
   align-items: center;
   text-align: left;
-  font-weight: bold;
   &::before {
     content: "";
     display: inline-block;
     height: var(--icon-size, 1em);
     width: var(--icon-size, 1em);
-    -webkit-mask: url(../app/svg/hand.svg) no-repeat 50% 50%;
+    -webkit-mask: url(../svg/hand.svg) no-repeat 50% 50%;
     -webkit-mask-size: cover;
     margin-right: 1em;
     background-color: var(--text-color);
@@ -32,7 +31,6 @@
 
 .hand#spell {
   &::before {
-    -webkit-mask: url(../app/svg/magic.svg) no-repeat 50%
-      50%;
+    -webkit-mask: url(../svg/magic.svg) no-repeat 50% 50%;
   }
 }

src/app/styles/_typography.scss

@@ -1,39 +1,40 @@
 @font-face {
   font-family: "MonoLisa";
   font-weight: 400;
-  src: url("../app/fonts/MonoLisa/MonoLisa-Regular.woff2")
+  src: url("../fonts/MonoLisa/MonoLisa-Regular.woff2")
     format("woff2");
 }
 @font-face {
   font-family: "MonoLisa";
   font-weight: 700;
-  src: url("../app/fonts/MonoLisa/MonoLisa-Bold.woff2")
+  src: url("../fonts/MonoLisa/MonoLisa-Bold.woff2")
     format("woff2");
 }
 @font-face {
   font-family: "MonoLisa";
   font-weight: 400;
   font-style: italic;
-  src: url("../app/fonts/MonoLisa/MonoLisa-RegularItalic.woff2")
+  src: url("../fonts/MonoLisa/MonoLisa-RegularItalic.woff2")
     format("woff2");
 }
 @font-face {
   font-family: "MonoLisa";
   font-weight: 700;
   font-style: italic;
-  src: url("../app/fonts/MonoLisa/MonoLisa-BoldItalic.woff2")
+  src: url("../fonts/MonoLisa/MonoLisa-BoldItalic.woff2")
     format("woff2");
 }
 
 @font-face {
   font-family: "DutchMediaeval";
   font-weight: 400;
-  src: url("../app/fonts/DutchMediaeval/DutchMediaeval/font.woff2")
+  src: url("../fonts/DutchMediaeval/DutchMediaeval/font.woff2")
     format("woff2");
 }
 @font-face {
   font-family: "DutchMediaevalBook-Bold";
-  src: url("../app/fonts/DutchMediaeval/DutchMediaevalBook-Bold/font.woff2")
+  font-weight: 700;
+  src: url("../fonts/DutchMediaeval/DutchMediaevalBook-Bold/font.woff2")
     format("woff2");
 }
 

src/app/styles/themes/dark-king.scss

@@ -32,6 +32,7 @@ $red: #d64e4e;
 // Global
 body {
   font-family: "DutchMediaeval", serif;
+  font-weight: 400;
 }
 
 #sessions,

src/hilites/index.js

@@ -61,7 +61,7 @@ module.exports = class Hilites {
     ]))
   }
 
-  static _CACHE = Hilites.reload()
+  static _CACHE = this.reload()
 
   static get() {
     return Hilites._CACHE

src/index.html

@@ -3,11 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title>Illthorn</title>
-    <link
-      href="./dist/app.css"
-      type="text/css"
-      rel="stylesheet"
-    />
   </head>
   <body class="loading">
     <div id="flash-container"></div>
@@ -31,6 +26,7 @@
       </div>
     </div>
   </body>
+
   <script>
     document.addEventListener("keydown", function (e) {
       if (e.which === 123) {
@@ -42,5 +38,4 @@
       }
     })
   </script>
-  <script src="./renderer.js"></script>
 </html>

src/main.js

@@ -30,6 +30,7 @@ const createWindow = () => {
     webPreferences: {
       nodeIntegration: true,
       nodeIntegrationInWorker: true,
+      webSecurity: false,
     },
     titleBarStyle: "hidden",
     icon: "/src/app/png/64x64.png",
@@ -39,7 +40,7 @@ const createWindow = () => {
   mainWindow.show()
 
   // and load the index.html of the app.
-  mainWindow.loadURL(`file://${__dirname}/index.html`)
+  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
 
   // Open the DevTools.
   if (process.env.ENV == "dev")

src/renderer.js

@@ -1,3 +1,6 @@
+import "./app/styles/app.scss"
+import "./app/styles/themes/dark-king.scss"
+
 const m = require("mithril")
 const UI = require("./app/ui")
 const Bus = require("./bus")

src/storage/theme.js

@@ -5,10 +5,12 @@ exports.changeTheme = async function (data) {
     return Promise.reject({ err: "invalid-theme" })
   }
 
-  return await exports.upsertCSS(
-    "#theme-stylesheet",
-    `./dist/themes/${data.theme}.css`
-  )
+  // TODO: Implement theme switching
+
+  // return await exports.upsertCSS(
+  //   "#theme-stylesheet",
+  //   `./dist/themes/${data.theme}.css`
+  // )
 }
 
 exports.upsertCSS = function (id, fileName) {

webpack.main.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  /**
+   * This is the main entry point for your application, it's the first file
+   * that runs in the main process.
+   */
+  entry: "./src/main.js",
+  // Put your normal webpack config below here
+  module: {
+    rules: require("./webpack.rules"),
+  },
+}

webpack.renderer.config.js

@@ -0,0 +1,17 @@
+const rules = require("./webpack.rules")
+
+rules.push({
+  test: /\.scss$/,
+  use: [
+    { loader: "style-loader" },
+    { loader: "css-loader" },
+    { loader: "sass-loader" },
+  ],
+})
+
+module.exports = {
+  // Put your normal webpack config below here
+  module: {
+    rules,
+  },
+}