Skip to content

Commit

Permalink
Just make separate images for inactive keys tucked away at top!
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eunomiac
Eunomiac committed Dec 11, 2023
1 parent c90b5c9 commit f3c2c8e
Show file tree
Hide file tree
Showing 29 changed files with 1,796 additions and 355 deletions.
110 changes: 99 additions & 11 deletions css/style.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6461,16 +6461,17 @@ template {
top: var(--alternating-top-shift);
}
:root body.vtt.game.system-eunos-blades #clocks-overlay {
/* KEYS */
/* CLOCKS */
/* CONTROLS */
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container {
position: relative;
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container * {
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container[data-size="1"] {
Expand Down Expand Up @@ -6951,6 +6952,9 @@ template {
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-container .clock[data-value="12"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #clocks-overlay .clock-container .clock[data-value="12"][data-max="12"] .clock-fill {
clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 49.9907346411% 0, 50% 50%);
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key[data-is-showing-controls=false] .clock-controls {
display: none !important;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-controls,
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-controls {
--row-height: 25px;
Expand All @@ -6972,7 +6976,8 @@ template {
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-controls.clock-key-controls,
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-controls.clock-key-controls {
position: absolute;
top: 80%;
top: unset;
bottom: 20%;
left: 50%;
width: 80%;
transform: translate(-50%, 0%);
Expand Down Expand Up @@ -7070,10 +7075,83 @@ template {
position: absolute;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container {
height: calc(0.7 * var(--key-height));
width: calc(0.7 * var(--key-width));
height: calc(0.5 * var(--key-height));
width: calc(0.5 * var(--key-width));
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container.active-key {
min-width: 200px;
margin-right: calc(-0.175 * var(--key-width));
scale: 0.7;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key) {
top: calc(-1 * var(--top-shift));
top: unset;
bottom: 10px;
width: calc(0.35 * var(--key-width));
margin-right: calc(-0.15 * var(--key-width));
transform-origin: 50% 0%;
scale: 0.5;
left: calc(-1 * var(--left-shift));
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key):nth-child(2n+1) {
margin-top: 20px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="1"] {
bottom: 150px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="2"] {
bottom: 200px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="3"] {
bottom: 315px;
margin-left: -10px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="4"] {
bottom: 350px;
margin-left: -25px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="5"] {
bottom: 390px;
margin-left: -10px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="6"] {
bottom: 390px;
margin-left: -10px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key) .clock-key .key-label {
font-size: 32px;
white-space: nowrap;
z-index: 2000;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="1"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 120px);
left: -30px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="2"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 120px);
left: -30px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="3"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 120px);
left: -80px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="4"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 220px);
left: -80px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="5"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 120px);
left: -60px;
}
:root body.vtt.game.system-eunos-blades #clocks-overlay .clock-key-container:not(.active-key)[data-size="6"] .clock-key .key-label {
top: unset;
bottom: calc(-0.5 * var(--key-height) + 120px);
left: -60px;
}
:root body.vtt.game.system-eunos-blades #sidebar {
border: none;
Expand Down Expand Up @@ -20167,16 +20245,17 @@ template {
background-color: var(--tag-hover);
}
:root body.vtt.game.system-eunos-blades .app.window-app {
/* KEYS */
/* CLOCKS */
/* CONTROLS */
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container {
position: relative;
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container * {
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-container[data-size="1"] {
Expand Down Expand Up @@ -20657,6 +20736,9 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app .clock-container .clock[data-value="12"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades .app.window-app .clock-container .clock[data-value="12"][data-max="12"] .clock-fill {
clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 49.9907346411% 0, 50% 50%);
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key[data-is-showing-controls=false] .clock-controls {
display: none !important;
}
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-controls,
:root body.vtt.game.system-eunos-blades .app.window-app .clock-controls {
--row-height: 25px;
Expand All @@ -20678,7 +20760,8 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app .clock-key-controls.clock-key-controls,
:root body.vtt.game.system-eunos-blades .app.window-app .clock-controls.clock-key-controls {
position: absolute;
top: 80%;
top: unset;
bottom: 20%;
left: 50%;
width: 80%;
transform: translate(-50%, 0%);
Expand Down Expand Up @@ -22104,16 +22187,17 @@ template {
pointer-events: none;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container {
/* KEYS */
/* CLOCKS */
/* CONTROLS */
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container {
position: relative;
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container * {
perspective: 1000px;
perspective: 500px;
transform-style: preserve-3d;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-container[data-size="1"] {
Expand Down Expand Up @@ -22594,6 +22678,9 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-container .clock[data-value="12"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-container .clock[data-value="12"][data-max="12"] .clock-fill {
clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 49.9907346411% 0, 50% 50%);
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key[data-is-showing-controls=false] .clock-controls {
display: none !important;
}
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-controls,
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-controls {
--row-height: 25px;
Expand All @@ -22615,7 +22702,8 @@ template {
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-key-controls.clock-key-controls,
:root body.vtt.game.system-eunos-blades .app.window-app.sheet .window-content .clock-key-container .clock-controls.clock-key-controls {
position: absolute;
top: 80%;
top: unset;
bottom: 20%;
left: 50%;
width: 80%;
transform: translate(-50%, 0%);
Expand Down
97 changes: 92 additions & 5 deletions module/core/gsap.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,90 @@
import U from "./utilities.js";
import C from "./constants.js";
// eslint-disable-next-line import/no-unresolved
import { TextPlugin, Flip, MotionPathPlugin } from "/scripts/greensock/esm/all.js";
import { TextPlugin, Flip, Draggable as Dragger, MotionPathPlugin, SplitText, Observer, CustomEase, CustomWiggle, CustomBounce, EasePack } from "/scripts/greensock/esm/all.js";
const gsapPlugins = [
TextPlugin,
Flip,
MotionPathPlugin
MotionPathPlugin,
Dragger,
SplitText,
Observer,
CustomEase,
CustomWiggle,
CustomBounce,
EasePack
];
const gsapEffects = {
hoverButton: {
effect: (target, config) => {
return U.gsap.timeline({ paused: true })
.to(target, {
scale: config.scale,
ease: "power2",
duration: config.duration
})
.fromTo(target, {
filter: config.brightness ? "brightness(1)" : undefined
}, {
color: config.color,
filter: config.brightness ? `brightness(${config.brightness})` : undefined,
duration: config.duration,
ease: "sine"
}, 0);
},
defaults: {
color: undefined,
brightness: 1.5,
duration: 0.5,
scale: 1.25
}
},
keyUp: {
effect: (target, config) => {
const finalPos = {
top: 0,
left: 0,
rotateZ: 90,
transformOrigin: "50% 50%",
scale: 0.5,
opacity: 0
};
/* Also need to reposition label, and probably controls */
const tl = gsap.timeline();
tl.to(target, {
duration: config.duration,
ease: config.ease,
y: -500
}, 0)
.to(target, {
duration: config.duration,
ease: "power2.in",
opacity: 0
}, config.duration / 2)
.set(target, finalPos)
.fromTo(target, {
y: 50
}, {
y: 0,
duration: config.duration / 2,
ease: "elastic.out(1.2, 0.5)"
})
.fromTo(target, {
opacity: 0,
filter: "brightness(2)"
}, {
opacity: 1,
filter: "brightness(1)",
duration: config.duration / 2,
ease: "power2.in"
}, "<");
return tl;
},
defaults: {
duration: 0.5,
ease: "elastic.in(1.2, 0.5)"
}
},
csqEnter: {
effect: (csqContainer, config) => {
const csqRoot = U.gsap.utils.selector(csqContainer);
Expand Down Expand Up @@ -533,7 +610,7 @@ const gsapEffects = {
defaults: {}
},
hoverTooltip: {
effect: (tooltip, config) => {
effect: (tooltip, _config) => {
const tooltipElem = $(tooltip)[0];
const tooltipContainer = $(tooltip).parent()[0];
const overlayContainer = $("#eunos-blades-tooltips")[0];
Expand Down Expand Up @@ -589,11 +666,21 @@ const gsapEffects = {
*/
export function Initialize() {
if (gsapPlugins.length) {
U.gsap.config({
nullTargetWarn: true
});
U.gsap.registerPlugin(...gsapPlugins);
Object.assign(globalThis, {
TextPlugin,
Flip,
MotionPathPlugin
MotionPathPlugin,
Dragger,
SplitText,
Observer,
CustomEase,
CustomWiggle,
CustomBounce,
EasePack
});
}
Object.entries(gsapEffects).forEach(([name, effect]) => {
Expand Down Expand Up @@ -795,5 +882,5 @@ export function ApplyConsequenceAnimations(html) {
}
});
}
export { TextPlugin, Flip, MotionPathPlugin };
export { TextPlugin, Flip, MotionPathPlugin, Dragger, SplitText, Observer, CustomEase, CustomWiggle, CustomBounce, EasePack };
export default U.gsap;
4 changes: 4 additions & 0 deletions module/core/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -816,6 +816,9 @@ const shuffle = (array) => {
}
return array;
};
const toArray = (target) => {
return gsap.utils.toArray(target);
};
// #endregion ▄▄▄▄▄ ARRAYS ▄▄▄▄▄
// #region ████████ OBJECTS: Manipulation of Simple Key/Val Objects ████████ ~
const checkVal = ({ k, v }, checkTest) => {
Expand Down Expand Up @@ -1669,6 +1672,7 @@ export default {
unique, group, sample,
getLast, removeFirst, pullElement, pullIndex,
subGroup, shuffle,
toArray,
// ████████ OBJECTS: Manipulation of Simple Key/Val Objects ████████
remove, replace, partition, zip,
objClean, objSize, objMap, objFindKey, objFilter, objForEach, objCompact,
Expand Down
Loading

0 comments on commit f3c2c8e

Please sign in to comment.