Skip to content

Commit

Permalink
More work on labels and animations for clock keys
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eunomiac
Eunomiac committed Jan 9, 2024
1 parent b65c595 commit c821557
Show file tree
Hide file tree
Showing 16 changed files with 1,145 additions and 679 deletions.
768 changes: 493 additions & 275 deletions css/style.min.css
View file

Large diffs are not rendered by default.

211 changes: 104 additions & 107 deletions module/classes/BladesClocks.js
View file

Large diffs are not rendered by default.

33 changes: 19 additions & 14 deletions module/classes/BladesTargetLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,22 @@ class BladesTargetLink {
: undefined;
}
get targetFlagKey() { return this._targetFlagKey; }
get targetFlagKeyPrefix() {
return this.targetFlagKey
? `${this.targetFlagKey}.${this.id}`
: undefined;
}
_target;
get target() {
return this._target;
}
get linkData() {
let linkData;
if (this.targetFlagKey) {
linkData = this.target.getFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`) ?? undefined;
if (this.targetFlagKeyPrefix) {
linkData = this.target.getFlag("eunos-blades", this.targetFlagKeyPrefix) ?? undefined;
}
else if (this.targetKey) {
linkData = getProperty(this.target, `${this.targetKey}.${this.id}`);
else if (this.targetKeyPrefix) {
linkData = getProperty(this.target, this.targetKeyPrefix);
}
if (!linkData) {
throw new Error("[BladesTargetLink.linkData] Error retrieving linkData.");
Expand Down Expand Up @@ -147,17 +152,17 @@ class BladesTargetLink {
// #endregion
// #region ASYNC UPDATE & DELETE METHODS ~
async updateTarget(prop, val, isSilent = false) {
if (this.targetFlagKey) {
await this.target.setFlag("eunos-blades", `${this.targetFlagKey}.${this.id}.${prop}`, val);
if (this.targetFlagKeyPrefix) {
await this.target.setFlag("eunos-blades", `${this.targetFlagKeyPrefix}.${prop}`, val);
}
else {
await this.target.update({ [`${this.targetKey}.${this.id}.${prop}`]: val }, { render: !isSilent });
else if (this.targetKeyPrefix) {
await this.target.update({ [`${this.targetKeyPrefix}.${prop}`]: val }, { render: !isSilent });
}
}
async updateTargetData(val, isSilent = false) {
if (val === null) {
if (this.targetFlagKey) {
await this.target.unsetFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`);
if (this.targetFlagKeyPrefix) {
await this.target.unsetFlag("eunos-blades", `${this.targetFlagKeyPrefix}`);
}
else {
await this.target.update({ [`${this.targetKey}.-=${this.id}`]: null });
Expand All @@ -173,11 +178,11 @@ class BladesTargetLink {
targetFlagKey: this.targetFlagKey
};
// Update target
if (this.targetFlagKey) {
await this.target.setFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`, linkData);
if (this.targetFlagKeyPrefix) {
await this.target.setFlag("eunos-blades", this.targetFlagKeyPrefix, linkData);
}
else {
await this.target.update({ [`${this.targetKey}.${this.id}`]: linkData }, { render: !isSilent });
else if (this.targetKeyPrefix) {
await this.target.update({ [this.targetKeyPrefix]: linkData }, { render: !isSilent });
}
}
}
Expand Down
93 changes: 62 additions & 31 deletions module/core/gsap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,20 +123,6 @@ export const gsapEffects = {
},
extendTimeline: true
},
keyNameFadeIn: {
effect: (target, config) => {
return U.gsap.effects.blurReveal(target, config);
},
defaults: {
ignoreMargin: true,
skewX: -20,
duration: 0.5,
x: "+=300",
scale: 1.5,
filter: "blur(10px)"
},
extendTimeline: true
},
hoverOverClockKey: {
effect: (clockKeyElem, config) => {
if (!clockKeyElem) {
Expand All @@ -152,14 +138,13 @@ export const gsapEffects = {
if (!clockKey.containerElem$) {
throw new Error("clockKey.containerElem$ is null or undefined");
}
const clockKeyHiddenLabel$ = clockKey.elem$.find(".key-label.hidden-label");
const clockKeyLabel$ = clockKey.elem$.find(".key-label");
// Construct master timeline,
const tl = U.gsap.timeline({ paused: true });
// Create initial tween that resets keySwing to neutral
tl.add(clockKey.keySwingTimeline
.tweenTo("NEUTRAL", {
duration: 0.25 * config.duration,
duration: 0.5 * config.duration,
ease: "none"
}));
// Add a label for the proper start of the hover-over animation
Expand All @@ -183,17 +168,24 @@ export const gsapEffects = {
},
duration: 0.75 * config.duration
}, "hoverStart");
// Fade in name
tl.blurReveal(clockKeyHiddenLabel$, {
// Fade in name, if name isn't visible
if (clockKeyLabel$.css("opacity") === "0") {
tl.to(clockKeyLabel$, {
autoAlpha: 1,
duration: 0.5 * config.duration
}, "hoverStart");
}
// Fade in name, if name isn't visible
tl.blurReveal(clockKeyLabel$, {
ignoreMargin: true,
duration: 0.75 * config.duration
}, "hoverStart");
// Move into repeating jitter tween
tl.textJitter(clockKeyLabel$);
// tl.textJitter(clockKeyLabel$);
return tl;
},
defaults: {
duration: 1.5,
duration: 0.5,
brightness: 1.5,
scaleMult: 1.25
}
Expand Down Expand Up @@ -705,7 +697,7 @@ export const gsapEffects = {
duration: (3 / 4) * config.duration
}, config.duration / 4)
.to(targets, {
opacity: 0,
autoAlpha: 0,
duration: config.duration / 2,
ease: "power3.in"
}, config.duration / 2),
Expand All @@ -721,13 +713,6 @@ export const gsapEffects = {
},
blurReveal: {
effect: (targets, config) => U.gsap.timeline()
.fromTo(targets, {
skewX: config.skewX
}, {
skewX: 0,
duration: config.duration / 2,
ease: "power4.out"
})
.fromTo(targets, {
x: config.x,
marginBottom: config.ignoreMargin
Expand All @@ -744,18 +729,25 @@ export const gsapEffects = {
filter: `blur(${config.blur}px)`
}, {
x: 0,
marginBottom: config.ignoreMargin ? undefined : 0,
marginRight: config.ignoreMargin ? undefined : 0,
marginBottom: 0,
marginRight: 0,
scale: 1,
filter: "blur(0px)",
duration: (3 / 4) * config.duration
}, config.duration / 4)
}, 0)
.fromTo(targets, {
autoAlpha: 0
}, {
autoAlpha: 1,
duration: config.duration / 2,
ease: "power3.in"
}, 0)
.fromTo(targets, {
skewX: config.skewX
}, {
skewX: 0,
duration: config.duration / 2,
ease: "power4.out"
}, config.duration / 2),
defaults: {
ignoreMargin: false,
Expand All @@ -767,6 +759,45 @@ export const gsapEffects = {
},
extendTimeline: true
},
scaleUpReveal: {
effect: (target, config) => {
const tl = U.gsap.timeline()
.fromTo(target, {
autoAlpha: 0,
scale: 0.5 * config.scale
}, {
autoAlpha: 1,
scale: config.scale,
duration: config.duration,
ease: config.ease
});
return tl;
},
defaults: {
scale: 1,
duration: 0.5,
ease: "power2"
},
extendTimeline: true
},
scaleDownRemove: {
effect: (target, config) => {
const tl = U.gsap.timeline()
.to(target, {
autoAlpha: 0,
scale: 0.5 * config.scale,
duration: config.duration,
ease: config.ease
});
return tl;
},
defaults: {
scale: 1,
duration: 0.5,
ease: "power2"
},
extendTimeline: true
},
hoverTooltip: {
effect: (tooltip, _config) => {
const tooltipElem = $(tooltip)[0];
Expand Down
53 changes: 38 additions & 15 deletions module/core/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1415,39 +1415,62 @@ const changeContainer = (elem, container) => {
};
const adjustTextContainerAspectRatio = (textContainer, targetRatio, maxHeight, maxWidth, minFontSize = 8) => {
textContainer = $(textContainer)[0];
function recurAdjustment() {
textContainer = $(textContainer)[0];
const newFontSize = parseFloat(style.fontSize) * 0.8;
const newLineHeight = parseFloat(style.lineHeight) * 0.8;
if (newFontSize < minFontSize) {
return false;
}
textContainer.style.fontSize = `${newFontSize}px`;
textContainer.style.lineHeight = `${newLineHeight}px`;
return adjustTextContainerAspectRatio(textContainer, targetRatio, lineCount ?? maxHeight, maxWidth);
}
const style = window.getComputedStyle(textContainer);
const lineHeight = parseFloat(style.lineHeight);
// If maxHeight is provided AND it is an integer that is less than lineHeight,
// assume maxHeight is referring to the number of lines, and calculate pixel
// height accordingly:
let lineCount = undefined;
if (isInt(maxHeight) && maxHeight < lineHeight) {
lineCount = maxHeight;
}
const initialWidth = parseFloat(style.width);
let bestWidth = initialWidth;
let isAtMaxLineCount = false;
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) {
if (isInt(lineCount)) {
if (lines > lineCount) {
if (recurAdjustment()) {
return;
}
break;
}
textContainer.style.fontSize = `${newFontSize}px`;
textContainer.style.lineHeight = `${newLineHeight}px`;
return adjustTextContainerAspectRatio(textContainer, targetRatio, maxHeight, maxWidth);
}
else if (maxHeight && expectedHeight > maxHeight) {
if (recurAdjustment()) {
return;
}
break;
}
bestWidth = expectedWidth;
if (isInt(lineCount) && lines === lineCount) {
isAtMaxLineCount = true;
break;
}
}
// 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);
if (!isAtMaxLineCount && maxWidth && bestWidth > maxWidth) {
if (recurAdjustment()) {
return;
}
}
// Apply the best width
textContainer.style.width = `${bestWidth}px`;
Expand Down
36 changes: 30 additions & 6 deletions module/sheets/item/BladesClockKeeperSheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-name-visibility\"] i").toggleClass("fa-signature").toggleClass("fa-signature-slash");
control$.find("[data-action=\"toggle-name-visibility\"] i")
.toggleClass("fa-signature")
.toggleClass("fa-signature-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand All @@ -179,7 +183,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-spotlight\"] i").toggleClass("fa-message").toggleClass("fa-message-slash");
control$.find("[data-action=\"toggle-spotlight\"] i")
.toggleClass("fa-message")
.toggleClass("fa-message-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand Down Expand Up @@ -277,7 +285,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-visible\"] i").toggleClass("fa-eye").toggleClass("fa-eye-slash");
control$.find("[data-action=\"toggle-visible\"] i")
.toggleClass("fa-eye")
.toggleClass("fa-eye-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand All @@ -301,7 +313,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-active\"] i").toggleClass("fa-bolt").toggleClass("fa-bolt-slash");
control$.find("[data-action=\"toggle-active\"] i")
.toggleClass("fa-bolt")
.toggleClass("fa-bolt-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand All @@ -325,7 +341,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-name-visibility\"] i").toggleClass("fa-signature").toggleClass("fa-signature-slash");
control$.find("[data-action=\"toggle-name-visibility\"] i")
.toggleClass("fa-signature")
.toggleClass("fa-signature-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand All @@ -349,7 +369,11 @@ class BladesClockKeeperSheet extends BladesItemSheet {
}
}
// Toggle class names on icon
control$.find("[data-action=\"toggle-highlight\"] i").toggleClass("fa-lightbulb").toggleClass("fa-lightbulb-slash");
control$.find("[data-action=\"toggle-highlight\"] i")
.toggleClass("fa-lightbulb")
.toggleClass("fa-lightbulb-slash")
.toggleClass("fa-solid")
.toggleClass("fa-regular");
}
});
});
Expand Down
Loading

0 comments on commit c821557

Please sign in to comment.