From 0cafffa0866d030dfc3b999cd26764b9bb1934b5 Mon Sep 17 00:00:00 2001
From: Trungel <29035983+Trungel@users.noreply.github.com>
Date: Mon, 27 Sep 2021 18:28:30 +0200
Subject: [PATCH] Loading Map from String
---
package-lock.json | 1 -
src/components/Tile.vue | 5 +++-
src/layouts/MainLayout.vue | 30 +++++++++++++++++++
src/pages/Index.vue | 40 +++++++++++++++++++++----
src/store/index.js | 60 +++++++++++++++++++++++++++++++++++---
5 files changed, 124 insertions(+), 12 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index a181585..f5837cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "ltt-mapmaker",
"version": "1.1.0",
"dependencies": {
"@quasar/extras": "^1.11.0",
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 8f7d53e..8fa5c88 100644
--- a/src/components/Tile.vue
+++ b/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>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index bbee6b0..9941a33 100644
--- a/src/layouts/MainLayout.vue
+++ b/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));
},
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 9f0c842..0ae5def 100644
--- a/src/pages/Index.vue
+++ b/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>
diff --git a/src/store/index.js b/src/store/index.js
index 4af8474..65dd8bb 100644
--- a/src/store/index.js
+++ b/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();
}
}
--
GitLab