Upgrade node to 22, bundle with vite

Updated docker compose for --watch usage

.github/workflows/linter.yml

@@ -2,9 +2,9 @@ name: Lint Code Base
 
 on:
   push:
-    branches: [ main, develop ]
+    branches: [main, develop]
   pull_request:
-    branches: [ main, develop ]
+    branches: [main, develop]
 
 jobs:
   build:
@@ -14,7 +14,7 @@ jobs:
       - name: Setup node version
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "18"
       - uses: actions/checkout@v4
       - run: npm install
-      - run: npm run lint-ci
+      - run: npm run lint-check

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 
 
+### Version 3.23.0
+
+- Upgraded from node 18 to node 22
+- Replaced vue-cli with Vite
+- Set up for docker watch
+
 ### Version 3.22.0
 
 - Official abilities rebalances :

Dockerfile

@@ -1,11 +1,9 @@
-FROM node:18
+FROM node:22
 RUN apt update && apt install -y\
     git\
     && apt clean
 WORKDIR /app/townsquare
-COPY package*.json .
-RUN npm rebuild
-RUN npm clean-install
-# npm rebuild avoids having misconfigurations if npm install has been run in the folder from windows before building the docker image
 COPY . .
-CMD ["npm","run","serve"]
+RUN npm rebuild && npm clean-install
+EXPOSE 5173 8079
+CMD ["npm","run","dev"]

eslint.config.js

@@ -2,10 +2,16 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2022: true,
+    browser: true,
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/prettier"
+  ],
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? 1 : 0,

index.html

@@ -8,22 +8,22 @@
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>Blood on the Clocktower Town Square</title>
-  <link rel="apple-touch-icon" sizes="57x57" href="static/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="static/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="static/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="static/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="static/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="static/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="static/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="static/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="static/apple-icon-180x180.png">
-  <link rel="icon" type="image/png" sizes="192x192"  href="static/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="static/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
-  <link rel="manifest" href="static/manifest.json">
+  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/manifest.json">
   <meta name="msapplication-TileColor" content="#000000">
-  <meta name="msapplication-TileImage" content="/static/ms-icon-144x144.png">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
   <meta name="theme-color" content="#ff0000">
   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
   <meta name="description" content="A free, virtual Blood on the Clocktower Town Square and Grimoire to help you run (online) games both as a storyteller and player. Batteries included!">
@@ -41,5 +41,6 @@
 </head>
 <body>
 <div id="app"></div>
+<script type="module" src="./src/main.js"></script>
 </body>
 </html>

package.json

@@ -1,36 +1,36 @@
 {
   "name": "townsquare",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "description": "Blood on the Clocktower Town Square",
   "author": "Pingumaskt",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build ./src/main.js",
-    "lint": "vue-cli-service lint",
-    "lint-ci": "vue-cli-service lint --no-fix --max-warnings=0"
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint src --fix",
+    "lint-check": "eslint src --no-fix --max-warnings=0"
   },
+  "type": "module",
   "main": "App.vue",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "^0.1.10",
-    "@vue/cli-service": "^5.0.8",
-    "prom-client": "^13.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/vue-fontawesome": "^2.0.10",
+    "@vitejs/plugin-vue2": "^2.3.3",
+    "vite": "^6.0.3",
     "vue": "^2.7.16",
     "vue-template-compiler": "^2.7.15",
     "vuex": "^3.6.2",
-    "ws": "^7.4.6"
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.18.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.32.0",
     "prettier": "^3.0.3",
-    "sass": "^1.82.0",
-    "sass-loader": "^16.0.4"
+    "sass": "^1.82.0"
   },
   "keywords": [
     "botc",
@@ -44,6 +44,6 @@
     "url": "https://github.com//bra1n/townsquare.git"
   },
   "engines": {
-    "node": "^18"
+    "node": "^22"
   }
 }

src/App.vue

@@ -43,20 +43,20 @@
 <script>
 import { mapState } from "vuex";
 import app from "../package.json";
