setup game

src/components/setup/DifficultyLevel.vue

@@ -17,7 +17,7 @@
     <div class="col-11 offset-1">
       <i>
         {{t('setup.difficultyLevel.level',{level:difficultyLevel})}}
-        <template v-if="difficultyLevel >= 5">
+        <template v-if="expertMode">
           ({{t('setup.difficultyLevel.expertMode')}})
         </template>
       </i>
@@ -41,6 +41,11 @@ export default defineComponent({
 
     return { t, state, difficultyLevel }
   },
+  computed: {
+    expertMode() : boolean {
+      return this.difficultyLevel >= 5
+    }
+  },
   methods: {
     updateDifficultyLevel(event: Event) {
       this.difficultyLevel = parseInt((event.target as HTMLInputElement).value)

src/components/structure/AppIcon.vue

@@ -18,7 +18,7 @@ export default defineComponent({
     },
     extension: {
       type: String,
-      default: 'webp'
+      default: 'svg'
     }
   },
   computed: {

src/components/structure/WorkerIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="workerIcon">
+    <span class="value">{{value}}</span>
+    <AppIcon type="worker" :name="worker"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import AppIcon from './AppIcon.vue'
+import Worker from '@/services/enum/Worker'
+
+export default defineComponent({
+  name: 'WorkerIcon',
+  components: {
+    AppIcon
+  },
+  props: {
+    worker: {
+      type: String as PropType<Worker>,
+      required: true
+    },
+    value: {
+      type: Number,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.workerIcon {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  .value {
+    position: absolute;
+    left: 0;
+    right: 5px;
+    margin-top: -2px;
+    text-align: center;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
+  }
+}
+</style>

src/locales/de.json

@@ -8,6 +8,17 @@
   },
   "setup": {
     "title": "Spielaufbau",
+    "general": {
+      "title": "Allgemeiner Aufbau",
+      "setup2Players": "Baue das Spiel für 2 Personen auf.",
+      "pickPlayerColor": "Wähle eine Spielerfarbe (<i>grau</i> und <i>gelb</i> werden von Automa verwendet).",
+      "remove": {
+        "title": "Entferne aus dem Spiel:",
+        "seedCards": "Saatkarten mit interaktiven Einmalnutzen: 32, 35, 37 und 38",
+        "carvingTiles": "Ruhmeswabe <i>Ausbreitung</i>",
+        "factions": "Fraktionen <i>Ria</i> und <i>Capen</i>"
+      }
+    },
     "difficultyLevel": {
       "title": "Schwierigkeitsgrad",
       "easy": "Leicht",
@@ -17,7 +28,18 @@
     }
   },
   "setupBot": {
-    "title": "Automa Spielaufbau"
+    "title": "Automa Spielaufbau",
+    "botColor": "Die primäre Spielerfarbe von Automa ist grau.",
+    "firstPlayerScoreTrack": "Automa beginnt das Spiel. Lege einen grauen Farbwürfel auf der Siegpunktskala auf das <b>Feld mit 1</b>.",
+    "returnPlayerTokens": "Lege die anderen Farbwürfel in die Schachtel zurück, weil Automa keine Schritte auf der Skala für die Gunst der Königin voranschreitet und keinen Tanz lehrt.",
+    "placeDockingMat": {
+      "normal": "Lege die Automa-Andockstation mit der <b>normalen Seite</b> nach oben.",
+      "expert": "Lege die Automa-Andockstation mit der <b>Experten-Seite</b> nach oben."
+    },
+    "noHiveMatFactionTile": "Automa bekommt kein Bienenstock-Tableau und kein Startplättchen.",
+    "placeHibernationTokens": "Lege 7 graue Tiefschlafplättchen auf ihre Andockstation.",
+    "placeWorkers": "Lege die folgenden Arbeiterinnen auf ihre Andockstation:",
+    "placeAutomaGainedWorkerStrength": "Lege das Automa-Plättchen für die Stärke neuer Arbeiterinnen auf ihre Andockstation mit der <b>Stärke {value}</b> nach oben."
   },
   "action": {
     "playGame": "Spielen",

src/locales/en.json

@@ -8,6 +8,17 @@
   },
   "setup": {
     "title": "Setup Game",
+    "general": {
+      "title": "General Setup",
+      "setup2Players": "Setup a 2-player game.",
+      "pickPlayerColor": "Pick a player color (<i>gray</i> and <i>yellow</i> are used by the Automa).",
+      "remove": {
+        "title": "Remove from the game:",
+        "seedCards": "Seed cards with interactive one-time benefits: 32, 35, 37, and 38",
+        "carvingTiles": "Carving tile <i>Proliferation</i>",
+        "factions": "Factions <i>Ria</i> and <i>Capen</i>"
+      }
+    },
     "difficultyLevel": {
       "title": "Difficulty Level",
       "easy": "Easy",
@@ -17,7 +28,18 @@
     }
   },
   "setupBot": {
-    "title": "Setup Automa"
+    "title": "Setup Automa",
+    "botColor": "The main player color of Automa is gray.",
+    "firstPlayerScoreTrack": "Automa is the first player. Place one gray player tokens on the <b>1 space</b> of the Score Track.",
+    "returnPlayerTokens": "Return the other two player tokens to the box as she does not advance on the Queen’s Favor track or teach dances.",
+    "placeDockingMat": {
+      "normal": "Place Automa’s docking mat with the <b>normal side</b> facing up.",
+      "expert": "Place Automa’s docking mat with the <b>expert side</b> facing up."
+    },
+    "noHiveMatFactionTile": "Automa does not get a hive mat or faction tile.",
+    "placeHibernationTokens": "Place 7 gray hibernation tokens on her docking mat.",
+    "placeWorkers": "Place the following workers on her docking mat:",
+    "placeAutomaGainedWorkerStrength": "Place the Automa Gained Worker Strength token on the docking mat with the <b>value {value}</b> shown."
   },
   "action": {
     "playGame": "Play Game",

src/store/state.ts

@@ -8,7 +8,7 @@ export const useStateStore = defineStore(`${name}.state`, {
       language: 'en',
       baseFontSize: 1.0,
       setup: {
-        difficultyLevel: DifficultyLevel.NORMAL_1
+        difficultyLevel: DifficultyLevel.NORMAL_2
       },
       rounds: []
     } as State

src/views/SetupBot.vue

@@ -3,10 +3,27 @@
 
   <div class="instructions">
     <ol>
-      <li v-html="t('setupBot.soloFarmBoard')"></li>
+      <li v-html="t('setupBot.botColor')"></li>
+      <li v-html="t('setupBot.firstPlayerScoreTrack')"></li>
+      <ul>
+        <li v-html="t('setupBot.returnPlayerTokens')"></li>
+      </ul>
+      <li v-html="t(`setupBot.placeDockingMat.${expertMode ? 'expert' : 'normal'}`)"></li>
+      <ul>
+        <li v-html="t('setupBot.noHiveMatFactionTile')"></li>
+      </ul>
+      <li v-html="t('setupBot.placeHibernationTokens')"></li>
+      <li>
+        <span v-html="t('setupBot.placeWorkers')"></span><br/>
+        <WorkerIcon v-for="(value,index) of grayWorkerValues" :key="index" :worker="grayWorker" :value="value"/><br/>
+        <WorkerIcon v-for="(value,index) of yellowWorkerValues" :key="index" :worker="yellowWorker" :value="value"/>
+      </li>
+      <li v-html="t('setupBot.placeAutomaGainedWorkerStrength', {value:gainedWorkerStrengthValue})"></li>
     </ol>
   </div>
 
+  <img src="@/assets/setup/docking-mat.png" class="docking-mat"/>
+
   <button class="btn btn-primary btn-lg mt-4" @click="startGame()">
     {{t('action.startGame')}}
   </button>
@@ -19,11 +36,14 @@ import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStateStore } from '@/store/state'
 import FooterButtons from '@/components/structure/FooterButtons.vue'
+import WorkerIcon from '@/components/structure/WorkerIcon.vue';
+import Worker from '@/services/enum/Worker';
 
 export default defineComponent({
   name: 'SetupBot',
   components: {
-    FooterButtons
+    FooterButtons,
+    WorkerIcon
   },
   setup() {
     const { t } = useI18n()
@@ -35,9 +55,51 @@ export default defineComponent({
       showStartingSpace: false
     }
   },
+  computed: {
+    expertMode() : boolean {
+      return this.state.setup.difficultyLevel >= 5
+    },
+    grayWorker() : Worker {
+      return Worker.GRAY
+    },
+    yellowWorker() : Worker {
+      return Worker.YELLOW
+    },
+    grayWorkerValues() : number[] {
+      switch (this.state.setup.difficultyLevel) {
+        case 1: return [2, 1, 1]
+        case 2: return [2, 2, 1]
+        case 3: return [3, 2, 2]
+        case 4: return [3, 2, 2]
+        case 5: return [3, 2, 2]
+        case 6: return [3, 2, 2]
+        default: return []
+      }
+    },
+    yellowWorkerValues() : number[] {
+      switch (this.state.setup.difficultyLevel) {
+        case 1: return [2, 1]
+        case 2: return [2, 2]
+        case 3: return [3, 1]
+        case 4: return [3, 2]
+        case 5: return [3, 1]
+        case 6: return [3, 2]
+        default: return []
+      }
+    },
+    gainedWorkerStrengthValue() : number {
+      switch (this.state.setup.difficultyLevel) {
+        case 4:
+        case 6:
+          return 3
+        default:
+          return 2
+      }
+    }
+  },
   methods: {
     startGame() : void {
-      this.$router.push('/round/1/player')
+      this.$router.push('/round/1/bot')
     }
   }
 })
@@ -46,5 +108,14 @@ export default defineComponent({
 <style lang="scss" scoped>
 .instructions {
   max-width: 1000px;
+  ol > li {
+    margin-top: 0.5rem;
+  }
+}
+.docking-mat {
+  display: block;
+  width: 100%;
+  max-width: 300px;
+  filter: drop-shadow(2px 2px 3px #888);
 }
 </style>

src/views/SetupGame.vue

@@ -1,6 +1,20 @@
 <template>
   <h1>{{t('setup.title')}}</h1>
 
+  <h2 v-html="t('setup.general.title')"></h2>
+  <div class="instructions">
+    <ol>
+      <li v-html="t('setup.general.setup2Players')"></li>
+      <li v-html="t('setup.general.pickPlayerColor')"></li>
+      <li v-html="t('setup.general.remove.title')"></li>
+      <ul>
+        <li v-html="t('setup.general.remove.seedCards')"></li>
+        <li v-html="t('setup.general.remove.carvingTiles')"></li>
+        <li v-html="t('setup.general.remove.factions')"></li>
+      </ul>
+    </ol>
+  </div>
+
   <DifficultyLevel/>
 
   <button class="btn btn-primary btn-lg mt-4" @click="setupBot()">
@@ -42,3 +56,12 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.instructions {
+  max-width: 1000px;
+  ol > li {
+    margin-top: 0.5rem;
+  }
+}
+</style>