token image manager fr fr

CHANGELOG.md

@@ -8,8 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.0] - Unreleased
 
 ### Added
-- "Develeoper mode" setting. Puts into console what is being played with what roll options. Automatically on in `npm run dev`.
-- Tabs to the Actor Animations Menu (#3) and with it a rudimentary Token Image Manager.
+- "Developer mode" setting. Puts into console what is being played with what roll options. Automatically on in `npm run dev`.
+- Token Image Manager (#4)
 
 #### Animations
 - Melee Ignition

lang/en.json

@@ -49,6 +49,7 @@
 				"tokenimage-manager": "Token Image Manager"
 			}
 		},
+		"easingTooltip": "Learn more about various easing functions here.",
 		"featText": "This feat contains PF2e Graphics-managed Rule Elements, primarily of the TokenImage variety. Opening the Rules tab on this feat may lag your game if the actor contains a lot of forms (ex. Druid)."
 	}
 }

src/extensions.d.ts

@@ -43,17 +43,39 @@ declare global {
 		/** An image or video path */
 		value: string
 		/** An optional scale adjustment */
-		scale: number
+		scale?: number
 		/** An optional tint adjustment */
-		tint: string
+		tint?: string
 		/** An optional alpha adjustment */
-		alpha: number
+		alpha?: number
 		/** Animation options for when the image is applied */
 		animation: {
-			duration: number
-			transition: string
-			easing: string
-			name: string
+			duration?: number
+			transition?: string
+			easing?: string
+			name?: string
 		}
 	}
+
+	class TextureTransitionFilter extends AbstractBaseFilter {
+		/** Transition types for this shader. */
+		static get TYPES(): {
+			FADE: 'fade'
+			SWIRL: 'swirl'
+			WATER_DROP: 'waterDrop'
+			MORPH: 'morph'
+			CROSSHATCH: 'crosshatch'
+			WIND: 'wind'
+			WAVES: 'waves'
+			WHITE_NOISE: 'whiteNoise'
+			HOLOGRAM: 'hologram'
+			HOLE: 'hole'
+			HOLE_SWIRL: 'holeSwirl'
+			GLITCH: 'glitch'
+			DOTS: 'dots'
+			[k: string]: string
+		}
+	}
+
+	class CanvasAnimation {}
 }

src/view/ActorAnimations/ActorAnimationsShell.svelte

@@ -1,6 +1,8 @@
 <svelte:options accessors={true} />
 
 <script lang='ts'>
+	import type { Writable } from 'svelte/store'
+	import { getContext } from 'svelte'
 	import { devMessage, i18n } from 'src/utils'
 	import AllAnimations from './submenus/all-animations.svelte'
 	import TokenimageManager from './submenus/tokenimage-manager.svelte'
@@ -15,14 +17,13 @@
 		throw new Error('An actor is required to render the ItemAnimations application.')
 	}
 
-	// import { getContext } from "svelte";
-	// const application = getContext("#external").application;
+	const sessionStorage = getContext('#external').sessionStorage
 
 	const doc = new TJSDocument(actor)
 	devMessage(actor, doc)
 
 	const tabs = ['all-animations', 'actor-animations', 'tokenimage-manager'] as const
-	let activeTab: (typeof tabs)[number] = tabs[0]
+	const activeTab: Writable<(typeof tabs)[number]> = sessionStorage.getStore(actor.id, tabs[0])
 </script>
 
 <ApplicationShell bind:elementRoot>
