Upgrade node to 22, bundle with vite

Updated docker compose for --watch usage

.github/workflows/linter.yml

@@ -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="57x57" href="/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="static/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="static/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="static/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="static/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="static/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="static/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="static/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="static/apple-icon-180x180.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/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="192x192"  href="/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="static/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="static/manifest.json">
+  <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",
+    "dev": "vite --host 0.0.0.0",
-    "build": "vue-cli-service build ./src/main.js",
+    "build": "vite build",
-    "lint": "vue-cli-service lint",
+    "serve": "vite preview",
-    "lint-ci": "vue-cli-service lint --no-fix --max-warnings=0"
+    "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/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
-    "@fortawesome/vue-fontawesome": "^0.1.10",
+    "@fortawesome/vue-fontawesome": "^2.0.10",
-    "@vue/cli-service": "^5.0.8",
+    "@vitejs/plugin-vue2": "^2.3.3",
-    "prom-client": "^13.0.0",
+    "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": "^10.1.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "eslint": "^9.16.0",
-    "eslint": "^8.53.0",
+    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.32.0",
-    "eslint-plugin-vue": "^9.18.1",
     "prettier": "^3.0.3",
-    "sass": "^1.82.0",
+    "sass": "^1.82.0"
-    "sass-loader": "^16.0.4"
   },
   "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 TownSquare from "./components/TownSquare.vue";
-import TownInfo from "./components/TownInfo";
+import TownInfo from "./components/TownInfo.vue";
-import Menu from "./components/Menu";
+import Menu from "./components/Menu.vue";
-import RolesModal from "./components/modals/RolesModal";
+import RolesModal from "./components/modals/RolesModal.vue";
-import EditionModal from "./components/modals/EditionModal";
+import EditionModal from "./components/modals/EditionModal.vue";
-import Intro from "./components/Intro";
+import Intro from "./components/Intro.vue";
-import ReferenceModal from "./components/modals/ReferenceModal";
+import ReferenceModal from "./components/modals/ReferenceModal.vue";
-import Vote from "./components/Vote";
+import Vote from "./components/Vote.vue";
-import Gradients from "./components/Gradients";
+import Gradients from "./components/Gradients.vue";
-import NightOrderModal from "./components/modals/NightOrderModal";
+import NightOrderModal from "./components/modals/NightOrderModal.vue";
-import FabledModal from "@/components/modals/FabledModal";
+import FabledModal from "./components/modals/FabledModal.vue";
-import VoteHistoryModal from "@/components/modals/VoteHistoryModal";
+import VoteHistoryModal from "./components/modals/VoteHistoryModal.vue";
-import GameStateModal from "@/components/modals/GameStateModal";
+import GameStateModal from "./components/modals/GameStateModal.vue";
-import SpecialVoteModal from "@/components/modals/SpecialVoteModal";
+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(
+                : rolePath(reminder.role)
-                    '../assets/icons/' +
-                      (reminder.imageAlt || reminder.role) +
-                      '.png',
-                  )
             })`,
           }"
         ></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 && grimoire.isImageOptIn ? role.image : rolePath
-            ? role.image
-            : require('../assets/icons/' + (role.imageAlt || role.id) + '.png')
         })`,
       }"
     ></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 && grimoire.isImageOptIn ? edition.logo : logoPath
-            ? edition.logo
-            : require('../assets/logos/' + edition.id + '.png')
         })`,
       }"
     ></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 Player from "./Player.vue";
-import Token from "./Token";
+import Token from "./Token.vue";
-import ReminderModal from "./modals/ReminderModal";
+import ReminderModal from "./modals/ReminderModal.vue";
-import RoleModal from "./modals/RoleModal";
+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(
+              backgroundImage: `url(${editionPath(edition)})`,
-                '../../assets/logos/' + edition.id + '.png',
-              )})`,
             }"
             :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.default;
-      this.draftPool = rolesJSON;
       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 Modal from "./Modal.vue";
-import Token from "../Token";
+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(
+                  : rolePath(role)
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
               })`,
             }"
           ></span>
@@ -83,11 +79,7 @@
               backgroundImage: `url(${
                 role.image && grimoire.isImageOptIn
                   ? role.image
-                  : require(
+                  : rolePath(role)
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
               })`,
             }"
           ></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(
+                  : rolePath(role)
-                      '../../assets/icons/' +
-                        (role.imageAlt || role.id) +
-                        '.png',
-                    )
               })`,
             }"
           ></span>
