Skip to content
Snippets Groups Projects
Commit a4b2686f authored by Trungel's avatar Trungel
Browse files

allowing of even map sized

parent 68f5d445
No related branches found
No related tags found
1 merge request!6breaking: Add Electron build, npm scripts, fix paths for tile-images, Allow different sized maps, Load maps
Hide whitespace changes
Inline Side-by-side
src/layouts/MainLayout.vue
+ 73
− 71
View file @ a4b2686f
...@@ -36,99 +36,101 @@ ...@@ -36,99 +36,101 @@
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template>
<q-btn-dropdown label="Settings" color="secondary">
<div class="row no-wrap q-pa-md"> <q-btn-dropdown label="Settings" color="secondary">
<div class="column" style="width: 600px;"> <div class="row no-wrap q-pa-md">
<div class="text-h6 q-mb-md">Initial View Radius</div> <div class="column" style="width: 600px;">
<q-item> <div class="text-h6 q-mb-md">Initial View Radius</div>
<q-item-section avatar>
<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="24" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<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="14" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-separator inset spaced />
<div class="text-h6 q-mb-md">Initial View Center</div>
<q-item>
<q-item-section avatar>
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
</q-item-section>
<q-item-section>
<q-slider v-model="store.state.centerX" :min="-24" :max="24" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" />
</q-item-section>
<q-item-section>
<q-slider v-model="store.state.centerY" :min="-14" :max="14" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-separator inset spaced />
<div class="text-h6 q-mb-md">Scrollbar Settings</div>
<div class="row no-wrap q-pa-md">
<div>Horizontal Color and Opacity
<q-color v-model="verticalColor" class="my-picker"/>
</div>
<q-item> <q-item>
<div class="column">
<q-item-section avatar> <q-item-section avatar>
<q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" /> <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-slider vertical reverse v-model="verticalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> <q-slider v-model="store.state.radiusX" :min="1" :max="Math.floor(store.state.mapSizeX/2)" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<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-item-section> </q-item-section>
</div>
</q-item> </q-item>
<q-separator inset spaced /> <q-separator inset spaced />
<div>Horizontal Color and Opacity <div class="text-h6 q-mb-md">Initial View Center</div>
<q-color v-model="horizontalColor" class="my-picker"/>
</div>
<q-item> <q-item>
<div class="column"> <q-item-section avatar>
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
</q-item-section>
<q-item-section>
<q-slider v-model="store.state.centerX" :min="store.state.minX" :max="store.state.maxX" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" />
</q-item-section>
<q-item-section>
<q-slider v-model="store.state.centerY" :min="store.state.minY" :max="store.state.maxY" label color="secondary" :step="1" label-always/>
</q-item-section>
</q-item>
<q-separator inset spaced />
<div class="text-h6 q-mb-md">Scrollbar Settings</div>
<div class="row no-wrap q-pa-md">
<div>Horizontal Color and Opacity
<q-color v-model="verticalColor" class="my-picker"/>
</div>
<q-item>
<div class="column">
<q-item-section avatar> <q-item-section avatar>
<q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" /> <q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-slider vertical reverse v-model="horizontalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> <q-slider vertical reverse v-model="verticalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/>
</q-item-section> </q-item-section>
</div>
</q-item>
<q-separator inset spaced />
<div>Horizontal Color and Opacity
<q-color v-model="horizontalColor" class="my-picker"/>
</div> </div>
</q-item> <q-item>
</div> <div class="column">
<q-item-section avatar>
<q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" />
</q-item-section>
<q-item-section>
<q-slider vertical reverse v-model="horizontalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/>
</q-item-section>
</div>
</q-item>
</div>
</div>
</div> </div>
</div> </q-btn-dropdown>
</q-btn-dropdown>
<q-separator inset spaced /> <q-separator inset spaced />
<q-btn class="q-mr-xs" color="secondary" label="Download Map" @click='generateMap()'> <q-btn class="q-mr-xs" color="secondary" label="Download Map" @click='generateMap()'>
<q-tooltip :disable="$q.platform.is.mobile"> <q-tooltip :disable="$q.platform.is.mobile">
Download current configuration as a JSON-file. Download current configuration as a JSON-file.
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<q-separator inset spaced /> <q-separator inset spaced />
</template>
<q-btn <q-btn
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
......
src/pages/Index.vue
+ 2
− 2
View file @ a4b2686f
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-slider v-model="store.state.mapSizeX" :min="1" :max="101" label color="secondary" :step="2" label-always/> <q-slider v-model="store.state.mapSizeX" :min="1" :max="101" label color="secondary" :step="1" label-always/>
</q-item-section> </q-item-section>
</q-item> </q-item>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-slider v-model="store.state.mapSizeY" :min="1" :max="101" label color="secondary" :step="2" label-always/> <q-slider v-model="store.state.mapSizeY" :min="1" :max="101" label color="secondary" :step="1" label-always/>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-btn class="q-mr-xs" color="secondary" label="Generate New Map" @click='createMap()'> <q-btn class="q-mr-xs" color="secondary" label="Generate New Map" @click='createMap()'>
......
src/store/index.js
+ 27
− 6
View file @ a4b2686f
import {reactive} from 'vue'; import {reactive} from 'vue';
const state = reactive({ const state = reactive({
maxX: 0,
minX: 0,
maxY: 0,
minY: 0,
mapSizeX: 1, mapSizeX: 1,
mapSizeY: 1, mapSizeY: 1,
centerX: 0, centerX: 0,
...@@ -48,6 +52,10 @@ const methods = { ...@@ -48,6 +52,10 @@ const methods = {
state.mapSizeX = tileSetData.mapSizeX; state.mapSizeX = tileSetData.mapSizeX;
state.mapSizeY = tileSetData.mapSizeY; state.mapSizeY = tileSetData.mapSizeY;
state.lttMap = tileSetData.map; state.lttMap = tileSetData.map;
state.maxX = tileSetData.maxX;
state.minX = tileSetData.minX;
state.maxY = tileSetData.maxY;
state.minY = tileSetData.minY;
}, },
getMultDimArrayFromFlattendArray(arr){ getMultDimArrayFromFlattendArray(arr){
...@@ -75,7 +83,7 @@ const methods = { ...@@ -75,7 +83,7 @@ const methods = {
} }
map.push(xArr); map.push(xArr);
} }
return {mapSizeX, mapSizeY, map}; return {mapSizeX, mapSizeY,maxX, minX,maxY, minY, map};
}, },
...@@ -119,12 +127,25 @@ const methods = { ...@@ -119,12 +127,25 @@ const methods = {
generateMap() { generateMap() {
let defaultTile = "grass"; let defaultTile = "grass";
let map = []; let map = [];
let xMod = Math.floor(state.mapSizeX/2);
let yMod = Math.ceil(state.mapSizeY/2); state.minX = -Math.floor(state.mapSizeX/2);
for(let m = state.mapSizeY; m > 0; m--){ if(state.mapSizeX%2){
state.maxX = Math.floor(state.mapSizeX/2);
}else{
state.maxX = Math.floor(state.mapSizeX/2)+1;
}
state.minY = -Math.floor(state.mapSizeY/2);
if(state.mapSizeY%2){
state.maxY = Math.floor(state.mapSizeY/2);
}else{
state.maxY = Math.floor(state.mapSizeY/2)+1;
}
for(let m = state.maxY; m >= state.minY; m--){
let xArr = []; let xArr = [];
for(let i = 0; i < state.mapSizeX; i++){ for(let i = state.minX; i <= state.maxX; i++){
xArr.push({ x: i-xMod, y: m-yMod, z: 0, typeId: defaultTile }); xArr.push({ x: i, y: m, z: 0, typeId: defaultTile });
} }
map.push(xArr); map.push(xArr);
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Me haz all ze repositoriiiiiiiiiiiiiiiiiies