fix(update): many updates

Author: ThornWalli

packages/app/components/editor/dialog/RoomSettings.vue

@@ -15,6 +15,17 @@
           name="description"
           label="Description"
           @update:model-value="val => (model!.info.description = val)" />
+        <cww-form-field-select
+          v-model="model!.info.timezone"
+          label="Timezone"
+          name="timezone">
+          <option
+            v-for="option in timezoneOptions"
+            :key="option.value"
+            :value="option.value">
+            {{ option.label }}
+          </option>
+        </cww-form-field-select>
       </form>
       <teleport to="#teleports">
         <cw-room-editor-dialog-room-grid-resize ref="dialogRoomGridResize" />
@@ -31,10 +42,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import CwDialog from '../../../components/Dialog.vue';
 import CwFormFieldTextfield from '../../../components/formField/Textfield.vue';
 import CwFormFieldTextarea from '../../../components/formField/Textarea.vue';
+import CwwFormFieldSelect from '../../formField/Select.vue';
 import CwButton from '../../../components/Button.vue';
 import CwRoomEditorDialogRoomGridResize from './RoomGridResize.vue';
 
@@ -58,6 +70,13 @@ defineOptions({
   inheritAttrs: false
 });
 
+const timezoneOptions = computed(() => {
+  return Intl.supportedValuesOf('timeZone').map(tz => ({
+    label: tz,
+    value: tz
+  }));
+});
+
 function onClickSave() {
   formEl.value?.requestSubmit();
 }
@@ -85,8 +104,10 @@ function onSubmit(
   const formData = new FormData(e.target as HTMLFormElement);
   model.value.info = {
     name: String(formData.get('name')),
-    description: String(formData.get('description'))
+    description: String(formData.get('description')),
+    timezone: String(formData.get('timezone'))
   };
+  $props.app.enterRoom(model.value);
   close<RoomDescription>(model.value);
 }
 

packages/app/components/panel/TimeControl.vue

@@ -1,20 +1,22 @@
 <template>
   <cw-panel class="cw-panel-time-control" hide-title title="Time Control">
-    <span class="time">
-      <input
-        size="5"
-        :value="preparedTime"
-        @focus="pause()"
-        @blur="onBlurInput" />
-      Uhr
-    </span>
-
-    <cw-button @click="onClickSpeed">
-      {{ availableSpeeds[lastSpeedIndex]?.title }}
-    </cw-button>
-    <cw-button @click="onClickTogglePlayPause">
-      <base-icon size="very-small" :name="paused ? 'play' : 'pause'" />
-    </cw-button>
+    <div class="controls">
+      <span class="time">
+        <input
+          size="5"
+          :value="preparedTime"
+          @focus="pause()"
+          @blur="onBlurInput" />
+        Uhr
+      </span>
+      <cw-button @click="onClickSpeed">
+        {{ availableSpeeds[lastSpeedIndex]?.title }}
+      </cw-button>
+      <cw-button @click="onClickTogglePlayPause">
+        <base-icon size="very-small" :name="paused ? 'play' : 'pause'" />
+      </cw-button>
+    </div>
+    <div class="timezone">{{ timezone }}</div>
   </cw-panel>
 </template>
 
@@ -52,6 +54,13 @@ const dayTime = ref(0);
 const paused = ref(false);
 const subscription = new Subscription();
 
