bot setup

src/components/setup/DifficultyLevel.vue

@@ -14,7 +14,7 @@
     </div>
   </div>  
   <div class="row">
-    <div class="col-11 offset-1">
+    <div class="col-11 offset-md-1 offset-sm-2 offset-3">
       <i>
         {{t(`difficultyLevel.${difficultyLevel}`)}}
       </i>

src/components/setup/ScoringTiles.vue

@@ -3,12 +3,12 @@
 
   <div>
     <div class="finalScoring">
-      <img class="board" src="@/assets/final-scoring.webp" alt=""/>
+      <img class="board" src="@/assets/setup/final-scoring.webp" alt=""/>
       <AppIcon v-for="scoringTile in finalScoringTiles" type="scoring-tile-points" :name="scoringTile" :key="scoringTile"
           class="tile" :class="{[scoringTile]:true}"/>
     </div>
     <div class="eraScoring">
-      <img class="board" src="@/assets/era-scoring.webp" alt=""/>
+      <img class="board" src="@/assets/setup/era-scoring.webp" alt=""/>
       <AppIcon v-for="(scoringTile,index) in eraScoringTiles" type="scoring-tile" :name="scoringTile" :key="scoringTile"
           class="tile" :class="{[`item${index}`]:true}"/>
     </div>

src/locales/de.json

@@ -4,6 +4,10 @@
     "title": "Civolution Solo Helper",
     "play1": "Spiele <a href='https://boardgamegeek.com/boardgame/400602/civolution' target='_blank' rel='noopener'><b>Civolution</b></a> gegen V.I.C.I, die künstliche Gegenspielerin.",
     "play2": "Diese Applikation ersetzt das Solo-Kartendeck und führt dich durch das Spiel und die Solo-Regeln.",
+    "vici": {
+      "hello": "HALLO,<br/>ICH BIN<br/>V.I.C.I!",
+      "about": "Du möchtest Civolution alleine spielen? Dann erlaube uns dir V.I.C.I vorzustellen, eine I-CIV-Entität, deren Aufgabe es ist, eine konkurrierende Zivilisation zu simulieren."
+    },
     "feedback": "Discussion and Feedback:"
   },
   "setup": {
@@ -18,6 +22,17 @@
       "randomize": "Neu wählen"
     }
   },
+  "setupBot": {
+    "title": "V.I.C.I Aufbau",
+    "provisionMarker": "Proviantmarker",
+    "placeDisks": "Wähle eine Spielfarbe für V.I.C.I, nimm deren 7 <b>Scheiben</b> und platziere je eine davon auf jeder deiner eigenen 7 Scheiben auf den Spielplänen.",
+    "takeTribesMarkers": "Lege 15 <b>Stämme</b> (die übrigen 5 werden nicht verwendet) und 50 <b>Marker</b> von V.I.C.Is Farbe als Vorrat in V.I.C.Is Spielbereich bereit.",
+    "placeStartingTribes": "Stelle dann 1 von V.I.C.Is Stämmen aufrecht auf den freien Lagerplatz (ohne Feuer) im <i>Wald-Startgebiet</i> und 1 Stamm aufrecht auf den freien Lagerplatz (ohne Feuer) im <i>Grasland-Startgebiet</i>.",
+    "placeProvisionMarker": "Lege in beide Startgebiete je 1 von V.I.C.Is Markern <b>flach</b> neben den dortigen Farm-Bauplatz. Diese Marker stellen keine Rohstoffe dar, sondern sogenannte <i>„Proviantmarker“</i>.",
+    "takeDice": "Lege 6 <b>Aktivierungswürfel</b> und 1 <b>Schicksalswürfel</b> in V.I.C.Is Spielbereich bereit.",
+    "diceNotice": "Diese Würfel werden nicht gewürfelt - sie dienen dazu, die Anzahl von V.I.C.Is Würfeln zu ermitteln.",
+    "noOtherComponents": "Anderes Spielmaterial wird für V.I.C.I nicht benötigt."
+  },
   "difficultyLevel": {
     "1": "Einstieg",
     "2": "Moderat",

src/locales/en.json

@@ -4,6 +4,10 @@
     "title": "Civolution Solo Helper",
     "play1": "Play <a href='https://boardgamegeek.com/boardgame/400602/civolution' target='_blank' rel='noopener'><b>Civolution</b></a> against V.I.C.I, the artificial opponent.",
     "play2": "This application replaces the solo card deck and guides you through the game and solo ruleset.",
+    "vici": {
+      "hello": "HELLO,<br/>I AM<br/>V.I.C.I!",
+      "about": "If you want to play Civolution by yourself, let us introduce you to V.I.C.I, an I-CIV entity with the purpose of simulating a rival civilization."
+    },
     "feedback": "Discussion and Feedback:"
   },
   "setup": {
@@ -18,6 +22,17 @@
       "randomize": "Randomize"
     }
   },