-import TownSquare from "./components/TownSquare";
-import TownInfo from "./components/TownInfo";
-import Menu from "./components/Menu";
-import RolesModal from "./components/modals/RolesModal";
-import EditionModal from "./components/modals/EditionModal";
-import Intro from "./components/Intro";
-import ReferenceModal from "./components/modals/ReferenceModal";
-import Vote from "./components/Vote";
-import Gradients from "./components/Gradients";
-import NightOrderModal from "./components/modals/NightOrderModal";
-import FabledModal from "@/components/modals/FabledModal";
-import VoteHistoryModal from "@/components/modals/VoteHistoryModal";
-import GameStateModal from "@/components/modals/GameStateModal";
-import SpecialVoteModal from "@/components/modals/SpecialVoteModal";
+import TownSquare from "./components/TownSquare.vue";
+import TownInfo from "./components/TownInfo.vue";
+import Menu from "./components/Menu.vue";
+import RolesModal from "./components/modals/RolesModal.vue";
+import EditionModal from "./components/modals/EditionModal.vue";
+import Intro from "./components/Intro.vue";
+import ReferenceModal from "./components/modals/ReferenceModal.vue";
+import Vote from "./components/Vote.vue";
+import Gradients from "./components/Gradients.vue";
+import NightOrderModal from "./components/modals/NightOrderModal.vue";
+import FabledModal from "./components/modals/FabledModal.vue";
+import VoteHistoryModal from "./components/modals/VoteHistoryModal.vue";
+import GameStateModal from "./components/modals/GameStateModal.vue";
+import SpecialVoteModal from "./components/modals/SpecialVoteModal.vue";
 
 export default {
   components: {

src/components/Intro.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="intro">
-    <img src="static/apple-icon.png" alt="" class="logo" />
+    <img src="../../public/apple-icon.png" alt="" class="logo" />
     <div>
       {{ locale.intro.header }}
       <span class="button" @click="toggleMenu">

src/components/Player.vue

@@ -242,11 +242,7 @@
             backgroundImage: `url(${
               reminder.image && grimoire.isImageOptIn
                 ? reminder.image
-                : require(
-                    '../assets/icons/' +
-                      (reminder.imageAlt || reminder.role) +
-                      '.png',
-                  )
+                : rolePath(reminder.role)
             })`,
           }"
         ></span>
@@ -261,7 +257,7 @@
 </template>
 
 <script>
-import Token from "./Token";
+import Token from "./Token.vue";
 import { mapGetters, mapState } from "vuex";
 
 export default {
@@ -356,6 +352,12 @@ export default {
       reminders.splice(this.player.reminders.indexOf(reminder), 1);
       this.updatePlayer("reminders", reminders, true);
     },
+    rolePath(role) {
+      return new URL(
+        `../assets/icons/${role.imageAlt || role.id}.png`,
+        import.meta.url,
+      ).href;
+    },
     updatePlayer(property, value, closeMenu = false) {
       if (
         this.session.isSpectator &&

src/components/Token.vue

@@ -5,9 +5,7 @@
       v-if="role.id"
       :style="{
         backgroundImage: `url(${
-          role.image && grimoire.isImageOptIn
-            ? role.image
-            : require('../assets/icons/' + (role.imageAlt || role.id) + '.png')
+          role.image && grimoire.isImageOptIn ? role.image : rolePath
         })`,
       }"
     ></span>
@@ -64,6 +62,12 @@ export default {
         (this.role.remindersGlobal || []).length
       );
     },
+    rolePath() {
+      return new URL(
+        `../assets/icons/${this.role.imageAlt || this.role.id}.png`,
+        import.meta.url,
+      ).href;
+    },
     ...mapState(["grimoire"]),
   },
   data() {

src/components/TownInfo.vue

@@ -5,9 +5,7 @@
       :class="['edition-' + edition.id]"
       :style="{
         backgroundImage: `url(${
-          edition.logo && grimoire.isImageOptIn
-            ? edition.logo
-            : require('../assets/logos/' + edition.id + '.png')
+          edition.logo && grimoire.isImageOptIn ? edition.logo : logoPath
         })`,
       }"
     ></li>
@@ -102,15 +100,16 @@
 </template>
 
 <script>
-import gameJSON from "./../game";
+import gameJSON from "../game.json";
 import { mapState } from "vuex";
-import Countdown from "./Countdown";
+import Countdown from "./Countdown.vue";
 
 export default {
   components: {
     Countdown,
   },
   computed: {
+    logoPath: () => `../assets/logos/${this?.edition?.id ?? "custom"}.png`,
     teams: function () {
       const { players } = this.$store.state.players;
       const nonTravelers = this.$store.getters["players/nonTravelers"];

src/components/TownSquare.vue

@@ -192,10 +192,10 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import Player from "./Player";
-import Token from "./Token";
-import ReminderModal from "./modals/ReminderModal";
-import RoleModal from "./modals/RoleModal";
+import Player from "./Player.vue";
+import Token from "./Token.vue";
+import ReminderModal from "./modals/ReminderModal.vue";
+import RoleModal from "./modals/RoleModal.vue";
 
 export default {
   components: {

src/components/Vote.vue

@@ -169,7 +169,7 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import Countdown from "./Countdown";
+import Countdown from "./Countdown.vue";
 
 export default {
   components: {

src/components/modals/EditionModal.vue

@@ -42,9 +42,7 @@
             class="edition"
             :class="['edition-' + edition.id]"
             :style="{
-              backgroundImage: `url(${require(
-                '../../assets/logos/' + edition.id + '.png',
-              )})`,
+              backgroundImage: `url(${editionPath(edition)})`,
             }"
             :key="edition.id"
             @click="runEdition(edition)"
@@ -158,9 +156,9 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { rolesJSON } from "../../store/modules/locale";
-import Token from "../Token";
+import Token from "../Token.vue";
 
 export default {
   components: {
@@ -186,8 +184,7 @@ export default {
   methods: {
     initPool() {
       console.log("init pool");
-      console.table(this.roles);
-      this.draftPool = rolesJSON;
+      this.draftPool = rolesJSON.default;
       this.resetBuilt();
       for (let [role] of this.roles) {
         this.toggleRole(role);
@@ -327,6 +324,10 @@ export default {
       // The editions contain no Fabled
       this.$store.commit("players/setFabled", { fabled: [] });
     },
+    editionPath(edition) {
+      return new URL(`../../assets/logos/${edition.id}.png`, import.meta.url)
+        .href;
+    },
     ...mapMutations(["toggleModal", "setEdition"]),
   },
 };

src/components/modals/FabledModal.vue

@@ -11,8 +11,8 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
-import Modal from "./Modal";
-import Token from "../Token";
+import Modal from "./Modal.vue";
+import Token from "../Token.vue";
 
 export default {
   components: { Token, Modal },

src/components/modals/GameStateModal.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { mapMutations, mapState } from "vuex";
 
 export default {

src/components/modals/NightOrderModal.vue

@@ -56,11 +56,7 @@
               backgroundImage: `url(${
                 role.image && grimoire.isImageOptIn
                   ? role.image
-                  : require(
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
+                  : rolePath(role)
               })`,
             }"
           ></span>
@@ -83,11 +79,7 @@
               backgroundImage: `url(${
                 role.image && grimoire.isImageOptIn
                   ? role.image
-                  : require(
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
+                  : rolePath(role)
               })`,
             }"
           ></span>
@@ -127,7 +119,7 @@
 </template>
 
 <script>
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { mapMutations, mapState } from "vuex";
 
 export default {
@@ -274,6 +266,12 @@ export default {
     ...mapState("players", ["players", "fabled"]),
   },
   methods: {
+    rolePath(role) {
+      return new URL(
+        `../../assets/icons/${role.imageAlt || role.id}.png`,
+        import.meta.url,
+      ).href;
+    },
     ...mapMutations(["toggleModal"]),
   },
 };

src/components/modals/ReferenceModal.vue

@@ -32,11 +32,7 @@
               backgroundImage: `url(${
                 role.image && grimoire.isImageOptIn
                   ? role.image
-                  : require(
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
+                  : rolePath(role)
               })`,
             }"
           ></span>
@@ -62,17 +58,13 @@
           <span
             class="icon"
             :style="{
-              backgroundImage: `url(${require(
-                '../../assets/icons/' + jinx.first.id + '.png',
-              )})`,
+              backgroundImage: rolePath(jinx.first),
             }"
           ></span>
           <span
             class="icon"
             :style="{
-              backgroundImage: `url(${require(
-                '../../assets/icons/' + jinx.second.id + '.png',
-              )})`,
+              backgroundImage: rolePath(jinx.second),
             }"
           ></span>
           <div class="role">
@@ -91,7 +83,7 @@
 </template>
 
 <script>
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { mapMutations, mapState } from "vuex";
 
 export default {
@@ -147,6 +139,12 @@ export default {
     ...mapState("players", ["players"]),
   },
   methods: {
+    rolePath(role) {
+      return new URL(
+        `../../assets/icons/${role.imageAlt || role.id}.png`,
+        import.meta.url,
+      ).href;
+    },
     ...mapMutations(["toggleModal"]),
   },
 };

src/components/modals/ReminderModal.vue

@@ -18,11 +18,7 @@
             backgroundImage: `url(${
               reminder.image && grimoire.isImageOptIn
                 ? reminder.image
-                : require(
-                    '../../assets/icons/' +
-                      (reminder.imageAlt || reminder.role) +
-                      '.png',
-                  )
+                : rolePath(reminder.role)
             })`,
           }"
         ></span>
@@ -33,7 +29,7 @@
 </template>
 
 <script>
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { mapMutations, mapState } from "vuex";
 
 /**
@@ -137,6 +133,12 @@ export default {
       });
       this.$store.commit("toggleModal", "reminder");
     },
+    rolePath(role) {
+      return new URL(
+        `../assets/icons/${role.imageAlt || role.id}.png`,
+        import.meta.url,
+      ).href;
+    },
     ...mapMutations(["toggleModal"]),
   },
 };

src/components/modals/RoleModal.vue

@@ -50,8 +50,8 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
-import Modal from "./Modal";
-import Token from "../Token";
+import Modal from "./Modal.vue";
+import Token from "../Token.vue";
 
 export default {
   components: { Token, Modal },

src/components/modals/RolesModal.vue

@@ -77,9 +77,9 @@
 </template>
 
 <script>
-import Modal from "./Modal";
-import gameJSON from "./../../game";
-import Token from "./../Token";
+import Modal from "./Modal.vue";
+import gameJSON from "../../game.json";
+import Token from "../Token.vue";
 import { mapGetters, mapMutations, mapState } from "vuex";
 
 const randomElement = (arr) => arr[Math.floor(Math.random() * arr.length)];

src/components/modals/SpecialVoteModal.vue

@@ -26,7 +26,7 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 
 export default {
   components: {

src/components/modals/VoteHistoryModal.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import Modal from "./Modal";
+import Modal from "./Modal.vue";
 import { mapMutations, mapState } from "vuex";
 
 export default {

src/main.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import App from "./App";
+import App from "./App.vue";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";

src/store/index.js

@@ -1,290 +1,272 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import persistence from "./persistence";
-import socket from "./socket";
-import players from "./modules/players";
-import session from "./modules/session";
+import persistence from "./persistence.js";
+import socket from "./socket.js";
+import players from "./modules/players.js";
+import session from "./modules/session.js";
 import editionJSON from "../editions.json";
 
-import { locale, rolesJSON, jinxesJSON, fabledJSON } from "./modules/locale";
-
 Vue.use(Vuex);
 
-// helper functions
-const getRolesByEdition = (edition = editionJSON.official[0]) => {
-  return new Map(
-    rolesJSON
-      .filter((r) => r.edition === edition.id || edition.roles.includes(r.id))
-      .sort((a, b) => b.team.localeCompare(a.team))
-      .map((role) => [role.id, role]),
-  );
+const set = (key) => (state, value) => {
+  state.grimoire[key] = value;
 };
 
-const getTravelersNotInEdition = (edition = editionJSON.official[0]) => {
-  return new Map(
-    rolesJSON
-      .filter(
-        (r) =>
-          r.team === "traveler" &&
-          r.edition !== edition.id &&
-          !edition.roles.includes(r.id),
-      )
-      .map((role) => [role.id, role]),
-  );
+const toggle = (key) => (state) => {
+  state.grimoire[key] = !state.grimoire[key];
 };
 
-const set =
-  (key) =>
-  ({ grimoire }, val) => {
-    grimoire[key] = val;
+const loadLocale = async () => {
+  const { locale, rolesJSON, jinxesJSON, fabledJSON } = await import(
+    "./modules/locale"
+  );
+  return { locale, rolesJSON, jinxesJSON, fabledJSON };
+};
+
+const initializeStore = async () => {
+  const { locale, rolesJSON, jinxesJSON, fabledJSON } = await loadLocale();
+
+  const getRolesByEdition = (edition = editionJSON.official[0]) => {
+    return new Map(
+      rolesJSON.default
+        .filter((r) => r.edition === edition.id || edition.roles.includes(r.id))
+        .sort((a, b) => b.team.localeCompare(a.team))
+        .map((role) => [role.id, role]),
+    );
   };
 
-const toggle =
-  (key) =>
-  ({ grimoire }, val) => {
-    if (val === true || val === false) {
-      grimoire[key] = val;
-    } else {
-      grimoire[key] = !grimoire[key];
-    }
+  const getTravelersNotInEdition = (edition = editionJSON.official[0]) => {
+    return new Map(
+      rolesJSON.default
+        .filter(
+          (r) =>
+            r.team === "traveler" &&
+            r.edition !== edition.id &&
+            !edition.roles.includes(r.id),
+        )
+        .map((role) => [role.id, role]),
+    );
   };
 
-const clean = (id) => id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
+  const clean = (id) => id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
 
-// global data maps
-const editionJSONbyId = new Map(
-  editionJSON.official.map((edition) => [edition.id, edition]),
-);
-const rolesJSONbyId = new Map(rolesJSON.map((role) => [role.id, role]));
-const fabled = new Map(fabledJSON.map((role) => [role.id, role]));
-
-// jinxes
-let jinxes = {};
-try {
-  // Note: can't fetch live list due to lack of CORS headers
-  // fetch("https://bloodontheclocktower.com/script/data/hatred.json")
-  //   .then(res => res.json())
-  //   .then(jinxesJSON => {
-  jinxes = new Map(
-    jinxesJSON.map(({ id, hatred }) => [
-      clean(id),
-      new Map(hatred.map(({ id, reason }) => [clean(id), reason])),
-    ]),
+  const editionJSONbyId = new Map(
+    editionJSON.official.map((edition) => [edition.id, edition]),
   );
-  // });
-} catch (e) {
-  console.error("couldn't load jinxes", e);
-}
+  const rolesJSONbyId = new Map(
+    rolesJSON.default.map((role) => [role.id, role]),
+  );
+  const fabled = new Map(fabledJSON.default.map((role) => [role.id, role]));
 
-// base definition for custom roles
-const customRole = {
-  id: "",
-  name: "",
-  image: "",
-  ability: "",
-  edition: "custom",
-  firstNight: 0,
-  firstNightReminder: "",
-  otherNight: 0,
-  otherNightReminder: "",
-  reminders: [],
-  remindersGlobal: [],
-  setup: false,
-  team: "townsfolk",
-  isCustom: true,
-};
+  // jinxes
+  let jinxes = {};
+  try {
+    jinxes = new Map(
+      jinxesJSON.default.map(({ id, hatred }) => [
+        clean(id),
+        new Map(hatred.map(({ id, reason }) => [clean(id), reason])),
+      ]),
+    );
+  } catch (e) {
+    console.error("couldn't load jinxes", e);
+  }
 
-export default new Vuex.Store({
-  modules: {
-    players,
-    session,
-  },
-  state: {
-    grimoire: {
-      isNight: false,
-      isNightOrder: false,
-      isRinging: false,
-      isPublic: true,
-      isMenuOpen: false,
-      isStatic: false,
-      isMuted: false,
-      isImageOptIn: false,
-      isStreamerMode: false,
-      isOrganVoteMode: false,
-      zoom: 0,
-      background: "",
-      timer: {
-        name: "",
-        duration: 0,
+  // base definition for custom roles
+  const customRole = {
+    id: "",
+    name: "",
+    image: "",
+    ability: "",
+    edition: "custom",
+    firstNight: 0,
+    firstNightReminder: "",
+    otherNight: 0,
+    otherNightReminder: "",
+    reminders: [],
+    remindersGlobal: [],
+    setup: false,
+    team: "townsfolk",
+    isCustom: true,
+  };
+
+  return new Vuex.Store({
+    modules: {
+      players,
+      session,
+    },
+    state: {
+      grimoire: {
+        isNight: false,
+        isNightOrder: false,
+        isRinging: false,
+        isPublic: true,
+        isMenuOpen: false,
+        isStatic: false,
+        isMuted: false,
+        isImageOptIn: false,
+        isStreamerMode: false,
+        isOrganVoteMode: false,
+        zoom: 0,
+        background: "",
+        timer: {
+          name: "",
+          duration: 0,
+        },
       },
+      modals: {
+        edition: false,
+        fabled: false,
+        gameState: false,
+        nightOrder: false,
+        reference: false,
+        reminder: false,
+        role: false,
+        roles: false,
+        voteHistory: false,
+        specialVote: false,
+      },
+      edition: editionJSONbyId.get("tb"),
+      editions: editionJSON,
+      roles: getRolesByEdition(),
+      otherTravelers: getTravelersNotInEdition(),
+      fabled,
+      jinxes,
+      locale,
     },
-    modals: {
-      edition: false,
-      fabled: false,
-      gameState: false,
-      nightOrder: false,
-      reference: false,
-      reminder: false,
-      role: false,
-      roles: false,
-      voteHistory: false,
-      specialVote: false,
-    },
-    edition: editionJSONbyId.get("tb"),
-    editions: editionJSON,
-    roles: getRolesByEdition(),
-    otherTravelers: getTravelersNotInEdition(),
-    fabled,
-    jinxes,
-    locale,
-  },
-  getters: {
-    /**
-     * Return all custom roles, with default values and non-essential data stripped.
-     * Role object keys will be replaced with a numerical index to conserve bandwidth.
-     * @param roles
-     * @returns {[]}
-     */
-    customRolesStripped: ({ roles }) => {
-      const customRoles = [];
-      const customKeys = Object.keys(customRole);
-      const strippedProps = [
-        "firstNightReminder",
-        "otherNightReminder",
-        "isCustom",
-      ];
-      roles.forEach((role) => {
-        if (!role.isCustom) {
-          customRoles.push({ id: role.id });
-        } else {
-          const strippedRole = {};
-          for (let prop in role) {
-            if (strippedProps.includes(prop)) {
-              continue;
-            }
-            const value = role[prop];
-            if (customKeys.includes(prop) && value !== customRole[prop]) {
-              strippedRole[customKeys.indexOf(prop)] = value;
-            }
-          }
-          customRoles.push(strippedRole);
-        }
-      });
-      return customRoles;
-    },
-    rolesJSONbyId: () => rolesJSONbyId,
-  },
-  mutations: {
-    setZoom: set("zoom"),
-    setBackground: set("background"),
-    toggleMuted: toggle("isMuted"),
-    toggleMenu: toggle("isMenuOpen"),
-    toggleNightOrder: toggle("isNightOrder"),
-    toggleStatic: toggle("isStatic"),
-    toggleNight: toggle("isNight"),
-    toggleRinging: toggle("isRinging"),
-    toggleGrimoire: toggle("isPublic"),
-    toggleImageOptIn: toggle("isImageOptIn"),
-    toggleStreamerMode: toggle("isStreamerMode"),
-    toggleOrganVoteMode: toggle("isOrganVoteMode"),
-    setTimer(state, timer) {
-      state.grimoire.timer = timer;
-    },
-    toggleModal({ modals }, name) {
-      if (name) {
-        modals[name] = !modals[name];
-      }
-      for (let modal in modals) {
-        if (modal === name) continue;
-        modals[modal] = false;
-      }
-    },
-    /**
-     * Store custom roles
-     * @param state
-     * @param roles Array of role IDs or full role definitions
-     */
-    setCustomRoles(state, roles) {
-      const processedRoles = roles
-        // replace numerical role object keys with matching key names
-        .map((role) => {
-          if (role[0]) {
-            const customKeys = Object.keys(customRole);
-            const mappedRole = {};
+    getters: {
+      customRolesStripped: ({ roles }) => {
+        const customRoles = [];
+        const customKeys = Object.keys(customRole);
+        const strippedProps = [
+          "firstNightReminder",
+          "otherNightReminder",
+          "isCustom",
+        ];
+        roles.forEach((role) => {
+          if (!role.isCustom) {
+            customRoles.push({ id: role.id });
+          } else {
+            const strippedRole = {};
             for (let prop in role) {
-              if (customKeys[prop]) {
-                mappedRole[customKeys[prop]] = role[prop];
+              if (strippedProps.includes(prop)) {
+                continue;
+              }
+              const value = role[prop];
+              if (customKeys.includes(prop) && value !== customRole[prop]) {
+                strippedRole[customKeys.indexOf(prop)] = value;
               }
             }
-            return mappedRole;
-          } else {
-            return role;
+            customRoles.push(strippedRole);
           }
-        })
-        // clean up role.id
-        .map((role) => {
-          role.id = clean(role.id);
-          return role;
-        })
-        // map existing roles to base definition or pre-populate custom roles to ensure all properties
-        .map(
-          (role) =>
-            rolesJSONbyId.get(role.id) ||
-            state.roles.get(role.id) ||
-            Object.assign({}, customRole, role),
-        )
-        // default empty icons and placeholders, clean up firstNight / otherNight
-        .map((role) => {
-          if (rolesJSONbyId.get(role.id)) return role;
-          role.imageAlt = // map team to generic icon
-            {
-              townsfolk: "townsfolk",
-              outsider: "outsider",
-              minion: "minion",
-              demon: "demon",
-              fabled: "fabled",
-              traveler: "traveler",
-            }[role.team] || "custom";
-          role.firstNight = Math.abs(role.firstNight);
-          role.otherNight = Math.abs(role.otherNight);
-          return role;
-        })
-        // filter out roles that don't match an existing role and also don't have name/ability/team
-        .filter((role) => role.name && role.ability && role.team)
-        // sort by team
-        .sort((a, b) => b.team.localeCompare(a.team));
-      // convert to Map without Fabled
-      state.roles = new Map(
-        processedRoles
-          .filter((role) => role.team !== "fabled")
-          .map((role) => [role.id, role]),
-      );
-      // update Fabled to include custom Fabled from this script
-      state.fabled = new Map([
-        ...processedRoles
-          .filter((r) => r.team === "fabled")
-          .map((r) => [r.id, r]),
-        ...fabledJSON.map((role) => [role.id, role]),
-      ]);
-      // update extraTravelers map to only show travelers not in this script
-      state.otherTravelers = new Map(
-        rolesJSON
-          .filter(
-            (r) => r.team === "traveler" && !roles.some((i) => i.id === r.id),
+        });
+        return customRoles;
+      },
+      rolesJSONbyId: () => rolesJSONbyId,
+    },
+    mutations: {
+      setZoom: set("zoom"),
+      setBackground: set("background"),
+      toggleMuted: toggle("isMuted"),
+      toggleMenu: toggle("isMenuOpen"),
+      toggleNightOrder: toggle("isNightOrder"),
+      toggleStatic: toggle("isStatic"),
+      toggleNight: toggle("isNight"),
+      toggleRinging: toggle("isRinging"),
+      toggleGrimoire: toggle("isPublic"),
+      toggleImageOptIn: toggle("isImageOptIn"),
+      toggleStreamerMode: toggle("isStreamerMode"),
+      toggleOrganVoteMode: toggle("isOrganVoteMode"),
+      setTimer(state, timer) {
+        state.grimoire.timer = timer;
+      },
+      toggleModal({ modals }, name) {
+        if (name) {
+          modals[name] = !modals[name];
+        }
+        for (let modal in modals) {
+          if (modal === name) continue;
+          modals[modal] = false;
+        }
+      },
+      setCustomRoles(state, roles) {
+        const processedRoles = roles
+          .map((role) => {
+            if (role[0]) {
+              const customKeys = Object.keys(customRole);
+              const mappedRole = {};
+              for (let prop in role) {
+                if (customKeys[prop]) {
+                  mappedRole[customKeys[prop]] = role[prop];
+                }
+              }
+              return mappedRole;
+            } else {
+              return role;
+            }
+          })
+          .map((role) => {
+            role.id = clean(role.id);
+            return role;
+          })
+          .map(
+            (role) =>
+              rolesJSONbyId.get(role.id) ||
+              state.roles.get(role.id) || { ...customRole, ...role },
           )
-          .map((role) => [role.id, role]),
-      );
+          .map((role) => {
+            if (rolesJSONbyId.get(role.id)) return role;
+            role.imageAlt =
+              {
+                townsfolk: "townsfolk",
+                outsider: "outsider",
+                minion: "minion",
+                demon: "demon",
+                fabled: "fabled",
+                traveler: "traveler",
+              }[role.team] || "custom";
+            role.firstNight = Math.abs(role.firstNight);
+            role.otherNight = Math.abs(role.otherNight);
+            return role;
+          })
+          .filter((role) => role.name && role.ability && role.team)
+          .sort((a, b) => b.team.localeCompare(a.team));
+
+        state.roles = new Map(
+          processedRoles
+            .filter((role) => role.team !== "fabled")
+            .map((role) => [role.id, role]),
+        );
+
+        state.fabled = new Map([
+          ...processedRoles
+            .filter((r) => r.team === "fabled")
+            .map((r) => [r.id, r]),
+          ...fabledJSON.default.map((role) => [role.id, role]),
+        ]);
+
+        state.otherTravelers = new Map(
+          rolesJSON.default
+            .filter(
+              (r) => r.team === "traveler" && !roles.some((i) => i.id === r.id),
+            )
+            .map((role) => [role.id, role]),
+        );
+      },
+      setEdition(state, edition) {
+        if (editionJSONbyId.has(edition.id)) {
+          state.edition = editionJSONbyId.get(edition.id);
+          state.roles = getRolesByEdition(state.edition);
+          state.otherTravelers = getTravelersNotInEdition(state.edition);
+        } else {
+          state.edition = edition;
+        }
+        state.modals.edition = false;
+      },
     },
-    setEdition(state, edition) {
-      if (editionJSONbyId.has(edition.id)) {
-        state.edition = editionJSONbyId.get(edition.id);
-        state.roles = getRolesByEdition(state.edition);
-        state.otherTravelers = getTravelersNotInEdition(state.edition);
-      } else {
-        state.edition = edition;
-      }
-      state.modals.edition = false;
-    },
-  },
-  plugins: [persistence, socket],
-});
+    plugins: [persistence, socket],
+  });
+};
+
+// Create the store and export it
+const store = await initializeStore();
+export default store;

src/store/modules/locale.js

@@ -23,7 +23,7 @@ if (!usedLanguage) {
   usedLanguage = MASTER_LANGUAGE; // set to master language if no language is supported by both the user and the application
 }
 
-export const locale = require(`../locale/${usedLanguage}/ui.json`);
-export const rolesJSON = require(`../locale/${usedLanguage}/roles.json`);
-export const jinxesJSON = require(`../locale/${usedLanguage}/hatred.json`);
-export const fabledJSON = require(`../locale/${usedLanguage}/fabled.json`);
+export const locale = await import(`../locale/${usedLanguage}/ui.json`);
+export const rolesJSON = await import(`../locale/${usedLanguage}/roles.json`);
+export const jinxesJSON = await import(`../locale/${usedLanguage}/hatred.json`);
+export const fabledJSON = await import(`../locale/${usedLanguage}/fabled.json`);

src/store/persistence.js

@@ -1,4 +1,4 @@
-module.exports = (store) => {
+export default (store) => {
   const updatePagetitle = (isPublic) =>
     (document.title = `Blood on the Clocktower ${
       isPublic ? "Town Square" : "Grimoire"

vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue2";
+
+export default defineConfig({
+  plugins: [vue()],
+  base: "/",
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].[hash].js",
+        assetFileNames: "[name].[hash].[extname]",
+      },
+    },
+    target: "es2022",
+  },
+});

vue.config.js

@@ -1,12 +0,0 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-module.exports = {
-  configureWebpack: {
-    plugins: [
-      new MiniCssExtractPlugin({
-        filename: "[name].css",
-        chunkFilename: "[id].css",
-      }),
-    ],
-  },
-  publicPath: "/",
-};