+const timezone = ref($props.app.modules.time.state.timezone);
+subscription.add(
+  $props.app.modules.time.observables.timezone$.subscribe(tz => {
+    timezone.value = tz;
+  })
+);
+
 const preparedTime = computed(() => {
   const totalMinutes = dayTime.value * 24 * 60;
 
@@ -149,12 +158,12 @@ onMounted(() => {
       .subscribe(void 0)
   );
 
-  //#region debug
+  // //#region debug
 
-  console.warn('Setting time to noon for debug purposes');
-  $props.app.modules.time.setDayTime(0.62);
+  // console.warn('Setting time to noon for debug purposes');
+  // $props.app.modules.time.setDayTime(0.62);
 
-  //#endregion
+  // //#endregion
 });
 
 onUnmounted(() => {
@@ -199,9 +208,7 @@ function onClickTogglePlayPause() {
 <style lang="postcss" scoped>
 .cw-panel-time-control {
   & :deep(.content) {
-    display: flex;
-    flex-direction: row;
-    gap: var(--cw-spacing-medium);
+    gap: var(--cw-spacing-small);
   }
 
   & .time {
@@ -224,5 +231,18 @@ function onClickTogglePlayPause() {
       border: none;
     }
   }
+
+  & .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--cw-spacing-medium);
+  }
+
+  & .timezone {
+    flex: 1;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+  }
 }
 </style>

packages/app/lib/classes/App.ts

@@ -27,6 +27,8 @@ import LightAppModule from './appModule/Light';
 import type { UnitIdentifier } from '../types/unit';
 import type { Vector3 } from 'three';
 
+const DEFAULT_TIMEZONE = 'UTC';
+
 type AppModuleList = (
   | typeof CursorAppModule
   | typeof UnitFocusAppModule
@@ -191,6 +193,10 @@ export class BaseApp<
 
     const room = await this.loadRoom(roomDescription);
 
+    this.modules.time.setTimezone(
+      room.description.info.timezone ?? DEFAULT_TIMEZONE
+    );
+
     playerModule.getPlayers().forEach(player => {
       if (player.client) {
         roomModule.addPlayer(player, targetTeleporterUnitId);

packages/app/lib/classes/Room.ts

@@ -116,7 +116,8 @@ export default class Room<Modules extends RoomModules = RoomModules> {
       id: description.id,
       info: {
         name: this.description?.info.name ?? '',
-        description: this.description?.info.description ?? ''
+        description: this.description?.info.description ?? '',
+        timezone: this.description.info.timezone ?? ''
       },
       gridSize: this.gridSize,
       walls: this.modules.wall.getWalls().map(wall => wall.toDescription()),

packages/app/lib/classes/appModule/Time.ts

@@ -5,6 +5,7 @@ import { concatMap, ReplaySubject } from 'rxjs';
 
 interface Observables extends AppModuleObservables {
   dayTime$: ReplaySubject<number>;
+  timezone$: ReplaySubject<string | null>;
   speed$: ReplaySubject<number>;
   paused$: ReplaySubject<boolean>;
 }
@@ -15,6 +16,7 @@ interface State extends AppModuleState {
   auto: boolean;
   dayTime: number;
   speed: number;
+  timezone: string | null;
 }
 
 const DAY_LENGTH_SECONDS = 24 * 60 * 60; // 5 Minuten
@@ -27,13 +29,15 @@ export default class TimeAppModule extends AppModule<State, Observables> {
     auto: true,
     dayLengthSeconds: DAY_LENGTH_SECONDS,
     dayTime: 0,
-    speed: 1
+    speed: 1,
+    timezone: null
   };
 
   constructor(app: App) {
     super(app);
     //#region observables
     this.observables.dayTime$ = new ReplaySubject<number>(1);
+    this.observables.timezone$ = new ReplaySubject<string | null>(1);
     this.observables.speed$ = new ReplaySubject<number>(1);
     this.observables.paused$ = new ReplaySubject<boolean>(1);
     //#endregion
@@ -45,11 +49,7 @@ export default class TimeAppModule extends AppModule<State, Observables> {
         .pipe(concatMap(this.onUpdate.bind(this)))
         .subscribe(void 0)
     );
-    const currentDate = new Date();
-    const hours = currentDate.getHours();
-    const minutes = currentDate.getMinutes();
-    const dayTime = (hours * 60 + minutes) / (24 * 60);
-    this.state.dayTime = dayTime;
+    this.state.dayTime = this.getTimeInTimezone(this.state.timezone);
   }
 
   setSpeed(speed: number) {
@@ -92,4 +92,38 @@ export default class TimeAppModule extends AppModule<State, Observables> {
       this.lastTime = time;
     }
   }
+
+  setTimezone(tz: string | null) {
+    this.state.timezone = tz;
+
+    this.state.dayTime = this.getTimeInTimezone(tz);
+    this.observables.timezone$.next(this.state.timezone);
+    this.observables.dayTime$.next(this.state.dayTime);
+  }
+
+  private getTimeInTimezone(tz: string | null): number {
+    const date = new Date();
+
+    let hours: number;
+    let minutes: number;
+
+    if (tz) {
+      const formatter = new Intl.DateTimeFormat('en-US', {
+        timeZone: tz,
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: false
+      });
+
+      const parts = formatter.formatToParts(date);
+      hours = Number(parts.find(p => p.type === 'hour')?.value);
+      minutes = Number(parts.find(p => p.type === 'minute')?.value);
+    } else {
+      // local fallback
+      hours = date.getHours();
+      minutes = date.getMinutes();
+    }
+
+    return (hours * 60 + minutes) / (24 * 60);
+  }
 }

packages/app/lib/types/room.ts

@@ -26,6 +26,7 @@ export interface RoomDescription<
   info: {
     name: string;
     description?: string;
+    timezone: string;
   };
   gridSize: GridSize;