View Radius fixes

src/components/Tile.vue

@@ -212,18 +212,18 @@ button.without-icon i {
     .hexBottom{
       border-left: dashed 3px blue;
     }
-    .centerTop {
-      border-top: solid 4.2426px red;
-      border-right: solid 4.2426px red;
+        .centerTop {
+      border-top: solid 4.2426px red !important;;
+      border-right: solid 4.2426px red !important;
     }
 
     .centerBottom {
-      border-bottom: solid 4.2426px red;
-      border-left: solid 4.2426px red;
+      border-bottom: solid 4.2426px red !important;
+      border-left: solid 4.2426px red !important;
     }
   }
 }
-.shifted{
+.shifted, .firstRow{
   .viewBorderRight{
     .hexTop{
       border-right: dashed 3px blue;
@@ -231,14 +231,14 @@ button.without-icon i {
     .hexBottom{
       border-bottom: dashed 3px blue;
     }
-    .centerTop {
-      border-top: solid 4.2426px red;
-      border-right: solid 4.2426px red;
+        .centerTop {
+      border-top: solid 4.2426px red !important;
+      border-right: solid 4.2426px red !important;
     }
 
     .centerBottom {
-      border-bottom: solid 4.2426px red;
-      border-left: solid 4.2426px red;
+      border-bottom: solid 4.2426px red !important;
+      border-left: solid 4.2426px red !important;
     }
   }
 }
@@ -345,18 +345,18 @@ button.without-icon i {
 }
 
 .centerTop {
-  border-top: solid 4.2426px red;
-  border-right: solid 4.2426px red;
+  border-top: solid 4.2426px red !important;
+  border-right: solid 4.2426px red !important;
 }
 
 .centerBottom {
-  border-bottom: solid 4.2426px red;
-  border-left: solid 4.2426px red;
+  border-bottom: solid 4.2426px red !important;
+  border-left: solid 4.2426px red !important;
 }
 
 .centerTile {
   z-index: 1002;
-  border-left: solid 3px red;
-  border-right: solid 3px red;
+  border-left: solid 3px red !important;
+  border-right: solid 3px red !important;
 }
 </style>

src/layouts/MainLayout.vue

@@ -47,7 +47,7 @@
                     <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
                   </q-item-section>
                   <q-item-section>
-                    <q-slider v-model="store.state.radiusX" :min="1" :max="Math.floor(store.state.mapSizeX/2)" label color="secondary" :step="1" label-always/>
+                    <q-slider v-model="store.state.radiusX" :min="1" :max="getViewRadiusMax(store.state.mapSizeX)" label color="secondary" :step="1" label-always/>
                   </q-item-section>
                 </q-item>
 
@@ -56,7 +56,7 @@
                     <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" />
                   </q-item-section>
                   <q-item-section>
-                    <q-slider v-model="store.state.radiusY" :min="1" :max="Math.floor(store.state.mapSizeY/2)" label color="secondary" :step="1" label-always/>
+                    <q-slider v-model="store.state.radiusY" :min="1" :max="getViewRadiusMax(store.state.mapSizeY)" label color="secondary" :step="1" label-always/>
                   </q-item-section>
                 </q-item>
 
@@ -274,6 +274,13 @@ export default defineComponent({
     }
   },
   methods: {
+    getViewRadiusMax(mapSize){
+      if(mapSize%2){
+        return Math.floor(mapSize/2)+1
+      }else{
+        return (mapSize/2)+2
+      }
+    },
     newMap(){
       this.confirmMapNew = false;
       this.store.methods.reset();