From b8e3b99c2dcc9a4e99e4c4756f108bcf1518b0ee Mon Sep 17 00:00:00 2001
From: Stefan Seifert <stefanseifert@users.noreply.github.com>
Date: Wed, 27 Nov 2024 10:15:16 +0100
Subject: [PATCH] rotate planet tiles

---
 src/components/setup/MapRandomizer.vue | 12 +++++++-----
 src/services/map/SpaceSector.ts        | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/setup/MapRandomizer.vue b/src/components/setup/MapRandomizer.vue
index 0e72f90..215fa74 100644
--- a/src/components/setup/MapRandomizer.vue
+++ b/src/components/setup/MapRandomizer.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="mapWrapper">
     <div class="map" :class="{large:!twoPlayerMap,small:twoPlayerMap}">
-      <div v-for="spaceSector of spaceSectors" :key="spaceSector.id" class="spaceSector">
+      <div v-for="spaceSector of spaceSectors" :key="spaceSector.id" class="spaceSector" @click="spaceSector.rotate()"
+          :style="`transform: rotate(${spaceSector.rotation.value*60}deg);`">
         <AppIcon type="map-space-sector" :name="`${spaceSector.id + (spaceSector.outline ? '-outline' : '')}`" extension="webp"/>
         <svg class="overlay">
           <defs>
             <polygon id="spaceSectorArrow" points="8,5 13,10 3,10" style="fill:#fff" />
           </defs>
-          <circle cx="80" cy="80" r="25" class="circle" />
-          <text x="66" y="90" class="id" :class="{outline:spaceSector.outline}">{{spaceSector.id}}</text>
-          <use x="72" y="55" xlink:href="#spaceSectorArrow"/>
+          <circle cx="74.75" cy="81" r="25" class="circle" />
+          <text x="61" y="90" class="id" :class="{outline:spaceSector.outline}">{{spaceSector.id}}</text>
+          <use x="68" y="55" xlink:href="#spaceSectorArrow"/>
         </svg>
       </div>
     </div>
@@ -59,12 +60,13 @@ export default defineComponent({
   overflow-y: hidden;
 }
 .map {
-  z-index: -10;
   .spaceSector {
     position: absolute;
     display: inline-block;
     width: 150px;
     filter: drop-shadow(0 0 0.25rem #fff);
+    cursor: pointer;
+    user-select: none;
     img {
       width: 100%;
     }
diff --git a/src/services/map/SpaceSector.ts b/src/services/map/SpaceSector.ts
index fffd65e..dad05fd 100644
--- a/src/services/map/SpaceSector.ts
+++ b/src/services/map/SpaceSector.ts
@@ -1,3 +1,5 @@
+import { ref } from "vue"
+
 /**
  * Space sector tile
  */
@@ -5,12 +7,21 @@ export default class SpaceSector {
 
   readonly id: string
   readonly outline: boolean
-  rotation: number
+  rotation
   
   constructor(id: string, outline?: boolean) {
     this.id = id
     this.outline = outline ?? false
-    this.rotation = 0
+    this.rotation = ref(0)
+  }
+
+  rotate() : void {
+    if (this.rotation.value == 5) {
+      this.rotation.value = 0
+    }
+    else {
+      this.rotation.value += 1
+    }
   }
 
 }