diff --git a/src/api.ts b/src/api.ts index ad6a6ce..c5441a5 100644 --- a/src/api.ts +++ b/src/api.ts @@ -147,11 +147,13 @@ function buildComponents(response: any): DynmapComponentConfig { components.clockControl = { showDigitalClock: true, showWeather: false, + showTimeOfDay: false, } break; case "timeofdayclock": components.clockControl = { + showTimeOfDay: true, showDigitalClock: component.showdigitalclock || false, showWeather: component.showweather || false, } diff --git a/src/assets/images/moon.png b/src/assets/images/moon.png deleted file mode 100644 index 589cd24..0000000 Binary files a/src/assets/images/moon.png and /dev/null differ diff --git a/src/assets/images/rain.png b/src/assets/images/rain.png deleted file mode 100644 index 9ba31a0..0000000 Binary files a/src/assets/images/rain.png and /dev/null differ diff --git a/src/assets/images/storm.png b/src/assets/images/storm.png deleted file mode 100644 index 1188146..0000000 Binary files a/src/assets/images/storm.png and /dev/null differ diff --git a/src/assets/images/sun.png b/src/assets/images/sun.png deleted file mode 100644 index fb77713..0000000 Binary files a/src/assets/images/sun.png and /dev/null differ diff --git a/src/assets/images/weather_stormy.png b/src/assets/images/weather_stormy.png deleted file mode 100644 index 45808fb..0000000 Binary files a/src/assets/images/weather_stormy.png and /dev/null differ diff --git a/src/assets/images/weather_stormy_day.png b/src/assets/images/weather_stormy_day.png deleted file mode 100644 index dea2320..0000000 Binary files a/src/assets/images/weather_stormy_day.png and /dev/null differ diff --git a/src/assets/images/weather_stormy_night.png b/src/assets/images/weather_stormy_night.png deleted file mode 100644 index fe08ba8..0000000 Binary files a/src/assets/images/weather_stormy_night.png and /dev/null differ diff --git a/src/assets/images/weather_sunny.png b/src/assets/images/weather_sunny.png deleted file mode 100644 index 8ef8cbd..0000000 Binary files a/src/assets/images/weather_sunny.png and /dev/null differ diff --git a/src/assets/images/weather_sunny_day.png b/src/assets/images/weather_sunny_day.png deleted file mode 100644 index 94ce5b0..0000000 Binary files a/src/assets/images/weather_sunny_day.png and /dev/null differ diff --git a/src/assets/images/weather_sunny_night.png b/src/assets/images/weather_sunny_night.png deleted file mode 100644 index fe4fd8b..0000000 Binary files a/src/assets/images/weather_sunny_night.png and /dev/null differ diff --git a/src/assets/images/weather_thunder.png b/src/assets/images/weather_thunder.png deleted file mode 100644 index 07bbfc0..0000000 Binary files a/src/assets/images/weather_thunder.png and /dev/null differ diff --git a/src/assets/images/weather_thunder_day.png b/src/assets/images/weather_thunder_day.png deleted file mode 100644 index 8900521..0000000 Binary files a/src/assets/images/weather_thunder_day.png and /dev/null differ diff --git a/src/assets/images/weather_thunder_night.png b/src/assets/images/weather_thunder_night.png deleted file mode 100644 index 63b359e..0000000 Binary files a/src/assets/images/weather_thunder_night.png and /dev/null differ diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts index ea1fe6c..5072ad8 100644 --- a/src/leaflet/control/ClockControl.ts +++ b/src/leaflet/control/ClockControl.ts @@ -2,7 +2,15 @@ import {ControlOptions, DomUtil, Util, Map, Control} from 'leaflet'; import Utils from '@/util'; import {DynmapWorldState} from "@/dynmap"; +import sun from '@/assets/icons/clock_sun.svg'; +import sunRain from '@/assets/icons/clock_sun_rain.svg'; +import sunStorm from '@/assets/icons/clock_sun_storm.svg'; +import moon from '@/assets/icons/clock_moon.svg'; +import moonRain from '@/assets/icons/clock_moon_rain.svg'; +import moonStorm from '@/assets/icons/clock_moon_storm.svg'; + export interface ClockControlOptions extends ControlOptions { + showTimeOfDay: boolean; showDigitalClock: boolean; showWeather: boolean; } @@ -15,7 +23,6 @@ export class ClockControl extends Control { private _sun?: HTMLElement; private _moon?: HTMLElement; private _clock?: HTMLElement; - private _weather?: HTMLElement; constructor(options: ClockControlOptions) { super(Object.assign(options, {position: 'topcenter'})); @@ -24,19 +31,28 @@ export class ClockControl extends Control { } onAdd(map: Map) { - this._container = DomUtil.create('div', 'largeclock timeofday'); - this._sun = DomUtil.create('div', 'timeofday sun', this._container); - this._moon = DomUtil.create('div', 'timeofday moon', this._sun); + const digital = !this.options.showTimeOfDay && !this.options.showWeather && this.options.showDigitalClock; - this._sun.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px'; - this._moon.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px'; + this._container = DomUtil.create('div', 'clock' + (digital ? ' clock--digital' : '')); + this._sun = DomUtil.create('div', 'clock__sun', this._container); + this._moon = DomUtil.create('div', 'clock__moon', this._container); + + this._sun.style.transform = 'translate(-150px, -150px)'; + this._moon.style.transform = 'translate(-150px, -150px)'; + + console.log(sun); + + this._sun!.innerHTML = ` + + + `; + this._moon!.innerHTML = ` + + + `; if (this.options.showDigitalClock) { - this._clock = DomUtil.create('div', 'timeofday digitalclock', this._container) - } - - if (this.options.showWeather) { - this._weather = DomUtil.create('div', 'weather', this._container) + this._clock = DomUtil.create('div', 'clock__time', this._container) } return this._container; @@ -64,11 +80,11 @@ export class ClockControl extends Control { const moonAngle = sunAngle + Math.PI; if (timeOfDay >= 0) { - this._sun!.style.backgroundPosition = (-50 * Math.cos(sunAngle)) + 'px ' + (-50 * Math.sin(sunAngle)) + 'px'; - this._moon!.style.backgroundPosition = (-50 * Math.cos(moonAngle)) + 'px ' + (-50 * Math.sin(moonAngle)) + 'px'; + this._sun!.style.transform = 'translate(' + Math.round(-50 * Math.cos(sunAngle)) + 'px, ' + Math.round(-50 * Math.sin(sunAngle)) + 'px)'; + this._moon!.style.transform = 'translate(' + Math.round(-50 * Math.cos(moonAngle)) + 'px, ' + Math.round(-50 * Math.sin(moonAngle)) + 'px)'; } else { - this._sun!.style.backgroundPosition = '-150px -150px'; - this._moon!.style.backgroundPosition = '-150px -150px'; + this._sun!.style.transform = 'translate(-150px, -150px)'; + this._moon!.style.transform = 'translate(-150px, -150px)'; } const minecraftTime = Utils.getMinecraftTime(timeOfDay); @@ -85,20 +101,35 @@ export class ClockControl extends Control { this._clock!.textContent = ''; } - if(this.options.showWeather) { - const dayNight = (timeOfDay > 23100 || timeOfDay < 12900) ? "day" : "night"; - let className = 'sunny'; - - if (worldState.raining) { - className = 'stormy'; - - if (worldState.thundering) { - className = 'thunder'; - } + if (this.options.showWeather) { + if (worldState.thundering) { + this._sun!.innerHTML = ` + + + `; + this._moon!.innerHTML = ` + + + `; + } else if (worldState.raining) { + this._sun!.innerHTML = ` + + + `; + this._moon!.innerHTML = ` + + + `; + } else { + this._sun!.innerHTML = ` + + + `; + this._moon!.innerHTML = ` + + + `; } - - this._weather?.classList.remove('stormy_day', 'stormy_night', 'sunny_day', 'sunny_night', 'thunder_day', 'thunder_night'); - this._weather?.classList.add(`${className}_${dayNight}`); } } } \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index bc6b18c..5051d98 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -122,25 +122,34 @@ button { border-radius: 0 0 3px 3px; } -.largeclock { +.clock { @extend %panel; position: relative; width: 15rem; height: 6rem; z-index: 50; + font-family: monospace; + display: flex; + flex-direction: column; + align-items: center; + padding: 0.5rem 2rem; - .digitalclock { + .clock__time { text-align: center; font-size: 2rem; line-height: 2rem; - font-weight: bold; + margin-top: auto; + background-color: #222; + z-index: 1; + padding: 0.1rem 0.1rem 0; + border-radius: 0.3rem; &.night { - color: #dff; + color: #ddffff; } &.day { - color: #fd3; + color: #ffdd33; } &.night, &.day { @@ -148,59 +157,33 @@ button { } } - .timeofday { - background-repeat: no-repeat; + .clock__sun, + .clock__moon { position: absolute; top: 0; bottom: 0; left: 0; right: 0; - &.digitalclock { - top: auto; - bottom: 0.5rem; - } - - &.sun { - background-image: url(../assets/images/sun.png); - } - - &.moon { - background-image: url(../assets/images/moon.png); + svg { + width: 15rem; + height: 12rem; } } - .weather { - position: absolute; - top: 5px; - right: 0; - width: 32px; - height: 32px; - display: block; - background-repeat: no-repeat; + &.clock--digital { + justify-content: center; + height: 5rem; + width: auto; - &.sunny_day { - background-image: url(../assets/images/weather_sunny_day.png); + .clock__sun, + .clock__moon { + display: none; } - &.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); + .clock__time { + margin: 0; + font-size: 3rem; } } }