FEATURE script builder

src/App.vue

@@ -42,7 +42,7 @@
 
 <script>
 import { mapState } from "vuex";
-import { version } from "../package.json";
+import app from "../package.json";
 import TownSquare from "./components/TownSquare";
 import TownInfo from "./components/TownInfo";
 import Menu from "./components/Menu";
@@ -90,7 +90,7 @@ export default {
   },
   data() {
     return {
-      version,
+      version: app.version,
     };
   },
   methods: {

src/components/modals/EditionModal.vue

@@ -17,13 +17,6 @@
           :class="{ active: tab == 'popular' }"
           >{{ locale.modal.edition.tab.popular }}</span
         >
-        <span
-          class="tab"
-          icon="theater-masks"
-          @click="tab = 'teensyville'"
-          :class="{ active: tab == 'teensyville' }"
-          >{{ locale.modal.edition.tab.teensyville }}</span
-        >
         <span
           class="tab"
           icon="question"
@@ -31,6 +24,16 @@
           :class="{ active: tab == 'custom' }"
           >{{ locale.modal.edition.tab.custom }}</span
         >
+        <span
+          class="tab"
+          icon="question"
+          @click="
+            initPool();
+            tab = 'build';
+          "
+          :class="{ active: tab == 'build' }"
+          >{{ locale.modal.edition.tab.build }}</span
+        >
       </li>
       <template v-if="tab == 'official'">
         <ul class="editions">
@@ -60,8 +63,7 @@
             {{ script[0] }}
           </li>
         </ul>
-      </template>
+        <h3>{{ locale.modal.edition.tab.teensyville }}</h3>
-      <template v-if="tab == 'teensyville'">
         <ul class="scripts">
           <li
             v-for="(script, index) in editions.teensyville"
@@ -110,6 +112,46 @@
           </div>
         </div>
       </template>
+      <template v-if="tab == 'build'">
+        <section
+          v-for="team in teams"
+          :key="team"
+          class="build team"
+          :class="team"
+        >
+          <aside class="aside">
+            <div>
+              <h4>{{ locale.modal.reference.teamNames[team] }}</h4>
+              <strong>{{ selectedInTeam(team) }}</strong>
+            </div>
+          </aside>
+          <ul class="roles" :class="team">
+            <li
+              v-for="role in rolesForTeam(team)"
+              class="role"
+              :class="{ selected: role.selected }"
+              :key="role.id"
+              @click="toggleRole(role.id)"
+            >
+              <Token :role="role" />
+            </li>
+          </ul>
+        </section>
+        <div class="button-group">
+          <div class="button" @click="resetBuilt">
+            <font-awesome-icon :icon="['fas', 'trash-alt']" />
+          </div>
+          <div class="button" @click="initPool">
+            <font-awesome-icon :icon="['fas', 'redo-alt']" />
+          </div>
+          <div class="button" @click="randomizeBuilt">
+            <font-awesome-icon :icon="['fas', 'random']" />
+          </div>
+          <div class="button" @click="startBuilt">
+            <font-awesome-icon :icon="['fas', 'play']" />
+          </div>
+        </div>
+      </template>
     </ul>
   </Modal>
 </template>
@@ -117,38 +159,95 @@
 <script>
 import { mapMutations, mapState } from "vuex";
 import Modal from "./Modal";
+import { rolesJSON } from "../../store/modules/locale";
+import Token from "../Token";
 
 export default {
   components: {
     Modal,
+    Token,
   },
-  data: function () {
+  data() {
     return {
       tab: "official",
+      draftPool: rolesJSON,
+      teams: ["townsfolk", "outsider", "minion", "demon"],
+      recommendedTeamSize: {
+        townsfolk: 13,
+        outsider: 4,
+        minion: 4,
+        demon: 4,
+      },
     };
   },
   computed: {
     ...mapState(["modals", "locale", "editions", "roles", "jinxes"]),
   },
   methods: {
+    initPool() {
+      console.log("init pool");
+      console.table(this.roles);
+      this.draftPool = rolesJSON;
+      this.resetBuilt();
+      for (let [role] of this.roles) {
+        this.toggleRole(role);
+      }
+    },
+    toggleRole(id) {
+      const role = this.draftPool.find((r) => r.id === id);
+      if (role) {
+        this.$set(role, "selected", !role.selected);
+      }
+    },
+    rolesForTeam(team) {
+      return this.draftPool?.filter((role) => role.team === team) ?? [];
+    },
+    selectedInTeam(team) {
+      return this.draftPool?.filter(
+        (role) => role.team === team && role.selected,
+      ).length;
+    },
+    resetBuilt() {
+      for (let role of this.draftPool) {
+        this.$set(role, "selected", false);
+      }
+    },
+    randomizeBuilt() {
+      this.resetBuilt();
+      for (let team of this.teams) {
+        let currentPool = this.rolesForTeam(team);
+        for (let i = 0; i < this.recommendedTeamSize[team]; i++) {
+          let picked = currentPool.splice(
+            Math.floor(Math.random() * currentPool.length),
+            1,
+          )[0];
+          this.$set(picked, "selected", true);
+        }
+      }
+    },
+    startBuilt() {
+      const selected = this.draftPool.filter((role) => role.selected);
+      this.parseRoles(selected);
+    },
     openUpload() {
       this.$refs.upload.click();
     },
     handleUpload() {
       const file = this.$refs.upload.files[0];
-      if (file && file.size) {
+      if (!file?.size) {
-        const reader = new FileReader();
+        return;
-        reader.addEventListener("load", () => {
-          try {
-            const roles = JSON.parse(reader.result);
-            this.parseRoles(roles);
-          } catch (e) {
-            alert("Error reading custom script: " + e.message);
-          }
-          this.$refs.upload.value = "";
-        });
-        reader.readAsText(file);
       }
+      const reader = new FileReader();
+      reader.addEventListener("load", () => {
+        try {
+          const uploadedRoles = JSON.parse(reader.result);
+          this.parseRoles(uploadedRoles);
+        } catch (e) {
+          alert(`Error reading custom script: ${e.message}`);
+        }
+        this.$refs.upload.value = "";
+      });
+      reader.readAsText(file);
     },
     promptURL() {
       const url = prompt(this.locale.prompt.customUrl);
@@ -158,46 +257,40 @@ export default {
     },
     async handleURL(url) {
       const res = await fetch(url);
-      if (res && res.json) {
+      if (res?.json) {
         try {
           const script = await res.json();
           this.parseRoles(script);
         } catch (e) {
-          alert(this.locale.prompt.customError + ": " + e.message);
+          alert(`${this.locale.prompt.customError}: ${e.message}`);
         }
       }
     },
     async readFromClipboard() {
       const text = await navigator.clipboard.readText();
       try {
-        const roles = JSON.parse(text);
+        const uploadedRoles = JSON.parse(text);
-        this.parseRoles(roles);
+        this.parseRoles(uploadedRoles);
       } catch (e) {
-        alert("Error reading custom script: " + e.message);
+        alert(`Error reading custom script: ${e.message}`);
       }
     },
-    parseRoles(roles) {
+    parseRoles(pickedRoles) {
-      if (!roles || !roles.length) return;
+      if (!pickedRoles || !pickedRoles.length) return;
-      roles = roles.map((role) =>
+      pickedRoles = pickedRoles.map((role) =>
         typeof role === "string" ? { id: role } : role,
       );
-      const metaIndex = roles.findIndex(({ id }) => id === "_meta");
+      const metaIndex = pickedRoles.findIndex(({ id }) => id === "_meta");
-      let meta = {};
+      const meta = metaIndex > -1 ? pickedRoles.splice(metaIndex, 1).pop() : {};
-      if (metaIndex > -1) {
+      this.$store.commit("setCustomRoles", pickedRoles);
-        meta = roles.splice(metaIndex, 1).pop();
+      this.$store.commit("setEdition", { ...meta, id: "custom" });
-      }
-      this.$store.commit("setCustomRoles", roles);
-      this.$store.commit(
-        "setEdition",
-        Object.assign({}, meta, { id: "custom" }),
-      );
       // set fabled
       const fabled = [];
-      var djinnAdded = false;
+      let djinnAdded = false;
-      var djinnNeeded = false;
+      let djinnNeeded = false;
-      var bootleggerAdded = false;
+      let bootleggerAdded = false;
-      var bootleggerNedded = false;
+      let bootleggerNedded = false;
-      roles.forEach((role) => {
+      pickedRoles.forEach((role) => {
         if (this.$store.state.fabled.has(role.id || role)) {
           fabled.push(this.$store.state.fabled.get(role.id || role));
           if ((role.id || role) == "djinn") {
@@ -240,6 +333,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../../vars.scss";
 ul {
   width: 100%;
 }
@@ -269,6 +363,14 @@ ul.editions {
   }
 }
 
+.build .role {
+  width: 4vmax;
+  opacity: 0.7;
+
+  &.selected {
+    opacity: 1;
+  }
+}
 .tabs {
   display: flex;
   padding: 0;
@@ -313,8 +415,6 @@ input[type="file"] {
   list-style-type: disc;
   font-size: 120%;
   cursor: pointer;
-  // display: grid;
-  // grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   display: flex;
   gap: 0.75em 1em;
   justify-content: flex-start;
@@ -331,4 +431,59 @@ input[type="file"] {
     }
   }
 }
+
+.townsfolk {
+  aside {
+    background: linear-gradient(-90deg, $townsfolk, transparent);
+  }
+}
+.outsider {
+  aside {
+    background: linear-gradient(-90deg, $outsider, transparent);
+  }
+}
+.minion {
+  aside {
+    background: linear-gradient(-90deg, $minion, transparent);
+  }
+}
+.demon {
+  aside {
+    background: linear-gradient(-90deg, $demon, transparent);
+  }
+}
+
+.team {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 3rem 1fr;
+  aside {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    strong {
+      display: block;
+      font-size: 1.4rem;
+    }
+    div {
+      font-size: 1.1rem;
+      text-align: center;
+      rotate: 90deg;
+    }
+    h4 {
+      margin-block: 0.25rem;
+    }
+  }
+  .roles {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-left: 1rem;
+    padding-block: 0.25rem;
+    overflow: hidden;
+  }
+}
 </style>

src/components/modals/Modal.vue

@@ -65,7 +65,6 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  max-height: 95vh;
   width: 90vw;
   max-width: 1800px;
 
@@ -73,7 +72,9 @@ export default {
   .vote-history &,
   .night-reference &,
   .characters & {
-    overflow-y: auto;
+    overflow: auto;
+    max-height: 95vh;
+    scrollbar-gutter: stable both-edges;
   }
 
   .roles &,

src/main.js

@@ -34,6 +34,7 @@ const faIcons = [
   "MinusSquare",
   "Music",
   "PeopleArrows",
+  "Play",
   "PlusCircle",
   "Question",
   "Random",

src/store/locale/en/ui.json

@@ -168,10 +168,11 @@
     "edition": {
       "title": "Select an edition:",
       "tab": {
-        "official": "Official scripts",
+        "official": "Official",
-        "popular": "Popular scripts",
+        "popular": "Popular",
         "teensyville": "Teensyville",
-        "custom": "Load custom"
+        "custom": "Custom",
+        "build": "Build"
       },
       "custom": {
         "introStart": "To play with a custom script, you need to select the characters you want to play with in the official",
@@ -277,4 +278,4 @@
       "customMessages": ["","The debate is open","(Custom)"]
     }
   }
-}
+}

src/store/locale/fr/ui.json

@@ -168,10 +168,11 @@
     "edition": {
       "title": "Choisir un Scénario :",
       "tab": {
-        "official": "Scénarios officiels",
+        "official": "Officiels",
-        "popular": "Scripts populaires",
+        "popular": "Populaires",
         "teensyville": "Teensyville",
-        "custom": "Partie personnalisée"
+        "custom": "Personnaliser",
+        "build": "Créer"
       },
       "custom": {
         "introStart": "Pour jouer avec un script personnalisé, vous pouvez sélectionner les personnages de votre choix grace à l'",
@@ -185,7 +186,8 @@
         "upload": "Téléversersement JSON",
         "url": "Entrer une URL",
         "clipboard": "Presse-papier",
-        "back": "Retour"
+        "back": "Retour",
+        "startDraft": "Démarrer un draft"
       }
     },
     "fabled": {
@@ -277,4 +279,4 @@
       "customMessages": ["","Le débat est ouvert","(Personnalisé)"]
     }
   }
-}
+}