terrain selection

src/components/setup/AutomaSetup.vue

@@ -13,7 +13,22 @@
         <li v-html="t('setupGameAutoma.factionSelection.chooseSet')"></li>
       </ol>
     </li>
-    <li v-html="t('setupGameAutoma.chooseAutomaTerrain')"></li>
+    <li>
+      <span v-html="t('setupGameAutoma.chooseAutomaTerrain')"></span><br/>
+      <ul>
+        <li v-for="(faction,i) in factions" :key="faction">
+          <i>{{t(`botFaction.${faction}`)}}</i>:
+          <div class="terrainSelection">
+            <div class="form-check form-check-inline" v-for="terrain in terrains" :key="terrain">
+              <input class="form-check-input" type="radio" :name="`botTerrain${i}`" v-model="botTerrain[i]" :value="terrain" :id="`terrain-${i}-${terrain}`">
+              <label class="form-check-label" :for="`terrain-${i}-${terrain}`">
+                <AppIcon type="terrain" :name="terrain" extension="webp" class="terrainIcon"/>
+              </label>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </li>
     <li>
       <span v-html="t('setupGameAutoma.automaComponents.title')"></span>
       <ol type="a">
@@ -80,9 +95,13 @@ import BotFaction from '@/services/enum/BotFaction'
 import { ScienceDisciplineBonusSteps } from '@/services/ScienceDisciplineBonus'
 import ScienceDisciplineBonuses from '@/services/ScienceDisciplineBonuses'
 import { useStateStore } from '@/store/state'