@@ -62,17 +58,13 @@
           <span
             class="icon"
             :style="{
-              backgroundImage: `url(${require(
+              backgroundImage: rolePath(jinx.first),
-                '../../assets/icons/' + jinx.first.id + '.png',
-              )})`,
             }"
           ></span>
           <span
             class="icon"
             :style="{
-              backgroundImage: `url(${require(
+              backgroundImage: rolePath(jinx.second),
-                '../../assets/icons/' + jinx.second.id + '.png',
-              )})`,
             }"
           ></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(
+                : rolePath(reminder.role)
-                    '../../assets/icons/' +
-                      (reminder.imageAlt || reminder.role) +
-                      '.png',
-                  )
             })`,
           }"
         ></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 Modal from "./Modal.vue";
-import Token from "../Token";
+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 Modal from "./Modal.vue";
-import gameJSON from "./../../game";
+import gameJSON from "../../game.json";
-import Token from "./../Token";
+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,19 +1,34 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import persistence from "./persistence";
+import persistence from "./persistence.js";
-import socket from "./socket";
+import socket from "./socket.js";
-import players from "./modules/players";
+import players from "./modules/players.js";
-import session from "./modules/session";
+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 set = (key) => (state, value) => {
+  state.grimoire[key] = value;
+};
+
+const toggle = (key) => (state) => {
+  state.grimoire[key] = !state.grimoire[key];
+};
+
+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
+      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]),
@@ -22,7 +37,7 @@ const getRolesByEdition = (edition = editionJSON.official[0]) => {
 
   const getTravelersNotInEdition = (edition = editionJSON.official[0]) => {
     return new Map(
-    rolesJSON
+      rolesJSON.default
         .filter(
           (r) =>
             r.team === "traveler" &&
@@ -33,45 +48,25 @@ const getTravelersNotInEdition = (edition = editionJSON.official[0]) => {
     );
   };
 
-const set =
-  (key) =>
-  ({ grimoire }, val) => {
-    grimoire[key] = val;
-  };
-
-const toggle =
-  (key) =>
-  ({ grimoire }, val) => {
-    if (val === true || val === false) {
-      grimoire[key] = val;
-    } else {
-      grimoire[key] = !grimoire[key];
-    }
-  };
-
   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 rolesJSONbyId = new Map(
-const fabled = new Map(fabledJSON.map((role) => [role.id, role]));
+    rolesJSON.default.map((role) => [role.id, role]),
+  );
+  const fabled = new Map(fabledJSON.default.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 }) => [
+      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);
   }
@@ -94,7 +89,7 @@ const customRole = {
     isCustom: true,
   };
 
-export default new Vuex.Store({
+  return new Vuex.Store({
     modules: {
       players,
       session,
@@ -139,12 +134,6 @@ export default new Vuex.Store({
       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);
@@ -199,14 +188,8 @@ export default new Vuex.Store({
           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);
@@ -221,22 +204,18 @@ export default new Vuex.Store({
               return role;
             }
           })
-        // 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) ||
+              state.roles.get(role.id) || { ...customRole, ...role },
-            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
+            role.imageAlt =
               {
                 townsfolk: "townsfolk",
                 outsider: "outsider",
@@ -249,26 +228,24 @@ export default new Vuex.Store({
             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]),
+          ...fabledJSON.default.map((role) => [role.id, role]),
         ]);
-      // update extraTravelers map to only show travelers not in this script
+
         state.otherTravelers = new Map(
-        rolesJSON
+          rolesJSON.default
             .filter(
               (r) => r.team === "traveler" && !roles.some((i) => i.id === r.id),
             )
@@ -288,3 +265,8 @@ export default new Vuex.Store({
     },
     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 locale = await import(`../locale/${usedLanguage}/ui.json`);
-export const rolesJSON = require(`../locale/${usedLanguage}/roles.json`);
+export const rolesJSON = await import(`../locale/${usedLanguage}/roles.json`);
-export const jinxesJSON = require(`../locale/${usedLanguage}/hatred.json`);
+export const jinxesJSON = await import(`../locale/${usedLanguage}/hatred.json`);
-export const fabledJSON = require(`../locale/${usedLanguage}/fabled.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: "/",
-};