Added a button to switch to Night, Day or auto cycle Night Day

index.html

@@ -103,6 +103,9 @@
                 chatPlaceholder: 'Type your chat message here...',
                 chatErrorUnknown: 'Unexpected error while sending chat message',
                 chatErrorDisabled: 'Chat is not enabled',
+                day: "Day",
+                night: "Night",
+                nightDay: "Night and Day",
             	serversHeading: 'Servers',
                 markersHeading: 'Markers',
                 markersSearchPlaceholder: 'Search markers...',

messages.ts

@@ -74,6 +74,9 @@ export const globalMessages = [
 	'logoutSuccess',
 	'closeTitle',
 	'showMore',
+	'day',
+	'night',
+	'nightDay',
 ] as const;
 
 export const serverMessages = [

src/components/Sidebar.vue

@@ -17,6 +17,13 @@
 <template>
 	<section class="sidebar" role="none" ref="sidebar">
 		<header class="sidebar__buttons">
+			<button ref="nightDay-button" v-if="nightDay" type="button"
+              class="button--night-day"
+              :title="nightDayMode === 'night' ? messageNight : nightDayMode === 'day' ? messageDay : messageNightDay"
+              :aria-label="nightDayMode === 'night' ? messageNight : nightDayMode === 'day' ? messageDay : messageNightDay"
+              @click="handleNightDayClick">
+			<SvgIcon :name="nightDayMode"></SvgIcon>
+			</button>
 			<button ref="maps-button" v-if="mapCount > 1 || serverCount > 1" type="button"
               class="button--maps" data-section="maps"
               :title="mapCount > 1 ? messageWorlds : messageServers"
@@ -67,6 +74,9 @@ import "@/assets/icons/players.svg";
 import "@/assets/icons/maps.svg";
 import "@/assets/icons/servers.svg";
 import "@/assets/icons/marker_point.svg";
+import "@/assets/icons/day.svg";
+import "@/assets/icons/night.svg";
+import "@/assets/icons/night_day.svg";
 
 export default defineComponent({
 	components: {
@@ -90,11 +100,17 @@ export default defineComponent({
 			serverCount = computed(() => store.state.servers.size),
 			following = computed(() => store.state.followTarget),
 
+			nightDay = computed(() => store.state.currentMap?.nightAndDay),
+			nightDayMode = computed(() => store.state.components.nightDay.mode),
+
 			messageWorlds = computed(() => store.state.messages.worldsHeading),
 			messageServers = computed(() => store.state.messages.serversHeading),
 			messageMarkers = computed(() => store.state.messages.markersHeading),
 			messagePlayers = computed(() => store.getters.playersHeading),
-
+			messageDay = computed(() => store.state.messages.day),
+			messageNight = computed(() => store.state.messages.night),
+			messageNightDay = computed(() => store.state.messages.nightDay),
+
 			markerUIEnabled = computed(() => store.getters.markerUIEnabled),
 			playerMakersEnabled = computed(() => store.getters.playerMarkersEnabled),
 
@@ -142,6 +158,14 @@ export default defineComponent({
 			}
 		}
 
+		const handleNightDayClick = () => {
+			const modes = ['day', 'night', 'night_day'],
+				currentMode = modes.indexOf(nightDayMode.value),
+				nextMode = modes[(currentMode + 1) % modes.length];
+
+			store.state.components.nightDay.mode = nextMode;
+		}
+
 		//Move focus when sidebar sections become visible
 		const focusSection = (section: LiveAtlasSidebarSection) => focus(`[data-section=${section}] .section__heading button`);
 
@@ -157,10 +181,16 @@ export default defineComponent({
 			serverCount,
 			following,
 
+			nightDay,
+			nightDayMode,
+
 			messageWorlds,
 			messageServers,
 			messageMarkers,
 			messagePlayers,
+			messageDay,
+			messageNight,
+			messageNightDay,
 
 			previouslyVisible,
 			playersVisible,
@@ -173,6 +203,7 @@ export default defineComponent({
 			handleSidebarKeydown,
 			handleSectionKeydown,
 			handleSectionClick,
+			handleNightDayClick
 		}
 	},
 });

src/index.d.ts

@@ -274,6 +274,10 @@ interface LiveAtlasComponentConfig {
 	markers: {
 		showLabels: boolean;
 	};
+	nightDay: {
+		mode: string;
+		value: number;
+	};
 	players: {
 		markers?: LiveAtlasPlayerMarkerConfig;
 		showImages: boolean;

src/leaflet/tileLayer/DynmapTileLayer.ts

@@ -32,6 +32,7 @@ export class DynmapTileLayer extends LiveAtlasTileLayer {
 	private readonly _store: Store = useStore();
 
 	private readonly _night: ComputedRef<boolean>;
+	private readonly _nightDayMode: ComputedRef<string>;
 	private readonly _pendingUpdates: ComputedRef<boolean>;
 	private _nightUnwatch: WatchStopHandle | null = null;
 	private _updateUnwatch: WatchStopHandle | null = null;
@@ -42,7 +43,8 @@ export class DynmapTileLayer extends LiveAtlasTileLayer {
 
 		this._namedTiles = Object.seal(new Map());
 		this._pendingUpdates = computed(() => !!this._store.state.pendingTileUpdates.length);
-		this._night = computed(() => this._store.getters.night);
+		this._nightDayMode = computed(() => this._store.state.components.nightDay.mode);
+		this._night = computed(() => this._nightDayMode.value === "night_day" ? this._store.getters.night : this._nightDayMode.value === "night");
 	}
 
 	onAdd(map: LeafletMap) {

src/providers/OverviewerMapProvider.ts

@@ -243,6 +243,11 @@ export default class OverviewerMapProvider extends MapProvider {
 				showLabels: false,
 			},
 
+			nightDay: {
+				mode: "night_day",
+				value: -1
+			},
+
 			//Not used by Overviewer
 			players: {
 				markers: undefined,

src/providers/Pl3xmapMapProvider.ts

@@ -231,6 +231,11 @@ export default class Pl3xmapMapProvider extends MapProvider {
 				showLabels: false,
 			},
 
+			nightDay: {
+				mode: "night_day",
+				value: -1
+			},
+
 			//Not used by pl3xmap
 			chatBox: undefined,
 			chatBalloons: false,

src/store/state.ts

@@ -152,7 +152,10 @@ export const state: State = {
 		markers: {
 			showLabels: false,
 		},
-
+		nightDay: {
+			mode: "night_day",
+			value: -1
+		},
 		// Settings for player related UI elements and markers
 		players: {
 			// Settings for online player markers

src/util/dynmap.ts

@@ -170,6 +170,10 @@ export function buildComponents(response: Configuration, config: DynmapUrlConfig
 		markers: {
 			showLabels: false,
 		},
+		nightDay: {
+			mode: "night_day",
+			value: -1
+		},
 		chatBox: undefined,
 		chatBalloons: false,
 		players: {