Loading Map from String

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "ltt-mapmaker",
       "version": "1.1.0",
       "dependencies": {
         "@quasar/extras": "^1.11.0",

src/components/Tile.vue

@@ -20,11 +20,14 @@
             </q-avatar>
           </q-item-section>
           <q-item-section>
-            <q-item-label>{{type}}</q-item-label>
+            <q-item-label>{{type.toUpperCase()}}</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
     </q-btn-dropdown>
+    <q-tooltip :disable="$q.platform.is.mobile">
+      {{tile.x+'/'+tile.y+": "+ tile.typeId}}
+    </q-tooltip>
    </div>
 
 </template>

src/layouts/MainLayout.vue

@@ -13,6 +13,31 @@
           Let Them Trade Map-Maker
         </q-toolbar-title>
 
+        <template v-if="store.state.lttMap">
+          <q-btn class="q-mr-xs" color="secondary" label="New Map" @click='confirmMapNew = true'>
+            <q-tooltip :disable="$q.platform.is.mobile">
+              NewMap
+            </q-tooltip>
+          </q-btn>
+
+          <q-separator inset spaced />
+
+          <q-dialog v-model="confirmMapNew" persistent>
+            <q-card>
+              <q-card-section class="row items-center">
+                <span class="q-ml-sm">
+                  Make sure you have saved your map before generating or loading another one!
+                  Clear Map?</span>
+              </q-card-section>
+
+              <q-card-actions align="right">
+                <q-btn flat label="Cancel" color="primary" v-close-popup />
+                <q-btn flat label="Clear Map" color="primary" @click='newMap()' v-close-popup />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+        </template>
+
         <q-btn-dropdown label="Settings" color="secondary">
           <div class="row no-wrap q-pa-md">
             <div class="column" style="width: 600px;">
@@ -249,6 +274,7 @@ export default defineComponent({
   setup () {
     const store = inject('store');
     return {
+      confirmMapNew: ref(false),
       store,
       visible: ref(true),
       alert: ref(false),
@@ -259,6 +285,10 @@ export default defineComponent({
     }
   },
   methods: {
+    newMap(){
+      this.confirmMapNew = false;
+      this.store.methods.reset();
+    },
     generateMap() {
       this.downloadMap(this.store.methods.getMapId() + ".json", JSON.stringify(this.store.methods.exportMap(), null, 2));
     },

src/pages/Index.vue

@@ -17,14 +17,15 @@
           :class="{tileMl: (i!=0)?1:0}"
           v-bind:style="{ zIndex: 1000,
                         }"
-          v-bind:key="i"></Tile>
+          v-bind:key="i">
+          </Tile>
       </div>
     </span>
   </span>
   <span v-else>
     <div class="row no-wrap q-pa-md">
       <div class="column" style="width: 600px;">
-        <div class="text-h6 q-mb-md">MapSize</div>
+        <div class="text-h6 q-mb-md text-grey-1">MapDimensions</div>
         <q-item>
           <q-item-section avatar>
             <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
@@ -42,18 +43,34 @@
             <q-slider v-model="store.state.mapSizeY" :min="1" :max="101" label color="secondary" :step="2" label-always/>
           </q-item-section>
         </q-item>
-        <q-btn class="q-mr-xs" color="secondary" label="Generate Base Map" @click='createMap()'>
+        <q-btn class="q-mr-xs" color="secondary" label="Generate New Map" @click='createMap()'>
           <q-tooltip :disable="$q.platform.is.mobile">
-            Create Base Map
+            Create New Map
+          </q-tooltip>
+        </q-btn>
+      </div>
+      <div class="column">
+        <q-input
+          v-model="mapString"
+          filled
+          autogrow
+          placeholder="Paste Map Data"
+          type="textarea"
+          input-class="pastCodeArea"
+        ></q-input>
+        <q-btn class="q-mr-xs" color="secondary" label="Load Map From Filedata" @click='loadMapData()'>
+          <q-tooltip :disable="$q.platform.is.mobile">
+            Load Map From Data
           </q-tooltip>
         </q-btn>
       </div>
     </div>
   </span>
+
 </template>
 
 <script>
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, ref } from 'vue';
 import Tile from "../components/Tile.vue";
 
 export default defineComponent({
@@ -61,14 +78,21 @@ export default defineComponent({
 
       const store = inject('store');
 
+      var mapString = ref('')
+
+      const loadMapData = function() {
+        store.methods.loadMap(JSON.parse(mapString.value));
+      };
+
       const createMap= function(){
         store.methods.generateMap();
-        //this.$forceUpdate();
       };
 
       return {
+        mapString,
         store,
         createMap,
+        loadMapData
       }
     },
 
@@ -99,4 +123,8 @@ export default defineComponent({
 .moveup {
   margin-top: -31px;
 }
+
+.pastCodeArea {
+  color: white;
+}
 </style>

src/store/index.js

@@ -7,27 +7,78 @@ const state = reactive({
   centerY: 0,
   radiusY: 1,
   radiusX: 1,
-  lttMap: null
+  mapID: 'e1-m.lttmm',
+  mapName: '',
+  lttMap: null,
 })
 
 const methods = {
 
+  reset() {
+    state.mapSizeX = 1;
+    state.mapSizeY = 1;
+    state.centerX = 0;
+    state.centerY = 0;
+    state.radiusY = 1;
+    state.radiusX = 1;
+    state.mapID = 'e1-m.lttmm';
+    state.mapName = '';
+    state.lttMap = null;
+  },
+
   exportMap() {
     return{
-      mapID: this.getMapId(),
-      mapName: this.getMapName(),
+      mapID: state.mapID,
+      mapName: state.mapName,
       initialViewRadiusX: state.centerX,
       initialViewRadiusY: state.centerY,
       initialVieCenterX: state.radiusX,
       initialViewCenterY: state.radiusY,
       tileSet: state.lttMap.flat()}
+  },
 
+  loadMap(mapData) {
+    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;
   },
 
-  getTileSet(){
+  getMultDimArrayFromFlattendArray(arr){
+    let maxX,minX,maxY,minY, mapSizeX, mapSizeY;
+    let sortArr = arr.sort((a,b)=>{
+      if(a.y == b.y){
+        return a.x - b.x;
+      } else {
+        return b.y-a.y
+      }
+    })
+    let arrSize = sortArr.length;
+    minX = sortArr[0].x;
+    maxY = sortArr[0].y;
+    minY = sortArr[arrSize-1].y;
+    maxX = sortArr[arrSize-1].x;
+    mapSizeX = Math.abs(minX)+Math.abs(maxX)+1;
+    mapSizeY = Math.abs(minY)+Math.abs(maxY)+1;
 
+    let map = [];
+    for(let m = 0; m < mapSizeY; m++){
+      let xArr = [];
+      for(let i = 0; i < mapSizeX; i++){
+        xArr.push(sortArr[(m*mapSizeX)+i]);
+      }
+      map.push(xArr);
+    }
+    return {mapSizeX, mapSizeY, map};
   },
 
+
   getMapName() {
     const reticulating = ["Adding","Hidden","Agendas","Adjusting","Bell","Curves","Aesthesizing","Industrial","Areas","Aligning","Covariance","Matrices",
       "Applying","Feng","Shui","Shaders","Applying","Theatre","Soda","Layer","Asserting","Packed","Exemplars","Attempting","to","Lock","Back-Buffer",
@@ -78,6 +129,7 @@ const methods = {
       map.push(xArr);
     }
     state.lttMap = map;
+    state.mapName = this.getMapName();
   }
 
 }