map layout

src/components/setup/MapRandomizer.vue

@@ -1,12 +1,18 @@
 <template>
-  <p>Map Randomizer...</p>
+  <div class="map" :class="{large:!twoPlayerMap,small:twoPlayerMap}">
+    <div v-for="spaceSector of spaceSectors" :key="spaceSector.id" class="spaceSector">
+      <AppIcon type="map-space-sector" :name="`${spaceSector.id + (spaceSector.outline ? '-outline' : '')}`" extension="webp"/>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AppIcon from '../structure/AppIcon.vue'
 import { useStateStore } from '@/store/state'
+import MapGenerator from '@/services/map/MapGenerator';
+import SpaceSector from '@/services/map/SpaceSector';
 
 export default defineComponent({
   name: 'MapRandomizer',
@@ -16,15 +22,114 @@ export default defineComponent({
   setup() {
     const { t } = useI18n()
     const state = useStateStore()
+    
+    const { playerCount, botCount } = state.setup.playerSetup
+    const totalPlayerCount = playerCount + botCount
+    const mapGenerator = new MapGenerator(totalPlayerCount)
 
-    return { t, state }
+    return { t, state, totalPlayerCount, mapGenerator }
   },
   computed: {
+    spaceSectors() : readonly SpaceSector[] {
+      return this.mapGenerator.spaceSectors
+    },
+    twoPlayerMap() : boolean {
+      return this.totalPlayerCount < 3
+    }
   },
   methods: {
   }
 })
 </script>
 
 <style lang="scss" scoped>
+.map {
+  .spaceSector {
+    position: absolute;
+    display: inline-block;
+    width: 150px;
+    filter: drop-shadow(0 0 0.25rem #fff);
+    img {
+      width: 100%;
+    }
+  }
+  &.large {
+    position: relative;
+    height: 440px;
+    width: 570px;
+    transform: translate(-18px,38px) rotate(30deg);
+    margin-bottom: 76px;
+    .spaceSector:nth-child(1) {
+      left: 84px;
+    }
+    .spaceSector:nth-child(2) {
+      top: 16px;
+      left: calc(84px + 140px);
+    }
+    .spaceSector:nth-child(3) {
+      top: 32px;
+      left: calc(84px + 140px + 140px);
+    }
+    .spaceSector:nth-child(4) {
+      top: 114px;
+    }
+    .spaceSector:nth-child(5) {
+      top: calc(114px + 16px);
+      left: 140px;
+    }
+    .spaceSector:nth-child(6) {
+      top: calc(114px + 32px);
+      left: calc(140px + 140px);
+    }
+    .spaceSector:nth-child(7) {
+      top: calc(114px + 48px);
+      left: calc(140px + 140px + 140px);
+    }
+    .spaceSector:nth-child(8) {
+      top: calc(244px);
+      left: 56px;
+    }
+    .spaceSector:nth-child(9) {
+      top: calc(244px + 16px);
+      left: calc(56px + 140px);
+    }
+    .spaceSector:nth-child(10) {
+      top: calc(244px + 32px);
+      left: calc(56px + 140px + 140px);
+    }
+  }
+  &.small {
+    position: relative;
+    height: 440px;
+    width: 430px;
+    transform: translate(-10px,2px) rotate(30deg);
+    margin-bottom: -8px;
+    .spaceSector:nth-child(1) {
+      left: 84px;
+    }
+    .spaceSector:nth-child(2) {
+      top: 16px;
+      left: calc(84px + 140px);
+    }
+    .spaceSector:nth-child(3) {
+      top: 114px;
+    }
+    .spaceSector:nth-child(4) {
+      top: calc(114px + 16px);
+      left: 140px;
+    }
+    .spaceSector:nth-child(5) {
+      top: calc(114px + 32px);
+      left: calc(140px + 140px);
+    }
+    .spaceSector:nth-child(6) {
+      top: calc(244px);
+      left: 56px;
+    }
+    .spaceSector:nth-child(7) {
+      top: calc(244px + 16px);
+      left: calc(56px + 140px);
+    }
+  }
+}
 </style>

src/services/map/MapGenerator.ts

@@ -0,0 +1,43 @@
+import SpaceSector from "./SpaceSector"
+
+/**
+ * Map Generator.
+ */
+export default class MapGenerator {
+
+  readonly spaceSectors : SpaceSector[]
+
+  constructor(playerCount: number) {
+    if (playerCount > 2) {
+      this.spaceSectors = INITIAL_SETUP_PLAYER_34
+    }
+    else {
+      this.spaceSectors = INITIAL_SETUP_PLAYER_12
+    }
+  }
+
+
+}
+
+const INITIAL_SETUP_PLAYER_34 : SpaceSector[] = [
+  new SpaceSector('10'),
+  new SpaceSector('01'),
+  new SpaceSector('05'),
+  new SpaceSector('09'),
+  new SpaceSector('02'),
+  new SpaceSector('03'),
+  new SpaceSector('06'),
+  new SpaceSector('08'),
+  new SpaceSector('04'),
+  new SpaceSector('07')
+]
+
+const INITIAL_SETUP_PLAYER_12 : SpaceSector[] = [
+  new SpaceSector('01'),
+  new SpaceSector('05', true),
+  new SpaceSector('02'),
+  new SpaceSector('03'),
+  new SpaceSector('06', true),
+  new SpaceSector('04'),
+  new SpaceSector('07', true)
+]

src/services/map/SpaceSector.ts

@@ -0,0 +1,16 @@
+/**
+ * Space sector tile
+ */
+export default class SpaceSector {
+
+  readonly id: string
+  readonly outline: boolean
+  rotation: number
+
+  constructor(id: string, outline?: boolean) {
+    this.id = id
+    this.outline = outline ?? false
+    this.rotation = 0
+  }
+
+}