Skip to content

Commit

Permalink
More progress on socket animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eunomiac
Eunomiac committed Jan 4, 2024
1 parent 3f6d7a6 commit 3c8de41
Show file tree
Hide file tree
Showing 24 changed files with 1,410 additions and 1,133 deletions.
38 changes: 19 additions & 19 deletions css/style.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6440,6 +6440,12 @@ template {
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades #blades-overlay #test-box {
height: 200px;
width: 200px;
background: blue;
top: 200px;
}
:root body.vtt.game.system-eunos-blades #blades-overlay {
/* KEYS */
/* CLOCKS */
Expand Down Expand Up @@ -6614,8 +6620,8 @@ template {
left: 0;
position: absolute;
}
:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-label:hover {
color: var(--blades-gold-bright) !important;
:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-label.label-hidden {
visibility: hidden;
}
:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-image-container {
height: var(--key-height);
Expand Down Expand Up @@ -6652,7 +6658,6 @@ template {
:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock {
position: relative;
overflow: visible;
pointer-events: all !important;
}
:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock * {
height: var(--clock-size, 110px);
Expand Down Expand Up @@ -9761,8 +9766,8 @@ template {
left: 0;
position: absolute;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container .clock-key .key-label:hover {
color: var(--blades-gold-bright) !important;
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container .clock-key .key-label.label-hidden {
visibility: hidden;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container .clock-key .key-image-container {
height: var(--key-height);
Expand Down Expand Up @@ -9799,7 +9804,6 @@ template {
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-container .clock {
position: relative;
overflow: visible;
pointer-events: all !important;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-container .clock, :root body.vtt.game.system-eunos-blades #clocks-overlay .clock-container .clock * {
height: var(--clock-size, 110px);
Expand Down Expand Up @@ -23436,8 +23440,8 @@ template {
left: 0;
position: absolute;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container .clock-key .key-label:hover {
color: var(--blades-gold-bright) !important;
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container .clock-key .key-label.label-hidden {
visibility: hidden;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container .clock-key .key-image-container {
height: var(--key-height);
Expand Down Expand Up @@ -23474,7 +23478,6 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app .clock-container .clock {
position: relative;
overflow: visible;
pointer-events: all !important;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-container .clock, :root body.vtt.game.system-eunos-blades .app.window-app .clock-container .clock * {
height: var(--clock-size, 110px);
Expand Down Expand Up @@ -25268,8 +25271,8 @@ template {
left: 0;
position: absolute;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container .clock-key .key-label:hover {
color: var(--blades-gold-bright) !important;
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container .clock-key .key-label.label-hidden {
visibility: hidden;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container .clock-key .key-image-container {
height: var(--key-height);
Expand Down Expand Up @@ -25306,7 +25309,6 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-container .clock {
position: relative;
overflow: visible;
pointer-events: all !important;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-container .clock, :root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-container .clock * {
height: var(--clock-size, 110px);
Expand Down Expand Up @@ -26802,17 +26804,15 @@ template {
display: flex;
align-items: center;
justify-content: stretch;
background: linear-gradient(45deg, black, rgb(40, 40, 40));
color: white;
font-family: "Sura";
background: linear-gradient(45deg, var(--blades-grey-bright), var(--blades-grey-dark));
font-size: 24px;
box-shadow: inset 0 0 2px 2px black;
box-shadow: inset 0 0 2px 2px var(--blades-black-dark);
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet.item.clock-keeper .window-content form .sheet-root .tab-content .tab .clock-key-control-flipper > div {
position: absolute;
visibility: hidden;
white-space: nowrap;
box-shadow: inset 0 0 2px 2px black;
box-shadow: inset 0 0 2px 2px var(--blades-black-dark);
display: flex;
flex-direction: row;
justify-content: space-between;
Expand All @@ -26824,8 +26824,8 @@ template {
border-radius: 5px;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet.item.clock-keeper .window-content form .sheet-root .tab-content .tab .clock-key-control-flipper > div.controls-back {
color: black;
background: white;
color: var(--blades-black);
background: linear-gradient(45deg, var(--blades-white-bright), var(--blades-grey-bright));
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet.item.gm-tracker .window-content form {
--sheet-mid-height: 100px;
Expand Down
143 changes: 118 additions & 25 deletions module/classes/BladesClocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@ class BladesClockKey extends BladesTargetLink {
function registerClockKeys(doc) {
if ("clocksData" in doc.system) {
Object.values(doc.system.clocksData ?? {})
.forEach((keyData) => { new BladesClockKey(keyData); });
.forEach((keyData) => {
try {
new BladesClockKey(keyData);
}
catch (err) {
eLog.error("BladesClockKey", "[BladesClockKey.Initialize] Error initializing clock key.", err, keyData);
}
});
}
}
game.items.contents
Expand All @@ -21,6 +28,8 @@ class BladesClockKey extends BladesTargetLink {
.forEach(registerClockKeys);
socketlib.system.register("pull_SocketCall", BladesClockKey.pull_SocketResponse.bind(this));
socketlib.system.register("drop_SocketCall", BladesClockKey.drop_SocketResponse.bind(this));
socketlib.system.register("fadeInName_SocketCall", BladesClockKey.fadeInName_SocketResponse.bind(this));
socketlib.system.register("fadeOutName_SocketCall", BladesClockKey.fadeOutName_SocketResponse.bind(this));
return loadTemplates([
"systems/eunos-blades/templates/components/clock-key.hbs",
"systems/eunos-blades/templates/components/clock.hbs"
Expand Down Expand Up @@ -164,14 +173,6 @@ class BladesClockKey extends BladesTargetLink {
async getHTML() {
return await renderTemplate("systems/eunos-blades/templates/components/clock-key.hbs", this);
}
async appendToOverlay() {
return game.eunoblades.Director.appendToClockKeySection(await this.getHTML());
}
async removeFromOverlay() {
delete this._hoverOverTimeline;
delete this._keySwingTimeline;
return game.eunoblades.Director.removeFromClockKeySection(this.id);
}
get elem() {
return $(`#${this.id}`)[0];
}
Expand All @@ -184,14 +185,11 @@ class BladesClockKey extends BladesTargetLink {
get containerElem$() {
return this.containerElem ? $(this.containerElem) : undefined;
}
get isShowingControls() {
if (!this.elem) {
return false;
}
if (!game.user.isGM) {
return false;
}
return !$(this.elem).hasClass("controls-hidden");
get labelElem() {
return this.elem$ ? this.elem$.find(".key-label")[0] : undefined;
}
get labelElem$() {
return this.elem$ ? this.elem$.find(".key-label") : undefined;
}
// Initializes clock key with proper position and scale before displaying via autoAlpha
async initClockKeyElem(displayMode) {
Expand Down Expand Up @@ -373,10 +371,10 @@ class BladesClockKey extends BladesTargetLink {
_keySwingTimeline;
get keySwingTimeline() {
if (!this.elem) {
return undefined;
throw new Error("elem is not defined for keySwingTimeline");
}
if (!$(this.elem).parents("#blades-overlay").length) {
return undefined;
throw new Error("elem is not a child of #blades-overlay");
}
if (!this._keySwingTimeline) {
this._keySwingTimeline = U.gsap.effects.keySwing(this.elem).pause();
Expand All @@ -386,17 +384,49 @@ class BladesClockKey extends BladesTargetLink {
_hoverOverTimeline;
get hoverOverTimeline() {
if (!this.elem) {
return undefined;
throw new Error("elem is not defined for hoverOverTimeline");
}
if (!$(this.elem).parents("#blades-overlay").length) {
throw new Error("elem is not a child of #blades-overlay");
}
if (!this._hoverOverTimeline) {
this._hoverOverTimeline = U.gsap.effects.hoverOverClockKey(this);
this._hoverOverTimeline = U.gsap.effects.hoverOverClockKey(this.elem);
}
return this._hoverOverTimeline;
}
_nameFadeInTimeline;
get nameFadeInTimeline() {
if (!this.labelElem$) {
throw new Error("labelElem$ is not defined for nameFadeInTimeline");
}
if (!this.elem$?.parents("#blades-overlay")?.length) {
throw new Error("elem is not a child of #blades-overlay");
}
if (!this._nameFadeInTimeline) {
U.gsap.killTweensOf(this.labelElem$);
this._nameFadeInTimeline = U.gsap.effects.blurReveal(this.labelElem$, {
ignoreMargin: true,
duration: 1.5,
callbackScope: this,
onStart() {
this.labelElem$.removeClass("label-hidden");
},
onComplete() {
U.gsap.effects.textJitter(this.labelElem$);
},
onReverseComplete() {
this.labelElem$.addClass("label-hidden");
U.gsap.killTweensOf(this.labelElem$);
delete this._nameFadeInTimeline;
}
}).pause();
}
return this._nameFadeInTimeline;
}
// #endregion
// #region > SOCKET CALLS: _SocketCall / static _SocketResponse / _Animation
async drop_Animation(callback) {
await this.appendToOverlay();
await game.eunoblades.Director.appendClockKeyToOverlay(this);
U.gsap.effects.keyDrop(this.elem, { callback });
this.keySwingTimeline?.seek(0).play();
}
Expand All @@ -421,7 +451,7 @@ class BladesClockKey extends BladesTargetLink {
await new Promise((resolve) => {
U.gsap.effects.keyPull(this.elem, { callback }).then(resolve);
});
this.removeFromOverlay();
game.eunoblades.Director.removeClockKeyFromOverlay(this);
}
async pull_SocketCall() {
if (!game.user.isGM) {
Expand All @@ -443,6 +473,70 @@ class BladesClockKey extends BladesTargetLink {
}
key.pull_Animation();
}
async fadeInName_Animation(callback) {
if (!this.labelElem$) {
return;
}
if (!this.name) {
return;
}
this.nameFadeInTimeline.play();
if (callback) {
U.gsap.delayedCall(2, callback);
}
}
async fadeInName_SocketCall() {
if (!game.user.isGM) {
return;
}
if (!this.elem) {
return;
}
if (!$(this.elem).parents("#blades-overlay").length) {
return;
}
this.fadeInName_Animation();
socketlib.system.executeForOthers("fadeInName_SocketCall", this.id);
}
static fadeInName_SocketResponse(keyID) {
const key = game.eunoblades.ClockKeys.get(keyID);
if (!key) {
return;
}
key.fadeInName_Animation();
}
async fadeOutName_Animation(callback) {
if (!this.labelElem$) {
return;
}
if (!this.name) {
return;
}
this.nameFadeInTimeline.reverse();
if (callback) {
U.gsap.delayedCall(2, callback);
}
}
async fadeOutName_SocketCall() {
if (!game.user.isGM) {
return;
}
if (!this.elem) {
return;
}
if (!$(this.elem).parents("#blades-overlay").length) {
return;
}
this.fadeOutName_Animation();
socketlib.system.executeForOthers("fadeOutName_SocketCall", this.id);
}
static fadeOutName_SocketResponse(keyID) {
const key = game.eunoblades.ClockKeys.get(keyID);
if (!key) {
return;
}
key.fadeOutName_Animation();
}
// #endregion
// #endregion
// #region Adding & Removing Clocks ~
Expand Down Expand Up @@ -518,7 +612,6 @@ class BladesClock extends BladesTargetLink {
}
return pKey;
}
get isShowingControls() { return this.parentKey.isShowingControls; }
get isNameVisible() { return U.pBool(this.data.isNameVisible); }
set isNameVisible(val) { this.updateTarget("isNameVisible", U.pBool(val)); }
get isVisible() { return U.pBool(this.data.isVisible); }
Expand Down Expand Up @@ -562,7 +655,7 @@ class BladesClock extends BladesTargetLink {
// #endregion
// #region HTML INTERACTION ~
get elem() {
return $(`#${this.id}"`)[0];
return $(`#${this.id}`)[0];
}
get elem$() {
return this.elem ? $(this.elem) : undefined;
Expand Down
Loading

0 comments on commit 3c8de41

Please sign in to comment.