2022-05-10 14:28:00 +00:00
19 changed files with 10128 additions and 6878 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -33,8 +33,8 @@ steps:
    commands:
      - yarn build
    environment:
-      SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8}
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
    when:
      event:
        - push
@ -46,9 +46,9 @@ steps:
    commands:
      - yarn build
    environment:
-      SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST}
+      VITE_SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST}
      OUTDIR: ./dist-pr
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
    when:
      event:
        - pull_request
@ -60,9 +60,9 @@ steps:
    commands:
      - yarn build
    environment:
-      SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}
+      VITE_SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}
      OUTDIR: ./dist-branch
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
    when:
      event:
        - push
@ -143,6 +143,11 @@ volumes:
  - name: cache
    host:
      path: /opt/gitea/drone-cache/hamcha/tghandbook
+
+trigger:
+  event:
+    - push
+    - pull_request
 ---
 kind: signature
-hmac: 55dfd5c47c79e51394c5cdfaa9b98a6f6acd84e751e92964c202ac19b46c0373
+hmac: c7b6e232691aff687451a9f85599852d4af0e3b63198c41116be4e09e7d82e93
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -19,7 +19,9 @@ module.exports = {
    "no-param-reassign": "off",
    "no-alert": "off",
    "no-console": "off",
+    "no-shadow": "off",
    "func-names": "off",
+    "default-param-last": "off",
    "dot-notation": ["error", { allowPattern: "^[A-Z][a-z]+$" }],
    "@typescript-eslint/ban-ts-comment": [
      "error",
@ -27,5 +29,7 @@ module.exports = {
        "ts-expect-error": "allow-with-description",
      },
    ],
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/default-param-last": ["error"],
  },
 };
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,6 @@
 node_modules
 dist
 .cache
+.parcel-cache
 yarn-error.log
+*.ts.js
--- a/18
+++ b/18
@ -1,23 +1,5 @@
-This code is license under ISC, full copy below:
-
 Copyright 2020, Alessandro Gatti

 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
-
-This code uses idb-keyval, licensed under Apache 2:
-
-    Copyright 2016, Jake Archibald
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--- a/README.md
+++ b/README.md
@ -1,11 +1,15 @@
-# /tg/ handbook
+# /tg/station handbook

