diff --git a/css/style.min.css b/css/style.min.css index 51345bc4..6e6e14fa 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -6428,7 +6428,8 @@ template { pointer-events: auto; z-index: 20; } -:root body.vtt.game.system-eunos-blades #blades-overlay, :root body.vtt.game.system-eunos-blades #blades-overlay .overlay-section { +:root body.vtt.game.system-eunos-blades #blades-overlay, :root body.vtt.game.system-eunos-blades #blades-overlay > * { + display: block; position: absolute; top: 0; left: 0; @@ -6439,15 +6440,633 @@ template { perspective: 500px; transform-style: preserve-3d; } -:root body.vtt.game.system-eunos-blades #blades-overlay #testSquare, :root body.vtt.game.system-eunos-blades #blades-overlay .overlay-section #testSquare { +:root body.vtt.game.system-eunos-blades #blades-overlay { + /* KEYS */ + /* CLOCKS */ + /* CONTROLS */ +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container { + position: absolute; + perspective: 500px; + transform-style: preserve-3d; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container * { + perspective: 500px; + transform-style: preserve-3d; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="1"] { + --key-height: 455px; + --key-width: 202px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="1"] .clock-key .key-label { + top: 0px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="1"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 101px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="2"] { + --key-height: 624.438px; + --key-width: 202px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="2"] .clock-key .key-label { + top: 100px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="2"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 101px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="2"] .clock-key .key-image-container .clock-container:nth-of-type(2) { + left: 101px; + top: 279px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="3"] { + --key-height: 915px; + --key-width: 280px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="3"] .clock-key .key-label { + top: 0px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="3"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 140px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="3"] .clock-key .key-image-container .clock-container:nth-of-type(2) { + left: 74px; + top: 211px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="3"] .clock-key .key-image-container .clock-container:nth-of-type(3) { + left: 206px; + top: 211px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] { + --key-height: 1140px; + --key-width: 376px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] .clock-key .key-label { + top: -100px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 188px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] .clock-key .key-image-container .clock-container:nth-of-type(2) { + left: 101px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] .clock-key .key-image-container .clock-container:nth-of-type(3) { + left: 275px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="4"] .clock-key .key-image-container .clock-container:nth-of-type(4) { + left: 188px; + top: 273px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] { + --key-height: 1140px; + --key-width: 376px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-label { + top: 0px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 188px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-image-container .clock-container:nth-of-type(2) { + left: 101px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-image-container .clock-container:nth-of-type(3) { + left: 275px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-image-container .clock-container:nth-of-type(4) { + left: 188px; + top: 273px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="5"] .clock-key .key-image-container .clock-container:nth-of-type(5) { + left: 188px; + top: 452px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] { + --key-height: 1150px; + --key-width: 376px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-label { + top: 250px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(1) { + left: 188px; + top: 99px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(2) { + left: 101px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(3) { + left: 275px; + top: 185px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(4) { + left: 188px; + top: 273px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(5) { + left: 188px; + top: 452px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="6"] .clock-key .key-image-container .clock-container:nth-of-type(6) { + left: 188px; + top: 683px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="1"] .clock-key .key-image-container.one-key-image-container { + --clock-size: 168px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container[data-size="1"] .clock-key .key-image-container.one-key-image-container .clock-container { + top: 108px; + left: 110px; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key { + visibility: hidden; + position: absolute; + display: block; + height: 100px; + width: 100px; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key > * { + position: absolute; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-label { + font-family: var(--font-decorative); + font-size: 4rem; + top: unset; + z-index: 20; + width: 100%; + pointer-events: all; + color: var(--blades-white-bright); + text-shadow: 0 0 15px var(--blades-black-dark), 0 0 15px var(--blades-black-dark), 0 0 15px var(--blades-black-dark), 0 0 15px var(--blades-black-dark); + 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-image-container { + height: var(--key-height); + width: var(--key-width); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-image-container .key-image { + height: var(--key-height); + width: var(--key-width); + z-index: 1; + overflow: visible; + filter: drop-shadow(0px 0px 10px var(--blades-white-bright)) drop-shadow(30px 30px 10px var(--blades-black-dark)) brightness(0.5); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-image-container .key-image .key-bg { + fill: var(--blades-black); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container .clock-key .key-image-container .key-image .metallic-overlay { + height: var(--key-height); + width: var(--key-width); + filter: url(#metallicFilter) blur(1px); + fill: var(--blades-grey-dark); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container { + position: absolute; + top: 0px; + left: 0px; + display: flex; + align-items: center; + justify-content: center; + overflow: visible; + height: var(--clock-size, 110px); + width: var(--clock-size, 110px); + transform: translate(-50%, -50%) !important; +} +: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); + width: var(--clock-size, 110px); + pointer-events: none; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-frame, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-fill, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow { + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-label { + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + z-index: 5; + font-size: 24px; + font-family: var(--font-emphasis-narrow); + font-weight: bold; + color: var(--blades-white-bright); + text-shadow: var(--text-shadow-dark-strong); + text-align: center; + white-space: nowrap; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-frame { + z-index: 3; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-fill { + z-index: 2; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow { + z-index: 4; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow { + transform-origin: 50% 50%; + scale: var(--clock-glow-mult, 3); + background-repeat: no-repeat; + background-position: center calc(50% - var(--clock-glow-shift, 7%)); + background-size: cover; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow.clock-glow-white { + background-image: url("../assets/animations/clock-flare-white.webp"); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow.clock-glow-red { + background-image: url("../assets/animations/clock-flare-red.webp"); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow.clock-glow-yellow { + background-image: url("../assets/animations/clock-flare-yellow.webp"); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock .clock-glow.clock-glow-blue { + background-image: url("../assets/animations/clock-flare-blue.webp"); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="2"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="2"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="2"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="2"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="3"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="3"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="3"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="3"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="3"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="3"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="4"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="4"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="4"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="4"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="4"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="4"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="4"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="4"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="5"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="5"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 33.7545273633%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="5"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="5"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 86.3257107984% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="5"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="5"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 13.6742892016% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="5"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="5"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 33.7545273633%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="5"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="5"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 21.1335160157%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 21.1335160157%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="6"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="6"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 10.1279545793%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 61.4118255758%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 74.0779156508% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 25.9220843492% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 61.4118255758%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 10.1279545793%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="7"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="7"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 0.0023162861% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 0.0023162861%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 99.9976837139% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 99.9976837139%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="8"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="8"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 91.9532272571% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 41.1839163374%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 68.1979287832% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 31.8020712168% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 41.1839163374%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 8.0467727429% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="9"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="9"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 86.3257107984% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 33.7545273633%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 66.2454726367%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 86.3257107984% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 13.6742892016% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 66.2454726367%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 33.7545273633%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 13.6742892016% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="10"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="10"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 82.1318586828% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 27.1665285834%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 57.1886997705%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 93.3234032431%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 64.6808671851% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 35.3191328149% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 93.3234032431%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 57.1886997705%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 27.1665285834%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 17.8681413172% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="11"][data-max="11"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="11"][data-max="11"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="1"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 78.8664839843% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="2"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 21.1335160157%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="3"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="4"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="5"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 78.8664839843% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="6"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="7"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 21.1335160157% 100%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="8"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 78.8664839843%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="9"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="10"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 21.1335160157%, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="11"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="11"][data-max="12"] .clock-fill { + clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 21.1335160157% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-container .clock[data-value="12"][data-max="12"] .clock-glow, :root body.vtt.game.system-eunos-blades #blades-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, 50% 0, 50% 50%); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container.controls-hidden .clock-key-controls { + display: none !important; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container.controls-hidden .clock-controls { + display: none !important; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls { + --row-height: 25px; + --row-gap: 2px; + position: absolute; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: var(--row-gap); + z-index: 50; + border-radius: 5px; + height: calc(var(--row-height) * 3 + var(--row-gap) * 2); + width: 100%; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls.clock-key-controls, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls.clock-key-controls { + position: absolute; + top: unset; + bottom: 20%; + left: 50%; + width: 80%; + transform: translate(-50%, 0%); + height: calc(var(--row-height) * 3 + var(--row-gap) * 2); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-button, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-button { + pointer-events: all; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls i, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls i { + opacity: 1; + text-shadow: var(--text-shadow-dark-strong); + pointer-events: none; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls select, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls input, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls select, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls input { + pointer-events: all; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls select, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls select { + width: auto; + flex-basis: auto; + max-width: 75%; + flex-grow: 1; + flex-shrink: 1; + line-height: var(--row-height); + appearance: none; /* Remove default select dropdown arrow */ + -webkit-appearance: none; /* Remove default select dropdown arrow for Chrome and Safari */ + -moz-appearance: none; /* Remove default select dropdown arrow for Firefox */ + background: transparent; /* Make the select element transparent to hide the arrow */ +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls:not(.controls-hidden), +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls:not(.controls-hidden) { + background: var(--blades-black-fade); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + height: var(--row-height); + max-height: var(--row-height); + width: 100%; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row *, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row *, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row *, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row * { + height: var(--row-height); + max-height: var(--row-height); + width: unset; + position: static; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.toggle-controls-row, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.toggle-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.toggle-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.toggle-controls-row { + position: absolute; + top: calc(-1 * var(--row-height)); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.toggle-controls-row.clock-key-controls-row, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.toggle-controls-row.clock-key-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.toggle-controls-row.clock-key-controls-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.toggle-controls-row.clock-key-controls-row { + bottom: calc(-2 * var(--row-height)); + top: unset; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.name-row, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.name-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.name-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.name-row { + width: 100%; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.name-row > .clock-controls-name, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.name-row > .clock-controls-name, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.name-row > .clock-controls-name, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.name-row > .clock-controls-name { + height: var(--row-height); + max-height: var(--row-height); + width: 100%; + pointer-events: all !important; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.select-row, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.select-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.select-row, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.select-row { + justify-content: stretch; +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.button-row .toggle-icon i, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.button-row .toggle-icon i, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.button-row .toggle-icon i, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.button-row .toggle-icon i { + width: var(--row-height); +} +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-controls-row.button-row .toggle-icon .tooltip, :root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-controls .clock-key-controls-row.button-row .toggle-icon .tooltip, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-controls-row.button-row .toggle-icon .tooltip, +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-controls .clock-key-controls-row.button-row .toggle-icon .tooltip { position: absolute; - top: 200px; - left: 300px; - background: blue; - height: 200px; - width: 200px; } -:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container, :root body.vtt.game.system-eunos-blades #blades-overlay .overlay-section .clock-key-container { +:root body.vtt.game.system-eunos-blades #blades-overlay .clock-key-container, +:root body.vtt.game.system-eunos-blades #blades-overlay .overlay-section .clock-key-container, +:root body.vtt.game.system-eunos-blades #blades-overlay .svg-defs .clock-key-container { visibility: hidden; } :root body.vtt.game.system-eunos-blades #clocks-overlay { diff --git a/module/BladesActor.js b/module/BladesActor.js index d07418ef..6ad588cf 100644 --- a/module/BladesActor.js +++ b/module/BladesActor.js @@ -300,6 +300,9 @@ class BladesActor extends Actor { // #endregion // #region SubItemControl Implementation ~ get subItems() { return Array.from(this.items); } + getSubItemsOfType(itemType) { + return this.items.filter((item) => item.type === itemType); + } get activeSubItems() { return this.items.filter((item) => !item.hasTag(Tag.System.Archived)); } get archivedSubItems() { return this.items.filter((item) => item.hasTag(Tag.System.Archived)); } _checkItemPrereqs(item) { @@ -741,7 +744,7 @@ class BladesActor extends Actor { parentActor; get isSubActor() { return this.parentActor !== undefined; } // #endregion - // #region BladesRoll Implementation + // #region BladesRoll Implementation ~ get rollModsData() { return BladesRollMod.ParseDocRollMods(this); } @@ -783,9 +786,11 @@ class BladesActor extends Actor { return this.type; } get rollPrimaryImg() { return this.img; } + // #endregion + // #endregion // #region BladesCrew Implementation ~ // #endregion - // #region PREPARING DERIVED DATA + // #region PREPARING DERIVED DATA ~ prepareDerivedData() { if (BladesActor.IsType(this, BladesActorType.pc)) { this._preparePCData(this.system); diff --git a/module/blades.js b/module/blades.js index 5cd2f1ec..6dce8863 100644 --- a/module/blades.js +++ b/module/blades.js @@ -579,10 +579,9 @@ Hooks.once("ready", async () => { initDOMStyles(); initCanvasStyles(); initTinyMCEStyles(); - await BladesDirector.getInstance().renderOverlay(); + await BladesDirector.getInstance().renderOverlay_SocketResponse(); BladesDirector.InitSockets(); BladesRoll.InitSockets(); - BladesClockKeeper.InitSockets(); }); // #endregion ▄▄▄▄▄ SYSTEM INITIALIZATION ▄▄▄▄▄ // #region ░░░░░░░[SocketLib]░░░░ SocketLib Initialization ░░░░░░░ ~ diff --git a/module/classes/BladesClocks.js b/module/classes/BladesClocks.js index 3391a1f6..e95db86b 100644 --- a/module/classes/BladesClocks.js +++ b/module/classes/BladesClocks.js @@ -21,6 +21,10 @@ 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)); + return loadTemplates([ + "systems/eunos-blades/templates/components/clock-key.hbs", + "systems/eunos-blades/templates/components/clock.hbs" + ]); } static ApplySchemaDefaults(schemaData) { // Ensure all properties of Schema are provided @@ -72,26 +76,6 @@ class BladesClockKey extends BladesTargetLink { set isActive(val) { this.updateTarget("isActive", U.pBool(val)); } get isNameVisible() { return this.data.isNameVisible; } set isNameVisible(val) { this.updateTarget("isNameVisible", U.pBool(val)); } - _keySwingTimeline; - get keySwingTimeline() { - if (!this.elem) { - return undefined; - } - if (!this._keySwingTimeline) { - this._keySwingTimeline = U.gsap.effects.keySwing(this.elem).pause(); - } - return this._keySwingTimeline; - } - _keyControlZoomTimeline; - get keyControlZoomTimeline() { - if (!this.elem) { - return undefined; - } - if (!this._keyControlZoomTimeline) { - this._keyControlZoomTimeline = U.gsap.effects.keyControlZoom(this.elem).pause(); - } - return this._keyControlZoomTimeline; - } get clocksData() { return this.data.clocksData; } get displayMode() { if (game.user.isGM && this.isShowingControls) { @@ -175,7 +159,7 @@ class BladesClockKey extends BladesTargetLink { // #endregion // #region HTML INTERACTION ~ async getHTML() { - return await renderTemplate("systems/eunos-blades/templates/overlays/clock-key.hbs", this); + return await renderTemplate("systems/eunos-blades/templates/components/clock-key.hbs", this); } get elem() { return $(`#${this.id}`)[0]; @@ -217,17 +201,27 @@ class BladesClockKey extends BladesTargetLink { setTimeout(async () => resolve(await this.initClockKeyElem(displayMode)), 1000); }); } + const self = this; const { elem } = this; const { keyTweenVars, keyContTweenVars } = this.getDisplayMode(displayMode); const keyImgContainer = $(this.elem).find(".key-image-container")[0]; return new Promise((resolve) => { - U.gsap.timeline() + const tl = U.gsap.timeline() .set(keyImgContainer, keyContTweenVars) - .set(elem, keyTweenVars) - .to(elem, { - autoAlpha: 1, - duration: 0.5 - }).then(() => { resolve(); }); + .set(elem, keyTweenVars); + if (this.isVisible) { + tl.to(elem, { + autoAlpha: 1, + duration: 0.5, + onComplete() { + self.keySwingTimeline?.play(); + resolve(); + } + }); + } + else { + resolve(); + } }); } // Given a display mode ("full", "clocks", or a clock index number), will return a GSAP effects @@ -360,7 +354,43 @@ class BladesClockKey extends BladesTargetLink { }); } // #endregion - // #region ANIMATIONS (Client-Side Only AND Socket-Triggered) + // #region ANIMATED UPDATES (Both GM-Only AND Socket Calls) + // #region > TIMELINES ~ + _keySwingTimeline; + get keySwingTimeline() { + if (!this.elem) { + return undefined; + } + if (!$(this.elem).parents("#blades-overlay").length) { + return undefined; + } + if (!this._keySwingTimeline) { + this._keySwingTimeline = U.gsap.effects.keySwing(this.elem).pause(); + } + return this._keySwingTimeline; + } + _keyControlZoomTimeline; + get keyControlZoomTimeline() { + if (!this.elem) { + return undefined; + } + if (!this._keyControlZoomTimeline) { + this._keyControlZoomTimeline = U.gsap.effects.keyControlZoom(this.elem).pause(); + } + return this._keyControlZoomTimeline; + } + _hoverOverTimeline; + get hoverOverTimeline() { + if (!this.elem) { + return undefined; + } + if (!this._hoverOverTimeline) { + this._hoverOverTimeline = U.gsap.effects.hoverOverClockKey(this); + } + return this._hoverOverTimeline; + } + // #endregion + // #region > GM-ONLY CLIENT-SIDE ANIMATIONS ~ showControls() { if (!game.user.isGM) { return; @@ -370,6 +400,7 @@ class BladesClockKey extends BladesTargetLink { } this.keySwingTimeline?.tweenTo(1, { duration: 0.25, ease: "none" }); this.keyControlZoomTimeline?.play(); + game.eunoblades.ClockKeeper.showClockKeyControls(this.id); } hideControls() { if (!game.user.isGM) { @@ -380,7 +411,10 @@ class BladesClockKey extends BladesTargetLink { } this.keySwingTimeline?.resume(); this.keyControlZoomTimeline?.reverse(); + game.eunoblades.ClockKeeper.hideClockKeyControls(this.id); } + // #endregion + // #region > SOCKET CALLS: _SocketCall / static _SocketResponse / _Animation drop_Animation() { if (!this.elem) { return; @@ -395,7 +429,11 @@ class BladesClockKey extends BladesTargetLink { if (!this.elem) { return; } + if (!$(this.elem).parents("#blades-overlay").length) { + return; + } socketlib.system.executeForEveryone("drop_SocketCall", this.id); + this.updateTarget("isVisible", true); } static drop_SocketResponse(keyID) { const key = game.eunoblades.ClockKeys.get(keyID); @@ -417,7 +455,11 @@ class BladesClockKey extends BladesTargetLink { if (!this.elem) { return; } + if (!$(this.elem).parents("#blades-overlay").length) { + return; + } socketlib.system.executeForEveryone("pull_SocketCall", this.id); + this.updateTarget("isVisible", false); } static pull_SocketResponse(keyID) { const key = game.eunoblades.ClockKeys.get(keyID); @@ -426,6 +468,7 @@ class BladesClockKey extends BladesTargetLink { } key.pull_Animation(); } + // #endregion // #endregion // #region Adding & Removing Clocks ~ async updateClockIndices() { @@ -544,6 +587,7 @@ class BladesClock extends BladesTargetLink { } return returnVals; } + // #endregion // #region HTML INTERACTION ~ get elem() { return $(`[data-id="${this.id}"`)[0]; @@ -561,7 +605,21 @@ class BladesClock extends BladesTargetLink { return "right"; } // #endregion - // #region Adding/Removing Clock Segments + // #region ANIMATED UPDATES (Both GM-Only AND Socket Calls) + // #region > TIMELINES ~ + _hoverOverTimeline; + get hoverOverTimeline() { + if (!this.elem) { + return undefined; + } + if (!this._hoverOverTimeline) { + this._hoverOverTimeline = U.gsap.effects.hoverOverClock(this); + } + return this._hoverOverTimeline; + } + // #endregion + // #endregion + // #region Adding/Removing Clock Segments ~ // Returns number of segments beyond max (or 0, if max not met) async fillSegments(count) { // Amount added beyond max: @@ -592,7 +650,7 @@ class BladesClock extends BladesTargetLink { this.parentKey?.updateClockIndices(); } } -export const ApplyClockListeners = async (html, namespace) => { +const ApplyClockListeners = async (html, namespace) => { eLog.checkLog3("ApplyListeners", "ApplyClockListeners", { html, find: html.find(".clock") }); // Step One: Find any clock keys and initialize them await Promise.all(Array.from(html.find(".clock-key")) @@ -609,8 +667,8 @@ export const ApplyClockListeners = async (html, namespace) => { return; } const prop = $(el).data("prop"); - eLog.checkLog3("clockControls", "Toggle Event", { source, el, prop, curVal: source.getTargetProp(prop) }); - await source.updateTarget(prop, !source.getTargetProp(prop)); + eLog.checkLog3("clockControls", "Toggle Event", { source, el, prop, curVal: source.data[prop] }); + await source.updateTarget(prop, !source.data[prop]); if (prop === "isShowingControls") { if (source instanceof BladesClockKey) { const key = source; @@ -631,7 +689,7 @@ export const ApplyClockListeners = async (html, namespace) => { return; } const prop = $(el).data("prop"); - eLog.checkLog3("clockControls", "Set Event", { val, source, prop, curVal: source.getTargetProp(prop) }); + eLog.checkLog3("clockControls", "Set Event", { val, source, prop, curVal: source.data[prop] }); source.updateTarget(prop, val); } // Add listeners and animation timelines to clock keys @@ -789,3 +847,4 @@ export const ApplyClockListeners = async (html, namespace) => { }); }; export default BladesClockKey; +export { BladesClock, ApplyClockListeners }; diff --git a/module/classes/BladesDirector.js b/module/classes/BladesDirector.js index 829ce45b..cdca1259 100644 --- a/module/classes/BladesDirector.js +++ b/module/classes/BladesDirector.js @@ -11,14 +11,9 @@ class BladesDirector { return (BladesDirector.instance ??= new BladesDirector()); } static async Initialize() { - // Trigger the instantiation of the Singleton by calling the getter - const director = BladesDirector.getInstance(); - // Initialize the overlay element once canvas loaded - Hooks.on("canvasReady", async () => { director.renderOverlay(); }); // Return asynchronous template loading. return loadTemplates([ "systems/eunos-blades/templates/overlay/blades-overlay.hbs", - "systems/eunos-blades/templates/overlay/clock-key.hbs", "systems/eunos-blades/templates/overlay/location.hbs", "systems/eunos-blades/templates/overlay/score-panel.hbs", "systems/eunos-blades/templates/overlay/npc-portrait.hbs", @@ -67,11 +62,21 @@ class BladesDirector { return $(this.overlayElement).find(".overlay-section-transitions")[0]; } get svgData() { return SVGDATA; } - async renderOverlay() { + get sceneKeys() { return game.eunoblades.ClockKeeper.getSceneKeys(); } + renderOverlay_SocketCall() { + if (!game.user.isGM) { + return; + } + if (!this.overlayElement) { + 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(".blades-director"); + $(this.overlayElement).find("*").addBack().off(); // Reactivate event listeners this.activateClockListeners(); this.activateScorePanelListeners(); @@ -81,8 +86,80 @@ class BladesDirector { this.activateCohortListeners(); this.activateCrewListeners(); } - activateClockListeners() { - // tbd... + async activateClockListeners() { + const clockKeySection$ = $(this.clockKeySectionElem); + clockKeySection$.find(".clock-key-container").each((_, keyContainer) => { + const keyContainer$ = $(keyContainer); + const clockKey = game.eunoblades.ClockKeys.get(keyContainer$.find(".clock-key").attr("id") ?? ""); + if (!clockKey) { + return; + } + // Enable pointer events on the container, so that the hover-over timeline can be played + keyContainer$.css("pointer-events", "auto"); + // Do the same for clocks contained by the key + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { + return; + } + $(clock.elem).css("pointer-events", "auto"); + }); + if (game.user.isGM) { + // === GM-ONLY LISTENERS === + // Double-Click a Clock Key = SocketPull it, Open ClockKeeper sheet + keyContainer$.on("dblclick", async () => { + clockKey.pull_SocketCall(); + game.eunoblades.ClockKeeper.render(true); + }); + // Mouse-Wheel a Clock = Add/Remove Segments one-by-one. + // -- can UPDATE the server data immediately + // -- at end of each animated segment, check server data to see if another one should be animated in + // -- need animations for COMPLETING a clock, and for EMPTYING a clock. + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { + return; + } + const clockElem$ = $(clock.elem); + clockElem$.on("wheel", async (event) => { + if (!(event.originalEvent instanceof WheelEvent)) { + return; + } + event.preventDefault(); + const delta = event.originalEvent.deltaY ?? 0; + if (delta > 0) { + await clock.fillSegments(1); + } + else if (delta < 0) { + await clock.clearSegments(1); + } + // === TEMPORARY: RERENDER DIRECTOR OVERLAY TO SEE CLOCK CHANGES === + // (replace with socketlib call to animation effect within fillSegments/clearSegments methods) + this.renderOverlay_SocketCall(); + }); + }); + } + else { + // === PLAYER-ONLY LISTENERS === + // Add listeners to container for mouseenter and mouseleave, that play and reverse timeline attached to element + keyContainer$.on("mouseenter", () => { + clockKey.hoverOverTimeline?.play(); + }).on("mouseleave", () => { + clockKey.hoverOverTimeline?.reverse(); + }); + // Now repeat this for each clock in the clock key + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { + return; + } + const clockElem$ = $(clock.elem); + // Add listeners to clock for mouseenter and mouseleave, that play and reverse timeline attached to element + clockElem$.on("mouseenter", () => { + clock.hoverOverTimeline?.play(); + }).on("mouseleave", () => { + clock.hoverOverTimeline?.reverse(); + }); + }); + } + }); } activateScorePanelListeners() { // tbd... @@ -106,6 +183,7 @@ class BladesDirector { // #region SOCKETS static InitSockets() { const director = BladesDirector.getInstance(); + socketlib.system.register("renderOverlay_SocketCall", director.renderOverlay_SocketResponse.bind(director)); director.initClockSockets(); director.initScorePanelSockets(); director.initLocationSockets(); diff --git a/module/classes/BladesTargetLink.js b/module/classes/BladesTargetLink.js index 5c5bc664..830b0644 100644 --- a/module/classes/BladesTargetLink.js +++ b/module/classes/BladesTargetLink.js @@ -87,6 +87,7 @@ class BladesTargetLink { return new this(data); } // #endregion + // #region GETTERS ~ get isGM() { return game.user.isGM; } _id; _targetID; @@ -100,6 +101,22 @@ class BladesTargetLink { get target() { return this._target; } + get linkData() { + let linkData; + if (this.targetFlagKey) { + linkData = this.target.getFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`) ?? undefined; + } + else if (this.targetKey) { + linkData = getProperty(this.target, `${this.targetKey}.${this.id}`); + } + if (!linkData) { + throw new Error("[BladesTargetLink.linkData] Error retrieving linkData."); + } + return linkData; + } + get data() { return this.linkData; } + // #endregion + // #region CONSTRUCTOR ~ constructor(data) { const { id, targetID, targetKey, targetFlagKey } = data; if (!id || !targetID || !(targetKey || targetFlagKey)) { @@ -120,23 +137,8 @@ class BladesTargetLink { } this._target = target; } - get linkData() { - let linkData; - if (this.targetFlagKey) { - linkData = this.target.getFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`) ?? undefined; - } - else if (this.targetKey) { - linkData = getProperty(this.target, `${this.targetKey}.${this.id}`); - } - if (!linkData) { - throw new Error("[BladesTargetLink.linkData] Error retrieving linkData."); - } - return linkData; - } - get data() { return this.linkData; } - getTargetProp(prop) { - return this.linkData[prop]; - } + // #endregion + // #region ASYNC UPDATE & DELETE METHODS ~ async updateTarget(prop, val) { if (this.targetFlagKey) { this.target.setFlag("eunos-blades", `${this.targetFlagKey}.${this.id}.${prop}`, val); diff --git a/module/core/gsap.js b/module/core/gsap.js index 6f16d7d8..f2e955f9 100644 --- a/module/core/gsap.js +++ b/module/core/gsap.js @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import U from "./utilities.js"; import C from "./constants.js"; +import BladesClockKey, { BladesClock } from "../classes/BladesClocks.js"; // eslint-disable-next-line import/no-unresolved import { TextPlugin, Flip, Draggable as Dragger, MotionPathPlugin, SplitText, Observer, CustomEase, CustomWiggle, CustomBounce, EasePack } from "/scripts/greensock/esm/all.js"; const gsapPlugins = [ @@ -128,6 +129,58 @@ export const gsapEffects = { duration: 1 } }, + hoverOverClockKey: { + effect: (clockKey, config) => { + if (!(clockKey instanceof BladesClockKey)) { + throw new Error("clockKey is not an instance of BladesClockKey"); + } + if (!clockKey.elem) { + throw new Error("clockKey.elem is null or undefined"); + } + return U.gsap.timeline({ paused: true }) + .to(clockKey.elem, { + scale: 1.25, + ease: "sine", + duration: 0.25, + onStart() { + clockKey.keySwingTimeline?.tweenTo(1, { duration: 0.25, ease: "none" }); + }, + onReverse() { + clockKey.keySwingTimeline?.resume(); + } + }, 0); + }, + defaults: {} + }, + hoverOverClock: { + effect: (clock, config) => { + if (!(clock instanceof BladesClock)) { + throw new Error("clock is not an instance of BladesClock"); + } + if (!clock.elem) { + throw new Error("clock.elem is null or undefined"); + } + const [clockLabel] = $(clock.elem).find(".clock-label"); + const [clockGlow] = $(clock.elem).find(".clock-glow"); + return U.gsap.timeline({ paused: true }) + .fromTo(clock.elem, { filter: "brightness(1)" }, { + filter: "brightness(1.5)", + scale: 1.25, + duration: 0.25 + }) + .to(clockLabel, { + autoAlpha: 1, + duration: 0.25 + }, 0) + .to(clockGlow, { + autoAlpha: 1, + duration: 0.25 + }, 0); + }, + defaults: { + duration: 0.5 + } + }, csqEnter: { effect: (csqContainer, config) => { const csqRoot = U.gsap.utils.selector(csqContainer); diff --git a/module/core/helpers.js b/module/core/helpers.js index 3c8abeeb..42402081 100644 --- a/module/core/helpers.js +++ b/module/core/helpers.js @@ -30,9 +30,7 @@ export async function preloadHandlebarsTemplates() { "systems/eunos-blades/templates/parts/roll-opposition-creator.hbs", "systems/eunos-blades/templates/parts/active-effects.hbs", "systems/eunos-blades/templates/parts/gm-pc-summary.hbs", - // Overlays - "systems/eunos-blades/templates/overlays/clock-overlay.hbs", - "systems/eunos-blades/templates/overlays/clock-key.hbs" + "systems/eunos-blades/templates/components/clock-key.hbs" ]; // Load the template parts return loadTemplates(templatePaths); diff --git a/module/documents/actors/BladesFaction.js b/module/documents/actors/BladesFaction.js index 6d4afa5b..86230265 100644 --- a/module/documents/actors/BladesFaction.js +++ b/module/documents/actors/BladesFaction.js @@ -1,6 +1,11 @@ +import { BladesActorType } from "../../core/constants.js"; import { BladesActor } from "../BladesActorProxy.js"; import BladesClockKey from "../../classes/BladesClocks.js"; class BladesFaction extends BladesActor { + static get All() { + return new Collection(super.GetTypeWithTags(BladesActorType.faction) + .map((faction) => [faction.id, faction])); + } // #region BladesRoll Implementation // #region BladesRoll.OppositionDoc Implementation get rollOppID() { return this.id; } diff --git a/module/documents/actors/BladesPC.js b/module/documents/actors/BladesPC.js index 35e0406e..4e3ac8be 100644 --- a/module/documents/actors/BladesPC.js +++ b/module/documents/actors/BladesPC.js @@ -6,7 +6,7 @@ import BladesClockKey from "../../classes/BladesClocks.js"; import BladesDirector from "../../classes/BladesDirector.js"; import { SelectionCategory } from "../../classes/BladesDialog.js"; class BladesPC extends BladesActor { - // #region Static Overrides: Create ~ + // #region Static Overrides: Create, get All ~ static IsType(doc) { return super.IsType(doc, BladesActorType.pc); } @@ -66,6 +66,10 @@ class BladesPC extends BladesActor { ]); return pc; } + static get All() { + return new Collection(super.GetTypeWithTags(BladesActorType.pc) + .map((pc) => [pc.id, pc])); + } // #endregion constructor(data) { super(data); @@ -282,6 +286,9 @@ class BladesPC extends BladesActor { } await this.update({ "system.stash.value": Math.min(this.system.stash.value + amount, this.system.stash.max) }); } + get projects() { + return this.getSubItemsOfType(BladesItemType.project); + } get remainingDowntimeActions() { if (!BladesActor.IsType(this, BladesActorType.pc)) { return 0; diff --git a/module/documents/items/BladesClockKeeper.js b/module/documents/items/BladesClockKeeper.js index a9b95c3d..7087a25e 100644 --- a/module/documents/items/BladesClockKeeper.js +++ b/module/documents/items/BladesClockKeeper.js @@ -1,8 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import U from "../../core/utilities.js"; -import { SVGDATA, BladesItemType } from "../../core/constants.js"; import { BladesItem } from "../BladesItemProxy.js"; -import BladesClockKey, { ApplyClockListeners } from "../../classes/BladesClocks.js"; +import BladesClockKey from "../../classes/BladesClocks.js"; class BladesClockKeeper extends BladesItem { static async Initialize() { const clockKeeper = game.items.find((item) => item.type === "clock_keeper"); @@ -16,71 +15,26 @@ class BladesClockKeeper extends BladesItem { else { game.eunoblades.ClockKeeper = clockKeeper; } - game.eunoblades.ClockKeeper.renderOverlay(); + return loadTemplates([ + "systems/eunos-blades/templates/parts/clock-sheet-key-controls-full.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-key-controls-minimal.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-full.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-minimal.hbs" + ]); } - static InitSockets() { - socketlib.system.register("renderOverlay", game.eunoblades.ClockKeeper.renderOverlay); - } - // #region CLOCKS OVERLAY - _overlayElement; - get overlayElement() { - this._overlayElement ??= $("#clocks-overlay")[0]; - if (!this._overlayElement) { - $("body.vtt.game.system-eunos-blades").append("
"); - [this._overlayElement] = $("#clocks-overlay"); + showClockKeyControls(keyID) { + if (this.sheet?.element) { + // Find the key controls row, flip it over to controls row. } - return this._overlayElement; } - async renderOverlay() { - if (!game.scenes?.current) { - return; + hideClockKeyControls(keyID) { + if (this.sheet?.element) { + // Find the key controls row, flip it back to minimal summary } - const { ClockKeeper: keeper } = game.eunoblades; - if (!keeper) { - return; - } - const { overlayElement } = keeper; - eLog.checkLog3("clocksOverlay", "[ClocksOverlay] RenderOverlay", overlayElement); - if (!overlayElement) { - eLog.error("clocksOverlay", "[ClocksOverlay] Cannot locate overlay element."); - return; - } - // Re-render the overlay element - overlayElement.innerHTML = await renderTemplate("systems/eunos-blades/templates/overlays/clock-overlay.hbs", keeper); - // Reactivate event listeners - keeper.activateOverlayListeners(); } + // #region CLOCKS OVERLAY get clockKeys() { return this.getSceneKeys(); } get currentScene() { return game.scenes?.current?.id; } - get svgData() { return SVGDATA; } - async activateOverlayListeners() { - if (!game?.user?.isGM) { - return; - } - eLog.checkLog3("clocksOverlay", "[activateOverlayListeners] Keys", this.keys); - ApplyClockListeners($("#clocks-overlay"), "ClocksOverlay"); - $("#clocks-overlay").find(".key-label").on({ - click: async (event) => { - if (!event.currentTarget) { - return; - } - if (!BladesItem.IsType(game.eunoblades.ClockKeeper, BladesItemType.clock_keeper)) { - return; - } - event.preventDefault(); - const clockKey = game.eunoblades.ClockKeys.get($(event.currentTarget).data("keyId")); - if (clockKey && clockKey.elem) { - await clockKey.toggleActive(); - } - }, - contextmenu: () => { - if (!game.user.isGM) { - return; - } - game.eunoblades.ClockKeeper?.sheet?.render(true); - } - }); - } get currentSceneID() { if (!game.scenes?.current) { throw new Error("[BladesClockKeeper.currentScene] Error retrieving 'game.scenes.current'."); diff --git a/module/documents/items/BladesProject.js b/module/documents/items/BladesProject.js index 188b5de2..4a4a3648 100644 --- a/module/documents/items/BladesProject.js +++ b/module/documents/items/BladesProject.js @@ -19,6 +19,12 @@ class BladesProject extends BladesItem { this._clockKey = game.eunoblades.ClockKeys.get(Object.keys(this.system.clocksData)[0]); return this._clockKey; } + get ownerName() { + if (this.parent) { + return this.parent.name; + } + return undefined; + } get currentClock() { return this.clockKey?.currentClock; } diff --git a/module/sheets/item/BladesClockKeeperSheet.js b/module/sheets/item/BladesClockKeeperSheet.js index a8578a10..14517e39 100644 --- a/module/sheets/item/BladesClockKeeperSheet.js +++ b/module/sheets/item/BladesClockKeeperSheet.js @@ -1,4 +1,5 @@ import BladesItemSheet from "./BladesItemSheet.js"; +import { BladesPC, BladesFaction } from "../../documents/BladesActorProxy.js"; class BladesClockKeeperSheet extends BladesItemSheet { // static Get() { return game.eunoblades.ClockKeeper as BladesClockKeeper; } static get defaultOptions() { @@ -6,21 +7,23 @@ class BladesClockKeeperSheet extends BladesItemSheet { classes: ["eunos-blades", "sheet", "item", "clock-keeper"], template: "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs", width: 700, - height: 970 + height: 970, + tabs: [{ navSelector: ".nav-tabs", contentSelector: ".tab-content", initial: "scene-keys" }] }); } static async Initialize() { Items.registerSheet("blades", BladesClockKeeperSheet, { types: ["clock_keeper"], makeDefault: true }); return loadTemplates([ - "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs", - "systems/eunos-blades/templates/parts/clock-sheet-row.hbs" + "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs" ]); } getData() { const context = super.getData(); const sheetData = { sceneOptions: Array.from(game.scenes), - sceneKeys: this.item.getSceneKeys(this.item.system.targetScene ?? game.scenes.current.id) + sceneKeys: this.item.getSceneKeys(this.item.system.targetScene ?? game.scenes.current.id), + pcsWithProjects: BladesPC.All.filter((pc) => pc.projects.length > 0), + factions: Array.from(BladesFaction.All) }; return { ...context, ...sheetData }; } diff --git a/scss/components/_clocks-overlay.scss b/scss/components/_clocks-overlay.scss index e652d7e0..82dde428 100644 --- a/scss/components/_clocks-overlay.scss +++ b/scss/components/_clocks-overlay.scss @@ -1,82 +1,4 @@ -$key-sizes: ( - 1: (height: 455px, width: 202px, labelTop: 150px, inactiveKeyTop: -350px, inactiveLabelLeft: -40px, inactiveLabelBottom: 50px), - 2: (height: 624.438px, width: 202px, labelTop: 400px, inactiveKeyTop: -520px, inactiveLabelLeft: -40px, inactiveLabelBottom: 50px), - 3: (height: 915px, width: 280px, labelTop: 600px, inactiveKeyTop: -815px, inactiveLabelLeft: -10px, inactiveLabelBottom: 50px), - 4: (height: 1140px, width: 376px, labelTop: 700px, inactiveKeyTop: -925px, inactiveLabelLeft: 40px, inactiveLabelBottom: 150px), - 5: (height: 1140px, width: 376px, labelTop: 800px, inactiveKeyTop: -1025px, inactiveLabelLeft: 40px, inactiveLabelBottom: 50px), - 6: (height: 1150px, width: 376px, labelTop: 900px, inactiveKeyTop: -1025px, inactiveLabelLeft: 40px, inactiveLabelBottom: 50px) -); -$clock-positions: ( - 1: ( - 1: (x: 101px, y: 99px) - ), - 2: ( - 1: (x: 101px, y: 99px), - 2: (x: 101px, y: 279px) - ), - 3: ( - 1: (x: 140px, y: 99px), - 2: (x: 74px, y: 211px), - 3: (x: 206px, y: 211px) - ), - 4: ( - 1: (x: 188px, y: 99px), - 2: (x: 101px, y: 185px), - 3: (x: 275px, y: 185px), - 4: (x: 188px, y: 273px) - ), - 5: ( - 1: (x: 188px, y: 99px), - 2: (x: 101px, y: 185px), - 3: (x: 275px, y: 185px), - 4: (x: 188px, y: 273px), - 5: (x: 188px, y: 452px) - ), - 6: ( - 1: (x: 188px, y: 99px), - 2: (x: 101px, y: 185px), - 3: (x: 275px, y: 185px), - 4: (x: 188px, y: 273px), - 5: (x: 188px, y: 452px), - 6: (x: 188px, y: 683px) - ) -); - -$label-positions: ( - 1: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - ), - 2: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - 2: (x: 0, y: 325px, align: center, width: 100%), - ), - 3: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - 2: (x: -20px, y: 110px, align: right, width: 50%), - 3: (x: 220px, y: 265px, align: left, width: 50%), - ), - 4: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - 2: (x: -60px, y: 80px, align: right, width: 50%), - 3: (x: 340px, y: 230px, align: left, width: 50%), - 4: (x: 0, y: 320px, align: center, width: 100%) - ), - 5: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - 2: (x: -60px, y: 80px, align: right, width: 50%), - 3: (x: 340px, y: 230px, align: left, width: 50%), - 4: (x: 0, y: 320px, align: center, width: 100%), - 5: (x: 0, y: 500px, align: center, width: 100%), - ), - 6: ( - 1: (x: 0, y: 0px, align: center, width: 100%), - 2: (x: -60px, y: 80px, align: right, width: 50%), - 3: (x: 340px, y: 230px, align: left, width: 50%), - 4: (x: 0, y: 320px, align: center, width: 100%), - 5: (x: 0, y: 500px, align: center, width: 100%), - 6: (x: 0, y: 730px, align: center, width: 100%), - ) -); + & { diff --git a/scss/overlay/_blades-overlay.scss b/scss/overlay/_blades-overlay.scss index 85672a92..bd0a8cc2 100644 --- a/scss/overlay/_blades-overlay.scss +++ b/scss/overlay/_blades-overlay.scss @@ -1,22 +1,39 @@ -&, .overlay-section { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - pointer-events: none; - z-index: 50; - perspective: 500px; - transform-style: preserve-3d; - - #testSquare { +$key-sizes: ( + 1: (height: 455px, width: 202px, labelTop: 150px, inactiveKeyTop: -350px, inactiveLabelLeft: -40px, inactiveLabelBottom: 50px), + 2: (height: 624.438px, width: 202px, labelTop: 400px, inactiveKeyTop: -520px, inactiveLabelLeft: -40px, inactiveLabelBottom: 50px), + 3: (height: 915px, width: 280px, labelTop: 600px, inactiveKeyTop: -815px, inactiveLabelLeft: -10px, inactiveLabelBottom: 50px), + 4: (height: 1140px, width: 376px, labelTop: 700px, inactiveKeyTop: -925px, inactiveLabelLeft: 40px, inactiveLabelBottom: 150px), + 5: (height: 1140px, width: 376px, labelTop: 800px, inactiveKeyTop: -1025px, inactiveLabelLeft: 40px, inactiveLabelBottom: 50px), + 6: (height: 1150px, width: 376px, labelTop: 900px, inactiveKeyTop: -1025px, inactiveLabelLeft: 40px, inactiveLabelBottom: 50px) +); + +& { + &, & > * { + display: block; position: absolute; - top: 200px; - left: 300px; - background: blue; - height: 200px; - width: 200px; + top: 0; + left: 0; + height: 100%; + width: 100%; + pointer-events: none; + z-index: 50; + perspective: 500px; + transform-style: preserve-3d; } + + @import "../components/clocks"; + +} + +&, +.overlay-section, +.svg-defs { + + + + + + .clock-key-container { visibility: hidden; } } \ No newline at end of file diff --git a/templates/actor-sheet.hbs b/templates/actor-sheet.hbs index 4817afe3..8541dddf 100644 --- a/templates/actor-sheet.hbs +++ b/templates/actor-sheet.hbs @@ -220,7 +220,7 @@ {{{system.harm.severe.effect}}} {{#if healing_clock}} - {{> "systems/eunos-blades/templates/overlay/clock-key.hbs" healing_clock}} + {{> "systems/eunos-blades/templates/components/clock-key.hbs" healing_clock}} {{/if}} diff --git a/templates/overlays/clock-key.hbs b/templates/components/clock-key.hbs similarity index 98% rename from templates/overlays/clock-key.hbs rename to templates/components/clock-key.hbs index 588d6fc6..af82bba1 100644 --- a/templates/overlays/clock-key.hbs +++ b/templates/components/clock-key.hbs @@ -7,6 +7,7 @@ data-id="{{id}}" data-size="{{size}}" data-active-clock-slot="{{currentClockIndex}}" + data-is-visible="{{isVisible}}" > {{#if isNameVisible}} diff --git a/templates/components/clock.hbs b/templates/components/clock.hbs index 0624a958..8d253ef3 100644 --- a/templates/components/clock.hbs +++ b/templates/components/clock.hbs @@ -43,16 +43,13 @@ {{/unless}} - {{#if isHighlighted}} {{#unless (test "#" "in" color)}} {{!-- Don't render the glow if 'color' is a hex value --}} -
+ {{/unless}} - {{/if}} + - {{#if isNameVisible}} - - {{/if}} + {{/if}} diff --git a/templates/faction-sheet.hbs b/templates/faction-sheet.hbs index 20ee213b..c70b58fe 100644 --- a/templates/faction-sheet.hbs +++ b/templates/faction-sheet.hbs @@ -87,7 +87,7 @@ {{#each clocksData}} - {{> "systems/eunos-blades/templates/overlay/clock-key.hbs" }} + {{> "systems/eunos-blades/templates/components/clock-key.hbs" }} {{/each}} diff --git a/templates/items/clock_keeper-sheet.hbs b/templates/items/clock_keeper-sheet.hbs index c713f1ca..741ee832 100644 --- a/templates/items/clock_keeper-sheet.hbs +++ b/templates/items/clock_keeper-sheet.hbs @@ -12,40 +12,75 @@ {{!-- Tabs, Tab Navigation --}} -
-
- - -
-
- - - - - - - - - {{#each sceneKeys as |key keyID|}} - - {{> "systems/eunos-blades/parts/clock-sheet-key.hbs" }} +
+ {{!-- Nav menu --}} + + + {{!-- Scene Keys --}} +
+
+ + +
+ {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-sharp fa-solid fa-square-plus" + tooltip="Add Key" + action="add-key" + }} +
+ {{#each sceneKeys }} + {{> "systems/eunos-blades/templates/parts/clock-sheet-key-controls-full.hbs" }} + {{/each}} +
+
+ {{#if hasScoreKeys}} + {{!-- Score Keys --}} +
+
+ {{#each scoreKeys }} + {{> "systems/eunos-blades/templates/parts/clock-sheet-key-controls-minimal.hbs" }} + {{/each}} +
+
+ {{/if}} + + {{!-- Project Keys --}} +
+
+ {{#each pcsWithProjects as |pc|}} +

{{pc.name}}

+ {{#each pc.projects as |project|}} + {{> "systems/eunos-blades/templates/parts/clock-sheet-key-controls-minimal.hbs" project.clockKey }} + {{/each}} + {{/each}} +
+
+ {{!-- Faction Keys --}} +
+
+ {{#each factions as |faction|}} +

{{faction.name}}

+ {{#each faction.clocks}} + {{> "systems/eunos-blades/templates/parts/clock-sheet-key-controls-minimal.hbs" }} + {{/each}} {{/each}} -
-
StateNameSize - {{> "systems/eunos-blades/templates/components/button-icon.hbs" - buttonClass="fa-sharp fa-solid fa-square-plus" - tooltip="Add Key" - action="add-key" - }} -
+
+
diff --git a/templates/items/project-sheet.hbs b/templates/items/project-sheet.hbs index 94f90a9d..645ca67d 100644 --- a/templates/items/project-sheet.hbs +++ b/templates/items/project-sheet.hbs @@ -60,7 +60,7 @@
- {{> "systems/eunos-blades/templates/overlays/clock-key.hbs" item.clockKey}} + {{> "systems/eunos-blades/templates/components/clock-key.hbs" item.clockKey}}
{{!--
--}} diff --git a/templates/overlay/blades-overlay.hbs b/templates/overlay/blades-overlay.hbs index 0b5bedc9..66edcda1 100644 --- a/templates/overlay/blades-overlay.hbs +++ b/templates/overlay/blades-overlay.hbs @@ -33,8 +33,8 @@ {{eLog "BLADES OVERLAY" this}}
- {{#each clockKeys}} - {{> "systems/eunos-blades/templates/overlay/clock-key.hbs"}} + {{#each sceneKeys}} + {{> "systems/eunos-blades/templates/components/clock-key.hbs"}} {{/each}}
diff --git a/templates/overlay/clock-key.hbs b/templates/overlay/clock-key.hbs deleted file mode 100644 index 371aabac..00000000 --- a/templates/overlay/clock-key.hbs +++ /dev/null @@ -1,112 +0,0 @@ -{{eLog "Clock Key Context" this}} - -
- -{{#if (test isVisible "||" isGM)}} -
- {{#if isNameVisible}} - - {{/if}} -
- - - - - {{#each clocks }} - {{> "systems/eunos-blades/templates/components/clock.hbs" }} - {{/each}} -
-
- - {{!-- Controls: - - isShowingControls: toggle - - Name: Input - AddClock: Button - RemoveClock: Button - IsVisible: Toggle - IsHighlighted: Toggle - IsNameVisible: Toggle - - --}} - {{#if isGM}} - {{#if targetFlagKey}}(FLAG KEY NOT CONFIGURED){{else}} -
- - {{!-- Control Row: Open Controls Panel --}} -
- - {{!-- Toggle: isShowingControls --}} -
- -
- -
- - {{!-- CONTROLS PANEL --}} - {{#if isShowingControls}} - {{!-- Control Row: Name --}} -
- - {{!-- Text Input: Key Name --}} - - -
- - {{!-- Control Row: Display Mode, Add Clock --}} -
- - {{!-- Button: Add Clock --}} -
- -
- - {{!-- Select: Display Mode --}} - - -
- - {{!-- Control Row: Key Toggles --}} -
- - {{!-- Toggle: isVisible --}} -
- -
- - {{!-- Toggle: isNameVisible --}} -
- -
- -
- - {{!-- Control Row: Delete Key --}} -
- - {{!-- Button: Delete Key --}} -
- -
- -
- {{/if}} - -
- {{/if}} - {{/if}} -{{/if}} -
\ No newline at end of file diff --git a/templates/overlays/clock-overlay.hbs b/templates/overlays/clock-overlay.hbs deleted file mode 100644 index b1401ac1..00000000 --- a/templates/overlays/clock-overlay.hbs +++ /dev/null @@ -1,37 +0,0 @@ - - - {{#each svgData.keys.list as |keyData size|}} - - - - - {{/each}} - {{#each svgData.oneKeys.list as |path count|}} - - - - - {{/each}} - - - - - - - - -{{eLog "CLOCK OVERLAY" this}} - -{{#each clockKeys}} - {{> "systems/eunos-blades/templates/overlays/clock-key.hbs"}} -{{/each}} diff --git a/templates/parts/clock-sheet-row.hbs b/templates/parts/clock-sheet-clock-controls-full.hbs similarity index 97% rename from templates/parts/clock-sheet-row.hbs rename to templates/parts/clock-sheet-clock-controls-full.hbs index e7226528..b1640f9c 100644 --- a/templates/parts/clock-sheet-row.hbs +++ b/templates/parts/clock-sheet-clock-controls-full.hbs @@ -1,95 +1,95 @@ - - - {{#if keyID}} - {{> "systems/eunos-blades/templates/components/button-icon.hbs" - buttonClass="fa-solid fa-trash" - tooltip="Delete Clock" - action="delete-clock" - targetId=(concat keyID "-" id) - }} - {{else}} - {{> "systems/eunos-blades/templates/components/button-icon.hbs" - buttonClass="fa-solid fa-trash" - tooltip="Delete Clock" - action="delete-clock" - targetId=id - }} - {{/if}} - {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" - cssClass="clock-toggle" - isToggled=clockData.isVisible - activeClass="fa-solid fa-eye" - activeTooltip="Clock is Visible.
Click to hide." - inactiveClass="fa-thin fa-eye" - inactiveTooltip="Clock is Hidden.
Click to display." - targetKey=(concat targetKeyPrefix ".isVisible") }} - - {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" - cssClass="clock-toggle" - isToggled=clockData.isActive - activeClass="fa-solid fa-bell" - activeTooltip="Clock is Active.
Click to deactivate." - inactiveClass="fa-regular fa-bell-slash" - inactiveTooltip="Clock is Inactive.
Click to activate." - targetKey=(concat targetKeyPrefix ".isActive") }} - - {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" - cssClass="clock-toggle" - isToggled=clockData.isHighlighted - activeClass="fa-solid fa-lightbulb-on" - activeTooltip="Clock is Highlighted.
Click to fade." - inactiveClass="fa-light fa-lightbulb-slash" - inactiveTooltip="Clock is Not Highlighted.
Click to highlight." - targetKey=(concat targetKeyPrefix ".isHighlighted") }} - - {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" - cssClass="clock-toggle" - isToggled=clockData.isNameVisible - activeClass="fa-solid fa-tag" - activeTooltip="Name is Visible.
Click to hide." - inactiveClass="fa-thin fa-tag" - inactiveTooltip="Name is Hidden.
Click to display." - targetKey=(concat targetKeyPrefix ".isNameVisible") }} - - - - - {{#if clockData}} - - - - - - - - {{/if}} - - - - - + + + {{#if keyID}} + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-solid fa-trash" + tooltip="Delete Clock" + action="delete-clock" + targetId=(concat keyID "-" id) + }} + {{else}} + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-solid fa-trash" + tooltip="Delete Clock" + action="delete-clock" + targetId=id + }} + {{/if}} + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isVisible + activeClass="fa-solid fa-eye" + activeTooltip="Clock is Visible.
Click to hide." + inactiveClass="fa-thin fa-eye" + inactiveTooltip="Clock is Hidden.
Click to display." + targetKey=(concat targetKeyPrefix ".isVisible") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isActive + activeClass="fa-solid fa-bell" + activeTooltip="Clock is Active.
Click to deactivate." + inactiveClass="fa-regular fa-bell-slash" + inactiveTooltip="Clock is Inactive.
Click to activate." + targetKey=(concat targetKeyPrefix ".isActive") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isHighlighted + activeClass="fa-solid fa-lightbulb-on" + activeTooltip="Clock is Highlighted.
Click to fade." + inactiveClass="fa-light fa-lightbulb-slash" + inactiveTooltip="Clock is Not Highlighted.
Click to highlight." + targetKey=(concat targetKeyPrefix ".isHighlighted") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isNameVisible + activeClass="fa-solid fa-tag" + activeTooltip="Name is Visible.
Click to hide." + inactiveClass="fa-thin fa-tag" + inactiveTooltip="Name is Hidden.
Click to display." + targetKey=(concat targetKeyPrefix ".isNameVisible") }} + + + + + {{#if clockData}} + + + + + + + + {{/if}} + + + + + \ No newline at end of file diff --git a/templates/parts/clock-sheet-clock-controls-minimal.hbs b/templates/parts/clock-sheet-clock-controls-minimal.hbs new file mode 100644 index 00000000..b1640f9c --- /dev/null +++ b/templates/parts/clock-sheet-clock-controls-minimal.hbs @@ -0,0 +1,95 @@ + + + {{#if keyID}} + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-solid fa-trash" + tooltip="Delete Clock" + action="delete-clock" + targetId=(concat keyID "-" id) + }} + {{else}} + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-solid fa-trash" + tooltip="Delete Clock" + action="delete-clock" + targetId=id + }} + {{/if}} + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isVisible + activeClass="fa-solid fa-eye" + activeTooltip="Clock is Visible.
Click to hide." + inactiveClass="fa-thin fa-eye" + inactiveTooltip="Clock is Hidden.
Click to display." + targetKey=(concat targetKeyPrefix ".isVisible") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isActive + activeClass="fa-solid fa-bell" + activeTooltip="Clock is Active.
Click to deactivate." + inactiveClass="fa-regular fa-bell-slash" + inactiveTooltip="Clock is Inactive.
Click to activate." + targetKey=(concat targetKeyPrefix ".isActive") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isHighlighted + activeClass="fa-solid fa-lightbulb-on" + activeTooltip="Clock is Highlighted.
Click to fade." + inactiveClass="fa-light fa-lightbulb-slash" + inactiveTooltip="Clock is Not Highlighted.
Click to highlight." + targetKey=(concat targetKeyPrefix ".isHighlighted") }} + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + cssClass="clock-toggle" + isToggled=clockData.isNameVisible + activeClass="fa-solid fa-tag" + activeTooltip="Name is Visible.
Click to hide." + inactiveClass="fa-thin fa-tag" + inactiveTooltip="Name is Hidden.
Click to display." + targetKey=(concat targetKeyPrefix ".isNameVisible") }} + + + + + {{#if clockData}} + + + + + + + + {{/if}} + + + + + + \ No newline at end of file diff --git a/templates/parts/clock-sheet-key.hbs b/templates/parts/clock-sheet-key-controls-full.hbs similarity index 93% rename from templates/parts/clock-sheet-key.hbs rename to templates/parts/clock-sheet-key-controls-full.hbs index 0bdb3ff7..c63f8ba4 100644 --- a/templates/parts/clock-sheet-key.hbs +++ b/templates/parts/clock-sheet-key-controls-full.hbs @@ -1,5 +1,6 @@ + ADD TO SCENE / REMOVE FROM SCENE BUTTON {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" isToggled=key.isVisible @@ -45,6 +46,6 @@ {{#each key.clocksData}} -{{> "systems/eunos-blades/templates/parts/clock-sheet-row.hbs" }} +{{> "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-full.hbs" }} {{/each}} \ No newline at end of file diff --git a/templates/parts/clock-sheet-key-controls-minimal.hbs b/templates/parts/clock-sheet-key-controls-minimal.hbs new file mode 100644 index 00000000..90b276d8 --- /dev/null +++ b/templates/parts/clock-sheet-key-controls-minimal.hbs @@ -0,0 +1,51 @@ + + + ADD TO SCENE / REMOVE FROM SCENE BUTTON + + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + isToggled=key.isVisible + activeClass="fa-solid fa-eye" + activeTooltip="Key is Visible
Click to Hide" + inactiveClass="fa-thin fa-eye" + inactiveTooltip="Key is Hidden
Click to Show" + targetKey=(concat "system.clocksData." keyID ".isVisible") }} + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + isToggled=key.isActive + activeClass="fa-solid fa-bell" + activeTooltip="Key is Focused
Click to Mute" + inactiveClass="fa-regular fa-bell-slash" + inactiveTooltip="Key is Muted
Click to Focus" + targetKey=(concat "system.clocksData." keyID ".isActive") }} + {{> "systems/eunos-blades/templates/components/toggle-icon.hbs" + isToggled=key.isNameVisible + activeClass="fa-solid fa-tag" + activeTooltip="Name is Visible
Click to Hide" + inactiveClass="fa-thin fa-tag" + inactiveTooltip="Name is Hidden
Click to Show" + targetKey=(concat "system.clocksData." keyID ".isNameVisible") }} + + + + + + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-regular fa-circle-plus" + tooltip="Add Clock" + action="add-clock" + targetId=keyID + }} + + + {{> "systems/eunos-blades/templates/components/button-icon.hbs" + buttonClass="fa-solid fa-trash" + tooltip="Delete Key" + action="delete-key" + targetId=keyID + }} + + + +{{#each key.clocksData}} +{{> "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-minimal.hbs" }} +{{/each}} + \ No newline at end of file diff --git a/ts/@types/blades-item-sheet.d.ts b/ts/@types/blades-item-sheet.d.ts index 60b2b4b9..28d141c0 100644 --- a/ts/@types/blades-item-sheet.d.ts +++ b/ts/@types/blades-item-sheet.d.ts @@ -1,4 +1,5 @@ import {BladesActorType, BladesItemType, AttributeTrait, ActionTrait, BladesPhase} from "../core/constants"; +import {BladesPC, BladesFaction} from "../documents/BladesActorProxy"; declare global { @@ -20,7 +21,9 @@ declare global { export interface Background {} export interface Clock_Keeper { sceneOptions: Scene[], - sceneKeys: Collection + sceneKeys: Collection, + pcsWithProjects: BladesPC[], + factions: BladesFaction[] } export interface Cohort_Gang { subtitle: string, diff --git a/ts/@types/blades-target-link.d.ts b/ts/@types/blades-target-link.d.ts index 3585e255..c08e0f6e 100644 --- a/ts/@types/blades-target-link.d.ts +++ b/ts/@types/blades-target-link.d.ts @@ -42,8 +42,6 @@ declare global { async delete() - getTargetProp(prop: string): unknown - async updateTarget(prop: string, val: unknown) async updateTargetData(val: Schema|null) diff --git a/ts/BladesActor.ts b/ts/BladesActor.ts index 778c3361..9a9f223b 100644 --- a/ts/BladesActor.ts +++ b/ts/BladesActor.ts @@ -326,6 +326,10 @@ class BladesActor extends Actor implements BladesDocument { get subItems() { return Array.from(this.items); } + getSubItemsOfType(itemType: T): Array> { + return this.items.filter((item) => item.type === itemType) as Array>; + } + get activeSubItems() { return this.items.filter((item) => !item.hasTag(Tag.System.Archived)); } get archivedSubItems() { return this.items.filter((item) => item.hasTag(Tag.System.Archived)); } @@ -802,7 +806,7 @@ class BladesActor extends Actor implements BladesDocument { // #endregion - // #region BladesRoll Implementation + // #region BladesRoll Implementation ~ get rollModsData(): BladesRoll.RollModData[] { return BladesRollMod.ParseDocRollMods(this); } @@ -852,11 +856,15 @@ class BladesActor extends Actor implements BladesDocument { get rollPrimaryImg() { return this.img; } + // #endregion + + // #endregion + // #region BladesCrew Implementation ~ // #endregion - // #region PREPARING DERIVED DATA + // #region PREPARING DERIVED DATA ~ override prepareDerivedData() { if (BladesActor.IsType(this, BladesActorType.pc)) { this._preparePCData(this.system); } if (BladesActor.IsType(this, BladesActorType.crew)) { this._prepareCrewData(this.system); } diff --git a/ts/blades.ts b/ts/blades.ts index b482fd61..abf5254d 100644 --- a/ts/blades.ts +++ b/ts/blades.ts @@ -643,11 +643,10 @@ Hooks.once("ready", async () => { initCanvasStyles(); initTinyMCEStyles(); - await BladesDirector.getInstance().renderOverlay(); + await BladesDirector.getInstance().renderOverlay_SocketResponse(); BladesDirector.InitSockets(); BladesRoll.InitSockets(); - BladesClockKeeper.InitSockets(); }); // #endregion ▄▄▄▄▄ SYSTEM INITIALIZATION ▄▄▄▄▄ diff --git a/ts/classes/BladesClocks.ts b/ts/classes/BladesClocks.ts index 41d0be0d..66967a1b 100644 --- a/ts/classes/BladesClocks.ts +++ b/ts/classes/BladesClocks.ts @@ -4,7 +4,7 @@ import {Observer, Dragger} from "../core/gsap"; import BladesTargetLink from "./BladesTargetLink"; import U from "../core/utilities"; import {BladesActor} from "../documents/BladesActorProxy"; -import {BladesItem} from "../documents/BladesItemProxy"; +import {BladesItem, BladesClockKeeper} from "../documents/BladesItemProxy"; import BladesRoll from "./BladesRoll"; class BladesClockKey extends BladesTargetLink implements BladesClockKey.Subclass { @@ -45,6 +45,11 @@ class BladesClockKey extends BladesTargetLink implements socketlib.system.register("pull_SocketCall", BladesClockKey.pull_SocketResponse.bind(this)); socketlib.system.register("drop_SocketCall", BladesClockKey.drop_SocketResponse.bind(this)); + + return loadTemplates([ + "systems/eunos-blades/templates/components/clock-key.hbs", + "systems/eunos-blades/templates/components/clock.hbs" + ]); } @@ -115,23 +120,6 @@ class BladesClockKey extends BladesTargetLink implements get isNameVisible(): boolean {return this.data.isNameVisible;} set isNameVisible(val: boolean) {this.updateTarget("isNameVisible", U.pBool(val));} - _keySwingTimeline?: gsap.core.Timeline; - get keySwingTimeline() { - if (!this.elem) {return undefined;} - if (!this._keySwingTimeline) { - this._keySwingTimeline = U.gsap.effects.keySwing(this.elem).pause(); - } - return this._keySwingTimeline; - } - _keyControlZoomTimeline?: gsap.core.Timeline; - get keyControlZoomTimeline() { - if (!this.elem) {return undefined;} - if (!this._keyControlZoomTimeline) { - this._keyControlZoomTimeline = U.gsap.effects.keyControlZoom(this.elem).pause(); - } - return this._keyControlZoomTimeline; - } - get clocksData(): Record {return this.data.clocksData;} get displayMode(): ClockKeyDisplayMode | number { @@ -238,7 +226,7 @@ class BladesClockKey extends BladesTargetLink implements // #region HTML INTERACTION ~ async getHTML(): Promise { return await renderTemplate( - "systems/eunos-blades/templates/overlays/clock-key.hbs", + "systems/eunos-blades/templates/components/clock-key.hbs", this ); } @@ -248,8 +236,8 @@ class BladesClockKey extends BladesTargetLink implements } get isShowingControls(): boolean { - if (!this.elem) { return false; } - if (!game.user.isGM) { return false; } + if (!this.elem) {return false;} + if (!game.user.isGM) {return false;} return !$(this.elem).hasClass("controls-hidden"); } @@ -282,22 +270,32 @@ class BladesClockKey extends BladesTargetLink implements setTimeout(async () => resolve(await this.initClockKeyElem(displayMode)), 1000); }); } + const self = this; const {elem} = this; const {keyTweenVars, keyContTweenVars} = this.getDisplayMode(displayMode); const keyImgContainer = $(this.elem).find(".key-image-container")[0]; return new Promise((resolve) => { - U.gsap.timeline() + const tl = U.gsap.timeline() .set(keyImgContainer, keyContTweenVars) - .set(elem, keyTweenVars) - .to( + .set(elem, keyTweenVars); + + if (this.isVisible) { + tl.to( elem, { autoAlpha: 1, - duration: 0.5 + duration: 0.5, + onComplete() { + self.keySwingTimeline?.play(); + resolve(); + } } - ).then(() => {resolve();}); + ); + } else { + resolve(); + } }); } @@ -455,12 +453,45 @@ class BladesClockKey extends BladesTargetLink implements } // #endregion - // #region ANIMATIONS (Client-Side Only AND Socket-Triggered) + // #region ANIMATED UPDATES (Both GM-Only AND Socket Calls) + + // #region > TIMELINES ~ + _keySwingTimeline?: gsap.core.Timeline; + get keySwingTimeline() { + if (!this.elem) {return undefined;} + if (!$(this.elem).parents("#blades-overlay").length) {return undefined;} + if (!this._keySwingTimeline) { + this._keySwingTimeline = U.gsap.effects.keySwing(this.elem).pause(); + } + return this._keySwingTimeline; + } + + _keyControlZoomTimeline?: gsap.core.Timeline; + get keyControlZoomTimeline() { + if (!this.elem) {return undefined;} + if (!this._keyControlZoomTimeline) { + this._keyControlZoomTimeline = U.gsap.effects.keyControlZoom(this.elem).pause(); + } + return this._keyControlZoomTimeline; + } + + _hoverOverTimeline?: gsap.core.Timeline; + get hoverOverTimeline() { + if (!this.elem) {return undefined;} + if (!this._hoverOverTimeline) { + this._hoverOverTimeline = U.gsap.effects.hoverOverClockKey(this); + } + return this._hoverOverTimeline; + } + // #endregion + + // #region > GM-ONLY CLIENT-SIDE ANIMATIONS ~ showControls() { if (!game.user.isGM) {return;} if (!this.elem) {return;} this.keySwingTimeline?.tweenTo(1, {duration: 0.25, ease: "none"}); this.keyControlZoomTimeline?.play(); + game.eunoblades.ClockKeeper.showClockKeyControls(this.id); } hideControls() { @@ -468,8 +499,11 @@ class BladesClockKey extends BladesTargetLink implements if (!this.elem) {return;} this.keySwingTimeline?.resume(); this.keyControlZoomTimeline?.reverse(); + game.eunoblades.ClockKeeper.hideClockKeyControls(this.id); } + // #endregion + // #region > SOCKET CALLS: _SocketCall / static _SocketResponse / _Animation drop_Animation() { if (!this.elem) {return;} U.gsap.effects.keyDrop(this.elem); @@ -478,7 +512,9 @@ class BladesClockKey extends BladesTargetLink implements drop_SocketCall() { if (!game.user.isGM) {return;} if (!this.elem) {return;} + if (!$(this.elem).parents("#blades-overlay").length) {return;} socketlib.system.executeForEveryone("drop_SocketCall", this.id); + this.updateTarget("isVisible", true); } static drop_SocketResponse(keyID: IDString) { @@ -488,21 +524,23 @@ class BladesClockKey extends BladesTargetLink implements } pull_Animation() { - if (!this.elem) { return; } + if (!this.elem) {return;} U.gsap.effects.keyPull(this.elem); } - pull_SocketCall() { if (!game.user.isGM) {return;} - if (!this.elem) { return; } + if (!this.elem) {return;} + if (!$(this.elem).parents("#blades-overlay").length) {return;} socketlib.system.executeForEveryone("pull_SocketCall", this.id); + this.updateTarget("isVisible", false); } - static pull_SocketResponse(keyID: IDString) { const key = game.eunoblades.ClockKeys.get(keyID); if (!key) {return;} key.pull_Animation(); } + // #endregion + // #endregion // #region Adding & Removing Clocks ~ @@ -516,7 +554,6 @@ class BladesClockKey extends BladesTargetLink implements } async addClock(clockConfig: Partial = {}): Promise { - // Derive clock data from config const clockData = this.parseClockConfig(clockConfig); @@ -655,6 +692,8 @@ class BladesClock extends BladesTargetLink implements Blades return returnVals; } + // #endregion + // #region HTML INTERACTION ~ get elem(): HTMLElement | undefined { return $(`[data-id="${this.id}"`)[0]; @@ -677,8 +716,22 @@ class BladesClock extends BladesTargetLink implements Blades } // #endregion + // #region ANIMATED UPDATES (Both GM-Only AND Socket Calls) - // #region Adding/Removing Clock Segments + // #region > TIMELINES ~ + _hoverOverTimeline?: gsap.core.Timeline; + get hoverOverTimeline() { + if (!this.elem) {return undefined;} + if (!this._hoverOverTimeline) { + this._hoverOverTimeline = U.gsap.effects.hoverOverClock(this); + } + return this._hoverOverTimeline; + } + // #endregion + + // #endregion + + // #region Adding/Removing Clock Segments ~ // Returns number of segments beyond max (or 0, if max not met) async fillSegments(count: number): Promise { // Amount added beyond max: @@ -716,7 +769,7 @@ class BladesClock extends BladesTargetLink implements Blades } -export const ApplyClockListeners = async (html: JQuery, namespace: string) => { +const ApplyClockListeners = async (html: JQuery, namespace: string) => { eLog.checkLog3("ApplyListeners", "ApplyClockListeners", {html, find: html.find(".clock")}); // Step One: Find any clock keys and initialize them @@ -733,8 +786,8 @@ export const ApplyClockListeners = async (html: JQuery, namespace: async function toggleTarget(el: Element, source: BladesTargetLink) { if (!source) {return;} const prop = $(el).data("prop"); - eLog.checkLog3("clockControls", "Toggle Event", {source, el, prop, curVal: source.getTargetProp(prop)}); - await source.updateTarget(prop, !source.getTargetProp(prop)); + eLog.checkLog3("clockControls", "Toggle Event", {source, el, prop, curVal: source.data[prop]}); + await source.updateTarget(prop, !source.data[prop]); if (prop === "isShowingControls") { if (source instanceof BladesClockKey) { const key = source as BladesClockKey; @@ -757,7 +810,7 @@ export const ApplyClockListeners = async (html: JQuery, namespace: ) { if (!source) {return;} const prop = $(el).data("prop"); - eLog.checkLog3("clockControls", "Set Event", {val, source, prop, curVal: source.getTargetProp(prop)}); + eLog.checkLog3("clockControls", "Set Event", {val, source, prop, curVal: source.data[prop]}); source.updateTarget(prop, val); } @@ -903,3 +956,5 @@ export const ApplyClockListeners = async (html: JQuery, namespace: }; export default BladesClockKey; + +export {BladesClock, ApplyClockListeners}; diff --git a/ts/classes/BladesDirector.ts b/ts/classes/BladesDirector.ts index c7e3693e..1206974b 100644 --- a/ts/classes/BladesDirector.ts +++ b/ts/classes/BladesDirector.ts @@ -29,16 +29,9 @@ class BladesDirector { } public static async Initialize() { - // Trigger the instantiation of the Singleton by calling the getter - const director = BladesDirector.getInstance(); - - // Initialize the overlay element once canvas loaded - Hooks.on("canvasReady", async () => {director.renderOverlay();}); - // Return asynchronous template loading. return loadTemplates([ "systems/eunos-blades/templates/overlay/blades-overlay.hbs", - "systems/eunos-blades/templates/overlay/clock-key.hbs", "systems/eunos-blades/templates/overlay/location.hbs", "systems/eunos-blades/templates/overlay/score-panel.hbs", "systems/eunos-blades/templates/overlay/npc-portrait.hbs", @@ -100,7 +93,15 @@ class BladesDirector { private get svgData() {return SVGDATA;} - public async renderOverlay() { + get sceneKeys() { return game.eunoblades.ClockKeeper.getSceneKeys(); } + + renderOverlay_SocketCall() { + if (!game.user.isGM) { return; } + if (!this.overlayElement) { 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", @@ -108,7 +109,7 @@ class BladesDirector { ); // Clear previously-applied listeners - $(this.overlayElement).find("*").addBack().off(".blades-director"); + $(this.overlayElement).find("*").addBack().off(); // Reactivate event listeners this.activateClockListeners(); @@ -120,8 +121,79 @@ class BladesDirector { this.activateCrewListeners(); } - private activateClockListeners() { - // tbd... + private async activateClockListeners() { + + const clockKeySection$ = $(this.clockKeySectionElem); + + clockKeySection$.find(".clock-key-container").each((_, keyContainer) => { + const keyContainer$ = $(keyContainer); + const clockKey = game.eunoblades.ClockKeys.get(keyContainer$.find(".clock-key").attr("id") ?? ""); + if (!clockKey) { return; } + + // Enable pointer events on the container, so that the hover-over timeline can be played + keyContainer$.css("pointer-events", "auto"); + // Do the same for clocks contained by the key + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { return; } + $(clock.elem).css("pointer-events", "auto"); + }); + + if (game.user.isGM) { + // === GM-ONLY LISTENERS === + + // Double-Click a Clock Key = SocketPull it, Open ClockKeeper sheet + keyContainer$.on("dblclick", async () => { + clockKey.pull_SocketCall(); + game.eunoblades.ClockKeeper.render(true); + }); + + // Mouse-Wheel a Clock = Add/Remove Segments one-by-one. + // -- can UPDATE the server data immediately + // -- at end of each animated segment, check server data to see if another one should be animated in + // -- need animations for COMPLETING a clock, and for EMPTYING a clock. + + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { return; } + const clockElem$ = $(clock.elem); + clockElem$.on("wheel", async (event) => { + if (!(event.originalEvent instanceof WheelEvent)) {return;} + event.preventDefault(); + const delta = event.originalEvent.deltaY ?? 0; + if (delta > 0) { + await clock.fillSegments(1); + } else if (delta < 0) { + await clock.clearSegments(1); + } + // === TEMPORARY: RERENDER DIRECTOR OVERLAY TO SEE CLOCK CHANGES === + // (replace with socketlib call to animation effect within fillSegments/clearSegments methods) + this.renderOverlay_SocketCall(); + }); + }); + + } else { + // === PLAYER-ONLY LISTENERS === + + // Add listeners to container for mouseenter and mouseleave, that play and reverse timeline attached to element + keyContainer$.on("mouseenter", () => { + clockKey.hoverOverTimeline?.play(); + }).on("mouseleave", () => { + clockKey.hoverOverTimeline?.reverse(); + }); + + // Now repeat this for each clock in the clock key + clockKey.clocks.forEach((clock) => { + if (!clock.elem) { return; } + const clockElem$ = $(clock.elem); + + // Add listeners to clock for mouseenter and mouseleave, that play and reverse timeline attached to element + clockElem$.on("mouseenter", () => { + clock.hoverOverTimeline?.play(); + }).on("mouseleave", () => { + clock.hoverOverTimeline?.reverse(); + }); + }); + } + }); } private activateScorePanelListeners() { @@ -153,6 +225,8 @@ class BladesDirector { public static InitSockets() { const director = BladesDirector.getInstance(); + socketlib.system.register("renderOverlay_SocketCall", director.renderOverlay_SocketResponse.bind(director)); + director.initClockSockets(); director.initScorePanelSockets(); director.initLocationSockets(); diff --git a/ts/classes/BladesTargetLink.ts b/ts/classes/BladesTargetLink.ts index 7f6cfa3a..a8aeb329 100644 --- a/ts/classes/BladesTargetLink.ts +++ b/ts/classes/BladesTargetLink.ts @@ -47,7 +47,7 @@ class BladesTargetLink { throw new Error(`[BladesTargetLink.ResolveConfigToData()] Data Lacks ANY 'target' / 'targetID': '${JSON.stringify(config)}'`); } // - ... Convert to UUID - let targetUUID: UUIDString|undefined; + let targetUUID: UUIDString | undefined; if (U.isDocUUID(targetRef)) { targetUUID = targetRef; } else if (U.isDocID(targetRef)) { @@ -111,7 +111,8 @@ class BladesTargetLink { } // #endregion - get isGM() { return game.user.isGM; } + // #region GETTERS ~ + get isGM() {return game.user.isGM;} private _id: IDString; private _targetID: UUIDString; @@ -128,6 +129,25 @@ class BladesTargetLink { return this._target; } + protected get linkData() { + let linkData: (BladesTargetLink.Data & BladesTargetLink.UnknownSchema) | undefined; + if (this.targetFlagKey) { + linkData = this.target.getFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`) as (BladesTargetLink.Data & BladesTargetLink.UnknownSchema) ?? undefined; + } else if (this.targetKey) { + linkData = getProperty(this.target, `${this.targetKey}.${this.id}`); + } + + if (!linkData) { + throw new Error("[BladesTargetLink.linkData] Error retrieving linkData."); + } + + return linkData; + } + + get data() {return this.linkData;} + // #endregion + + // #region CONSTRUCTOR ~ constructor( data: BladesTargetLink.Data & BladesTargetLink.UnknownSchema ) { @@ -149,28 +169,10 @@ class BladesTargetLink { } this._target = target; } + // #endregion - protected get linkData() { - let linkData: (BladesTargetLink.Data & BladesTargetLink.UnknownSchema) | undefined; - if (this.targetFlagKey) { - linkData = this.target.getFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`) as (BladesTargetLink.Data & BladesTargetLink.UnknownSchema) ?? undefined; - } else if (this.targetKey) { - linkData = getProperty(this.target, `${this.targetKey}.${this.id}`); - } - - if (!linkData) { - throw new Error("[BladesTargetLink.linkData] Error retrieving linkData."); - } - - return linkData; - } - - get data() { return this.linkData; } - - getTargetProp(prop: string): unknown { - return this.linkData[prop]; - } + // #region ASYNC UPDATE & DELETE METHODS ~ async updateTarget(prop: string, val: unknown) { if (this.targetFlagKey) { (this.target as BladesItem).setFlag("eunos-blades", `${this.targetFlagKey}.${this.id}.${prop}`, val); @@ -179,7 +181,7 @@ class BladesTargetLink { } } - async updateTargetData(val: T|null) { + async updateTargetData(val: T | null) { if (val === null) { if (this.targetFlagKey) { await (this.target as BladesItem).unsetFlag("eunos-blades", `${this.targetFlagKey}.${this.id}`); @@ -207,6 +209,7 @@ class BladesTargetLink { async delete() { await this.updateTargetData(null); } + // #endregion } diff --git a/ts/core/gsap.ts b/ts/core/gsap.ts index c124f351..fe9c4b05 100644 --- a/ts/core/gsap.ts +++ b/ts/core/gsap.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import U from "./utilities"; import C from "./constants"; +import BladesClockKey, {BladesClock} from "../classes/BladesClocks"; // eslint-disable-next-line import/no-unresolved import {TextPlugin, Flip, Draggable as Dragger, MotionPathPlugin, SplitText, Observer, CustomEase, CustomWiggle, CustomBounce, EasePack} from "gsap/all"; @@ -144,6 +145,55 @@ export const gsapEffects: Record = { duration: 1 } }, + hoverOverClockKey: { + effect: (clockKey, config) => { + if (!(clockKey instanceof BladesClockKey)) { throw new Error("clockKey is not an instance of BladesClockKey"); } + if (!clockKey.elem) { throw new Error("clockKey.elem is null or undefined"); } + + return U.gsap.timeline({paused: true}) + .to(clockKey.elem, { + scale: 1.25, + ease: "sine", + duration: 0.25, + onStart() { + clockKey.keySwingTimeline?.tweenTo(1, {duration: 0.25, ease: "none"}); + }, + onReverse() { + clockKey.keySwingTimeline?.resume(); + } + }, 0); + }, + defaults: { + + } + }, + hoverOverClock: { + effect: (clock, config) => { + if (!(clock instanceof BladesClock)) { throw new Error("clock is not an instance of BladesClock"); } + if (!clock.elem) { throw new Error("clock.elem is null or undefined"); } + + const [clockLabel] = $(clock.elem).find(".clock-label"); + const [clockGlow] = $(clock.elem).find(".clock-glow"); + + return U.gsap.timeline({paused: true}) + .fromTo(clock.elem, {filter: "brightness(1)"}, { + filter: "brightness(1.5)", + scale: 1.25, + duration: 0.25 + }) + .to(clockLabel, { + autoAlpha: 1, + duration: 0.25 + }, 0) + .to(clockGlow, { + autoAlpha: 1, + duration: 0.25 + }, 0); + }, + defaults: { + duration: 0.5 + } + }, csqEnter: { effect: (csqContainer, config) => { const csqRoot = U.gsap.utils.selector(csqContainer); diff --git a/ts/core/helpers.ts b/ts/core/helpers.ts index 8a20cc78..da1fdc2a 100644 --- a/ts/core/helpers.ts +++ b/ts/core/helpers.ts @@ -32,10 +32,7 @@ export async function preloadHandlebarsTemplates() { "systems/eunos-blades/templates/parts/roll-opposition-creator.hbs", "systems/eunos-blades/templates/parts/active-effects.hbs", "systems/eunos-blades/templates/parts/gm-pc-summary.hbs", - - // Overlays - "systems/eunos-blades/templates/overlays/clock-overlay.hbs", - "systems/eunos-blades/templates/overlays/clock-key.hbs" + "systems/eunos-blades/templates/components/clock-key.hbs" ]; // Load the template parts diff --git a/ts/documents/actors/BladesFaction.ts b/ts/documents/actors/BladesFaction.ts index 50242d64..fb2f21c3 100644 --- a/ts/documents/actors/BladesFaction.ts +++ b/ts/documents/actors/BladesFaction.ts @@ -6,6 +6,13 @@ class BladesFaction extends BladesActor implements BladesActorSubClass.Faction, BladesRoll.OppositionDocData { + static override get All(): Collection { + return new Collection( + (super.GetTypeWithTags(BladesActorType.faction) as BladesFaction[]) + .map((faction) => [faction.id, faction]) + ); + } + // #region BladesRoll Implementation // #region BladesRoll.OppositionDoc Implementation diff --git a/ts/documents/actors/BladesPC.ts b/ts/documents/actors/BladesPC.ts index acb1d394..bed0d8b5 100644 --- a/ts/documents/actors/BladesPC.ts +++ b/ts/documents/actors/BladesPC.ts @@ -1,7 +1,7 @@ import C, {Playbook, ClockColor, AttributeTrait, ActionTrait, Harm, BladesActorType, BladesItemType, Tag, RollModType, RollModSection, RollModStatus} from "../../core/constants"; import U from "../../core/utilities"; import {BladesActor, BladesCrew} from "../BladesActorProxy"; -import {BladesItem} from "../BladesItemProxy"; +import {BladesItem, BladesProject} from "../BladesItemProxy"; import BladesRoll from "../../classes/BladesRoll"; import BladesClockKey from "../../classes/BladesClocks"; import BladesDirector from "../../classes/BladesDirector"; @@ -14,7 +14,7 @@ class BladesPC extends BladesActor implements BladesActorSubClass.Scoundrel, BladesRoll.PrimaryDocData, BladesRoll.ParticipantDocData { - // #region Static Overrides: Create ~ + // #region Static Overrides: Create, get All ~ static override IsType(doc: unknown): doc is BladesActorOfType { return super.IsType(doc, BladesActorType.pc); } @@ -85,6 +85,13 @@ class BladesPC extends BladesActor implements BladesActorSubClass.Scoundrel, ]); return pc as unknown as Promise | undefined>; } + + static override get All(): Collection { + return new Collection( + (super.GetTypeWithTags(BladesActorType.pc) as BladesPC[]) + .map((pc) => [pc.id, pc]) + ); + } // #endregion constructor(data: ActorDataConstructorData) { @@ -303,6 +310,10 @@ class BladesPC extends BladesActor implements BladesActorSubClass.Scoundrel, await this.update({"system.stash.value": Math.min(this.system.stash.value + amount, this.system.stash.max)}); } + get projects(): BladesProject[] { + return this.getSubItemsOfType(BladesItemType.project) as BladesProject[]; + } + get remainingDowntimeActions(): number { if (!BladesActor.IsType(this, BladesActorType.pc)) { return 0; } return this.system.downtime_actions.max + this.system.downtime_action_bonus - this.system.downtime_actions.value; diff --git a/ts/documents/items/BladesClockKeeper.ts b/ts/documents/items/BladesClockKeeper.ts index 064c785e..355ad023 100644 --- a/ts/documents/items/BladesClockKeeper.ts +++ b/ts/documents/items/BladesClockKeeper.ts @@ -22,77 +22,32 @@ class BladesClockKeeper extends BladesItem implements BladesItemSubClass.Clock_K } else { game.eunoblades.ClockKeeper = clockKeeper; } - game.eunoblades.ClockKeeper.renderOverlay(); - } - static InitSockets() { - socketlib.system.register("renderOverlay", game.eunoblades.ClockKeeper.renderOverlay); + return loadTemplates([ + "systems/eunos-blades/templates/parts/clock-sheet-key-controls-full.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-key-controls-minimal.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-full.hbs", + "systems/eunos-blades/templates/parts/clock-sheet-clock-controls-minimal.hbs" + ]); } - // #region CLOCKS OVERLAY - _overlayElement?: HTMLElement; - - get overlayElement() { - this._overlayElement ??= $("#clocks-overlay")[0]; - if (!this._overlayElement) { - $("body.vtt.game.system-eunos-blades").append("
"); - [this._overlayElement] = $("#clocks-overlay"); + public showClockKeyControls(keyID: IDString) { + if (this.sheet?.element) { + // Find the key controls row, flip it over to controls row. } - return this._overlayElement; } - async renderOverlay() { - if (!game.scenes?.current) { return; } - const {ClockKeeper: keeper} = game.eunoblades; - if (!keeper) { return; } - const {overlayElement} = keeper; - eLog.checkLog3("clocksOverlay", "[ClocksOverlay] RenderOverlay", overlayElement); - if (!overlayElement) { - eLog.error("clocksOverlay", "[ClocksOverlay] Cannot locate overlay element."); - return; + public hideClockKeyControls(keyID: IDString) { + if (this.sheet?.element) { + // Find the key controls row, flip it back to minimal summary } - - // Re-render the overlay element - overlayElement.innerHTML = await renderTemplate( - "systems/eunos-blades/templates/overlays/clock-overlay.hbs", - keeper - ); - - // Reactivate event listeners - keeper.activateOverlayListeners(); } + // #region CLOCKS OVERLAY get clockKeys() { return this.getSceneKeys(); } get currentScene(): string|undefined { return game.scenes?.current?.id; } - get svgData() { return SVGDATA; } - - async activateOverlayListeners() { - if (!game?.user?.isGM) { return; } - - eLog.checkLog3("clocksOverlay", "[activateOverlayListeners] Keys", this.keys); - ApplyClockListeners($("#clocks-overlay"), "ClocksOverlay"); - - $("#clocks-overlay").find(".key-label").on({ - click: async (event) => { - if (!event.currentTarget) { return; } - if (!BladesItem.IsType(game.eunoblades.ClockKeeper, BladesItemType.clock_keeper)) { return; } - - event.preventDefault(); - - const clockKey = game.eunoblades.ClockKeys.get($(event.currentTarget).data("keyId")); - if (clockKey && clockKey.elem) { - await clockKey.toggleActive(); - } - }, - contextmenu: () => { - if (!game.user.isGM) { return; } - game.eunoblades.ClockKeeper?.sheet?.render(true); - } - }); - } - get currentSceneID(): IDString { if (!game.scenes?.current) { throw new Error("[BladesClockKeeper.currentScene] Error retrieving 'game.scenes.current'."); diff --git a/ts/documents/items/BladesProject.ts b/ts/documents/items/BladesProject.ts index a7be2c77..4bda52bb 100644 --- a/ts/documents/items/BladesProject.ts +++ b/ts/documents/items/BladesProject.ts @@ -24,6 +24,13 @@ class BladesProject extends BladesItem implements BladesItemSubClass.Project, return this._clockKey; } + get ownerName(): string|undefined { + if (this.parent) { + return this.parent.name; + } + return undefined; + } + get currentClock() { return this.clockKey?.currentClock; } diff --git a/ts/sheets/item/BladesClockKeeperSheet.ts b/ts/sheets/item/BladesClockKeeperSheet.ts index bb12c479..e16a8797 100644 --- a/ts/sheets/item/BladesClockKeeperSheet.ts +++ b/ts/sheets/item/BladesClockKeeperSheet.ts @@ -3,6 +3,7 @@ import BladesItemSheet from "./BladesItemSheet"; import BladesClockKeeper from "../../documents/items/BladesClockKeeper"; // import U from "../../core/utilities"; import {BladesItemType} from "../../core/constants"; +import {BladesPC, BladesFaction} from "../../documents/BladesActorProxy"; class BladesClockKeeperSheet extends BladesItemSheet { @@ -13,15 +14,15 @@ class BladesClockKeeperSheet extends BladesItemSheet { classes: ["eunos-blades", "sheet", "item", "clock-keeper"], template: "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs", width: 700, - height: 970 + height: 970, + tabs: [{navSelector: ".nav-tabs", contentSelector: ".tab-content", initial: "scene-keys"}] }); } static async Initialize() { Items.registerSheet("blades", BladesClockKeeperSheet, {types: ["clock_keeper"], makeDefault: true}); return loadTemplates([ - "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs", - "systems/eunos-blades/templates/parts/clock-sheet-row.hbs" + "systems/eunos-blades/templates/items/clock_keeper-sheet.hbs" ]); } @@ -30,7 +31,9 @@ class BladesClockKeeperSheet extends BladesItemSheet { const sheetData: BladesItemDataOfType = { sceneOptions: Array.from(game.scenes), - sceneKeys: this.item.getSceneKeys(this.item.system.targetScene ?? game.scenes.current.id as IDString) + sceneKeys: this.item.getSceneKeys(this.item.system.targetScene ?? game.scenes.current.id as IDString), + pcsWithProjects: BladesPC.All.filter((pc) => pc.projects.length > 0), + factions: Array.from(BladesFaction.All) }; return {...context, ...sheetData} as BladesItemSheetData;