Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch from webpack to vite

Browse Source
This commit is contained in:
James Lyne 2021-05-15 20:25:03 +01:00
parent 30cecb98e6
commit ce241c93e0
29 changed files with 2432 additions and 8764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

@ -0,0 +1 @@
VITE_VERSION=0.7.5

5
babel.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

140
index.html Normal file
View File

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="preload" href="https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2" as="font" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#222222">
<link rel="manifest" href="/live-atlas/favicons/site.webmanifest">
<link rel="icon" href="/live-atlas/favicons/favicon.svg">
<link rel=”mask-icon” href="/live-atlas/favicons/mask.svg" color="#cccccc">
<link rel="apple-touch-icon" sizes="180x180" href="/live-atlas/favicons/apple-touch-icon.png">
<meta name="keywords" content="minecraft, map, dynamic, liveatlas" />
<meta name="description" content="Minecraft Dynamic Map" />
<title>Minecraft Dynamic Map - LiveAtlas</title>
<style>
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html, body {
background-color: #121212;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
noscript {
color: #cccccc;
font-size: 1rem;
font-family: sans-serif;
text-align: center;
line-height: 1.25;
}
#splash, noscript {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 0.3s opacity linear;
z-index: 10000;
background-color: #121212;
cursor: wait;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.6rem;
padding: 4rem;
}
#splash[hidden] {
display: none;
}
#splash__spinner {
margin-top: 4rem;
animation: fade 0.5s linear 1s;
animation-fill-mode: both;
}
#splash__error {
margin-top: 2rem;
transition: opacity 0.5s ease-in;
}
#splash__error[aria-hidden=true] {
opacity: 0;
}
#splash__error-attempt:not(:empty):before {
content:' (';
}
#splash__error-attempt:not(:empty):after {
content:')';
}
</style>
</head>
<body>
<div id="splash">
<svg id="splash__logo" width="200" height="200" viewBox="0 0 270.06 267.09">
<g transform="translate(-.49951 -4.5791)">
<path transform="scale(.75)"
d="m0.66602 9.7227v298.96c0.046934 2.8741 0.25213 2.6741 2.535 3.6641l110.65 47.987c3.8989 1.918 3.6147 1.7537 3.6147-2.3528v-297.68c-0.0605-3.8542 0.32855-4.1331-2.8087-5.4937l-110.14-47.768c-2.988-1.1299-3.8517-1.741-3.8517 2.6812zm65.271 177.53c19.088 0 34.562 15.922 34.562 35.562 2.2e-4 6.4076-1.6821 12.696-4.8691 18.201l-25.939 55.648c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.344-55.426c-0.68826-1.1762-1.3097-2.3924-1.8613-3.6426l-0.21875-0.42578 0.03711 8e-3c-1.9214-4.5044-2.9137-9.3701-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938s6.4998 14.938 14.518 14.938c8.0178 6e-5 14.518-6.6877 14.518-14.938s-6.4998-14.938-14.518-14.938z"
fill="#cccccc"/>
<path transform="scale(.75)"
d="m236.43 8.5914-86.609 38.801c-9.3133 4.1592-8.1971 3.54-8.1971 14.952v297.52c-0.0201 2.6943-0.30938 2.8029 2.1555 1.7437l97.364-41.839c2.3162-0.98051 2.0784-1.6006 2.0784-3.5142v-303.35c0.15129-9.1976 0.75524-7.3665-6.7914-4.3133zm-44.714 54.614c19.088 0 34.562 15.922 34.562 35.562-1.9e-4 6.4108-1.6846 12.702-4.875 18.209l-25.934 55.643c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.357-55.453c-0.6778-1.1591-1.2908-2.357-1.8359-3.5879l-0.23243-0.45508 0.0391 8e-3c-1.9214-4.5044-2.9136-9.3699-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938 0 8.2498 6.4998 14.938 14.518 14.938 8.0178 7e-5 14.518-6.6877 14.518-14.938 0-8.2498-6.4998-14.938-14.518-14.938z"
fill="#cccccc"/>
<path d="m267.64 36.871-59.959-29.533c-6.555-3.2203-6.5798-4.161-6.4472 2.3579v225.51c-0.0251 3.9614 0.03 3.9662 3.1935 5.4609l62.579 29.567c3.8853 1.693 3.4322 1.9822 3.5316-1.5506v-224.87c0.0476-4.7459 0.23478-5.4796-2.8976-6.934z"
fill="#cccccc"/>
</g>
</svg>
<svg id="splash__spinner" width="38" height="38" viewBox="0 0 38 38" stroke="#fff">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18" fill="transparent"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</svg>
<div id="splash__error" role="alert" aria-hidden="true">
Failed to load server configuration. Retrying<span id="splash__error-attempt"></span>...
</div>
</div>
<noscript>
<strong>LiveAtlas requires JavaScript to work.<br />Please enable it to continue.</strong>
</noscript>
<div id="mcmap" class="dynmap"></div>
<script src="/standalone/config.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

