setup game

src/components/setup/DifficultyLevel.vue

@@ -0,0 +1,63 @@
+<template>
+  <h3 class="mt-4 mb-3">{{t('setup.difficultyLevel.title')}}</h3>
+
+  <div class="row">
+    <div class="col-3 col-sm-2 col-md-1 text-end">
+      <label for="difficultyLevel" class="form-label">{{t('setup.difficultyLevel.easy')}}</label>
+    </div>
+    <div class="col-6 col-sm-8 col-md-5">
+      <input type="range" class="form-range" min="1" max="6" id="difficultyLevel"
+          :value="difficultyLevel" @input="updateDifficultyLevel($event)">
+    </div>
+    <div class="col-3 col-sm-2 col-md-1">
+      <label for="difficultyLevel" class="form-label">{{t('setup.difficultyLevel.hard')}}</label>
+    </div>
+  </div>  
+  <div class="row">
+    <div class="col-11 offset-1">
+      <i>
+        {{t('setup.difficultyLevel.level',{level:difficultyLevel})}}
+        <template v-if="difficultyLevel >= 5">
+          ({{t('setup.difficultyLevel.expertMode')}})
+        </template>
+      </i>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStateStore } from '@/store/state'
+import AppIcon from '../structure/AppIcon.vue'
+
+export default defineComponent({
+  name: 'DifficultyLevel',
+  components: {
+    AppIcon
+  },
+  setup() {
+    const { t } = useI18n()
+    const state = useStateStore()
+
+    const difficultyLevel = ref(state.setup.difficultyLevel)
+
+    return { t, state, difficultyLevel }
+  },
+  methods: {
+    updateDifficultyLevel(event: Event) {
+      this.difficultyLevel = parseInt((event.target as HTMLInputElement).value)
+      this.state.setup.difficultyLevel = this.difficultyLevel
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  height: 1.5rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+</style>

src/locales/de.json

@@ -6,6 +6,19 @@
     "play2": "TBD",
     "feedback": "Discussion and Feedback:"
   },
+  "setup": {
+    "title": "Spielaufbau",
+    "difficultyLevel": {
+      "title": "Schwierigkeitsgrad",
+      "easy": "Leicht",
+      "hard": "Schwer",
+      "level": "Stufe {level}",
+      "expertMode": "Experten-Modus"
+    }
+  },
+  "setupBot": {
+    "title": "Automa Spielaufbau"
+  },
   "action": {
     "playGame": "Spielen",
     "startGame": "Spiel starten",

src/locales/en.json

@@ -6,6 +6,19 @@
     "play2": "TBD",
     "feedback": "Discussion and Feedback:"
   },
+  "setup": {
+    "title": "Setup Game",
+    "difficultyLevel": {
+      "title": "Difficulty Level",
+      "easy": "Easy",
+      "hard": "Hard",
+      "level": "Level {level}",
+      "expertMode": "Expert Mode"
+    }
+  },
+  "setupBot": {
+    "title": "Setup Automa"
+  },
   "action": {
     "playGame": "Play Game",
     "startGame": "Start Game",

src/router/index.ts

@@ -3,6 +3,8 @@ import createRouterMatomoTracking from '@brdgm/brdgm-commons/src/util/router/cre
 import { name, version, appDeployName } from '@/../package.json'
 import AppHome from '@/views/AppHome.vue'
 import NotFound from '@/views/NotFound.vue'
+import SetupGame from '@/views/SetupGame.vue'
+import SetupBot from '@/views/SetupBot.vue'
 
 const LOCALSTORAGE_KEY = `${name}.route`
 
@@ -12,6 +14,16 @@ const routes: Array<RouteRecordRaw> = [
     name: 'AppHome',
     component: AppHome
   },
+  {
+    path: '/setupGame',
+    name: 'SetupGame',
+    component: SetupGame
+  },
+  {
+    path: '/setupBot',
+    name: 'SetupBot',
+    component: SetupBot
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',

src/store/state.ts

@@ -15,6 +15,7 @@ export const useStateStore = defineStore(`${name}.state`, {
   },
   actions: {
     resetGame() {
+      this.setup.initialCardDeck = undefined
       this.rounds = []
     }
   },
@@ -29,6 +30,7 @@ export interface State {
 }
 export interface Setup {
   difficultyLevel: DifficultyLevel
+  initialCardDeck?: CardDeckPersistence
   debugMode?: boolean
 }
 

src/views/SetupBot.vue

@@ -0,0 +1,50 @@
+<template>
+  <h1>{{t('setupBot.title')}}</h1>
+
+  <div class="instructions">
+    <ol>
+      <li v-html="t('setupBot.soloFarmBoard')"></li>
+    </ol>
+  </div>
+
+  <button class="btn btn-primary btn-lg mt-4" @click="startGame()">
+    {{t('action.startGame')}}
+  </button>
+
+  <FooterButtons backButtonRouteTo="/setupGame" endGameButtonType="abortGame"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStateStore } from '@/store/state'
+import FooterButtons from '@/components/structure/FooterButtons.vue'
+
+export default defineComponent({
+  name: 'SetupBot',
+  components: {
+    FooterButtons
+  },
+  setup() {
+    const { t } = useI18n()
+    const state = useStateStore()
+    return { t, state }
+  },
+  data() {
+    return {
+      showStartingSpace: false
+    }
+  },
+  methods: {
+    startGame() : void {
+      this.$router.push('/round/1/player')
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.instructions {
+  max-width: 1000px;
+}
+</style>

src/views/SetupGame.vue

@@ -0,0 +1,44 @@
+<template>
+  <h1>{{t('setup.title')}}</h1>
+
+  <DifficultyLevel/>
+
+  <button class="btn btn-primary btn-lg mt-4" @click="setupBot()">
+    {{t('setupBot.title')}}
+  </button>
+
+  <FooterButtons endGameButtonType="abortGame"/>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStateStore } from '@/store/state'
+import FooterButtons from '@/components/structure/FooterButtons.vue'
+import DifficultyLevel from '@/components/setup/DifficultyLevel.vue'
+import CardDeck from '@/services/CardDeck'
+
+export default defineComponent({
+  name: 'SetupGame',
+  components: {
+    FooterButtons,
+    DifficultyLevel
+  },
+  setup() {
+    const { t } = useI18n()
+    const state = useStateStore()
+
+    return { t, state }
+  },
+  methods: {
+    setupBot() : void {
+      this.state.resetGame()
+
+      const cardDeck = CardDeck.new()
+      this.state.setup.initialCardDeck = cardDeck.toPersistence()
+
+      this.$router.push('/setupBot')
+    }
+  }
+})
+</script>