Strong progress on clock keys and socket animations

Eunomiac · Jan 3, 2024 · ece1fba · ece1fba
1 parent 3aba510
commit ece1fba
Show file tree

Hide file tree

Showing 50 changed files with 1,655 additions and 2,241 deletions.
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/module/classes/BladesClocks.js b/module/classes/BladesClocks.js
diff --git a/module/classes/BladesDirector.js b/module/classes/BladesDirector.js
@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import U from "../core/utilities.js";
 import { SVGDATA, BladesPhase } from "../core/constants.js";
+const ObserverIgnoreStrings = [];
 class BladesDirector {
     // #region SINGLE INSTANCE FACTORY METHODS
     static instance;
+    _id;
     constructor() {
-        // intentionally left blank
+        this._id = randomID();
     }
     static getInstance() {
         return (BladesDirector.instance ??= new BladesDirector());
@@ -26,69 +28,145 @@ class BladesDirector {
     }
     // #endregion
     // #region OVERLAY
-    _overlayElement;
-    get overlayElement() {
-        if (!this._overlayElement) {
-            [this._overlayElement] = $("#blades-overlay");
+    _overlayContainer;
+    _overlayContainer$;
+    get overlayContainer() {
+        if (!this._overlayContainer) {
+            [this._overlayContainer] = $("#blades-overlay");
         }
-        if (!this._overlayElement) {
+        if (!this._overlayContainer) {
             $("body.vtt").append("<section id=\"blades-overlay\"></section>");
-            [this._overlayElement] = $("#blades-overlay");
+            [this._overlayContainer] = $("#blades-overlay");
+            this.resetObservers();
         }
-        return this._overlayElement;
+        return this._overlayContainer;
     }
-    get clockKeySectionElem() {
-        return $(this.overlayElement).find(".overlay-section-clock-keys")[0];
+    get overlayContainer$() {
+        if (!this._overlayContainer$) {
+            this._overlayContainer$ = $(this.overlayContainer);
+        }
+        return this._overlayContainer$;
+    }
+    get clockKeySection$() {
+        return this.overlayContainer$.find(".overlay-section-clock-keys");
+    }
+    async appendToClockKeySection(elem) {
+        if (typeof elem === "string") {
+            elem = $(elem);
+        }
+        elem = $(elem).appendTo(this.clockKeySection$);
+        const keyID = elem.find(".clock-key").data("id");
+        const key = game.eunoblades.ClockKeys.get(keyID);
+        await key.initClockKeyElem();
+        return key.elem$;
+    }
+    removeFromClockKeySection(elem) {
+        if (typeof elem === "string") {
+            elem = $(`#${elem}`);
+        }
+        $(elem).parents(".clock-key-container").remove();
     }
-    get locationSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-location")[0];
+    get locationSection$() {
+        return this.overlayContainer$.find(".overlay-section-location");
     }
-    get scorePanelSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-score-panel")[0];
+    get scorePanelSection$() {
+        return this.overlayContainer$.find(".overlay-section-score-panel");
     }
-    get npcSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-npcs")[0];
+    get npcSection$() {
+        return this.overlayContainer$.find(".overlay-section-npcs");
     }
-    get playerSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-players")[0];
+    get playerSection$() {
+        return this.overlayContainer$.find(".overlay-section-players");
     }
-    get crewSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-crew")[0];
+    get crewSection$() {
+        return this.overlayContainer$.find(".overlay-section-crew");
     }
-    get notificationSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-notifications")[0];
+    get notificationSection$() {
+        return this.overlayContainer$.find(".overlay-section-notifications");
     }
-    get transitionSectionElem() {
-        return $(this.overlayElement).find(".overlay-section-transitions")[0];
+    get transitionSection$() {
+        return this.overlayContainer$.find(".overlay-section-transitions");
     }
     get svgData() { return SVGDATA; }
+    // #endregion
+    // #region OBSERVERS ~
+    get ObserverData() {
+        return [
+            // Overlay Clock Key Observer
+            {
+                id: "overlay-clock-key",
+                type: "pointer",
+                target: game.eunoblades.Director.clockKeySection$[0],
+                ignore: [
+                    ...ObserverIgnoreStrings
+                ],
+                onPress(obs) {
+                    if (!(obs.event.currentTarget instanceof HTMLElement)) {
+                        return;
+                    }
+                    const target$ = $(obs.event.currentTarget);
+                    if (target$.hasClass("clock-key")) {
+                        const clockKey = game.eunoblades.ClockKeys.get(target$.attr("id") ?? "");
+                        if (!clockKey) {
+                            throw new Error(`ClockKey not found for ID: '${target$.attr("id") ?? ""}'`);
+                        }
+                        switch (obs.event.type) {
+                            case "dblclick": {
+                                console.log(`Double-Click on ClockKey: ${clockKey.name || clockKey.id}`);
+                                break;
+                            }
+                            case "contextmenu": {
+                                console.log(`Right-Click on ClockKey: ${clockKey.name || clockKey.id}`);
+                                break;
+                            }
+                            default: {
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        ];
+    }
+    _Observers;
+    get Observers() {
+        return this._Observers ??= new Collection(this.ObserverData
+            .map((oVars) => {
+            if (!oVars.id) {
+                eLog.error("BladesDirector", "Observer must have an ID", oVars);
+                throw new Error("Observer must have an ID");
+            }
+            return [oVars.id, Observer.create(oVars)];
+        }));
+    }
+    resetObservers() {
+        this._Observers?.forEach((obs) => { obs.kill(); });
+        this._Observers?.clear();
+        delete this._Observers;
+        void this.Observers; // Trigger Observer regeneration within getter.
+    }
+    // #endregion
     get sceneKeys() { return game.eunoblades.ClockKeeper.getSceneKeys(); }
     renderOverlay_SocketCall() {
         if (!game.user.isGM) {
             return;
         }
-        if (!this.overlayElement) {
+        if (!this.overlayContainer) {
             return;
         }
         socketlib.system.executeForEveryone("renderOverlay_SocketCall");
     }
     async renderOverlay_SocketResponse() {
         // Render the overlay element
-        this.overlayElement.innerHTML = await renderTemplate("systems/eunos-blades/templates/overlay/blades-overlay.hbs", this);
-        // Clear previously-applied listeners
-        $(this.overlayElement).find("*").addBack().off();
-        // Reactivate event listeners
-        this.activateClockListeners();
-        this.activateScorePanelListeners();
-        this.activateLocationListeners();
-        this.activateNPCListeners();
-        this.activatePCListeners();
-        this.activateCohortListeners();
-        this.activateCrewListeners();
+        const overlayContent = await renderTemplate("systems/eunos-blades/templates/overlay/blades-overlay.hbs", this);
+        this.overlayContainer$.empty().append(overlayContent);
+        // Display keys that are visible
+        this.sceneKeys
+            .filter((key) => key.isVisible)
+            .forEach((key) => key.drop_Animation());
     }
     async activateClockListeners() {
-        const clockKeySection$ = $(this.clockKeySectionElem);
-        clockKeySection$.find(".clock-key-container").each((_, keyContainer) => {
+        this.clockKeySection$.find(".clock-key-container").each((_, keyContainer) => {
             const keyContainer$ = $(keyContainer);
             const clockKey = game.eunoblades.ClockKeys.get(keyContainer$.find(".clock-key").attr("id") ?? "");
             if (!clockKey) {
@@ -293,7 +371,7 @@ class BladesDirector {
             id: pushID,
             ...config
         }))
-            .appendTo($(this.notificationSectionElem))
+            .appendTo(this.notificationSection$)
             .on("click", (event) => { this.$removePush(event.currentTarget); })
             .on("contextmenu", (event) => { this.$removeAndClear(event.currentTarget); });
         U.gsap.fromTo(pushElem$, {

diff --git a/module/classes/BladesTargetLink.js b/module/classes/BladesTargetLink.js
@@ -83,7 +83,9 @@ class BladesTargetLink {
     }
     static async Create(config) {
         const data = this.ParseConfig(config);
+        eLog.checkLog2("BladesTargetLink.Create", "Config Parsed to Data", { config: U.objClone(config), data: U.objClone(data) });
         await this.InitTargetLink(data);
+        eLog.checkLog3("BladesTargetLink.Create", "After Init Target Link", { data: U.objClone(data) });
         return new this(data);
     }
     // #endregion
@@ -96,6 +98,11 @@ class BladesTargetLink {
     get id() { return this._id; }
     get targetID() { return this._targetID; }
     get targetKey() { return this._targetKey; }
+    get targetKeyPrefix() {
+        return this._targetKey
+            ? `${this._targetKey}.${this.id}`
+            : undefined;
+    }
     get targetFlagKey() { return this._targetFlagKey; }
     _target;
     get target() {

diff --git a/module/core/constants.js b/module/core/constants.js
@@ -404,9 +404,7 @@ export var ClockKeyDisplayMode;
 (function (ClockKeyDisplayMode) {
     ClockKeyDisplayMode["full"] = "full";
     ClockKeyDisplayMode["clocks"] = "clocks";
-    ClockKeyDisplayMode["currentClock"] = "currentClock";
-    ClockKeyDisplayMode["presentCurrentClock"] = "presentCurrentClock";
-    ClockKeyDisplayMode["present0"] = "present0";
+    ClockKeyDisplayMode["activeClocks"] = "activeClocks";
     ClockKeyDisplayMode["present1"] = "present1";
     ClockKeyDisplayMode["present2"] = "present2";
     ClockKeyDisplayMode["present3"] = "present3";
@@ -4487,7 +4485,6 @@ export const Randomizers = {
     }
 };
 export const SVGDATA = {
-    overlayScale: 0.25,
     oneKeys: {
         height: 835,
         width: 230,
@@ -4500,9 +4497,6 @@ export const SVGDATA = {
         }
     },
     keys: {
-        marginHoriz: 20,
-        marginVert: 0,
-        alternatingVertShift: 120,
         list: {
             1: {
                 height: 455,