+  "setupBot": {
+    "title": "Setup V.I.C.I",
+    "provisionMarker": "Provision marker",
+    "placeDisks": "Choose a player color for V.I.C.I, take the 7 <b>discs</b> of that color and place one of them onto each of your discs on the game boards.",
+    "takeTribesMarkers": "Place 15 <b>tribes</b> (the remaining 5 are not used) and 50 <b>markers</b> of V.I.C.I’s color in V.I.C.I’s play area as a supply.",
+    "placeStartingTribes": "Place 1 of V.I.C.I’s tribes upright onto the remaining non-fire encampment in the <i>Forest starting territory</i> and 1 tribe upright onto the remaining non-fire encampment in the <i>Grassland starting territory</i>.",
+    "placeProvisionMarker": "Place a marker <b>lengthwise</b> in each of the two starting territories next to the farm building space. These markers do not represent raw materials but are called <i>provision markers</i>.",
+    "takeDice": "Place 6 <b>activation dice</b> and <b>1 fate die</b> in V.I.C.I’s play area.",
+    "diceNotice": "You do not roll them, they are used to count the number of V.I.C.I's dice.",
+    "noOtherComponents": "Other components are not used for V.I.C.I."
+  },
   "difficultyLevel": {
     "1": "Beginner",
     "2": "Moderate",

src/router/index.ts

@@ -4,6 +4,7 @@ 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`
 
@@ -13,11 +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/views/AppHome.vue

@@ -11,6 +11,16 @@
   <p v-html="t('home.play1')"></p>
   <p v-html="t('home.play2')"></p>
 
+  <div class="row">
+    <div class="col hello">
+      <div class="vici">
+        <img src="@/assets/vici-hello.webp" alt=""/>
+        <div class="viciText" v-html="t('home.vici.hello')"></div>
+      </div>
+      <div class="text" v-html="t('home.vici.about')"></div>
+    </div>
+  </div>
+
 <!--
   <p class="text-muted fst-italic">
     {{t('home.feedback')}}
@@ -52,4 +62,33 @@ export default defineComponent({
 .kofi-button {
   height: 1.4rem;
 }
+.hello {
+  background-color: #2e4950;
+  border-radius: 15px;
+  margin-right: 15px;
+  margin-left: 10px;
+  max-width: 600px;
+  .vici {
+    position: relative;
+    float: right;
+    width: 200px;
+    margin-left: 15px;
+    img {
+      width: 100%;
+    }
+    .viciText {
+      position: absolute;
+      top: 32px;
+      left: 115px;
+      text-align: center;
+      transform: rotate(5deg);
+      line-height: 1.25rem;
+    }
+  }
+  .text {
+    padding: 10px;
+    font-style: italic;
+    color: #fff;
+  }
+}
 </style>

src/views/SetupBot.vue

@@ -0,0 +1,83 @@
+<template>
+  <h1>
+    <img src="@/assets/vici.webp" class="vici" alt=""/>
+    {{t('setupBot.title')}}
+  </h1>
+
+  <div class="instructions mt-3">
+    <div class="tribePlacement">
+      <img src="@/assets/setup/tribe-setup.webp" alt=""/>
+      <div class="label">{{t('setupBot.provisionMarker')}}</div>
+    </div>
+    <ul>
+      <li v-html="t('setupBot.placeDisks')"></li>
+      <li v-html="t('setupBot.takeTribesMarkers')"></li>
+      <ul>
+        <li v-html="t('setupBot.placeStartingTribes')"></li>
+        <li v-html="t('setupBot.placeProvisionMarker')"></li>
+      </ul>
+      <li v-html="t('setupBot.takeDice')"></li>
+      <ul>
+        <li v-html="t('setupBot.diceNotice')"></li>
+      </ul>
+    </ul>
+    <p v-html="t('setupBot.noOtherComponents')"></p>
+  </div>
+
+  <button class="btn btn-primary btn-lg mt-4" @click="startGame()">
+    {{t('action.startGame')}}
+  </button>
+
+  <FooterButtons endGameButtonType="abortGame"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FooterButtons from '@/components/structure/FooterButtons.vue'
+
+export default defineComponent({
+  name: 'SetupBot',
+  components: {
+    FooterButtons
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  methods: {
+    startGame() : void {
+      this.$router.push('/round/1')
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.vici {
+  height: 3rem;
+  margin-top: -0.5rem;
+}
+.instructions {
+  max-width: 1000px;
+  & > ul > li {
+    margin-top: 0.5rem;
+  }
+}
+.tribePlacement {
+  position: relative;
+  float: right;
+  margin-left: 15px;
+  margin-bottom: 15px;
+  img {
+    border-radius: 15px;
+    width: 250px;
+  }
+  .label {
+    position: absolute;
+    top: 8px;
+    right: 25px;
+    color: #fff;
+  }
+}
+</style>

src/views/SetupGame.vue

@@ -39,12 +39,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.instructions {
-  max-width: 1000px;
-  ol > li {
-    margin-top: 0.5rem;
-  }
-}
-</style>