-[![Build Status](https://drone.zyg.ovh/api/badges/Hamcha/tghandbook/status.svg)](https://drone.zyg.ovh/Hamcha/tghandbook)
+A fancier way to browse the /tg/ wiki. This handbook is a single page application that downloads 20+ pages from the /tg/station wiki (currently using a CORS proxy), adds some fancy filtering and Nanotrasen styling.

-## Building
-
-`yarn build`
+It adapts the pages layout to be narrow as it's meant to be used in a small window, much like a PDA or an in-game book.

 ## Development

-`yarn dev`
+Start hot-reloading server with `npm start`
+
+Build with `npm run build`
+
+## License
+
+The project is licensed under ISC (SPDX identifier). Please see the LICENSE file for details.
--- a/build.js
+++ b/build.js
@ -1,24 +0,0 @@
-/* eslint-disable */
-const Bundler = require("parcel-bundler");
-const Path = require("path");
-
-const entryFiles = Path.join(__dirname, "./index.html");
-
-// Bundler options
-const options = {
-  outDir: process.env.OUTDIR || "./dist",
-  outFile: "index.html",
-  publicUrl: process.env.SUBPATH || "/",
-  watch: false,
-  contentHash: false,
-  scopeHoist: false,
-  target: "browser",
-  logLevel: 3, // 5 = save everything to a file, 4 = like 3, but with timestamps and additionally log http requests to dev server, 3 = log info, warnings & errors, 2 = log warnings & errors, 1 = log errors, 0 = log nothing
-  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (minified builds currently always create sourcemaps)
-  autoInstall: true, // Enable or disable auto install of missing dependencies found during bundling
-};
-
-(async () => {
-  const bundler = new Bundler(entryFiles, options);
-  await bundler.bundle();
-})();
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SUBDIR: string;
+  readonly VITE_APP_REVISION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/index.html
+++ b/index.html
@ -14,31 +14,31 @@

    <link
      rel="apple-touch-icon"
-      href="assets/images/icons-manifest/icon152.png"
+      href="./assets/images/icons-manifest/icon152.png"
    />
-    <link rel="manifest" href="manifest.webmanifest" />
-    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="icon" href="./favicon.ico" type="image/x-icon" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
-      href="assets/images/icons-manifest/icon32.png"
+      href="./assets/images/icons-manifest/icon32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
-      href="assets/images/icons-manifest/icon16.png"
+      href="./assets/images/icons-manifest/icon16.png"
    />
    <link
      rel="preload"
-      href="assets/fonts/iosevka/iosevka-aile.css"
+      href="./assets/fonts/iosevka/iosevka-aile.css"
      as="style"
    />
-    <link rel="preload" href="style/main.scss" as="style" />
-    <link rel="preload" href="src/index.ts" as="script" />
-    <link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
-    <link rel="stylesheet" href="style/main.scss" />
+    <link rel="preload" href="./style/main.scss" as="style" />
+    <link rel="preload" href="./src/index.ts" as="script" />
+    <link rel="stylesheet" href="./assets/fonts/iosevka/iosevka-aile.css" />
+    <link rel="stylesheet" href="./style/main.scss" />
    <title>/tg/station Handbook</title>
  </head>
  <body>
@ -52,8 +52,8 @@
        <div class="page special center" id="Welcome" data-tab="$Welcome">
          <div class="wrapper">
            <header>
-              <img class="icon" src="assets/images/outline.svg" />
-              <img class="type" src="assets/images/type.svg" />
+              <img class="icon" src="./assets/images/outline.svg" />
+              <img class="type" src="./assets/images/type.svg" />
            </header>
            <div class="maxw">
              <p>
@ -79,9 +79,7 @@
              <div class="action_buttons"></div>
            </div>
            <div class="features hidden" data-name="Extra features">
-              <h2>
-                Extra Features
-              </h2>
+              <h2>Extra Features</h2>
              <div class="maxw">
                <h3 class="nobg">Jump to section/item</h3>
                <p>
@ -94,12 +92,12 @@
                </p>
                <div class="images">
                  <img
-                    src="assets/images/welcome/bs-local.png"
-                    style="width: 40%;"
+                    src="./assets/images/welcome/bs-local.png"
+                    style="width: 40%"
                  />
                  <img
-                    src="assets/images/welcome/bs-global.png"
-                    style="width: 40%;"
+                    src="./assets/images/welcome/bs-global.png"
+                    style="width: 40%"
                  />
                </div>
                <p>
@ -122,9 +120,7 @@
              </div>
            </div>
            <div class="credits hidden" data-name="Other infos">
-              <h2>
-                Other Informations
-              </h2>
+              <h2>Other Informations</h2>
              <p>
                Thanks to /tg/station and every wiki contributor who did most of
                the work!
@ -144,9 +140,13 @@
      </section>
    </main>
    <noscript>
-      <h1>NO JS NO PARTY</h1>
-      <h2>JavaScript support is required to run this app.</h2>
+      <h1>JavaScript is required for this tool</h1>
+      <h2>
+        This tools runs completely in your browser, therefore it needs
+        JavaScript to download all the pages, parse them and add all the spicy
+        extras.
+      </h2>
    </noscript>
-    <script src="src/index.ts" async></script>
+    <script src="./src/index.ts" async type="module"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,27 +3,28 @@
  "version": "1.0.0",
  "main": "index.js",
  "license": "ISC",
+  "type": "module",
  "scripts": {
-    "dev": "parcel index.html",
+    "start": "vite",
    "lint": "eslint src",
-    "build": "node ./build.js"
+    "build": "vite build --base=./"
  },
  "dependencies": {
-    "@types/node": "^14.0.13",
+    "@types/node": "^17.0.31",
    "@types/service_worker_api": "^0.0.9",
-    "@typescript-eslint/eslint-plugin": "^3.3.0",
-    "@typescript-eslint/parser": "^3.3.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "2.21.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "idb-keyval": "^3.2.0",
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-sw-cache": "^0.3.1",
-    "prettier": "^2.0.5",
-    "sass": "^1.26.8",
-    "typescript": "^3.9.5"
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "eslint": "8.15.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "idb-keyval": "^6.1.0",
+    "prettier": "^2.6.2",
+    "sass": "^1.51.0",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8",
+    "vite-plugin-pwa": "^0.12.0"
  },
  "browserslist": [
    "last 2 Chrome versions",
--- a/src/cache.ts
+++ b/src/cache.ts
@ -8,6 +8,7 @@ interface CacheEntry<T> {
 export class Store {
  readonly dbp: Promise<IDBDatabase>;

+  // eslint-disable-next-line default-param-last
  constructor(dbName = "tg-cache", readonly storeName = "keyval") {
    this.dbp = new Promise((resolve, reject) => {
      const openreq = indexedDB.open(dbName, 1);
@ -51,8 +52,8 @@ export function get<Type>(
 ): Promise<CacheEntry<Type>> {
  let req: IDBRequest;
  return store
-    .withIDBStore("readonly", (store) => {
-      req = store.get(key);
+    .withIDBStore("readonly", (idbstore) => {
+      req = idbstore.get(key);
    })
    .then(() => req.result);
 }
@ -63,8 +64,8 @@ export function set<Type>(
  version: string,
  store = getDefaultStore()
 ): Promise<void> {
-  return store.withIDBStore("readwrite", (store) => {
-    store.put({ version, value }, key);
+  return store.withIDBStore("readwrite", (idbstore) => {
+    idbstore.put({ version, value }, key);
  });
 }

@ -72,14 +73,14 @@ export function del(
  key: IDBValidKey,
  store = getDefaultStore()
 ): Promise<void> {
-  return store.withIDBStore("readwrite", (store) => {
-    store.delete(key);
+  return store.withIDBStore("readwrite", (idbstore) => {
+    idbstore.delete(key);
  });
 }

 export function clear(store = getDefaultStore()): Promise<void> {
-  return store.withIDBStore("readwrite", (store) => {
-    store.clear();
+  return store.withIDBStore("readwrite", (idbstore) => {
+    idbstore.clear();
  });
 }

@ -87,12 +88,11 @@ export function keys(store = getDefaultStore()): Promise<IDBValidKey[]> {
  const dbkeys: IDBValidKey[] = [];

  return store
-    .withIDBStore("readonly", (store) => {
+    .withIDBStore("readonly", (idbstore) => {
      // This would be store.getAllKeys(), but it isn't supported by Edge or Safari.
      // And openKeyCursor isn't supported by Safari.
-      (store.openKeyCursor || store.openCursor).call(
-        store
-      ).onsuccess = function () {
+      (idbstore.openKeyCursor || idbstore.openCursor).call(idbstore).onsuccess =
+        function () {
          if (!this.result) return;
          dbkeys.push(this.result.key);
          this.result.continue();
--- a/src/index.ts
+++ b/src/index.ts
@ -3,8 +3,7 @@ import sections from "./ui/sections";
 import { nextAnimationFrame } from "./utils";
 import { searchBox } from "./scripts/search";

-// @ts-expect-error: Parcel image import
-import unknown from "~/assets/images/tab-icons/unknown.svg";
+import unknown from "@/assets/images/tab-icons/unknown.svg";
 import { bindFunctions } from "./scripts/index";

 // Enable single page mode for developing scripts
@ -74,7 +73,9 @@ async function load() {
  });
 }
 if ("serviceWorker" in navigator) {
-  const x = process.env.SUBPATH ? `${process.env.SUBPATH}/sw.js` : "sw.js";
+  const x = import.meta.env.VITE_SUBDIR
+    ? `${import.meta.env.VITE_SUBDIR}/sw.js`
+    : "sw.js";
  navigator.serviceWorker
    .register(x)
    .then((registration) => {
@ -94,4 +95,6 @@ document.body.appendChild(searchBox());
 // Add revision info
 document
  .getElementById("tgh-version")
-  .appendChild(document.createTextNode(process.env.REVISION || "unknown"));
+  .appendChild(
+    document.createTextNode(import.meta.env.VITE_APP_REVISION || "unknown")
+  );
--- a/src/scripts/search.ts
+++ b/src/scripts/search.ts
@ -30,8 +30,8 @@ export function searchBox(): HTMLElement {
  const jumpTo = (entry: SearchEntry) => {
    // If page is different jump to that
    if (global) {
-      const currentPage = document.querySelector<HTMLElement>(".page.active")
-        .dataset.tab;
+      const currentPage =
+        document.querySelector<HTMLElement>(".page.active").dataset.tab;
      if (currentPage !== entry.page) {
        TabManager.instance.setActive(entry.page);
      }
@ -193,9 +193,8 @@ export function searchBox(): HTMLElement {
        return;
      default:
        if (sel.value !== oldValue) {
-          const currentPage = document.querySelector<HTMLElement>(
-            ".page.active"
-          );
+          const currentPage =
+            document.querySelector<HTMLElement>(".page.active");
          search(sel.value, currentPage.dataset.tab);
          oldValue = sel.value;
        }
--- a/src/ui/TabManager.ts
+++ b/src/ui/TabManager.ts
@ -1,5 +1,4 @@
-// @ts-expect-error: Asset imports are handled by parcel
-import speen from "~/assets/images/speen.svg";
+import speen from "@/assets/images/speen.svg";
 import { getPageHTML } from "../wiki";
 import {
  processHTML,
@ -10,8 +9,7 @@ import {
 import cache from "../cache";
 import { nextAnimationFrame, delay } from "../utils";

-// @ts-expect-error: Parcel image import
-import unknown from "~/assets/images/tab-icons/unknown.svg";
+import unknown from "@/assets/images/tab-icons/unknown.svg";

 function initWaiting(elem: HTMLElement) {
  // Add spinner
@ -187,9 +185,8 @@ export default class TabManager {
   * @param name Section name
   */
  showSection(name: string): void {
-    const active = this.sectionListContainer.querySelector<HTMLElement>(
-      ".active"
-    );
+    const active =
+      this.sectionListContainer.querySelector<HTMLElement>(".active");
    if (active) {
      // De-activate current section
      active.classList.remove("active");
@ -298,9 +295,8 @@ export default class TabManager {
      .forEach((it) => it.classList.remove("active"));

    // If section is not shown, show it!
-    const isSectionActive = this.sections[section].element.classList.contains(
-      "active"
-    );
+    const isSectionActive =
+      this.sections[section].element.classList.contains("active");
    if (!isSectionActive) {
      this.showSection(section);
    }
--- a/src/ui/sections.ts
+++ b/src/ui/sections.ts
@ -1,107 +1,55 @@
-// @ts-expect-error: Parcel image import
-import chemistry from "~/assets/images/tab-icons/chemistry.svg";
-// @ts-expect-error: Parcel image import
-import medicine from "~/assets/images/tab-icons/medicine.svg";
-// @ts-expect-error: Parcel image import
-import plumbing from "~/assets/images/tab-icons/plumbing.svg";
-// @ts-expect-error: Parcel image import
-import grenade from "~/assets/images/tab-icons/grenade.svg";
-// @ts-expect-error: Parcel image import
-import genetics from "~/assets/images/tab-icons/genetics.svg";
-// @ts-expect-error: Parcel image import
-import virus from "~/assets/images/tab-icons/virus.svg";
-// @ts-expect-error: Parcel image import
-import surgery from "~/assets/images/tab-icons/surgery.svg";
-// @ts-expect-error: Parcel image import
-import trauma from "~/assets/images/tab-icons/trauma.svg";
-// @ts-expect-error: Parcel image import
-import wound from "~/assets/images/tab-icons/wound.svg";
-// @ts-expect-error: Parcel image import
-import ghetto from "~/assets/images/tab-icons/ghetto.svg";
-// @ts-expect-error: Parcel image import
-import construction from "~/assets/images/tab-icons/construction.svg";
-// @ts-expect-error: Parcel image import
-import machines from "~/assets/images/tab-icons/machines.svg";
-// @ts-expect-error: Parcel image import
-import power from "~/assets/images/tab-icons/power.svg";
-// @ts-expect-error: Parcel image import
-import solar from "~/assets/images/tab-icons/solar.svg";
-// @ts-expect-error: Parcel image import
-import supermatter from "~/assets/images/tab-icons/supermatter.svg";
-// @ts-expect-error: Parcel image import
-import shield from "~/assets/images/tab-icons/shield.svg";
-// @ts-expect-error: Parcel image import
-import turbine from "~/assets/images/tab-icons/turbine.svg";
-// @ts-expect-error: Parcel image import
-import atmos from "~/assets/images/tab-icons/atmos.svg";
-// @ts-expect-error: Parcel image import
-import tcomm from "~/assets/images/tab-icons/tcomm.svg";
-// @ts-expect-error: Parcel image import
-import rnd from "~/assets/images/tab-icons/rnd.svg";
-// @ts-expect-error: Parcel image import
-import toxins from "~/assets/images/tab-icons/toxins.svg";
-// @ts-expect-error: Parcel image import
-import xeno from "~/assets/images/tab-icons/xeno.svg";
-// @ts-expect-error: Parcel image import
-import nanites from "~/assets/images/tab-icons/nanites.svg";
-// @ts-expect-error: Parcel image import
-import rules from "~/assets/images/tab-icons/rules.svg";
-// @ts-expect-error: Parcel image import
-import aimod from "~/assets/images/tab-icons/aimod.svg";
-// @ts-expect-error: Parcel image import
-import tips from "~/assets/images/tab-icons/tips.svg";
-// @ts-expect-error: Parcel image import
-import critter from "~/assets/images/tab-icons/critter.svg";
-// @ts-expect-error: Parcel image import
-import races from "~/assets/images/tab-icons/races.svg";
-// @ts-expect-error: Parcel image import
-import food from "~/assets/images/tab-icons/food.svg";
-// @ts-expect-error: Parcel image import
-import hydro from "~/assets/images/tab-icons/hydro.svg";
-// @ts-expect-error: Parcel image import
-import song from "~/assets/images/tab-icons/song.svg";
-// @ts-expect-error: Parcel image import
-import crate from "~/assets/images/tab-icons/crate.svg";
-// @ts-expect-error: Parcel image import
-import space from "~/assets/images/tab-icons/space.svg";
-// @ts-expect-error: Parcel image import
-import aux from "~/assets/images/tab-icons/auxbase.svg";
-// @ts-expect-error: Parcel image import
-import robo from "~/assets/images/tab-icons/robo.svg";
-// @ts-expect-error: Parcel image import
-import security from "~/assets/images/tab-icons/security.svg";
-// @ts-expect-error: Parcel image import
-import law from "~/assets/images/tab-icons/law.svg";
-// @ts-expect-error: Parcel image import
-import sop from "~/assets/images/tab-icons/sop.svg";
-// @ts-expect-error: Parcel image import
-import trial from "~/assets/images/tab-icons/trial.svg";
-// @ts-expect-error: Parcel image import
-import traitor from "~/assets/images/tab-icons/traitor.svg";
-// @ts-expect-error: Parcel image import
-import hacking from "~/assets/images/tab-icons/hacking.svg";
-// @ts-expect-error: Parcel image import
-import weapons from "~/assets/images/tab-icons/weapons.svg";
-// @ts-expect-error: Parcel image import
-import uplink from "~/assets/images/tab-icons/uplink.svg";
-// @ts-expect-error: Parcel image import
-import rev from "~/assets/images/tab-icons/rev.svg";
-// @ts-expect-error: Parcel image import
-import cult from "~/assets/images/tab-icons/cult.svg";
-// @ts-expect-error: Parcel image import
-import nuke from "~/assets/images/tab-icons/nuke.svg";
-// @ts-expect-error: Parcel image import
-import malf from "~/assets/images/tab-icons/malf.svg";
-// @ts-expect-error: Parcel image import
-import combat from "~/assets/images/tab-icons/combat.svg";
-// @ts-expect-error: Parcel image import
-import access from "~/assets/images/tab-icons/access.svg";
-// @ts-expect-error: Parcel image import
-import xmorph from "~/assets/images/tab-icons/xmorph.svg";
-// @ts-expect-error: Parcel image import
-import abduction from "~/assets/images/tab-icons/abduction.svg";
-// @ts-expect-error: Parcel image import
-import mafia from "~/assets/images/tab-icons/mafia.svg";
+import chemistry from "@/assets/images/tab-icons/chemistry.svg";
+import medicine from "@/assets/images/tab-icons/medicine.svg";
+import plumbing from "@/assets/images/tab-icons/plumbing.svg";
+import grenade from "@/assets/images/tab-icons/grenade.svg";
+import genetics from "@/assets/images/tab-icons/genetics.svg";
+import virus from "@/assets/images/tab-icons/virus.svg";
+import surgery from "@/assets/images/tab-icons/surgery.svg";
+import trauma from "@/assets/images/tab-icons/trauma.svg";
+import wound from "@/assets/images/tab-icons/wound.svg";
+import ghetto from "@/assets/images/tab-icons/ghetto.svg";
+import construction from "@/assets/images/tab-icons/construction.svg";
+import machines from "@/assets/images/tab-icons/machines.svg";
+import power from "@/assets/images/tab-icons/power.svg";
+import solar from "@/assets/images/tab-icons/solar.svg";
+import supermatter from "@/assets/images/tab-icons/supermatter.svg";
+import shield from "@/assets/images/tab-icons/shield.svg";
+import turbine from "@/assets/images/tab-icons/turbine.svg";
+import atmos from "@/assets/images/tab-icons/atmos.svg";
+import tcomm from "@/assets/images/tab-icons/tcomm.svg";
+import rnd from "@/assets/images/tab-icons/rnd.svg";
+import toxins from "@/assets/images/tab-icons/toxins.svg";
+import xeno from "@/assets/images/tab-icons/xeno.svg";
+import nanites from "@/assets/images/tab-icons/nanites.svg";
+import rules from "@/assets/images/tab-icons/rules.svg";
+import aimod from "@/assets/images/tab-icons/aimod.svg";
+import tips from "@/assets/images/tab-icons/tips.svg";
+import critter from "@/assets/images/tab-icons/critter.svg";
+import races from "@/assets/images/tab-icons/races.svg";
+import food from "@/assets/images/tab-icons/food.svg";
+import hydro from "@/assets/images/tab-icons/hydro.svg";
+import song from "@/assets/images/tab-icons/song.svg";
+import crate from "@/assets/images/tab-icons/crate.svg";
+import space from "@/assets/images/tab-icons/space.svg";
+import aux from "@/assets/images/tab-icons/auxbase.svg";
+import robo from "@/assets/images/tab-icons/robo.svg";
+import security from "@/assets/images/tab-icons/security.svg";
+import law from "@/assets/images/tab-icons/law.svg";
+import sop from "@/assets/images/tab-icons/sop.svg";
+import trial from "@/assets/images/tab-icons/trial.svg";
+import traitor from "@/assets/images/tab-icons/traitor.svg";
+import hacking from "@/assets/images/tab-icons/hacking.svg";
+import weapons from "@/assets/images/tab-icons/weapons.svg";
+import uplink from "@/assets/images/tab-icons/uplink.svg";
+import rev from "@/assets/images/tab-icons/rev.svg";
+import cult from "@/assets/images/tab-icons/cult.svg";
+import nuke from "@/assets/images/tab-icons/nuke.svg";
+import malf from "@/assets/images/tab-icons/malf.svg";
+import combat from "@/assets/images/tab-icons/combat.svg";
+import access from "@/assets/images/tab-icons/access.svg";
+import xmorph from "@/assets/images/tab-icons/xmorph.svg";
+import abduction from "@/assets/images/tab-icons/abduction.svg";
+import mafia from "@/assets/images/tab-icons/mafia.svg";

 export interface SectionInfo {
  name: string;
--- a/src/utils.ts
+++ b/src/utils.ts
@ -1,5 +1,7 @@
 export function nextAnimationFrame(): Promise<void> {
-  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
 }

 export function delay(ms: number): Promise<void> {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,9 +1,11 @@
 {
  "compilerOptions": {
-    "target": "ES2020",
+    "target": "es2020",
+    "module": "es2020",
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "paths": {
+      "@": ["."],
      "~*": ["./src/*"]
    }
  }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,19 @@
+import path from "path";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+
+export default defineConfig({
+  plugins: [
+    VitePWA({
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "./src"),
+      "@": path.resolve(__dirname),
+    },
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock