Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Token aura and light styles/animations #1631

Merged
merged 1 commit into from
Oct 18, 2023
Merged

Token aura and light styles/animations #1631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ function change_zoom(newZoom, x, y) {
let pageY = Math.round(centerY * window.ZOOM - zoomCenterY) + window.VTTMargin;

//Set scaling token names CSS variable this variable can be used with anything in #tokens
$("#tokens").get(0).style.setProperty("--font-size-zoom", Math.max(12 * Math.max((3 - window.ZOOM), 0), 8.5) + "px");
$("#tokens").css("--font-size-zoom", Math.max(12 * Math.max((3 - window.ZOOM), 0), 8.5) + "px");

$("#VTT").css("transform", "scale(" + window.ZOOM + ")");
set_default_vttwrapper_size()
Expand Down
1 change: 1 addition & 0 deletions MessageBroker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1438,6 +1438,7 @@ class MessageBroker {
set_default_vttwrapper_size();

reset_canvas();

apply_zoom_from_storage();

// WE USED THE DM MAP TO GET RIGH WIDTH/HEIGHT. NOW WE REVERT TO THE PLAYER MAP
Expand Down
14 changes: 13 additions & 1 deletion Token.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2906,7 +2906,12 @@ function setTokenAuras (token, options) {
(options.hidden || (options.hideaura && !token.attr("data-id").includes(window.PLAYER_ID)) || showAura == 'none') ? token.parent().parent().find("#aura_" + tokenId).hide()
: token.parent().parent().find("#aura_" + tokenId).show()
}

if(options.animation?.aura){
token.parent().parent().find("#aura_" + tokenId).attr('data-animation', options.animation.aura)
}
else{
token.parent().parent().find("#aura_" + tokenId).removeAttr('data-animation')
}


} else {
Expand Down Expand Up @@ -2959,6 +2964,12 @@ function setTokenLight (token, options) {
lightElement.contextmenu(function(){return false;});
$("#light_container").prepend(lightElement);
}
if(options.animation?.light){
token.parent().parent().find(".aura-element-container-clip[id='" + token.attr("data-id")+"']").attr('data-animation', options.animation.light)
}
else{
token.parent().parent().find(".aura-element-container-clip[id='" + token.attr("data-id")+"']").removeAttr('data-animation')
}
if(window.DM){
(options.hidden && options.reveal_light == 'never') ? token.parent().parent().find("#vision_" + tokenId).css("opacity", 0.5)
: token.parent().parent().find("#vision_" + tokenId).css("opacity", 1)
Expand Down Expand Up @@ -2987,6 +2998,7 @@ function setTokenLight (token, options) {
}
}
}

}