+import Terrain from '@/services/enum/Terrain'
 
 export default defineComponent({
   name: 'AutomaSetup',
+  emits: {
+    botTerrain: (_botTerrain: Terrain[]) => true  // eslint-disable-line @typescript-eslint/no-unused-vars
+  },
   components: {
     AppIcon
   },
@@ -91,6 +110,11 @@ export default defineComponent({
     const state = useStateStore()
     return { t, state }
   },
+  data() {
+    return {
+      botTerrain: [undefined, undefined] as (Terrain|undefined)[]
+    }
+  },
   computed: {
     palaceTileCount() : number {
       return this.state.setup.playerSetup.playerCount + 1
@@ -121,12 +145,24 @@ export default defineComponent({
     },
     isTwoHumanPlayers() : boolean {
       return this.state.setup.playerSetup.playerCount === 2
+    },
+    terrains() : Terrain[] {
+      return Object.values(Terrain)
     }
   },
   methods: {
     getScienceDisciplineBonus(botFaction : BotFaction) : ScienceDisciplineBonusSteps[] {
       return ScienceDisciplineBonuses.get(botFaction)
     }
+  },
+  watch: {
+    // whenever question changes, this function will run
+    botTerrain: {
+      handler(newValue) {
+        this.$emit('botTerrain', newValue)
+      },
+      deep: true
+    }
   }
 })
 </script>
@@ -146,4 +182,14 @@ li {
   height: 1.75rem;
   filter: drop-shadow(2px 2px 2px #888);
 }
+.terrainSelection .form-check-inline {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.terrainIcon {
+  margin: 0.25rem;
+  height: 1.75rem;
+  filter: drop-shadow(2px 2px 2px #888);
+}
 </style>

src/locales/de.json

@@ -52,7 +52,8 @@
       "chooseSet": "Wähle 1 Set, nimm dir das passende Planungstableau und wähle eine der beiden Gemeinschaften."
     },
     "factionSelectionTwoHumanPlayer": "Wähle deine <b>Gemeinschaft</b> und Rundenbonus nach den üblichen Regeln für ein Spiel mit 3 Spielern.",
-    "chooseAutomaTerrain": "Wähle eine <b>Heimatlandschaft</b> für Automa, die anders ist als deine, und lege die entsprechende Landschaftstyp-Priorisierungskarte (LTP) in Automas Bereich. Automas Heimatlandschaft wird auf der Karte oben und unten sowie im ersten Kreis von links angezeigt.",
+    "chooseAutomaTerrain": "Wähle eine <b>Heimatlandschaft</b> für Automa, die anders ist als deine.",
+    "invalidTerrainSelection": "Bitte wähle eine Heimatlandschaft für Automa aus.",
     "automaComponents": {
       "title": "Verteile Automas Spielsteine wie folgt:",
       "buildings": "Lege alle <b>Gebäude</b> ihrer Farbe in ihren Bereich.",

src/locales/en.json

@@ -52,7 +52,8 @@
       "chooseSet": "Choose a set, take the corresponding Planning display, and select one of the two Factions."
     },
     "factionSelectionTwoHumanPlayer": "Choose your <b>Faction</b> and Round Bonus following the usual rules for a 3-Player game.",
-    "chooseAutomaTerrain": "Choose a <b>Native terrain</b> for Automa different from yours. Give Automa the matching Automa Terrain Priority (ATP) card. The ATP's Terrain type is Indicated by the top and bottom bars and the leftmost circles.",
+    "chooseAutomaTerrain": "Choose a <b>Native terrain</b> for Automa different from yours.",
+    "invalidTerrainSelection": "Please select a terrain for Automa.",
     "automaComponents": {
       "title": "Distribute the Automa components as follows:",
       "buildings": "Place all her <b>buildings</b> in her play area.",

src/locales/es.json

@@ -35,7 +35,7 @@
       "factionTiles": "Añade 2 losetas de Facción al azar a cada carta de Planificación.",
       "chooseSet": "Coge uno de los conjuntos de carta y losetas. Coge la carta de Planificación y selecciona una de las dos facciones."
     },
-    "chooseAutomaTerrain": "Elige un <b>terreno natal</b> para el Automa diferente al tuyo. Dale al Automa la carta de prioridad de terreno (PTA) correspondiente. El tipo de terreno de esta carta está indicado en las barras superior e inferior, y en los círculos de la parte izquierda.",
+    "chooseAutomaTerrain": "Elige un <b>terreno natal</b> para el Automa diferente al tuyo.",
     "automaComponents": {
       "title": "Distribuye los componentes del Automa como se indica a continuación:",
       "buildings": "Coloca sus <b>edificios</b> en su zona de juego.",

src/services/enum/Terrain.ts

@@ -2,12 +2,12 @@
  * Terrain
  */
 enum Terrain {
-  DESERT = 'desert',
-  FOREST = 'forest',
   LAKE = 'lake',
-  MOUNTAIN = 'mountain',
   PLAINS = 'plains',
+  FOREST = 'forest',
+  WASTELAND = 'wasteland',
   SWAMP = 'swamp',
-  WASTELAND = 'wasteland'
+  DESERT = 'desert',
+  MOUNTAIN = 'mountain'
 }
 export default Terrain

src/store/state.ts

@@ -2,6 +2,7 @@ import BotFaction from '@/services/enum/BotFaction'
 import DifficultyLevel from '@/services/enum/DifficultyLevel'
 import { defineStore } from 'pinia'
 import { name } from '@/../package.json'
+import Terrain from '@/services/enum/Terrain'
 
 export const useStateStore = defineStore(`${name}.store`, {
   state: () => {
@@ -56,6 +57,7 @@ export interface Setup {
   playerSetup: PlayerSetup
   roundScoreTiles?: number[]
   roundScoreFinalTile?: number
+  botTerrain?: Terrain[]
   // parameters not relevant for the application, but persisted for back button support in setup screens
   setupBookActions?: number[]
   setupCompetencyTiles?: number[]

src/views/SetupGameAutoma.vue

@@ -2,10 +2,18 @@
   <h1>{{t('setupGameAutoma.title')}}</h1>
 
   <div class="instructions">
-    <AutomaSetup/>
+    <AutomaSetup @botTerrain="value => botTerrain = value"/>
   </div>
 
-  <button class="btn btn-primary btn-lg mt-4" @click="startGame">
+  <div class="container-fluid" v-if="!isValidTerrainSelection">
+    <div class="row">
+      <div class="col alert alert-warning mt-2">
+        {{t('setupGameAutoma.invalidTerrainSelection')}}
+      </div>
+    </div>
+  </div>
+
+  <button class="btn btn-primary btn-lg mt-4" @click="startGame" :disabled="!isValidTerrainSelection">
     {{t('action.startGame')}}
   </button>
 
@@ -18,6 +26,7 @@ import { useI18n } from 'vue-i18n'
 import FooterButtons from '@/components/structure/FooterButtons.vue'
 import AutomaSetup from '@/components/setup/AutomaSetup.vue'
 import { PlayerOrder, useStateStore } from '@/store/state'
+import Terrain from '@/services/enum/Terrain'
 
 export default defineComponent({
   name: 'SetupGameAutoma',
@@ -30,8 +39,26 @@ export default defineComponent({
     const state = useStateStore()
     return { t, state }
   },
+  data() {
+    return {
+      botTerrain: [] as Terrain[]
+    }
+  },
+  computed: {
+    isValidTerrainSelection() : boolean {
+      if (this.botTerrain[0] === undefined) {
+        return false
+      }
+      if (this.state.setup.playerSetup.botCount === 2
+          && (this.botTerrain[1] === undefined || this.botTerrain[1] === this.botTerrain[0])) {
+        return false
+      }
+      return true
+    }
+  },
   methods: {
     startGame() : void {
+      this.state.setup.botTerrain = this.botTerrain
       // prepare first round with initial player order
       const { playerCount, botCount } = this.state.setup.playerSetup
       const playerOrder : PlayerOrder[] = []

tests/unit/helper/mockState.ts

@@ -1,5 +1,6 @@
 import BotFaction from '@/services/enum/BotFaction'
 import DifficultyLevel from '@/services/enum/DifficultyLevel'
+import Terrain from '@/services/enum/Terrain'
 import { Round, State } from '@/store/state'
 
 export default function (params?: MockStateParams) : State {  
@@ -14,7 +15,8 @@ export default function (params?: MockStateParams) : State {
         botFaction: params?.botFaction ?? [BotFaction.SIMPLETONS]
       },
       roundScoreTiles: params?.roundScoreTiles,
-      roundScoreFinalTile: params?.roundScoreFinalTile
+      roundScoreFinalTile: params?.roundScoreFinalTile,
+      botTerrain: params?.botTerrain
     },
     rounds: params?.rounds ?? []
   }
@@ -27,5 +29,6 @@ export interface MockStateParams {
   botFaction?: BotFaction[]
   roundScoreTiles?: number[]
   roundScoreFinalTile?: number
+  botTerrain?: Terrain[]
   rounds?: Round[]
 }