Set up a working build environment

Makefile

@@ -49,3 +49,13 @@ kifu-gtk:
 
 kifu-gtk/dev:
 	cd kifu/kifu-gtk && make dev
+
+kifu-pwa:
+	cd kifu/kifu-pwa && make release
+
+kifu-pwa/dev:
+	# pushd kifu/ffi/wasm && make && popd
+	pushd kifu/kifu-pwa && make dev
+
+kifu-pwa/test-server:
+	pushd kifu/kifu-pwa && make test-server

kifu/kifu-pwa/Makefile

@@ -0,0 +1,6 @@
+
+dev:
+	npm run build
+
+test-server:
+	npx http-server ./dist

kifu/kifu-pwa/converter.js

@@ -1,51 +0,0 @@
-import init, { CoreApp } from "./kifu_wasm.js";
-
-const inputField = document.getElementById('input-temp');
-const fromUnitField = document.getElementById('input-unit');
-const toUnitField = document.getElementById('output-unit');
-const outputField = document.getElementById('output-temp');
-const form = document.getElementById('converter');
-
-function convertTemp(value, fromUnit, toUnit) {
-    if (fromUnit === 'c') {
-        if (toUnit === 'f') {
-            return value * 9 / 5 + 32;
-        } else if (toUnit === 'k') {
-            return value + 273.15;
-        }
-        return value
-    }
-    if (fromUnit === 'f') {
-        if (toUnit === 'c') {
-            return (value - 32) * 5 / 9;
-        } else if (toUnit === 'k') {
-            return (value + 459.67) * 5 / 9;
-        }
-        return value;
-    }
-    if (fromUnit === 'k') {
-        if (toUnit === 'c') {
-            return value - 273.15;
-        } else if (toUnit === 'f') {
-            return value * 9 / 5 - 459.67;
-        }
-        return value;
-    }
-    throw new Error('Invalid unit');
-}
-
-form.addEventListener('input', () => {
-    const inputTemp = parseFloat(inputField.value);
-    const fromUnit = fromUnitField.value;
-    const toUnit = toUnitField.value;
-
-    const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
-    outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
-});
-
-init().then(async () => { 
-    let app = new CoreApp();
-    console.log("app: ", app, CoreApp);
-    await app.dispatch({ type: "PlayingField" });
-    console.log("kifu_wasm successfully initted");
-});

kifu/kifu-pwa/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "kifu-pwa",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "author": "Savanni D'Gerinel <savanni@luminescent-dreams.com>",
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "@types/lodash": "^4.14.194",
+    "copy-webpack-plugin": "^11.0.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "webpack": "^5.82.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}

kifu/kifu-pwa/src/converter.ts

@@ -0,0 +1,54 @@
+// import init, { CoreApp } from "./kifu_wasm.js";
+
+const inputField = document.getElementById("input-temp");
+const fromUnitField = document.getElementById("input-unit");
+const toUnitField = document.getElementById("output-unit");
+const outputField = document.getElementById("output-temp");
+const form = document.getElementById("converter");
+
+function convertTemp(value, fromUnit, toUnit) {
+  if (fromUnit === "c") {
+    if (toUnit === "f") {
+      return (value * 9) / 5 + 32;
+    } else if (toUnit === "k") {
+      return value + 273.15;
+    }
+    return value;
+  }
+  if (fromUnit === "f") {
+    if (toUnit === "c") {
+      return ((value - 32) * 5) / 9;
+    } else if (toUnit === "k") {
+      return ((value + 459.67) * 5) / 9;
+    }
+    return value;
+  }
+  if (fromUnit === "k") {
+    if (toUnit === "c") {
+      return value - 273.15;
+    } else if (toUnit === "f") {
+      return (value * 9) / 5 - 459.67;
+    }
+    return value;
+  }
+  throw new Error("Invalid unit");
+}
+
+form.addEventListener("input", () => {
+  const inputTemp = parseFloat(inputField.value);
+  const fromUnit = fromUnitField.value;
+  const toUnit = toUnitField.value;
+
+  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
+  outputField.value =
+    Math.round(outputTemp * 100) / 100 + " " + toUnit.toUpperCase();
+});
+
+/*
+init().then(async () => { 
+    let app = new CoreApp();
+    console.log("app: ", app, CoreApp);
+    await app.dispatch({ type: "PlayingField" });
+    console.log("kifu_wasm successfully initted");
+});
+*/

kifu/kifu-pwa/src/sw.js

@@ -5,10 +5,10 @@ self.addEventListener('install', event => {
         const cache = await caches.open(CACHE_NAME);
         cache.addAll([
             '/',
-            '/converter.js',
+            '/kifu-bundle.js',
             '/converter.css',
-            '/kifu_wasm.js',
+            // '/kifu_wasm.js',
-            '/kifu_wasm_bg.wasm',
+            // '/kifu_wasm_bg.wasm',
         ]);
     })());
 });

kifu/kifu-pwa/webpack.config.js

@@ -0,0 +1,23 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+    mode: "development",
+    entry: {
+        "kifu-bundle": "./src/converter.ts",
+        sw: "./src/sw.js",
+    },
+    loader: {
+        rules:  [
+            { test: /.ts$/, use: "ts-loader", exclude: /node_modules/ },
+            { test: /\.wasm$/, type: "asset/inline" }
+        ],
+    },
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: "src/index.html" },
+                { from: "src/converter.css" }
+            ]
+        })
+    ]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "es2016",
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitAny": true,
+        "skipLibCheck": true
+    }
+}