Use new template system, use static ForkAwesome

Gruntfile.js

@@ -7,8 +7,11 @@ module.exports = grunt => {
             default: ["dist/"],
         },
         copy: {
+            css: {
+                files: [{expand: true, cwd: "src/main/", src: "**/*.css", dest: "dist/", flatten: true}],
+            },
             html: {
-                files: [{expand: true, cwd: "src/main/", src: "**/*.html", dest: "dist/"}],
+                files: [{expand: true, cwd: "src/main/", src: "**/*.html", dest: "dist/", flatten: true}],
             },
         },
         focus: {
@@ -41,7 +44,7 @@ module.exports = grunt => {
         watch: {
             css: {
                 files: ["src/main/**/*.css"],
-                tasks: ["webpack:dev", "replace:dev"],
+                tasks: ["copy:css"],
             },
             html: {
                 files: ["src/main/**/*.html"],
@@ -66,24 +69,10 @@ module.exports = grunt => {
                             use: "ts-loader",
                             exclude: /node_modules/,
                         },
-                        {
-                            test: /\.css$/i,
-                            use: ["style-loader", "css-loader"],
-                        },
-                        {
-                            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-                            use: [{
-                                loader: "file-loader",
-                                options: {
-                                    name: "[name].[ext]",
-                                    outputPath: "./",
-                                },
-                            }],
-                        },
                     ],
                 },
                 resolve: {
-                    extensions: [".ts", ".css"],
+                    extensions: [".ts"],
                 },
                 output: {
                     filename: "bundle.js",
@@ -111,6 +100,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Copy files
+        "copy:css",
         "copy:html",
         // Compile TS
         "webpack:dev",
@@ -121,6 +111,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Copy files
+        "copy:css",
         "copy:html",
         // Compile TS
         "webpack:deploy",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.82.7",
+    "version": "0.82.8",
     "description": "Just Minesweeper!",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,27 +16,22 @@
         "deploy": "grunt deploy"
     },
     "dependencies": {
-        "@fwdekker/template": "^0.0.24",
         "alea": "^1.0.0",
-        "canvas-confetti": "^1.4.0",
-        "fork-awesome": "^1.1.7"
+        "canvas-confetti": "^1.4.0"
     },
     "devDependencies": {
-        "css-loader": "^5.2.0",
-        "file-loader": "^6.2.0",
         "grunt": "^1.3.0",
-        "grunt-cli": "^1.4.1",
+        "grunt-cli": "^1.4.2",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
-        "grunt-webpack": "^4.0.2",
-        "style-loader": "^2.0.0",
-        "ts-loader": "^8.0.18",
+        "grunt-webpack": "^4.0.3",
+        "ts-loader": "^8.1.0",
         "ts-node": "^9.1.1",
-        "typescript": "^4.2.3",
-        "webpack": "^5.28.0",
-        "webpack-cli": "^4.5.0"
+        "typescript": "^4.2.4",
+        "webpack": "^5.33.2",
+        "webpack-cli": "^4.6.0"
     }
 }

src/main/index.html

@@ -10,14 +10,18 @@
 
     <title>Minesweeper</title>
     <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/fork-awesome.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/1.x.x/bundle.css" crossorigin="anonymous" />
+    <!--suppress HtmlUnknownTarget -->
+    <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
 </head>
 <body>
 <noscript>
-    <span style="color: red; font-weight: bold;">
+    <p style="color: red; font-weight: bold;">
         This website does not function if JavaScript is disabled.
         Please check the <a href="https://www.enable-javascript.com/">
         instructions on how to enable JavaScript in your web browser</a>.
-    </span>
+    </p>
 </noscript>
 <main style="display: none;">
     <div id="nav"></div>
@@ -195,8 +199,7 @@
     </div>
 </main>
 
-
-<!-- Scripts -->
+<script src="https://static.fwdekker.com/lib/template/1.x.x/bundle.js" crossorigin="anonymous"></script>
 <!--suppress HtmlUnknownTarget -->
 <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
 </body>

src/main/js/Game.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import {$} from "@fwdekker/template";
+const {$} = window.fwdekker;
 // @ts-ignore
 import alea from "alea";
 import {blurActiveElement, stringToHash} from "./Common";

src/main/js/Main.ts

@@ -1,7 +1,5 @@
-import "fork-awesome/css/fork-awesome.css";
-import "../css/main.css";
 // @ts-ignore
-import {$, doAfterLoad, footer, header, nav, showPage} from "@fwdekker/template";
+const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
 import {waitForForkAwesome} from "./Common";
 import {BasicIconFont, ForkAwesomeFont} from "./Display";
 import {Game} from "./Game";
@@ -13,11 +11,6 @@ doAfterLoad(() => {
     $("#nav").appendChild(nav("/Tools/Minesweeper/"));
     $("#header").appendChild(header({title: "Minesweeper"}));
     $("#footer").appendChild(footer({
-        author: "Felix W. Dekker",
-        authorURL: "https://fwdekker.com/",
-        license: "MIT License",
-        licenseURL: "https://git.fwdekker.com/FWDekker/minesweeper/src/branch/master/LICENSE",
-        vcs: "git",
         vcsURL: "https://git.fwdekker.com/FWDekker/minesweeper/",
         version: "v%%VERSION_NUMBER%%"
     }));