Implement day/night background colors

src/components/Map.vue

@@ -56,13 +56,7 @@ export default defineComponent({
 			currentMap = computed(() => store.state.currentMap),
 			currentProjection = computed(() => store.state.currentProjection),
 			following = computed(() => store.state.following),
-
-			mapBackground = computed((): string => {
-				//TODO: day/night
-				const currentMap = useStore().state.currentMap;
-
-				return currentMap && currentMap.background ? currentMap.background : 'transparent';
-			});
+			mapBackground = computed(() => store.getters.mapBackground);
 
 		return {
 			leaflet,
@@ -121,7 +115,7 @@ export default defineComponent({
 			attributionControl: false,
 			crs: L.CRS.Simple,
 			worldCopyJump: false,
-			markerZoomAnimation: false,
+			// markerZoomAnimation: false,
 		}));
 
 		this.leaflet.addControl(new L.Control.Layers({}, {},{

src/leaflet/control/ClockControl.ts

@@ -1,5 +1,5 @@
 import L, {ControlOptions} from 'leaflet';
-import {useStore} from "@/store";
+import Util from '@/util';
 import {DynmapWorldState} from "@/dynmap";
 
 export interface ClockControlOptions extends ControlOptions {
@@ -73,7 +73,7 @@ export class ClockControl extends L.Control {
 			this._moon!.style.backgroundPosition = '-150px -150px';
 		}
 
-		const minecraftTime = this.getMinecraftTime(timeOfDay);
+		const minecraftTime = Util.getMinecraftTime(timeOfDay);
 
 		if(timeOfDay >= 0) {
 			this._clock!.classList.remove(minecraftTime.night ? 'day' : 'night');
@@ -103,21 +103,4 @@ export class ClockControl extends L.Control {
 			this._weather?.classList.add(`${className}_${dayNight}`);
 		}
 	}
-
-	getMinecraftTime(serverTime: number) {
-		const day = serverTime >= 0 && serverTime < 13700;
-
-		return {
-			serverTime: serverTime,
-			days: Math.floor((serverTime + 8000) / 24000),
-
-			// Assuming it is day at 6:00
-			hours: (Math.floor(serverTime / 1000) + 6) % 24,
-			minutes: Math.floor(((serverTime / 1000) % 1) * 60),
-			seconds: Math.floor(((((serverTime / 1000) % 1) * 60) % 1) * 60),
-
-			day: day,
-			night: !day
-		};
-	}
 }

src/store/getters.ts

@@ -1,10 +1,13 @@
 import {GetterTree} from "vuex";
 import {State} from "@/store/state";
+import Util from "@/util";
 
 export type Getters = {
 	playerMarkersEnabled(state: State): boolean;
 	coordinatesControlEnabled(state: State): boolean;
 	clockControlEnabled(state: State): boolean;
+	night(state: State): boolean;
+	mapBackground(state: State): string;
 }
 
 export const getters: GetterTree<State, State> & Getters = {
@@ -18,5 +21,25 @@ export const getters: GetterTree<State, State> & Getters = {
 
 	clockControlEnabled(state: State): boolean {
 		return state.components.clockControl !== undefined;
+	},
+
+	night(state: State): boolean {
+		return Util.getMinecraftTime(state.currentWorldState.timeOfDay).night;
+	},
+
+	mapBackground(state: State): string {
+		if(!state.currentMap) {
+			return 'transparent';
+		}
+
+		if(state.currentMap.nightAndDay) {
+			if(this.night(state)) {
+				return state.currentMap.backgroundNight || state.currentMap.background || 'transparent';
+			}
+
+			return state.currentMap.backgroundDay || state.currentMap.background || 'transparent';
+		}
+
+		return state.currentMap.background || 'transparent';
 	}
 }