function setTokenBase(token, options) {
Expand Down
69 changes: 64 additions & 5 deletions TokenMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,10 @@ function build_token_auras_inputs(tokenIds) {

<div class="token-config-aura-wrapper">
<div class="token-image-modal-footer-select-wrapper">
<div class="token-image-modal-footer-title">Animation</div>
<select class="token-config-animation-preset">
<option value=""></option>
</select>
</div>
<div class="menu-inner-aura">
<h3 style="margin-bottom:0px;">Inner Aura</h3>
Expand All @@ -551,7 +555,17 @@ function build_token_auras_inputs(tokenIds) {
</div>
</div>
`);

let animationPresets = {
'Flicker': 'flicker-fx',
'Rays': 'rays-fx',
'Dome': 'force-fx',
'Wild Magic': 'wild-fx',
}
for(let option in animationPresets){
let allTokenSelected = tokens.map(t => t.options.animation?.aura);
let selected = allTokenSelected.length === 1 ? allTokenSelected[0] : "";
wrapper.find('.token-config-animation-preset').append(`<option ${animationPresets[option] == selected ? `selected=true` : ''} value="${animationPresets[option]}">${option}</option>`)
}
const auraOption = {
name: "auraVisible",
label: "Enable Token Auras",
Expand Down Expand Up @@ -694,6 +708,20 @@ function build_token_auras_inputs(tokenIds) {
token.place_sync_persist();
});
});
wrapper.find(".token-config-animation-preset").on("change", function(e) {

let preset = e.target.value;

tokens.forEach(token => {

token.options.animation= {
...token.options.animation,
aura: preset
}
token.place_sync_persist();
});
});


$("#VTTWRAPPER .sidebar-modal").on("remove", function () {
console.log("removing sidebar modal!!!");
Expand Down Expand Up @@ -769,12 +797,18 @@ function build_token_light_inputs(tokenIds) {
<div class="token-image-modal-footer-select-wrapper">


<div class="token-image-modal-footer-title">Preset</div>
<div class="token-image-modal-footer-title"><button id='editPresets'>Edit</button></div>
<div class="token-image-modal-footer-title">Preset</div>
<div class="token-image-modal-footer-title"><button id='editPresets'>Edit</button></div>
<select class="token-config-aura-preset">
<option value=""></option>
</select>
</div>
<div class="token-image-modal-footer-select-wrapper">
<div class="token-image-modal-footer-title">Animation</div>
<select class="token-config-animation-preset">
<option value=""></option>
</select>
</div>
<div class="menu-vision-aura">
<h3 style="margin-bottom:0px;">Darkvision</h3>
<div class="token-image-modal-footer-select-wrapper" style="padding-left: 2px">
Expand Down Expand Up @@ -886,11 +920,22 @@ function build_token_light_inputs(tokenIds) {
window.LIGHT_PRESETS = JSON.parse(localStorage.getItem('LIGHT_PRESETS'));
}


let animationPresets = {
'Flicker': 'flicker-fx',
'Rays': 'rays-fx',
'Dome': 'force-fx',
'Wild Magic': 'wild-fx',
}

for(let i in window.LIGHT_PRESETS){
wrapper.find('.token-config-aura-preset').append(`<option value="${window.LIGHT_PRESETS[i].name}">${window.LIGHT_PRESETS[i].name}</option>`)
}

for(let option in animationPresets){
let allTokenSelected = tokens.map(t => t.options.animation?.light);
let selected = allTokenSelected.length === 1 ? allTokenSelected[0] : "";
wrapper.find('.token-config-animation-preset').append(`<option ${animationPresets[option] == selected ? `selected=true` : ''} value="${animationPresets[option]}">${option}</option>`)
}

wrapper.find('#editPresets').off('click.editPresets').on('click.editPresets', function(){

Expand Down Expand Up @@ -994,7 +1039,7 @@ function build_token_light_inputs(tokenIds) {
token.options[auraName]['color'] = color;
token.place_sync_persist();
});
$(e.target).closest(".token-config-aura-wrapper").find(".token-config-aura-preset")[0].selectedIndex = 0;
$(".token-config-aura-preset")[0].selectedIndex = 0;
} else {
tokens.forEach(token => {
let selector = "div[data-id='" + token.options.id + "']";
Expand Down Expand Up @@ -1057,6 +1102,20 @@ function build_token_light_inputs(tokenIds) {
});
});

wrapper.find(".token-config-animation-preset").on("change", function(e) {

let preset = e.target.value;

tokens.forEach(token => {

token.options.animation= {
...token.options.animation,
light: preset
}
token.place_sync_persist();
});
});

$("#VTTWRAPPER .sidebar-modal").on("remove", function () {
console.log("removing sidebar modal!!!");
colorPickers.spectrum("destroy");
Expand Down
119 changes: 119 additions & 0 deletions abovevtt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7654,6 +7654,125 @@ button.journal-view-button.journal-button {
height: calc(100% - 25px);
background: #fff;
}


/*light/aura animations*/


[data-animation='flicker-fx'] .islight,
.aura-element[data-animation='flicker-fx']{
animation: aurafx-flicker 2s infinite alternate linear(1.22 -19.85%, 0.93 -0.74%, 0.46 13.24%, 0.71 34.56%, 0.46 58.82%, 0.74 70.59%, 1 100%)
}


[data-animation='rays-fx'] .islight:after,
.aura-element[data-animation='rays-fx'][id*='aura_']:after{
animation: aurafx-rotate 100s infinite linear;
content:'';
width:100%;
height:100%;
position:absolute;
border-radius:50%;
background-image: repeating-conic-gradient(from 0deg, transparent 0deg 3deg, #0006 5deg 7deg, transparent 9deg)
}
.aura-element[data-animation='rays-fx'][id*='aura_']{
animation: aurafx-rotate 100s infinite linear;
-webkit-mask-image: repeating-conic-gradient(from 0deg, #fff 0deg 3deg, transparent 5deg 7deg, #fff 9deg);
}
[data-animation='wild-fx'] .islight,
.aura-element[data-animation='wild-fx'][id*='aura_'] {
animation: aurafx-wild 20s infinite linear reverse;
}
[data-animation='wild-fx'] .islight:after,
.aura-element[data-animation='wild-fx'][id*='aura_']:after {
animation: aurafx-wild-hue 10s infinite linear;
content:'';
width:100%;
height:100%;
position:absolute;
border-radius:50%;
-webkit-mask-image: radial-gradient(45% 45% at center,#ffffff00 70%, #ffffff 100%);
background-image: radial-gradient(45% 45% at center,#ffffff 50%,#b7b7b75c 90%,#2f0000ba 100%,#fff0 105%, #2f0000 110%), linear-gradient(#ff0000, #ff8f00, #ffda00, #0effe8, #3b59ff, #300057);

}

[data-animation='force-fx'] .islight:after,
.aura-element[data-animation='force-fx'][id*='aura_']:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
mix-blend-mode: multiply;
filter:blur(1px);
background-image: radial-gradient(circle at 100px 100px, #ffffff00, #0000003d);
-webkit-mask-image: radial-gradient(45% 45% at center,#ffffff 108%, #ffffff00 100%);
}
[data-animation='force-fx'] .islight:before,
.aura-element[data-animation='force-fx'][id*='aura_']:before {
animation: aurafx-force 1s infinite linear alternate;
content: "";
position: absolute;
background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0) 25%);
border-radius: 50%;
bottom: 2.5%;
left: 5%;
opacity: 0.6;
height: 100%;
width: 90%;
z-index: 2;
}
@keyframes aurafx-flicker{
0% {
filter: blur(15px);
transform: scale(0.995);
}
100% {
filter: blur(20px);
transform: scale(1.005);
}
}
@keyframes aurafx-rotate{
from {
transform: rotate(0deg);

}
to {
transform: rotate(360deg);
}
}
@keyframes aurafx-wild{
from {
transform: rotate(0deg) skew(5deg, 0deg);
}
to {
transform: rotate(360deg) skew(0deg, 5deg);
}
}
@keyframes aurafx-wild-hue{
from {
transform: rotate(0deg) skew(5deg, 0deg);
filter: hue-rotate(0deg);
}
to {
transform: rotate(360deg) skew(0deg, 5deg);
filter: hue-rotate(360deg);
}
}
@keyframes aurafx-force{
from {
transform: scale(0.99);
}
to {
transform: scale(1)
}
}






.general_input{
border-width: 2px;
border-radius: 2px;
Expand Down