First attempt at clock styling

src/components/map/control/ClockControl.vue

@@ -1,48 +1,27 @@
 <script lang="ts">
-import {defineComponent, computed} from "@vue/runtime-core";
+import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
-import L from 'leaflet';
 import {ClockControl, ClockControlOptions} from "@/leaflet/control/ClockControl";
+import DynmapMap from "@/leaflet/DynmapMap";
 
 export default defineComponent({
 	props: {
 		leaflet: {
-			type: Object as () => L.Map,
+			type: Object as () => DynmapMap,
 			required: true,
 		}
 	},
 
-	setup() {
+	setup(props) {
 		const store = useStore(),
 			componentSettings = store.state.components.clockControl,
 			worldState = computed(() => store.state.currentWorldState),
 			control = new ClockControl(componentSettings as ClockControlOptions) as ClockControl;
 
-		return {
+		watch(worldState, (newValue) => control.update(newValue), { deep: true });
-			control,
-			worldState
-		}
-	},
 
-	watch: {
+		onMounted(() => props.leaflet.addControl(control));
-		worldState: {
+		onUnmounted(() => props.leaflet.removeControl(control));
-			handler(newValue) {
-				if (this.control) {
-					this.control.update(newValue);
-				}
-			},
-			deep: true,
-		}
-	},
-
-	mounted() {
-		this.leaflet.addControl(this.control);
-		// console.log('Mounted coordinatesControl');
-	},
-
-	unmounted() {
-		this.leaflet.removeControl(this.control);
-		// console.log('Unmounted coordinatesControl');
 	},
 
 	render() {
@@ -50,7 +29,3 @@ export default defineComponent({
 	}
 })
 </script>
-
-<style scoped>
-
-</style>

src/leaflet/control/ClockControl.ts

@@ -19,9 +19,8 @@ export class ClockControl extends L.Control {
 	private _weather?: HTMLElement;
 
 	constructor(options: ClockControlOptions) {
-		super(options);
+		super(Object.assign(options, {position: 'topcenter'}));
 
-		options.position = 'topleft';
 		L.Util.setOptions(this, options);
 	}
 

src/scss/_placeholders.scss

@@ -32,6 +32,7 @@
 	flex-direction: column;
 	padding: 1.5rem;
 	position: relative;
+	box-shadow: 0 0 1.5rem 0 #121212;
 
 	h2:first-child {
 		margin-top: 0;

src/scss/leaflet/_controls.scss

@@ -160,6 +160,17 @@
 	}
 }
 
+.leaflet-center {
+	left: 0;
+	right: 0;
+	justify-content: center;
+	flex-direction: row;
+
+	.leaflet-control {
+		margin: 0;
+	}
+}
+
 .leaflet-control-layers-toggle {
 	width: 5rem;
 	height: 5rem;

src/scss/style.scss

@@ -138,125 +138,87 @@ button {
     border-radius: 0 0 3px 3px;
 }
 
-/*******************
- * sidebar panels
- */
-
-
-
-
-/*******************
- * Sidebar clock style
- */
-/*
-.dynmap .clock {
-    display: inline-block;
-    height: 16px;
-    z-index:50;
-
-    font-weight: bold;
-    background-repeat: no-repeat;
-
-   padding-left: 20px;
-    margin-left: 8px;
-}
-*/
-.largeclock.digitalclock {
-	text-align: center;
-	font-size: 50px;
-	font-weight: bold;
-}
-
-.digitalclock {
-	text-align: center;
-	font-size: 20px;
-	font-weight:bold;
-}
-
-.digitalclock.night {
-    /* background-image: url(../assets/images/clock_night.png); */
-    color: #dff;
-}
-
-.digitalclock.day {
-    /* background-image: url(../assets/images/clock_day.png); */
-    color: #fd3;
-}
-
-.digitalclock.night, .digitalclock.day {
-    transition: color 8s 8s linear;
-}
-
-
-/*******************
- * Large clock style
- */
-
 .largeclock {
-    position: absolute;
+	@extend %panel;
-    top: 0;
-    left: 0;
-    right: 0;
-    border-color: rgba(0,0,0,0.5);
-    width: 150px;
-    height: 60px;
-    background: rgba(0,0,0,0.6);
-    z-index:50;
-
-    margin: auto;
-}
-
-.timeofday {
-    background-repeat: no-repeat;
-}
-
-.timeofday.sun {
-    background-image: url(../assets/images/sun.png);
-}
-
-.timeofday.moon {
-    background-image: url(../assets/images/moon.png);
-}
-
-.timeofday.digitalclock {
 	position: relative;
-	bottom: 25px;
+    width: 15rem;
-}
+    height: 6rem;
+    z-index: 50;
 
-/*******************
+	.digitalclock {
- * Clock weather style
+		text-align: center;
- */
+		font-size: 2rem;
+		line-height: 2rem;
+		font-weight: bold;
 
-.weather {
+		&.night {
-    position: absolute;
+			color: #dff;
-    top: 5px;
+		}
-    right: 0;
-    width: 32px;
-    height: 32px;
-    display: block;
-    background-repeat: no-repeat;
-}
 
-.weather.sunny_day {
+		&.day {
-    background-image: url(../assets/images/weather_sunny_day.png);
+			color: #fd3;
-}
+		}
 
-.weather.stormy_day {
+		&.night, &.day {
-    background-image: url(../assets/images/weather_stormy_day.png);
+			transition: color 8s 8s linear;
-}
+		}
-.weather.thunder_day {
+	}
-    background-image: url(../assets/images/weather_thunder_day.png);
-}
 
-.weather.sunny_night {
+	.timeofday {
-    background-image: url(../assets/images/weather_sunny_night.png);
+    	background-repeat: no-repeat;
-}
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
 
-.weather.stormy_night {
+		&.digitalclock {
-    background-image: url(../assets/images/weather_stormy_night.png);
+			top: auto;
-}
+			bottom: 0.5rem;
-.weather.thunder_night {
+		}
-    background-image: url(../assets/images/weather_thunder_night.png);
+
+		&.sun {
+			background-image: url(../assets/images/sun.png);
+		}
+
+		&.moon {
+			background-image: url(../assets/images/moon.png);
+		}
+	}
+
+	.weather {
+		position: absolute;
+		top: 5px;
+		right: 0;
+		width: 32px;
+		height: 32px;
+		display: block;
+		background-repeat: no-repeat;
+
+		&.sunny_day {
+			background-image: url(../assets/images/weather_sunny_day.png);
+		}
+
+		&.stormy_day {
+			background-image: url(../assets/images/weather_stormy_day.png);
+		}
+
+		&.thunder_day {
+			background-image: url(../assets/images/weather_thunder_day.png);
+		}
+
+		&.sunny_night {
+			background-image: url(../assets/images/weather_sunny_night.png);
+		}
+
+		&.stormy_night {
+			background-image: url(../assets/images/weather_stormy_night.png);
+		}
+
+		&.thunder_night {
+			background-image: url(../assets/images/weather_thunder_night.png);
+		}
+	}
 }
 
 /*******************