10794
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -3,10 +3,11 @@
"version": "0.7.5", "version": "0.7.5",
"private": false, "private": false,
"scripts": { "scripts": {
"serve": "vue-cli-service serve ", "serve": "vite",
"build": "vue-cli-service build --report", "preview": "vite preview --port 8082",
"lint": "vue-cli-service lint", "build": "vue-tsc --noEmit && vite build --out-dir dist",
"postinstall": "node --experimental-modules --experimental-json-modules scripts/fix-leaflet.mjs" "lint": "eslint src",
"lint:fix": "eslint src --fix"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
@ -17,24 +18,22 @@
"@types/leaflet": "^1.5.19", "@types/leaflet": "^1.5.19",
"@typescript-eslint/eslint-plugin": "^4.1.0", "@typescript-eslint/eslint-plugin": "^4.1.0",
"@typescript-eslint/parser": "^4.1.0", "@typescript-eslint/parser": "^4.1.0",
"@vue/cli-plugin-babel": "~4.5.0", "@vitejs/plugin-vue": "^1.2.2",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "^4.5.9",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^5.0.2", "@vue/eslint-config-typescript": "^5.0.2",
"babel-eslint": "^10.1.0",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"eslint": "^7.5.0", "eslint": "^7.5.0",
"eslint-plugin-vue": "^7.0.0-0", "eslint-plugin-vue": "^7.0.0-0",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"normalize-scss": "^7.0.1", "normalize-scss": "^7.0.1",
"sass": "^1.29.0", "sass": "^1.29.0",
"sass-loader": "^10.1.0",
"svgo": "^1.1.0", "svgo": "^1.1.0",
"svgo-loader": "^2.1.0", "svgo-loader": "^2.1.0",
"typescript": "~3.9.3", "typescript": "~3.9.3",
"vite": "^2.3.2",
"vite-plugin-svg-sprite-component": "^1.0.8",
"vue-cli-plugin-svg-sprite": "~1.0.0", "vue-cli-plugin-svg-sprite": "~1.0.0",
"vue-tsc": "^0.1.2",
"vuex": "^4.0.0-rc.1" "vuex": "^4.0.0-rc.1"
}, },
"eslintConfig": { "eslintConfig": {

2
src/App.vue
View File

@ -25,7 +25,7 @@ import {computed, defineComponent, onBeforeUnmount, onMounted, onUnmounted, ref,
import Map from './components/Map.vue'; import Map from './components/Map.vue';
import Sidebar from './components/Sidebar.vue'; import Sidebar from './components/Sidebar.vue';
import ChatBox from './components/ChatBox.vue'; import ChatBox from './components/ChatBox.vue';
import {useStore} from "./store"; import {useStore} from "@/store";
import {ActionTypes} from "@/store/action-types"; import {ActionTypes} from "@/store/action-types";
import {parseUrl} from '@/util'; import {parseUrl} from '@/util';
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";

6
src/components/Map.vue
View File

@ -15,7 +15,7 @@
--> -->
<template> <template>
<div class="map" :style="{'background-color': mapBackground }"> <div class="map" :style="{backgroundColor: mapBackground }">
<MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer> <MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer> <PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer> <MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer>
@ -60,7 +60,7 @@ export default defineComponent({
setup() { setup() {
const store = useStore(), const store = useStore(),
leaflet = undefined as DynmapMap | undefined, leaflet = undefined as any,
maps = computed(() => store.state.maps), maps = computed(() => store.state.maps),
markerSets = computed(() => store.state.markerSets), markerSets = computed(() => store.state.markerSets),
@ -193,7 +193,7 @@ export default defineComponent({
crs: CRS.Simple, crs: CRS.Simple,
worldCopyJump: false, worldCopyJump: false,
// markerZoomAnimation: false, // markerZoomAnimation: false,
})); })) as DynmapMap;
this.leaflet.createPane('vectors'); this.leaflet.createPane('vectors');

2
src/components/Sidebar.vue
View File

@ -45,6 +45,8 @@ import {useStore} from "@/store";
import SvgIcon from "@/components/SvgIcon.vue"; import SvgIcon from "@/components/SvgIcon.vue";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {DynmapUIElement} from "@/dynmap"; import {DynmapUIElement} from "@/dynmap";
import "@/assets/icons/players.svg";
import "@/assets/icons/maps.svg";
export default defineComponent({ export default defineComponent({
components: { components: {

7
src/components/SvgIcon.vue
View File

@ -39,12 +39,7 @@ export default {
computed: { computed: {
iconPath() { iconPath() {
let icon = require(`@/assets/icons/${this.name}.svg`); return `#${this.name}`;
if (Object.prototype.hasOwnProperty.call(icon, 'default')) {
icon = icon.default;
}
return icon.url;
}, },
className() { className() {

3
src/components/chat/ChatMessage.vue
View File

@ -27,8 +27,7 @@
import {DynmapChat} from "@/dynmap"; import {DynmapChat} from "@/dynmap";
import {getMinecraftHead} from '@/util'; import {getMinecraftHead} from '@/util';
import {useStore} from "@/store"; import {useStore} from "@/store";
import defaultImage from '@/assets/images/player_face.png';
const defaultImage = require('@/assets/images/player_face.png');
export default defineComponent({ export default defineComponent({
props: { props: {

3
src/components/sidebar/FollowTarget.vue
View File

@ -37,8 +37,7 @@ import {useStore} from "@/store";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {defineComponent, onMounted, ref, watch} from "@vue/runtime-core"; import {defineComponent, onMounted, ref, watch} from "@vue/runtime-core";
import {getMinecraftHead} from '@/util'; import {getMinecraftHead} from '@/util';
import defaultImage from '@/assets/images/player_face.png';
const defaultImage = require('@/assets/images/player_face.png');
export default defineComponent({ export default defineComponent({
name: 'FollowTarget', name: 'FollowTarget',

3
src/components/sidebar/PlayerListItem.vue
View File

@ -31,8 +31,7 @@ import {DynmapPlayer} from "@/dynmap";
import {useStore} from "@/store"; import {useStore} from "@/store";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {getMinecraftHead} from '@/util'; import {getMinecraftHead} from '@/util';
import defaultImage from '@/assets/images/player_face.png';
const defaultImage = require('@/assets/images/player_face.png');
export default defineComponent({ export default defineComponent({
name: 'PlayerListItem', name: 'PlayerListItem',

11
src/components/sidebar/WorldListItem.vue
View File

@ -33,6 +33,17 @@ import {DynmapWorldMap, DynmapWorld} from "@/dynmap";
import {defineComponent} from 'vue'; import {defineComponent} from 'vue';
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import SvgIcon from "@/components/SvgIcon.vue"; import SvgIcon from "@/components/SvgIcon.vue";
import "@/assets/icons/block_world_surface.svg";
import "@/assets/icons/block_world_cave.svg";
import "@/assets/icons/block_world_biome.svg";
import "@/assets/icons/block_world_flat.svg";
import "@/assets/icons/block_nether_flat.svg";
import "@/assets/icons/block_nether_surface.svg";
import "@/assets/icons/block_the_end_flat.svg";
import "@/assets/icons/block_the_end_surface.svg";
import "@/assets/icons/block_other.svg";
import "@/assets/icons/block_other_flat.svg";
import "@/assets/icons/block_skylands.svg";
export default defineComponent({ export default defineComponent({
name: 'WorldListItem', name: 'WorldListItem',

2
src/dynmap.d.ts vendored
View File

@ -116,7 +116,7 @@ interface DynmapWorld {
title: string; title: string;
height: number; height: number;
center: Coordinate; center: Coordinate;
maps: Map<String, DynmapWorldMap>; maps: Map<string, DynmapWorldMap>;
} }
interface DynmapWorldMap { interface DynmapWorldMap {

26
src/index.d.ts vendored
View File

@ -1,12 +1,20 @@
declare module '*.svg' { import { ComponentCustomProperties } from 'vue'
const content: any; import {State, Store} from "@/store";
export default content;
declare module "*.png" {
const value: any;
export = value;
} }
interface BrowserSpriteSymbol { declare module '*.vue' {
id: string; import type { DefineComponent } from 'vue'
viewBox: string; const component: DefineComponent<{}, {}, any>
content: string; export default component
node: SVGSymbolElement; }
url: string;
declare module '@vue/runtime-core' {
// provide typings for `this.$store`
interface ComponentCustomProperties {
$store: Store<State>
}
} }

7
src/leaflet/control/ChatControl.ts
View File

@ -15,11 +15,12 @@
*/ */
import {Control, ControlOptions, DomUtil, Map} from 'leaflet'; import {Control, ControlOptions, DomUtil, Map} from 'leaflet';
import chat from '@/assets/icons/chat.svg';
import {useStore} from "@/store"; import {useStore} from "@/store";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {watch} from "@vue/runtime-core"; import {watch} from "@vue/runtime-core";
import "@/assets/icons/chat.svg";
export class ChatControl extends Control { export class ChatControl extends Control {
// @ts-ignore // @ts-ignore
options: ControlOptions options: ControlOptions
@ -34,8 +35,8 @@ export class ChatControl extends Control {
chatButton.type = 'button'; chatButton.type = 'button';
chatButton.title = 'Chat'; chatButton.title = 'Chat';
chatButton.innerHTML = ` chatButton.innerHTML = `
<svg class="svg-icon" viewBox="${chat.viewBox}"> <svg class="svg-icon">
<use xlink:href="${chat.url}" /> <use xlink:href="#chat" />
</svg>`; </svg>`;
chatButton.addEventListener('click', e => { chatButton.addEventListener('click', e => {

49
src/leaflet/control/ClockControl.ts
View File

@ -21,15 +21,16 @@ import {ControlOptions, DomUtil, Util, Map, Control} from 'leaflet';
import {getMinecraftTime} from '@/util'; import {getMinecraftTime} from '@/util';
import {DynmapWorldState} from "@/dynmap"; import {DynmapWorldState} from "@/dynmap";
import sun from '@/assets/icons/clock_sun.svg';
import sunRain from '@/assets/icons/clock_sun_rain.svg';
import sunStorm from '@/assets/icons/clock_sun_storm.svg';
import moon from '@/assets/icons/clock_moon.svg';
import moonRain from '@/assets/icons/clock_moon_rain.svg';
import moonStorm from '@/assets/icons/clock_moon_storm.svg';
import {watch} from "@vue/runtime-core"; import {watch} from "@vue/runtime-core";
import {useStore} from "@/store"; import {useStore} from "@/store";
import "@/assets/icons/clock_moon.svg";
import "@/assets/icons/clock_moon_rain.svg";
import "@/assets/icons/clock_moon_storm.svg";
import "@/assets/icons/clock_sun.svg";
import "@/assets/icons/clock_sun_rain.svg";
import "@/assets/icons/clock_sun_storm.svg";
export interface ClockControlOptions extends ControlOptions { export interface ClockControlOptions extends ControlOptions {
showTimeOfDay: boolean; showTimeOfDay: boolean;
showDigitalClock: boolean; showDigitalClock: boolean;
@ -44,8 +45,8 @@ export class ClockControl extends Control {
private _sun?: HTMLElement; private _sun?: HTMLElement;
private _moon?: HTMLElement; private _moon?: HTMLElement;
private _clock?: HTMLElement; private _clock?: HTMLElement;
private _currentMoonIcon?: BrowserSpriteSymbol; private _currentMoonIcon?: string;
private _currentSunIcon?: BrowserSpriteSymbol; private _currentSunIcon?: string;
private _unwatchHandler?: Function; private _unwatchHandler?: Function;
constructor(options: ClockControlOptions) { constructor(options: ClockControlOptions) {
@ -66,12 +67,12 @@ export class ClockControl extends Control {
this._moon.style.transform = 'translate(-150px, -150px)'; this._moon.style.transform = 'translate(-150px, -150px)';
this._sun!.innerHTML = ` this._sun!.innerHTML = `
<svg class="svg-icon" viewBox="${sun.viewBox}"> <svg class="svg-icon">
<use xlink:href="${sun.url}" /> <use xlink:href="#clock_sun" />
</svg>`; </svg>`;
this._moon!.innerHTML = ` this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${moon.viewBox}"> <svg class="svg-icon">
<use xlink:href="${moon.url}" /> <use xlink:href="#clock_moon" />
</svg>`; </svg>`;
if (this.options.showDigitalClock) { if (this.options.showDigitalClock) {
@ -138,33 +139,33 @@ export class ClockControl extends Control {
if (this.options.showWeather) { if (this.options.showWeather) {
if (worldState.thundering) { if (worldState.thundering) {
this._setSunIcon(sunStorm); this._setSunIcon('clock_sun_storm');
this._setMoonIcon(moonStorm); this._setMoonIcon('clock_moon_storm');
} else if (worldState.raining) { } else if (worldState.raining) {
this._setSunIcon(sunRain); this._setSunIcon('clock_sun_rain');
this._setMoonIcon(moonRain); this._setMoonIcon('clock_moon_rain');
} else { } else {
this._setSunIcon(sun); this._setSunIcon('clock_moon');
this._setMoonIcon(moon); this._setMoonIcon('clock_sun');
} }
} }
} }
_setSunIcon(icon: BrowserSpriteSymbol) { _setSunIcon(icon: string) {
if(this._sun && this._currentSunIcon !== icon) { if(this._sun && this._currentSunIcon !== icon) {
this._sun!.innerHTML = ` this._sun!.innerHTML = `
<svg class="svg-icon" viewBox="${icon.viewBox}"> <svg class="svg-icon">
<use xlink:href="${icon.url}" /> <use xlink:href="#${icon}" />
</svg>`; </svg>`;
this._currentSunIcon = icon; this._currentSunIcon = icon;
} }
} }
_setMoonIcon(icon: BrowserSpriteSymbol) { _setMoonIcon(icon: string) {
if(this._moon && this._currentMoonIcon !== icon) { if(this._moon && this._currentMoonIcon !== icon) {
this._moon!.innerHTML = ` this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${icon.viewBox}"> <svg class="svg-icon">
<use xlink:href="${icon.url}" /> <use xlink:href="#${icon}" />
</svg>`; </svg>`;
this._currentMoonIcon = icon; this._currentMoonIcon = icon;
} }

12
src/leaflet/control/DynmapLayerControl.ts
View File

@ -18,12 +18,12 @@
*/ */
import {Util, Control, DomEvent, LeafletEvent, Map as LeafletMap, Layer, DomUtil} from 'leaflet'; import {Util, Control, DomEvent, LeafletEvent, Map as LeafletMap, Layer, DomUtil} from 'leaflet';
import layers from '@/assets/icons/layers.svg';
import LayersObject = Control.LayersObject; import LayersObject = Control.LayersObject;
import LayersOptions = Control.LayersOptions; import LayersOptions = Control.LayersOptions;
import Layers = Control.Layers; import Layers = Control.Layers;
import checkbox from '@/assets/icons/checkbox.svg'; import '@/assets/icons/layers.svg';
import '@/assets/icons/checkbox.svg';
export class DynmapLayerControl extends Control.Layers { export class DynmapLayerControl extends Control.Layers {
private _layersLink?: HTMLElement; private _layersLink?: HTMLElement;
@ -55,8 +55,8 @@ export class DynmapLayerControl extends Control.Layers {
const element = super.onAdd(map); const element = super.onAdd(map);
this._layersLink!.innerHTML = ` this._layersLink!.innerHTML = `
<svg class="svg-icon" viewBox="${layers.viewBox}"> <svg class="svg-icon">
<use xlink:href="${layers.url}" /> <use xlink:href="#layers" />
</svg>`; </svg>`;
return element; return element;
@ -120,8 +120,8 @@ export class DynmapLayerControl extends Control.Layers {
item.appendChild(input); item.appendChild(input);
item.insertAdjacentHTML('beforeend', ` item.insertAdjacentHTML('beforeend', `
<svg class="svg-icon" viewBox="${checkbox.viewBox}" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="${checkbox.url}" /> <use xlink:href="#checkbox" />
</svg>`); </svg>`);
item.appendChild(label); item.appendChild(label);

6
src/leaflet/control/LinkControl.ts
View File

@ -19,7 +19,7 @@
import {Control, ControlOptions, DomUtil, Map} from 'leaflet'; import {Control, ControlOptions, DomUtil, Map} from 'leaflet';
import {useStore} from "@/store"; import {useStore} from "@/store";
import linkIcon from '@/assets/icons/link.svg'; import '@/assets/icons/link.svg';
import ClipboardJS from 'clipboard'; import ClipboardJS from 'clipboard';
export class LinkControl extends Control { export class LinkControl extends Control {
@ -38,8 +38,8 @@ export class LinkControl extends Control {
linkButton.type = 'button'; linkButton.type = 'button';
linkButton.title = 'Copy link to current location'; linkButton.title = 'Copy link to current location';
linkButton.innerHTML = ` linkButton.innerHTML = `
<svg class="svg-icon" viewBox="${linkIcon.viewBox}" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use xlink:href="${linkIcon.url}" /> <use xlink:href="#link" />
</svg>`; </svg>`;
new ClipboardJS(linkButton, { new ClipboardJS(linkButton, {

6
src/leaflet/control/LoadingControl.ts
View File

@ -30,7 +30,7 @@ import {
LeafletEvent, LeafletEvent,
Map, TileLayer, Map, TileLayer,
} from 'leaflet'; } from 'leaflet';
import loadingIcon from '@/assets/icons/loading.svg'; import '@/assets/icons/loading.svg';
export interface LoadingControlOptions extends ControlOptions { export interface LoadingControlOptions extends ControlOptions {
delayIndicator?: number; delayIndicator?: number;
@ -54,8 +54,8 @@ export class LoadingControl extends Control {
this._loadingIndicator.title = 'Loading...'; this._loadingIndicator.title = 'Loading...';
this._loadingIndicator.hidden = true; this._loadingIndicator.hidden = true;
this._loadingIndicator.innerHTML = ` this._loadingIndicator.innerHTML = `
<svg class="svg-icon" viewBox="${loadingIcon.viewBox}"> <svg class="svg-icon">
<use xlink:href="${loadingIcon.url}" /> <use xlink:href="#loading" />
</svg>`; </svg>`;
this._addLayerListeners(map); this._addLayerListeners(map);

1
src/leaflet/icon/DynmapIcon.ts
View File

@ -23,6 +23,7 @@ export interface DynmapIconOptions extends DivIconOptions {
icon: string; icon: string;
label: string; label: string;
isHtml?: boolean; isHtml?: boolean;
showLabel?: boolean;
} }
const markerContainer: HTMLDivElement = document.createElement('div'); const markerContainer: HTMLDivElement = document.createElement('div');

3
src/leaflet/icon/PlayerIcon.ts
View File

@ -20,8 +20,7 @@
import {MarkerOptions, DivIcon, DomUtil} from 'leaflet'; import {MarkerOptions, DivIcon, DomUtil} from 'leaflet';
import {DynmapPlayer} from "@/dynmap"; import {DynmapPlayer} from "@/dynmap";
import {getMinecraftHead} from '@/util'; import {getMinecraftHead} from '@/util';
import playerImage from '@/assets/images/player_face.png';
const playerImage = require('@/assets/images/player_face.png');
const noSkinImage: HTMLImageElement = document.createElement('img'); const noSkinImage: HTMLImageElement = document.createElement('img');
noSkinImage.height = 16; noSkinImage.height = 16;

3
src/main.ts
View File

@ -24,7 +24,8 @@ import '@/scss/style.scss';
const splash = document.getElementById('splash'), const splash = document.getElementById('splash'),
splashError = document.getElementById('splash__error'), splashError = document.getElementById('splash__error'),
splashAttempt = document.getElementById('splash__error-attempt'); splashAttempt = document.getElementById('splash__error-attempt'),
svgs = import.meta.globEager('/assets/icons/*.svg');
window.hideSplash = function() { window.hideSplash = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {

5
src/shims-vue.d.ts vendored
View File

@ -1,5 +0,0 @@
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

2
src/store/state.ts
View File

@ -68,7 +68,7 @@ export type State = {
} }
export const state: State = { export const state: State = {
version: process.env.PACKAGE_VERSION || 'Unknown', version: (import.meta.env.VITE_VERSION || 'Unknown') as string,
configuration: { configuration: {
version: '', version: '',

9
src/vuex.d.ts vendored
View File

@ -1,9 +0,0 @@
import { ComponentCustomProperties } from 'vue'
import {State, Store} from "@/store";
declare module '@vue/runtime-core' {
// provide typings for `this.$store`
interface ComponentCustomProperties {
$store: Store<State>
}
}

4
tsconfig.json
View File

@ -12,9 +12,11 @@
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"sourceMap": true, "sourceMap": true,
"isolatedModules": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": [
"webpack-env" "vite/client",
"vue"
], ],
"paths": { "paths": {
"@/*": [ "@/*": [

24
vite.config.ts Normal file
View File

@ -0,0 +1,24 @@
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
import svgSpritePlugin from "vite-plugin-svg-sprite-component"
export default defineConfig({
plugins: [vue(), svgSpritePlugin({
symbolId: (name) => name,
})],
server: {
port: 8080
},
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, 'src')
}
]
},
build: {
chunkSizeWarningLimit: 600,
}
});

41
vue.config.js
View File

@ -1,41 +0,0 @@
const
webpack = require('webpack'),
fs = require('fs'),
packageJson = fs.readFileSync('./package.json'),
version = JSON.parse(packageJson).version || 'Unknown';
module.exports = {
publicPath: '',
assetsDir: 'live-atlas',
pluginOptions: {
svgSprite: {
loaderOptions: {
extract: true,
spriteFilename: 'live-atlas/img/icons.[hash:8].svg'
},
}
},
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
PACKAGE_VERSION: '"' + version + '"'
}
})
]
},
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].minify = false
return args
})
config.module
.rule('svg-sprite')
.use('svgo-loader')
.loader('svgo-loader')
}
}