From 04ca1108beb7a36f01798c8776342b1bc77661af Mon Sep 17 00:00:00 2001 From: James Lyne Date: Thu, 10 Dec 2020 02:22:29 +0000 Subject: [PATCH] Implement day/night background colors --- src/components/Map.vue | 10 ++-------- src/leaflet/control/ClockControl.ts | 21 ++------------------- src/store/getters.ts | 23 +++++++++++++++++++++++ 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index ce8462c..c3c9637 100644 --- a/src/components/Map.vue +++ b/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({}, {},{ diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts index 3211658..1ca0e86 100644 --- a/src/leaflet/control/ClockControl.ts +++ b/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 - }; - } } \ No newline at end of file diff --git a/src/store/getters.ts b/src/store/getters.ts index 41bafeb..34c7f3b 100644 --- a/src/store/getters.ts +++ b/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 & Getters = { @@ -18,5 +21,25 @@ export const getters: GetterTree & 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'; } } \ No newline at end of file