Merge pull request #16 from Trungel/datastructures

Display radius and center

src/components/Tile.vue

 <template>
 
-   <div id="parent" class="hexagon" :class="tile.typeId">
-    <div class="hexTop"></div>
-    <div class="hexBottom"></div>
+   <div id="parent" class="hexagon"
+    :class="[tile.typeId,isViewRadiusBorder(), ((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerTile':'']">
+    <div class="hexTop" :class="((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerTop':''"></div>
+    <div class="hexBottom" :class="((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerBottom':''"></div>
 
     <q-btn-dropdown
       class="buttonshift without-icon custom-width"
@@ -33,16 +34,43 @@
 </template>
 
 <script>
-import {ref} from "vue";
+import {inject, ref} from "vue";
 
 export default {
   props:{
     tile: Object,
     typeValue: String
   },
-  setup () {
+  setup (props) {
     var types = ["barren", "clay", "desert", "fish", "forest", "grass", "ice", "iron", "mountain", "salt", "stone", "water", "wheat", "wool"];
+    const store = inject('store');
+
+    const isViewRadiusBorder = function() {
+      var borders = [];
+      //leftBorder
+      if( props.tile.x == (this.store.state.centerX-this.store.state.radiusX+1) &&
+          ((this.store.state.centerY-this.store.state.radiusY+1) <= props.tile.y && props.tile.y <= (this.store.state.centerY+this.store.state.radiusY-1))){
+            borders.push("viewBorderLeft");
+      }
+      if( props.tile.x == (this.store.state.centerX+this.store.state.radiusX-1) &&
+          ((this.store.state.centerY-this.store.state.radiusY+1) <= props.tile.y && props.tile.y <= (this.store.state.centerY+this.store.state.radiusY-1))){
+            borders.push("viewBorderRight")
+      }
+      if( props.tile.y == (this.store.state.centerY+this.store.state.radiusY-1) &&
+          ((this.store.state.centerX-this.store.state.radiusX+1) <= props.tile.x && props.tile.x <= (this.store.state.centerX+this.store.state.radiusX-1))){
+            borders.push("viewBorderTop")
+      }
+      if( props.tile.y == (this.store.state.centerY-this.store.state.radiusY+1) &&
+          ((this.store.state.centerX-this.store.state.radiusX+1) <= props.tile.x && props.tile.x <= (this.store.state.centerX+this.store.state.radiusX-1))){
+            borders.push("viewBorderBottom")
+      }
+
+      return borders;
+    }
+
     return {
+      isViewRadiusBorder,
+      store,
       types,
       menuState: ref(false),
       label: 'grass',
@@ -88,6 +116,8 @@ button.without-icon i {
   border-right: solid 3px #333333;
 }
 
+
+
 .hexTop,
 .hexBottom {
   position: absolute;
@@ -149,6 +179,70 @@ button.without-icon i {
   background: inherit;
 }
 
+.viewBorderLeft {
+  z-index: 1001;
+  border-left: dashed 3px blue;
+}
+
+.viewBorderRight {
+  z-index: 1001;
+  border-right: dashed 3px blue;
+}
+
+.viewBorderTop {
+  z-index: 1001;
+  .hexTop {
+    border-top: dashed 3px blue;
+    border-right: dashed 3px blue;
+  }
+}
+.viewBorderBottom {
+  z-index: 1001;
+  .hexBottom {
+    border-bottom: dashed 3px blue;
+    border-left: dashed 3px blue;
+  }
+}
+
+.notShifted{
+  .viewBorderLeft{
+    .hexTop{
+      border-top: dashed 3px blue;
+    }
+    .hexBottom{
+      border-left: dashed 3px blue;
+    }
+    .centerTop {
+      border-top: solid 4.2426px red;
+      border-right: solid 4.2426px red;
+    }
+
+    .centerBottom {
+      border-bottom: solid 4.2426px red;
+      border-left: solid 4.2426px red;
+    }
+  }
+}
+.shifted{
+  .viewBorderRight{
+    .hexTop{
+      border-right: dashed 3px blue;
+    }
+    .hexBottom{
+      border-bottom: dashed 3px blue;
+    }
+    .centerTop {
+      border-top: solid 4.2426px red;
+      border-right: solid 4.2426px red;
+    }
+
+    .centerBottom {
+      border-bottom: solid 4.2426px red;
+      border-left: solid 4.2426px red;
+    }
+  }
+}
+
 .barren {
   background-image: url("../assets/tiles/barren_tile.webp");
   button {
@@ -249,4 +343,20 @@ button.without-icon i {
     color: black;
   }
 }
+
+.centerTop {
+  border-top: solid 4.2426px red;
+  border-right: solid 4.2426px red;
+}
+
+.centerBottom {
+  border-bottom: solid 4.2426px red;
+  border-left: solid 4.2426px red;
+}
+
+.centerTile {
+  z-index: 1002;
+  border-left: solid 3px red;
+  border-right: solid 3px red;
+}
 </style>

src/pages/Index.vue

@@ -2,11 +2,10 @@
   <span v-if="store.state.lttMap">
     <span v-for="(xRow, index) in store.state.lttMap" :key="index">
       <div class="row no-wrap"
-        v-bind:class="{
+        v-bind:class="[{
           firstRow: (index == 0),
           moveup: (index !=0),
-          shifted: (index != 0 && !(index%2))
-        }"
+        }, (index != 0 && !(index%2))?'shifted':'notShifted']"
       >
         <Tile
           v-for="(tile, i) in xRow"
@@ -15,8 +14,6 @@
           @update:typeValue="tile.typeId = $event"
           v-bind:id="tile.x+'_'+tile.y"
           :class="{tileMl: (i!=0)?1:0}"
-          v-bind:style="{ zIndex: 1000,
-                        }"
           v-bind:key="i">
           </Tile>
       </div>

src/store/index.js

@@ -42,13 +42,10 @@ const methods = {
   },
 
   loadMap(mapData) {
+    let tileSetData = this.getMultDimArrayFromFlattendArray(mapData.tileSet);
+
     state.mapID = mapData.mapID;
     state.mapName = mapData.mapName;
-    state.initialViewRadiusX = mapData.initialViewRadiusX;
-    state.initialViewRadiusY = mapData.initialViewRadiusY;
-    state.initialVieCenterX = mapData.initialVieCenterX;
-    state.initialViewCenterY = mapData.initialViewCenterY;
-    let tileSetData = this.getMultDimArrayFromFlattendArray(mapData.tileSet);
     state.mapSizeX = tileSetData.mapSizeX;
     state.mapSizeY = tileSetData.mapSizeY;
     state.lttMap = tileSetData.map;
@@ -56,6 +53,10 @@ const methods = {
     state.minX = tileSetData.minX;
     state.maxY = tileSetData.maxY;
     state.minY = tileSetData.minY;
+    state.radiusX = mapData.initialViewRadiusX;
+    state.radiusY = mapData.initialViewRadiusY;
+    state.centerX = mapData.initialViewCenterX;
+    state.centerY = mapData.initialViewCenterY;
   },
 
   getMultDimArrayFromFlattendArray(arr){