{{!-- Add One Segment --}}
{{> "systems/eunos-blades/templates/components/button-icon.hbs"
blockClass="clock-control-button clock-add-segment"
@@ -68,7 +69,11 @@
action="change-segments"
value="3"
}}
+
+ {{!-- Removing Clock Segments --}}
+
+
{{!-- Remove One Segment --}}
{{> "systems/eunos-blades/templates/components/button-icon.hbs"
blockClass="clock-control-button clock-remove-segment"
@@ -95,6 +100,7 @@
action="change-segments"
value="-3"
}}
+
diff --git a/templates/parts/clock-sheet-key-controls.hbs b/templates/parts/clock-sheet-key-controls.hbs
index a06b4896..34946517 100644
--- a/templates/parts/clock-sheet-key-controls.hbs
+++ b/templates/parts/clock-sheet-key-controls.hbs
@@ -1,11 +1,12 @@
+ {{#if clockKey.isOnDisplay}}
{{!-- Pull Key Animation --}}
{{> "systems/eunos-blades/templates/components/button-icon.hbs"
blockClass="clock-control-button clock-control-pull-key"
buttonClass="fa-duotone fa-circle-up-left"
- buttonStyle="--fa-primary-color: var(--blades-red); --fa-secondary-color: var(--blades-red-dark);"
+ buttonStyle="--fa-primary-color: var(--blades-red-bright); --fa-secondary-color: var(--blades-black); --fa-secondary-opacity: 1;"
action="pull-clock-key"
}}
@@ -31,7 +32,7 @@
value="{{clockKey.name}}"
/>
-
+ {{else}}
{{#if isSceneTab}}
{{!-- Drop Key --}}
@@ -99,6 +100,7 @@
{{/if}}
{{/if}}
+ {{/if}}
diff --git a/ts/classes/BladesClocks.ts b/ts/classes/BladesClocks.ts
index c700e281..96443a59 100644
--- a/ts/classes/BladesClocks.ts
+++ b/ts/classes/BladesClocks.ts
@@ -333,7 +333,7 @@ class BladesClockKey extends BladesTargetLink
implements
);
$(clockKeyHTML).appendTo(containerElem$);
this.removePositionDragger();
- this.initClockKeyElem();
+ this.initClockKeyElem(ClockKeyDisplayMode.full);
this.activateClockListeners();
this.initOverlayElement(callback);
}
@@ -399,7 +399,7 @@ class BladesClockKey extends BladesTargetLink implements
}
- initClockKeyElem(): void {
+ initClockKeyElem(displayModeOverride?: ClockKeyDisplayMode | number): void {
if (!this.containerElem$) { throw new Error(`[BladesClockKey.initClockKeyElem] Error containerElem$ not found for key '${this.id}'.`); }
if (!this.elem$) { throw new Error(`[BladesClockKey.initClockKeyElem] Error elem$ not found for key '${this.id}'.`); }
@@ -411,7 +411,12 @@ class BladesClockKey extends BladesTargetLink implements
});
}
- const {keyTweenVars, keyContTweenVars} = this.getVarsForDisplayMode(this.displayMode);
+ // If the key has a name, apply adjustments to the label container for a pleasing aspect ratio
+ if (this.name && this.labelElem$) {
+ U.adjustTextContainerAspectRatio(this.labelElem$, 2, 100);
+ }
+
+ const {keyTweenVars, keyContTweenVars} = this.getVarsForDisplayMode(displayModeOverride ?? this.displayMode);
const keyImgContainer = this.elem$.find(".key-image-container")[0];
if (!keyImgContainer) { throw new Error(`[BladesClockKey.initOverlayElement] Error keyImgContainer not found for key '${this.id}'.`); }
@@ -521,10 +526,10 @@ class BladesClockKey extends BladesTargetLink implements
displayMode = this.activeClocks[0].index;
}
} else if (/^present/.exec(`${displayMode}`)) {
- // Are we presenting? If so, get the presentingClock and reduce displayMode to the clock index.
- displayMode = U.pInt(`${displayMode}`.replace("present", "")) - 1;
+ // Are we presenting? If so, get the presentingClock and the clock index.
+ displayMode = U.pInt(`${displayMode}`.replace("present", ""));
if (displayMode < 0 || displayMode >= this.size) {
- throw new Error(`[BladesClockKey.getVarsForDisplayMode] Error display mode 'present${displayMode + 1}' is not a valid clock index for key '${this.id}'.`);
+ throw new Error(`[BladesClockKey.getVarsForDisplayMode] Error display mode 'present${displayMode}' is not a valid clock index for key '${this.id}'.`);
}
presentingClock = this.getClockByIndex(displayMode as ClockIndex);
}
@@ -649,7 +654,8 @@ class BladesClockKey extends BladesTargetLink implements
ignoreMargin: true,
duration: 0.75
})
- .textJitter(this.labelElem$);
+ .to(this.labelElem$, {xPercent: -50, duration: 0.75}, 0);
+ // .textJitter(this.labelElem$);
}
return this._nameFadeInTimeline as gsap.core.Timeline;
}
@@ -984,13 +990,13 @@ class BladesClock extends BladesTargetLink implements Blades
if (!this._nameFadeInTimeline) {
this._nameFadeInTimeline = U.gsap.timeline({
callbackScope: this,
- data: {},
- onComplete() {
- this.nameFadeInTimeline.data.textJitterTimeline = U.gsap.effects.textJitter(this.labelElem$).play();
- },
- onReverseComplete() {
- this.nameFadeInTimeline.data.textJitterTimeline.kill();
- }
+ data: {}
+ // onComplete() {
+ // this.nameFadeInTimeline.data.textJitterTimeline = U.gsap.effects.textJitter(this.labelElem$).play();
+ // },
+ // onReverseComplete() {
+ // this.nameFadeInTimeline.data.textJitterTimeline.kill();
+ // }
}).blurReveal(this.labelElem$, {
ignoreMargin: true,
duration: 0.75
@@ -1080,6 +1086,40 @@ class BladesClock extends BladesTargetLink implements Blades
// clock.fadeOutClockName_SocketCall();
// clock.highlight_SocketCall();
// clock.unhighlight_SocketCall();
+ changeSegments_Animation(delta: number, callback?: () => void): gsap.core.Timeline {
+ const tl = U.gsap.timeline({
+ callbackScope: this,
+ onComplete() {
+ callback?.();
+ }
+ });
+
+ return tl;
+
+ // const clockKey = game.eunoblades.ClockKeys.get("brMaMG9ogeEvvuXD");
+ // const clock = Array.from(clockKey.clocks)[1];
+ // const oneSegments = Array.from(clock.elem$.find(".clock-one-segment"));
+ // function getRotationAngle(clock, segment) {
+ // const stepSize = 360 / clock.max;
+ // return stepSize * (segment - 1);
+ // }
+ // function rotateOneSegment(clock, oneSegment, segmentNum) {
+ // const angle = getRotationAngle(clock, segmentNum);
+ // U.gsap.set(oneSegment, {rotation: angle});
+ // }
+ // function addSegments(amount) {
+ // while (clock.value + amount > clock.max) { amount--; }
+ // const oneSegs = [...oneSegments].slice(0, amount);
+ // for (let i = 1; i <= amount; i++) {
+ // const thisSegment = clock.value + i;
+ // rotateOneSegment(clock, oneSegs[i-1], thisSegment);
+ // }
+ // U.gsap.fromTo(oneSegs, {scale: 1.5}, {scale: 1, autoAlpha: 1, duration: 1, stagger: 0.5, onComplete() {
+ // U.gsap.to(oneSegs, {autoAlpha: 0, duration: 1, delay: 2});
+ // }
+ // });
+ // }
+ }
// clock.changeSegments_SocketCall(value)
// #endregion
@@ -1115,8 +1155,9 @@ class BladesClock extends BladesTargetLink implements Blades
}
override async delete() {
+ const {parentKey} = this;
await super.delete();
- this.parentKey?.updateClockIndices();
+ parentKey.updateClockIndices();
}
// #endregion
diff --git a/ts/core/constants.ts b/ts/core/constants.ts
index 0593eb9a..512453d9 100644
--- a/ts/core/constants.ts
+++ b/ts/core/constants.ts
@@ -390,12 +390,12 @@ export enum ClockKeyDisplayMode {
full = "full",
clocks = "clocks",
activeClocks = "activeClocks",
+ present0 = "present0",
present1 = "present1",
present2 = "present2",
present3 = "present3",
present4 = "present4",
- present5 = "present5",
- present6 = "present6"
+ present5 = "present5"
}
// #endregion
diff --git a/ts/core/utilities.ts b/ts/core/utilities.ts
index dccc51ea..633e2d7a 100644
--- a/ts/core/utilities.ts
+++ b/ts/core/utilities.ts
@@ -1472,6 +1472,58 @@ const changeContainer = (elem: HTMLElement, container: HTMLElement) => {
gsap.set(elem, relPos);
};
+const adjustTextContainerAspectRatio = (
+ textContainer: HTMLElement|JQuery,
+ targetRatio: number,
+ maxHeight?: number,
+ maxWidth?: number,
+ minFontSize = 8
+): void => {
+ textContainer = $(textContainer)[0];
+ const style = window.getComputedStyle(textContainer);
+ const lineHeight = parseFloat(style.lineHeight);
+ const initialWidth = parseFloat(style.width);
+ let bestWidth = initialWidth;
+
+ for (let lines = 1; ; lines++) {
+ const expectedHeight = lineHeight * lines;
+ const expectedWidth = initialWidth / lines;
+ const expectedRatio = expectedWidth / expectedHeight;
+
+ if (expectedRatio < targetRatio) {
+ break;
+ }
+
+ if (maxHeight && expectedHeight > maxHeight) {
+ // If a maximum height is provided and we've exceeded that,
+ // reduce the font size and line height by 80% and recursively return this function to try again
+ const newFontSize = parseFloat(style.fontSize) * 0.8;
+ const newLineHeight = parseFloat(style.lineHeight) * 0.8;
+ if (newFontSize <= minFontSize) {
+ break;
+ }
+ textContainer.style.fontSize = `${newFontSize}px`;
+ textContainer.style.lineHeight = `${newLineHeight}px`;
+ return adjustTextContainerAspectRatio(textContainer, targetRatio, maxHeight, maxWidth);
+ }
+
+ bestWidth = expectedWidth;
+ }
+
+ // If a maximum width is provided but we've exceeded that,
+ // reduce the font size and line height by 80% and recursively return this function to try again
+ if (maxWidth && bestWidth > maxWidth) {
+ const newFontSize = parseFloat(style.fontSize) * 0.8;
+ const newLineHeight = parseFloat(style.lineHeight) * 0.8;
+ textContainer.style.fontSize = `${newFontSize}px`;
+ textContainer.style.lineHeight = `${newLineHeight}px`;
+ return adjustTextContainerAspectRatio(textContainer, targetRatio, maxHeight, maxWidth);
+ }
+
+ // Apply the best width
+ textContainer.style.width = `${bestWidth}px`;
+};
+
const getSvgCode = (svgDotKey: string, svgPathKeys?: string|string[]) => {
const svgData = getProperty(SVGDATA, svgDotKey) as HbsSvgData|undefined;
@@ -1896,7 +1948,7 @@ export default {
// ████████ HTML: Parsing HTML Code, Manipulating DOM Objects ████████
getSvgCode,
- changeContainer,
+ changeContainer, adjustTextContainerAspectRatio,
getRawCirclePath, drawCirclePath,
diff --git a/ts/documents/items/BladesClockKeeper.ts b/ts/documents/items/BladesClockKeeper.ts
index 8c623647..ae09c4fd 100644
--- a/ts/documents/items/BladesClockKeeper.ts
+++ b/ts/documents/items/BladesClockKeeper.ts
@@ -68,7 +68,7 @@ class BladesClockKeeper extends BladesItem implements BladesItemSubClass.Clock_K
getSceneKeys(sceneID?: IDString): Collection {
sceneID ??= this.targetSceneID;
- return new Collection(this.keys
+ return new Collection(Array.from(game.eunoblades.ClockKeys)
.filter((clockKey) => clockKey.sceneIDs.includes(sceneID as IDString))
.map((clockKey) => [clockKey.id, clockKey]));
}
diff --git a/ts/sheets/item/BladesClockKeeperSheet.ts b/ts/sheets/item/BladesClockKeeperSheet.ts
index afd3dc17..d42124db 100644
--- a/ts/sheets/item/BladesClockKeeperSheet.ts
+++ b/ts/sheets/item/BladesClockKeeperSheet.ts
@@ -58,6 +58,14 @@ class BladesClockKeeperSheet extends BladesItemSheet {
override async activateListeners(html: JQuery) {
super.activateListeners(html);
+ html.find("[data-action=\"create-clock-key\"").on({
+ click: async (event: ClickEvent) => {
+ event.preventDefault();
+ await this.item.addClockKey();
+ // Notify GM
+ }
+ });
+
// #region Helper Functions to Retrieve Clock Keys & Clocks ~
function getClockKeyFromEvent(event: ClickEvent | ChangeEvent): BladesClockKey {
const id = $(event.currentTarget).data("keyId")
@@ -100,14 +108,6 @@ class BladesClockKeeperSheet extends BladesItemSheet {
const clockKeyControls$ = html.find(".clock-key-control-flipper");
- clockKeyControls$.find("[data-action=\"create-clock-key\"").on({
- click: async (event: ClickEvent) => {
- event.preventDefault();
- await this.item.addClockKey();
- // Notify GM
- }
- });
-
// #region isOnDisplay === TRUE OR FALSE (Conditional Animation Checks Required) ~
clockKeyControls$.find("[data-action=\"toggle-name-visibility\"]").on({
click: async (event: ClickEvent) => {
@@ -297,10 +297,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
const minDelta = -1 * clock.value;
const maxDelta = clock.max - clock.value;
const value = U.gsap.utils.clamp(
- U.pInt($(event.currentTarget).data("value")),
minDelta,
- maxDelta
+ maxDelta,
+ U.pInt($(event.currentTarget).data("value"))
);
+ eLog.checkLog3("BladesClockKeeperSheet", "changeSegments", {event, clock, minDelta, maxDelta, value});
if (value > 0) {
await clock.fillSegments(value);