MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>


        <q-avatar>
          <img alt="header" src="~assets/icon.webp" width="50px">
        </q-avatar>


        <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="getViewRadiusMax(store.state.mapSizeX)" 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="getViewRadiusMax(store.state.mapSizeY)" 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>
            </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-separator inset spaced />

        </template>

        <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>

        <q-separator inset spaced />

        <q-btn
          :icon="$q.dark.isActive ? 'nights_stay' : 'wb_sunny'"
          class="q-mr-xs"
          dense
          color="secondary"
          label="Toggle Dark Mode"
          @click="$q.dark.toggle()">
          <q-tooltip :disable="$q.platform.is.mobile">
            {{ $q.dark.isActive ? 'Deactivate Dark Mode' : 'Activate Dark Mode' }}
          </q-tooltip>
        </q-btn>

        <q-separator inset spaced />

        <q-btn @click="alert = true" color="secondary" dense label="About LTTMM">
          <q-tooltip :disable="$q.platform.is.mobile">
            Open a little About! 🙂
          </q-tooltip>

        </q-btn>

        <q-dialog v-model="alert">
          <q-card style="max-width: 1000px;width:750px">

            <q-card-section>
              <div class="text-h6 text-center">About Let Them Trade Map-Maker, Let Them Trade, and Spaceflower</div>
              <div class="text-center">Let Them Trade Map-Maker is not affiliated with Spaceflower in any way, shape, or form.</div>
            </q-card-section>

            <q-card-section align="center">
              <q-btn style="margin-right: 15px" type="a" target="_blank" href="https://github.com/Griefed/ltt-mapmaker">
                <q-icon size="50px" :color="$q.dark.isActive ? 'white' : 'dark'" name="mdi-github"></q-icon>
                <q-tooltip :disable="$q.platform.is.mobile">
                  LTTMM on GitHub!
                </q-tooltip>
              </q-btn>
            </q-card-section>

            <q-card-section class="q-pt-none text-center">
              A visual map maker for the game <b>Let Them Trade</b>, by <b>Spaceflower</b>, 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 "<b>DOWNLOAD MAP</b>"-button in the menubar at the top.<br>
              This will generate and download a <b>.json</b>-file containing your Let Them Trade map.
            </q-card-section>

            <q-card-section>
              <div class="text-h6 text-center">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="red-7" 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="red-7" 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="red-7" 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="red-7" 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="red-7" 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="red-7" 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="red-7" 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 { defineComponent, ref, reactive, inject } from 'vue'
import { openURL } from 'quasar'

export default defineComponent({
  name: 'MainLayout',
  setup () {
    const store = inject('store');
    return {
      confirmMapNew: ref(false),
      store,
      visible: ref(true),
      alert: ref(false),
      verticalColor: ref('#000000'),
      horizontalColor: ref('#000000'),
      verticalOpacity: ref(1),
      horizontalOpacity: ref(1),
    }
  },
  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();
    },

    generateMap() {
      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>