export Util functions separately

src/App.vue

@@ -27,7 +27,7 @@ import Sidebar from './components/Sidebar.vue';
 import ChatBox from './components/ChatBox.vue';
 import {useStore} from "./store";
 import {ActionTypes} from "@/store/action-types";
-import Util from '@/util';
+import {parseUrl} from '@/util';
 import {MutationTypes} from "@/store/mutation-types";
 
 export default defineComponent({
@@ -85,8 +85,8 @@ export default defineComponent({
 				updateTimeout.value = 0;
 			},
 
-			parseUrl = () => {
+			handleUrl = () => {
-				const parsedUrl = Util.parseUrl();
+				const parsedUrl = parseUrl();
 
 				if(parsedUrl) {
 					//Remove legacy url if one was parsed
@@ -115,7 +115,7 @@ export default defineComponent({
 		onMounted(() => loadConfiguration());
 		onBeforeUnmount(() => stopUpdates());
 
-		parseUrl();
+		handleUrl();
 		onResize();
 
 		onMounted(() => window.addEventListener('resize', onResize));

src/components/chat/ChatMessage.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 	import {defineComponent, ref, onMounted, computed} from "@vue/runtime-core";
 	import {DynmapChat} from "@/dynmap";
-	import Util from '@/util';
+	import {getMinecraftHead} from '@/util';
 	import {useStore} from "@/store";
 
 	const defaultImage = require('@/assets/images/player_face.png');
@@ -65,7 +65,7 @@
 
 			onMounted(() => {
 				if(showFace.value) {
-					Util.getMinecraftHead(props.message.playerAccount as string, '16')
+					getMinecraftHead(props.message.playerAccount as string, '16')
 						.then((result) => image.value = result.src).catch(() => {});
 				}
 			});

src/components/map/vector/Areas.vue

@@ -20,7 +20,7 @@ import {useStore} from "@/store";
 import {DynmapArea, DynmapMarkerSet} from "@/dynmap";
 import {ActionTypes} from "@/store/action-types";
 import {createArea, updateArea} from "@/util/areas";
-import Util from '@/util';
+import {getPointConverter} from '@/util';
 import DynmapLayerGroup from "@/leaflet/layer/DynmapLayerGroup";
 import DynmapPolygon from "@/leaflet/vector/DynmapPolygon";
 import DynmapPolyline from "@/leaflet/vector/DynmapPolyline";
@@ -50,7 +50,7 @@ export default defineComponent({
 			layers = Object.freeze(new Map()) as Map<string, DynmapPolygon | DynmapPolyline>,
 
 			createAreas = () => {
-				const converter = Util.getPointConverter();
+				const converter = getPointConverter();
 
 				props.set.areas.forEach((area: DynmapArea, id: string) => {
 					const layer = createArea(area, converter);
@@ -76,7 +76,7 @@ export default defineComponent({
 					markerSet: props.set.id,
 					amount: 10,
 				}).then(updates => {
-					const converter = Util.getPointConverter();
+					const converter = getPointConverter();
 
 					for(const update of updates) {
 						if(update.removed) {
@@ -103,7 +103,7 @@ export default defineComponent({
 
 		//FIXME: Prevent unnecessary repositioning when changing worlds
 		watch(currentProjection, () => {
-			const converter = Util.getPointConverter();
+			const converter = getPointConverter();
 
 			for (const [id, area] of props.set.areas) {
 				updateArea(layers.get(id), area, converter);

src/components/map/vector/Circles.vue

@@ -20,7 +20,7 @@ import {useStore} from "@/store";
 import {DynmapCircle, DynmapMarkerSet} from "@/dynmap";
 import {ActionTypes} from "@/store/action-types";
 import {createCircle, updateCircle} from "@/util/circles";
-import Util from '@/util';
+import {getPointConverter} from '@/util';
 import DynmapPolyline from "@/leaflet/vector/DynmapPolyline";
 import DynmapPolygon from "@/leaflet/vector/DynmapPolygon";
 import DynmapLayerGroup from "@/leaflet/layer/DynmapLayerGroup";
@@ -50,7 +50,7 @@ export default defineComponent({
 			layers = Object.freeze(new Map<string, DynmapPolyline | DynmapPolygon>()),
 
 			createCircles = () => {
-				const converter = Util.getPointConverter();
+				const converter = getPointConverter();
 
 				props.set.circles.forEach((circle: DynmapCircle, id: string) => {
 					const layer = createCircle(circle, converter);
@@ -76,7 +76,7 @@ export default defineComponent({
 					markerSet: props.set.id,
 					amount: 10,
 				}).then(updates => {
-					const converter = Util.getPointConverter();
+					const converter = getPointConverter();
 
 					for(const update of updates) {
 						if(update.removed) {
@@ -103,7 +103,7 @@ export default defineComponent({
 
 		//FIXME: Prevent unnecessary repositioning when changing worlds
 		watch(currentProjection, () => {
-			const converter = Util.getPointConverter();
+			const converter = getPointConverter();
 
 			for (const [id, circle] of props.set.circles) {
 				updateCircle(layers.get(id), circle, converter);

src/components/map/vector/Lines.vue

@@ -20,7 +20,7 @@ import {useStore} from "@/store";
 import {DynmapLine, DynmapMarkerSet} from "@/dynmap";
 import {ActionTypes} from "@/store/action-types";
 import {createLine, updateLine} from "@/util/lines";
-import Util from '@/util';
+import {getPointConverter} from '@/util';
 import DynmapPolyline from "@/leaflet/vector/DynmapPolyline";
 import DynmapLayerGroup from "@/leaflet/layer/DynmapLayerGroup";
 
@@ -49,7 +49,7 @@ export default defineComponent({
 			layers = Object.freeze(new Map<string, DynmapPolyline>()),
 
 			createLines = () => {
-				const converter = Util.getPointConverter();
+				const converter = getPointConverter();
 
 				props.set.lines.forEach((line: DynmapLine, id: string) => {
 					const layer = createLine(line, converter);
@@ -75,7 +75,7 @@ export default defineComponent({
 					markerSet: props.set.id,
 					amount: 10,
 				}).then(updates => {
-					const converter = Util.getPointConverter();
+					const converter = getPointConverter();
 
 					for(const update of updates) {
 						if(update.removed) {
@@ -102,7 +102,7 @@ export default defineComponent({
 
 		//FIXME: Prevent unnecessary repositioning when changing worlds
 		watch(currentProjection, () => {
-			const converter = Util.getPointConverter();
+			const converter = getPointConverter();
 
 			for (const [id, line] of props.set.lines) {
 				updateLine(layers.get(id), line, converter);

src/components/sidebar/FollowTarget.vue

@@ -36,7 +36,7 @@ import {DynmapPlayer} from "@/dynmap";
 import {useStore} from "@/store";
 import {MutationTypes} from "@/store/mutation-types";
 import {defineComponent, onMounted, ref, watch} from "@vue/runtime-core";
-import Util from '@/util';
+import {getMinecraftHead} from '@/util';
 
 const defaultImage = require('@/assets/images/player_face.png');
 
@@ -67,7 +67,7 @@ export default defineComponent({
 				image.value = defaultImage;
 
 				if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkinFaces) {
-					Util.getMinecraftHead(props.target, '16').then((result) => image.value = result.src).catch(() => {});
+					getMinecraftHead(props.target, '16').then((result) => image.value = result.src).catch(() => {});
 				}
 			};
 

src/components/sidebar/PlayerListItem.vue

@@ -30,7 +30,7 @@ import {defineComponent, computed, ref, onMounted} from 'vue';
 import {DynmapPlayer} from "@/dynmap";
 import {useStore} from "@/store";
 import {MutationTypes} from "@/store/mutation-types";
-import Util from '@/util';
+import {getMinecraftHead} from '@/util';
 
 const defaultImage = require('@/assets/images/player_face.png');
 
@@ -86,7 +86,7 @@ export default defineComponent({
 
 		onMounted(() => {
 			if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkinFaces) {
-				Util.getMinecraftHead(props.player, '16').then((result) => image.value = result.src).catch(() => {});
+				getMinecraftHead(props.player, '16').then((result) => image.value = result.src).catch(() => {});
 			}
 		});
 

src/leaflet/control/ClockControl.ts

@@ -18,7 +18,7 @@
  */
 
 import {ControlOptions, DomUtil, Util, Map, Control} from 'leaflet';
-import Utils from '@/util';
+import {getMinecraftTime} from '@/util';
 import {DynmapWorldState} from "@/dynmap";
 
 import sun from '@/assets/icons/clock_sun.svg';
@@ -120,7 +120,7 @@ export class ClockControl extends Control {
 			this._moon!.style.transform = 'translate(-150px, -150px)';
 		}
 
-		const minecraftTime = Utils.getMinecraftTime(timeOfDay);
+		const minecraftTime = getMinecraftTime(timeOfDay);
 
 		if (this.options.showDigitalClock) {
 			if (timeOfDay >= 0) {

src/leaflet/icon/PlayerIcon.ts

@@ -19,7 +19,7 @@
 
 import {MarkerOptions, DivIcon, DomUtil} from 'leaflet';
 import {DynmapPlayer} from "@/dynmap";
-import Util from '@/util';
+import {getMinecraftHead} from '@/util';
 
 const playerImage = require('@/assets/images/player_face.png');
 
@@ -107,7 +107,7 @@ export class PlayerIcon extends DivIcon {
 				offset = 16;
 			}
 
-			Util.getMinecraftHead(player, size).then(head => {
+			getMinecraftHead(player, size).then(head => {
 				this._playerImage!.src = head.src;
 			}).catch(() => {});
 		} else {

src/store/getters.ts

@@ -16,7 +16,7 @@
 
 import {GetterTree} from "vuex";
 import {State} from "@/store/state";
-import Util from "@/util";
+import {getMinecraftTime} from "@/util";
 
 export type Getters = {
 	playerMarkersEnabled(state: State): boolean;
@@ -41,7 +41,7 @@ export const getters: GetterTree<State, State> & Getters = {
 	},
 
 	night(state: State): boolean {
-		return Util.getMinecraftTime(state.currentWorldState.timeOfDay).night;
+		return getMinecraftTime(state.currentWorldState.timeOfDay).night;
 	},
 
 	mapBackground(state: State): string {
@@ -50,7 +50,7 @@ export const getters: GetterTree<State, State> & Getters = {
 		}
 
 		if(state.currentMap.nightAndDay) {
-			if(Util.getMinecraftTime(state.currentWorldState.timeOfDay).night) {
+			if(getMinecraftTime(state.currentWorldState.timeOfDay).night) {
 				return state.currentMap.backgroundNight || state.currentMap.background || 'transparent';
 			}
 

src/util.ts

@@ -20,8 +20,7 @@ import {useStore} from "@/store";
 const headCache = new Map<string, HTMLImageElement>(),
 	headUnresolvedCache = new Map<string, Promise<HTMLImageElement>>();
 
-export default {
+export const getMinecraftTime = (serverTime: number) => {
-	getMinecraftTime(serverTime: number) {
 	const day = serverTime >= 0 && serverTime < 13700;
 
 	return {
@@ -36,9 +35,9 @@ export default {
 		day: day,
 		night: !day
 	};
-	},
+}
 
-	getMinecraftHead(player: DynmapPlayer | string, size: string): Promise<HTMLImageElement> {
+export const getMinecraftHead = (player: DynmapPlayer | string, size: string): Promise<HTMLImageElement> => {
 	const account = typeof  player === 'string' ? player : player.account,
 		cacheKey = `${account}-${size}`;
 
@@ -64,52 +63,52 @@ export default {
 		};
 
 		const src = (size === 'body') ? `faces/body/${account}.png` :`faces/${size}x${size}/${account}.png`;
-			faceImage.src = this.concatURL(window.config.url.markers, src);
+		faceImage.src = concatURL(window.config.url.markers, src);
 	}).finally(() => headUnresolvedCache.delete(cacheKey)) as Promise<HTMLImageElement>;
 
 	headUnresolvedCache.set(cacheKey, promise);
 
 	return promise;
-	},
+}
 
-	concatURL(base: string, addition: string) {
+export const concatURL = (base: string, addition: string) => {
 	if(base.indexOf('?') >= 0) {
 		return base + escape(addition);
 	}
 
 	return base + addition;
-	},
+}
 
-	getPointConverter() {
+export const getPointConverter = () => {
 	const projection = useStore().state.currentProjection;
 
 	return (x: number, y: number, z: number) => {
 		return projection.locationToLatLng({x, y, z});
 	};
-	},
+}
 
-	parseUrl() {
+export const parseUrl = () => {
 	const query = new URLSearchParams(window.location.search),
 		hash = window.location.hash.replace('#', '');
 
 	if(hash) {
 		try {
-				return this.parseMapHash(hash);
+			return parseMapHash(hash);
 		} catch (e) {
 			console.warn('Ignoring invalid url ' + e);
 		}
 	}
 
 	try {
-			return this.parseMapSearchParams(query);
+		return parseMapSearchParams(query);
 	} catch(e) {
 		console.warn('Ignoring invalid legacy url ' + e);
 	}
 
 	return null;
-	},
+}
 
-	parseMapHash(hash: string) {
+export const parseMapHash = (hash: string) => {
 	const parts = hash.replace('#', '').split(';');
 
 	const world = parts[0] || undefined,
@@ -138,9 +137,9 @@ export default {
 		zoom,
 		legacy: false,
 	}
-	},
+}
 
-	parseMapSearchParams(query: URLSearchParams) {
+export const parseMapSearchParams = (query: URLSearchParams) => {
 	const world = query.get('worldname') || undefined,
 		map = query.get('mapname') || undefined,
 		location = [
@@ -169,5 +168,4 @@ export default {
 		zoom,
 		legacy: true,
 	}
-	}
 }