Fix real-time advancement clock interactions

fantasycalendar · Jan 3, 2025 · b768fee · b768fee
1 parent 7811e59
commit b768fee
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 42 deletions.
diff --git a/resources/js/calendar/calendar_edit_page.js b/resources/js/calendar/calendar_edit_page.js
@@ -179,17 +179,17 @@ export default (calendar_structure) => ({
 
     },
 
-    rerenderRequested($event) {
+    updateCalendar($event) {
         let structureChanged = false;
 
         if ($event.detail.calendar) {
             structureChanged = this.$store.calendar.update($event.detail.calendar);
         }
 
-        do_error_check("calendar", $event.detail.rerender);
-
         if (structureChanged) {
-            window.dispatchEvent(new CustomEvent('calendar-structure-changed'));
+            do_error_check("calendar", $event.detail.rerender);
         }
+
+        this.$dispatch('calendar-updated');
     }
 });
diff --git a/resources/js/calendar/collapsible_component.js b/resources/js/calendar/collapsible_component.js
@@ -71,7 +71,7 @@ export default class CollapsibleComponent {
 
     rerender(key, value) {
         if (this.is_valid) {
-            this.$dispatch('calendar-rerender-requested', { calendar: { [key]: value } });
+            this.$dispatch('calendar-updated', { calendar: { [key]: value } });
         }
     }
 

diff --git a/resources/js/calendar/real_time_advancement_collapsible.js b/resources/js/calendar/real_time_advancement_collapsible.js
@@ -2,7 +2,7 @@ import CollapsibleComponent from "./collapsible_component";
 
 class RealTimeAdvancementCollapsible extends CollapsibleComponent {
     collapsible_name = "Real-Time Advancement";
-    _clock_enabled = false;
+    clock_enabled = false;
 
     inboundProperties = {
         "advancement": "advancement",
@@ -13,43 +13,18 @@ class RealTimeAdvancementCollapsible extends CollapsibleComponent {
         "advancement": "advancement",
     };
 
-    validators = {
-        "clock_enabled": this.validateClockEnabled,
+    changeHandlers = {
+        "clock_enabled": this.updateClockEnabled
     }
 
-    set clock_enabled(value) {
-        this._clock_enabled = value;
+    updateClockEnabled() {
+        if (!this.clock_enabled && this.advancement.advancement_rate_unit !== 'days') {
+            this.advancement.advancement_enabled = false;
 
-        if (this.advancement.advancement_rate_unit !== 'days') {
-            this.advancement.advancement_rate_unit = 'days';
+            this.$dispatch('notify', {
+                content: `Real-time advancement by ${this.advancement.advancement_rate_unit} is only possible with the clock enabled. Real-time advancement has been disabled.`,
+            })
         }
-    };
-
-    get clock_enabled() {
-        return this._clock_enabled;
-    }
-
-    loaded(static_data) {
-        this.validate();
-    }
-
-    validateClockEnabled() {
-        if (!this.advancement.advancement_enabled) {
-            return [];
-        }
-
-        if (this._clock_enabled) {
-            return [];
-        }
-
-        if (this.advancement.advancement_rate_unit === 'days') {
-            return [];
-        }
-
-        return [{
-            path: 'advancement.advancement_rate_unit',
-            message: "Without the clock enabled, a calendar can only be advanced by days.",
-        }]
     }
 }
 

diff --git a/resources/views/calendar/edit.blade.php b/resources/views/calendar/edit.blade.php
@@ -35,7 +35,7 @@ function getCalendarStructure() {
 @endpush
 
 @section('content')
-    <div id="generator_container" x-data='calendar_edit_page(getCalendarStructure())' @calendar-rerender-requested.window="rerenderRequested">
+    <div id="generator_container" x-data='calendar_edit_page(getCalendarStructure())' @calendar-updating.window="updateCalendar">
         @include('layouts.layouts')
         @include('layouts.events_manager')
         @include('layouts.weather_tooltip')

diff --git a/resources/views/components/collapsible.blade.php b/resources/views/components/collapsible.blade.php
@@ -40,7 +40,7 @@ class="wiki">
     <div class="collapsible-content card-body"
         x-data="{{ Str::snake($contains_clean) }}_collapsible"
         @calendar-loaded.window="load"
-        @calendar-structure-changed.window="load">
+        @calendar-updated.window="load">
         <x-dynamic-component :calendar="$calendar ?? null" :component="Str::kebab($contains_clean) . '-collapsible'"></x-dynamic-component>
     </div>
 </div>
diff --git a/resources/views/components/notification-area.blade.php b/resources/views/components/notification-area.blade.php
@@ -13,7 +13,7 @@
         },
     }"
     @notify.window="add($event)"
-    class="fixed bottom-0 right-0 flex w-full max-w-xs flex-col space-y-4 pr-4 pb-4 sm:justify-start"
+    class="fixed bottom-0 right-0 flex w-full max-w-xs flex-col space-y-4 pr-4 pb-4 sm:justify-start z-50"
     role="status"
     aria-live="polite"
 >
@@ -63,6 +63,11 @@ class="pointer-events-auto relative w-full max-w-sm rounded-md border border-gra
                     <span class="sr-only">Error:</span>
                 </div>
 
+                <div x-show="notification.type === 'warning'" class="flex-shrink-0">
+                    <span aria-hidden="true" class="inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-amber-600 text-lg font-bold text-amber-600">!</span>
+                    <span class="sr-only">Warning:</span>
+                </div>
+
                 <!-- Text -->
                 <div class="ml-3 w-0 flex-1 pt-0.5">
                     <p x-text="notification.content" class="text-sm font-medium leading-5 text-gray-900"></p>