@@ -40,8 +41,8 @@
 					<div class='flex align-baseline text-center py-1 border-y-foundry'>
 						<div class='w-full flex align-baseline items-center justify-around cursor-pointer'>
 							{#each tabs as tab}
-								{@const active = tab === activeTab}
-								<button class="tab-button {active ? 'active-tab' : ''}" on:click={() => (activeTab = tab)}>
+								{@const active = tab === $activeTab}
+								<button class="tab-button {active ? 'active-tab' : ''}" on:click={() => (activeTab.set(tab))}>
 									{i18n(`actorAnimation.tabs.${tab}`)}
 								</button>
 							{/each}
@@ -52,11 +53,11 @@
 		</div>
 		<div class='flex flex-row overflow-hidden flex-1 pb-2'>
 			<div class='overflow-y-auto w-full'>
-				{#if activeTab === 'all-animations'}
+				{#if $activeTab === 'all-animations'}
 					<AllAnimations {doc} />
-				{/if}{#if activeTab === 'actor-animations'}
+				{/if}{#if $activeTab === 'actor-animations'}
 					<ActorAnimations {doc} />
-				{/if}{#if activeTab === 'tokenimage-manager'}
+				{/if}{#if $activeTab === 'tokenimage-manager'}
 					<TokenimageManager actor={doc} />
 				{/if}
 			</div>

src/view/ActorAnimations/submenus/tokenimage-manager.svelte

@@ -1,6 +1,6 @@
 <script lang='ts'>
 	import { TJSDocument } from '@typhonjs-fvtt/runtime/svelte/store/fvtt/document'
-	import { ErrorMsg, dev, devMessage, i18n } from 'src/utils'
+	import { ErrorMsg, devMessage, i18n } from 'src/utils'
 	import { derived } from 'svelte/store'
 	import featData from './tokenimage-feat.json'
 
@@ -40,6 +40,7 @@
 		key: 'TokenImage',
 		value: $feat?.actor.prototypeToken.texture.src as string,
 		uuidPredicate: '',
+		animation: {},
 	})
 	type CustomTokenImage = ReturnType<typeof ruleTemplate> & TokenImageRuleSource
 
@@ -74,28 +75,47 @@
 		updateRules()
 	}
 
+	function removeDropPredicate(rule: CustomTokenImage) {
+		rule.predicate = []
+		rule.uuidPredicate = ''
+		updateRules()
+	}
+
 	function isCustomTokenImage(rule: RuleElementSource): rule is CustomTokenImage {
 		return rule.key === 'TokenImage'
 	}
 
 	function isEffect(doc?: ClientDocument | null): doc is EffectPF2e {
 		return doc?.type === 'effect'
 	}
+
+	function prepRules(rule: CustomTokenImage) {
+		rule.animation ??= { }
+		return rule
+	}
 </script>
 
 <div class='p-2 pb-0 flex flex-col h-full'>
 	{#if $tokenImageID}
 		<div class='flex-grow flex-shrink overflow-y-scroll mb-2 text-center'>
-			{#each $feat?.system.rules.filter(isCustomTokenImage) || [] as rule}
+			{#each $feat?.system.rules.filter(isCustomTokenImage).map(prepRules) || [] as rule}
 				<div class='p-2 m-1 border border-solid rounded-md bg-gray-400 bg-opacity-20'>
 					<section class='flex items-center mb-1'>
 						<h3 class='border-b-0'>
 							<i class='fa-regular fa-circle align-middle' />
 							Token Image
 						</h3>
-						<div class='ml-auto'>
-							Priority Goes Here
-							<button on:click={() => removeRule(rule)} class='fas fa-trash-can size-8' />
+						<div class='ml-auto flex items-center'>
+							<label class='flex items-center' data-tooltip='PF2E.RuleEditor.General.PriorityHint'>
+								<i class='fa-solid fa-fw fa-list-ol mr-1' />
+								<input
+									class='h-8 w-10'
+									type='number'
+									bind:value={rule.priority} />
+							</label>
+							<button
+								on:click={() => removeRule(rule)}
+								class='fas fa-trash-can size-8' />
 						</div>
 					</section>
 					<div class='grid grid-cols-5 items-center gap-1.5
@@ -130,6 +150,11 @@
 										<span>
 											{effect.name}
 										</span>
+										<i class='fa fa-close ml-auto p-1 py-0 leading-normal hover:underline'
+											role='button'
+											tabindex='-1'
+											on:click|stopPropagation={() => removeDropPredicate(rule)}
+											on:keyup|stopPropagation={() => removeDropPredicate(rule)} />
 									</div>
 								{:else}
 									Drag and drop an effect to predicate onto!
@@ -173,26 +198,84 @@
 						<!-- #endregion -->
 						<!-- #region Transitions -->
 						<span>
-							Transition
+							Animation:
 						</span>
-						<section class='border border-solid p-1 rounded-sm bg-opacity-50 bg-slate-100 flex-grow'>
-							Options
+						<section class='
+							grid grid-cols-2 gap-2
+							border border-solid p-1 rounded-sm bg-opacity-50 bg-slate-100 flex-grow'
+						>
+							<label class='grid grid-cols-2 items-center'>
+								Transition:
+								<select name='transition'
+									bind:value={rule.animation.transition}
+									on:change={updateRules}>
+									{#each Object.values(TextureTransitionFilter.TYPES) as value}
+										<option {value}>{value.titleCase()}</option>
+									{/each}
+								</select>
+							</label>
+							<label class='grid grid-cols-2 items-center'>
+								Duration:
+								<input class="" type='number'
+									bind:value={rule.animation.duration}
+									on:change={updateRules} />
+							</label>
+							<label class='grid grid-cols-2 items-center'>
+								<span>
+									<a class='no-underline' href='https://easings.net/' data-tooltip='pf2e-graphics.easingTooltip'>
+										<i class='fa fa-info-circle size-4' />
+									</a>
+									Easing:
+								</span>
+								<select name='easing'
+									bind:value={rule.animation.easing}
+									on:change={updateRules}>
+									<option value="" />
+									{#each Object.values(Object.keys(CanvasAnimation).filter(x => x.includes('ease'))) as value}
+										<option {value}>{value}</option>
+									{/each}
+								</select>
+							</label>
 						</section>
 						<!-- #endregion -->
 						<!-- #region Options -->
 						<span>
-							Scale / Tint / Opacity
+							Options:
 						</span>
-						<section class='border border-solid p-1 rounded-sm bg-opacity-50 bg-slate-100 flex-grow'>
-							Options
+						<section class='
+							grid grid-cols-2 gap-2
+							border border-solid p-1 rounded-sm bg-opacity-50 bg-slate-100 flex-grow'
+						>
+							<label class='grid grid-cols-2 items-center'>
+								Scale:
+								<input type='number'
+									placeholder='1'
+									bind:value={rule.scale}
+									on:change={updateRules} />
+							</label>
+							<label class='grid grid-cols-2 items-center'>
+								Tint:
+								<div class='flex h-6 items-center gap-1'>
+									<input class='w-24' type='color'
+										bind:value={rule.tint}
+										on:change={updateRules} />
+									<button
+										class='fa fa-refresh bg-button h-6 w-10'
+										on:click={() => { rule.tint = undefined; updateRules() }}
+									/>
+								</div>
+							</label>
+							<label class='grid grid-cols-2 items-center'>
+								Opacity / Alpha:
+								<input class="" type='number'
+									placeholder='1'
+									step='0.1' min='0.1' max='1'
+									bind:value={rule.alpha}
+									on:change={updateRules} />
+							</label>
 						</section>
 						<!-- #endregion -->
 					</div>
-					{#if dev}
-						<section class='col-span-2 border border-solid bg-gray-400 p-1 mt-2 opacity-75 overflow-auto'>
-							{JSON.stringify(rule)}
-						</section>
-					{/if}
 				</div>
 			{/each}
 			<button class='w-1/2 m-1' on:click={createRule}>