Newer
Older
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<img alt="header" src="~assets/icon.webp" width="50px">
<q-toolbar-title style="font-weight: bold;">
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>
<q-btn-dropdown label="Settings" color="secondary">
<div class="row no-wrap q-pa-md">
<div class="column" style="width: 600px;">
<div class="text-h6 q-mb-md">Initial View Radius</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.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>
<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="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-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" />
</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-item-section>
</div>
</q-item>
<q-separator inset spaced />
<div>Horizontal Color and Opacity
<q-color v-model="horizontalColor" class="my-picker"/>
</div>
<q-item>
<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>
</q-btn-dropdown>
<q-separator inset spaced />
<q-btn class="q-mr-xs" color="secondary" label="Download Map" @click='generateMap()'>
<q-tooltip :disable="$q.platform.is.mobile">
Download current configuration as a JSON-file.
</q-tooltip>
</q-btn>
<q-btn
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
class="q-mr-xs"
dense
color="secondary"
label="Toggle Fullscreen"
@click="$q.fullscreen.toggle()">
<q-tooltip :disable="$q.platform.is.mobile">
{{ $q.fullscreen.isActive ? 'Exit Fullscreen' : 'Toggle Fullscreen' }}
</q-tooltip>
</q-btn>
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<q-separator inset spaced />
<q-btn @click="alert = true" color="secondary" dense label="Made by Griefed">
<q-tooltip :disable="$q.platform.is.mobile">
Open a little About :)
</q-tooltip>
<q-avatar>
<img alt="header" src="~assets/Griefed.webp" width="50">
</q-avatar>
</q-btn>
<q-dialog v-model="alert">
<q-card style="max-width: 1000px;width:750px">
<q-card-section>
<div class="text-h6">About Griefed and Let Them Trade Map Maker</div>
</q-card-section>
<q-card-section align="center">
<q-btn style="margin-right: 15px" type="a" href="https://github.com/Griefed">
<q-icon size="50px" color="info" name="mdi-github"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit my GitHub profile!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://blog.griefed.de">
<q-icon size="50px" color="info" name="mdi-wordpress"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit my blog!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://griefed.de">
<q-icon size="50px" color="info" name="mdi-web"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit my website!
</q-tooltip>
</q-btn>
</q-card-section>
<q-card-section class="q-pt-none">
Visual map maker for Let Them Trade by Spaceflower, made with VueJS/Quasar.<br>
Simply click on a button in the center of a tile and select the type you want it to change to.<br>
Do so for the whole map. After your map looks good to you, hit the "DOWNLOAD MAP"-button in the top-right.<br>
This will generate a .json-file and download it which will contain your configuration as a Let Them Trade map.
</q-card-section>
<q-card-section>
<div class="text-h6">All Things Spaceflower!</div>
</q-card-section>
<q-card-section align="center">
<q-btn style="margin-right: 15px" type="a" href="https://store.steampowered.com/app/1313290/Let_Them_Trade/">
<q-icon size="50px" color="black" name="mdi-steam"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Let Them Trade on Steam!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://www.twitch.tv/spaceflowerde">
<q-icon size="50px" color="black" name="mdi-twitch"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Spaceflower on Twitch!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://spaceflower.de/">
<q-icon size="50px" color="black" name="mdi-web"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit the homepage of Spaceflower!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://www.tiktok.com/@spaceflowerde?">
<q-icon size="50px" color="black" name="tiktok"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit Spaceflower on TikTok!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://twitter.com/spaceflowerde">
<q-icon size="50px" color="black" name="mdi-twitter"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit Spaceflower on Twitter!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://www.facebook.com/SpaceflowerDE">
<q-icon size="50px" color="black" name="mdi-facebook"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Visit Spaceflower on Facebook!
</q-tooltip>
</q-btn>
<q-btn style="margin-right: 15px" type="a" href="https://discordapp.com/invite/yaTeefS">
<q-icon size="50px" color="black" name="mdi-discord"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
Join their Discord server!
</q-tooltip>
</q-btn>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</q-toolbar>
</q-header>
<q-page-container>
<q-page class="row no-wrap">
<div class="col">
<div class="full-height full-width">
<q-scroll-area
:visible="visible" class="full-height full-width page"
:bar-style="{ borderRadius: '5px', opacity: 1, zIndex: 1001 }"
:vertical-thumb-style="{ borderRadius: '5px', opacity: verticalOpacity, zIndex: 1001, background: verticalColor }"
:horizontal-thumb-style="{ borderRadius: '5px', opacity: horizontalOpacity, zIndex: 1001, background: horizontalColor }">
<router-view/>
</q-scroll-area>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<script>
import { openURL } from 'quasar'
export default defineComponent({
name: 'MainLayout',
setup () {
alert: ref(false),
verticalColor: ref('#000000'),
horizontalColor: ref('#000000'),
verticalOpacity: ref(1),
horizontalOpacity: ref(1),
newMap(){
this.confirmMapNew = false;
this.store.methods.reset();
},
this.downloadMap(this.store.methods.getMapId() + ".json", JSON.stringify(this.store.methods.exportMap(), null, 2));
},
downloadMap(mapName, map) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(map));
element.setAttribute('download', mapName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}
})
</script>
<style>
.page {
background: radial-gradient(circle, #56638A 0%, #483A58 100%)
}
</style>