Overhaul CSS bundling.

package.json

@@ -12,6 +12,8 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@cubing/icons": "^2.1.0-pre.4",
+    "@fontsource/ubuntu": "^5.1.1",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/pouchdb": "^6.4.0",
     "comlink": "^4.4.1",
@@ -25,7 +27,7 @@
     "@biomejs/biome": "^1.9.0",
     "@types/chai": "^4.3.6",
     "@types/mocha": "^10.0.1",
-    "barely-a-dev-server": "^0.6.0",
+    "barely-a-dev-server": "^0.7.0",
     "chai": "^4.3.8",
     "esbuild": "^0.19.3",
     "lib": "^5.1.0",

script/build.ts

@@ -6,6 +6,7 @@ barelyServe({
   dev: false,
   entryRoot: "src/timer.cubing.net",
   outDir: "dist/timer.cubing.net",
+  bundleCSS: true,
   esbuildOptions: {
     external: ["crypto"],
     loader: { ".svg": "copy", ".ico": "copy" },
@@ -27,7 +28,7 @@ await new Promise((resolve) => setTimeout(resolve, 1000));
 
 await injectManifest({
   globDirectory: "dist/timer.cubing.net/",
-  globPatterns: ["**/*.{js,ico,html,png,css,ttf,txt,svg}"],
+  globPatterns: ["**/*.{js,ico,html,png,css,ttf,woff,woff2,txt,svg}"],
   swDest: "dist/timer.cubing.net/sw.js",
   swSrc: "dist/timer.cubing.net/sw.js",
 });

script/dev.ts

@@ -4,9 +4,16 @@ barelyServe({
   entryRoot: "src/timer.cubing.net",
   devDomain: "timer.localhost",
   port: 3334,
+  bundleCSS: true,
   esbuildOptions: {
     external: ["crypto"],
-    loader: { ".svg": "copy", ".ico": "copy" },
+    loader: {
+      ".svg": "copy",
+      ".ttf": "copy",
+      ".woff": "copy",
+      ".woff2": "copy",
+      ".ico": "copy",
+    },
     banner: {
       js: "globalThis.global = globalThis; // Workaround for a `pouch-db` dep. 😕\n",
     },

src/timer.cubing.net/ui/ScrambleView.ts

@@ -56,8 +56,17 @@ export class ScrambleView {
   setEvent(eventID: EventID) {
     removeClassesStartingWith(this.scrambleText, "event-");
     this.scrambleText.classList.add(`event-${eventID}`);
-    removeClassesStartingWith(this.cubingIcon, "icon-");
-    this.cubingIcon.classList.add(`icon-${eventID}`);
+
+    const iconEventID =
+      {
+        master_tetraminx: "mtetram", // TOOD
+        redi_cube: "redi", // TOOD
+        baby_fto: "pyramorphix", // similar image for now
+      }[eventID] ?? eventID;
+    removeClassesStartingWith(this.cubingIcon, "event-");
+    removeClassesStartingWith(this.cubingIcon, "unofficial-");
+    this.cubingIcon.classList.add(`event-${iconEventID}`);
+    this.cubingIcon.classList.add(`unofficial-${iconEventID}`);
     if (
       this.eventSelectDropdown.value !== eventID &&
       this.optionElementsByEventID[eventID]

src/timer.cubing.net/ui/style.css

@@ -1,3 +1,6 @@
+@import "@cubing/icons/css";
+@import "@fontsource/ubuntu";
+
 @font-face {
   font-family: digital-7-mono;
   src: url("../resources/vendor/fonts/digital-7/digital-7-mono.ttf")
@@ -10,11 +13,6 @@
     format("truetype");
 }
 
-@font-face {
-  font-family: "Ubuntu";
-  src: url("../resources/vendor/fonts/ubuntu/Ubuntu-Regular.ttf");
-}
-
 * {
   box-sizing: border-box;
   --main-text-size: min(max(min(5vh, 2.5rem), 1vw), 4vh);