V13 v1 alpha

lang/en.json

@@ -138,10 +138,6 @@
 			}
 		},
 		"settings": {
-			"cardsGone": {
-				"name": "Hide Cards Tab",
-				"hint": "Hides the cards tab, effectively making the animations tab replace it."
-			},
 			"volume": {
 				"name": "Animation Volume",
 				"hint": "Multiplies the volume of animations by a set amount. Does not override animations own volume settings."

module.json

@@ -1,7 +1,7 @@
 {
 	"id": "pf2e-graphics",
 	"title": "PF2e Graphics",
-	"version": "0.0.0",
+	"version": "1.0.0",
 	"description": "<i>Provides animations for the PF2e system.</i>",
 	"socket": true,
 	"esmodules": [
@@ -23,9 +23,9 @@
 		}
 	],
 	"compatibility": {
-		"minimum": "12.324",
-		"verified": "12.331",
-		"maximum": "12"
+		"minimum": "13.345",
+		"verified": "13.345",
+		"maximum": "13"
 	},
 	"flags": {
 		"pf2e-graphics": {

package.json

@@ -29,8 +29,8 @@
 		"symlink": "tsx ./scripts/symlink.ts"
 	},
 	"dependencies": {
-		"@typhonjs-fvtt/runtime": "^0.2.0",
-		"@typhonjs-fvtt/standard": "^0.2.1"
+		"@typhonjs-fvtt/runtime": "^0.3.0-next.2",
+		"@typhonjs-fvtt/standard": "^0.3.0-next.2"
 	},
 	"devDependencies": {
 		"@actions/core": "^1.11.1",

src/index.ts

@@ -1,14 +1,44 @@
+import { SvelteApplication } from '@typhonjs-fvtt/runtime/svelte/application';
+import { TJSPosition } from '@typhonjs-fvtt/runtime/svelte/store/position';
 import { writable } from 'svelte/store';
-import { initSettings } from './settings.ts';
+import { setupSettings } from './settings.ts';
 import { loadAnimations } from './storage/index.ts';
 import { registerTours } from './tours';
-import { i18n } from './utils.ts';
-import { initSidebar } from './view/AnimationSidebar/index.ts';
 
+import { i18n } from './utils.ts';
+import { setupSidebar } from './view/AnimationSidebar/index.ts';
 import './app.postcss';
 import './assets/index.ts';
 import './view/index.ts';
 
+// V13 TJS SHIM
+Object.defineProperty(SvelteApplication, 'defaultOptions', {
+	get: () => {
+		return foundry.utils.mergeObject(Application.defaultOptions, {
+			// Copied directly from TRL except for minWidth and minHeight
+			defaultCloseAnimation: true,
+			draggable: true,
+			focusAuto: true,
+			focusKeep: false,
+			focusSource: void 0,
+			focusTrap: true,
+			headerButtonNoClose: false,
+			headerButtonNoLabel: false,
+			headerIcon: void 0,
+			headerNoTitleMinimized: false,
+			minHeight: 50, // MIN_WINDOW_HEIGHT
+			minWidth: 200, // MIN_WINDOW_WIDTH
+			positionable: true,
+			positionInitial: TJSPosition.Initial.browserCentered,
+			positionOrtho: true,
+			positionValidator: TJSPosition.Validators.transformWindow,
+			sessionStorage: void 0,
+			svelte: void 0,
+			transformOrigin: 'top left',
+		}, { inplace: false });
+	},
+});
+
 Object.assign(window, {
 	pf2eGraphics: {
 		modules: writable(new Map()),
@@ -18,8 +48,8 @@ Object.assign(window, {
 });
 
 Hooks.once('setup', () => {
-	initSettings();
-	initSidebar();
+	setupSettings();
+	setupSidebar();
 });
 
 Hooks.once('pf2e.systemReady', () => {

src/settings.ts

@@ -16,7 +16,6 @@ let settings: TJSLiveGameSettings & {
 	delay: number;
 	jb2aMode: 'patreon' | 'free';
 	history: boolean;
-	cardsGone: true;
 	showHiddenRolls: boolean;
 };
 export type LiveSettings = typeof settings;
@@ -143,19 +142,6 @@ const settingsData = [
 			default: false,
 		},
 	},
-	{
-		namespace: 'pf2e-graphics',
-		key: 'cardsGone',
-		folder: 'PF2e Graphics',
-		options: {
-			name: 'pf2e-graphics.settings.cardsGone.name',
-			hint: 'pf2e-graphics.settings.cardsGone.hint',
-			scope: 'client',
-			config: true,
-			type: Boolean,
-			default: false,
-		},
-	},
 	{
 		namespace: 'pf2e-graphics',
 		key: 'history',
@@ -219,7 +205,7 @@ function conditionalSettings() {
 	] as const;
 }
 
-export function initSettings() {
+export function setupSettings() {
 	storeSettings.registerAll(settingsData, true);
 	storeSettings.registerAll(conditionalSettings(), true);
 

src/view/AnimationHistory/index.ts

@@ -1,6 +1,6 @@
 import AnimationHistoryApp from './AnimationHistoryApp';
 
-Hooks.on('getSceneControlButtons', (controls: any[]) => {
+Hooks.on('getSceneControlButtons', (controls: any) => {
 	if (
 		!window.pf2eGraphics.liveSettings.history
 		&& !game.user.isGM
@@ -16,6 +16,5 @@ Hooks.on('getSceneControlButtons', (controls: any[]) => {
 		onClick: () => AnimationHistoryApp.show(),
 	};
 
-	const bar = controls.find(c => c.name === 'token');
-	bar.tools.push(history);
+	controls.tokens.tools.animationhistory = history;
 });

src/view/AnimationSidebar/Sidebar.svelte

@@ -69,8 +69,7 @@
 		/>
 	</div>
 </header>
-<!-- Load bearing height style. Don't ask. -->
-<div class='inline-flex flex-col h-1'>
+<div class='inline-flex flex-col'>
 	<ol
 		id='pf2e-graphics-custom-sets'
 		class:grow={!$search}
@@ -84,11 +83,12 @@
 			</li>
 		{/each}
 	</ol>
-	<ol id='pf2e-graphics-bundled-sets' class='m-0 p-0 max-h-[50%]'>
+	<ol id='pf2e-graphics-bundled-sets' class='m-0 p-0 max-h-[50%] flex flex-col'>
 		<header
 			role='tree'
 			tabindex='0'
-			class='p-2 leading-6 bg-red-900 h-10'
+			class='p-2 leading-6 bg-red-900 h-10 border-red-600/50 border-0 border-solid'
+			class:border-b={showModuleAnimations}
 			on:click={() => (showModuleAnimations = !showModuleAnimations)}
 			on:keypress={() => (showModuleAnimations = !showModuleAnimations)}
 		>

src/view/AnimationSidebar/index.ts

@@ -1,28 +1,19 @@
-/* eslint-disable ts/ban-ts-comment */
 import { FVTTSidebarControl } from '@typhonjs-fvtt/standard/application/control/sidebar';
 import AnimationSidebar from './Sidebar.svelte';
 
-export function initSidebar() {
+export function setupSidebar() {
 	FVTTSidebarControl.add({
 		id: 'graphics',
 		beforeId: 'cards',
 		icon: 'fas fa-films',
 		tooltip: 'pf2e-graphics.sidebar.animationSets.tooltip',
 		title: 'pf2e-graphics.sidebar.animationSets.title',
-		// @ts-ignore Fixed in the next update
-		classes: ['flexcol directory pf2e-g'],
 		svelte: {
 			class: AnimationSidebar,
 		},
 	});
 
 	FVTTSidebarControl.wait().then(() => {
-		$('.graphics-sidebar').addClass('flexcol directory pf2e-g');
+		$('.graphics-sidebar').addClass('pf2e-g');
 	});
 }
-
-Hooks.once('renderSidebar', () => {
-	const noCards = window.pf2eGraphics.liveSettings.cardsGone;
-	if (!noCards) return;
-	$('.item[data-tab=cards]').addClass('pf2e-g hidden');
-});

src/view/VolumeControls/VolumeControls.svelte

@@ -18,27 +18,25 @@
 	}
 </script>
 
-<div class='pf2e-g'>
-	<li
-		id='pf2e-graphics-volume-slider'
-		class='sound flexrow bg-purple-400/25 rounded-sm'
-		data-tooltip='pf2e-graphics.sidebar.playlists.volumeSlider.tooltip'
-	>
-		<h4>{i18n('pf2e-graphics.sidebar.playlists.volumeSlider.title')}</h4>
-		<i class='volume-icon fas fa-volume-down'></i>
-		<input
-			bind:this={element}
-			bind:value={$volume}
-			on:mouseenter={() => (toggle = true)}
-			on:mouseout={() => (toggle = false)}
-			on:blur={() => (toggle = false)}
-			class='animations-volume-slider'
-			name='animationsVolume'
-			type='range'
-			min='0'
-			max='2'
-			step='0.05'
-			aria-label='Animations'
-		/>
-	</li>
-</div>
+<li
+	class='flexrow bg-purple-400/25 rounded-sm'
+	data-tooltip='pf2e-graphics.sidebar.playlists.volumeSlider.tooltip'
+>
+	<label for='animationsVolume' style:flex='1'>{i18n('pf2e-graphics.sidebar.playlists.volumeSlider.title')}</label>
+	<i class='volume-icon fas fa-volume-down inert'></i>
+	<input
+		style:flex='2'
+		bind:this={element}
+		bind:value={$volume}
+		on:mouseenter={() => (toggle = true)}
+		on:mouseout={() => (toggle = false)}
+		on:blur={() => (toggle = false)}
+		class='globalAnimationsVolume'
+		name='animationsVolume'
+		type='range'
+		min='0'
+		max='2'
+		step='0.05'
+		aria-label='Animations'
+	/>
+</li>

src/view/VolumeControls/index.ts

@@ -1,7 +1,7 @@
 import VolumeControls from './VolumeControls.svelte';
 
-const renderPlaylistDirectory = Hooks.on('renderPlaylistDirectory', (document: any, html: JQuery<HTMLElement>) => {
-	const playlistSounds = html[0].getElementsByClassName('playlist-sounds')?.[0];
+const renderPlaylistDirectory = Hooks.on('renderPlaylistDirectory', (document: any, html: HTMLElement) => {
+	const playlistSounds = html.getElementsByClassName('plain')?.[0];
 
 	if (playlistSounds) document.pf2eGraphics = new VolumeControls({ target: playlistSounds });
 });

vite.config.ts

@@ -19,6 +19,8 @@ import { getJSONSchema } from './scripts/buildJSONSchema';
 import { Log, pluralise } from './scripts/helpers';
 import { testAndMergeAnimations } from './scripts/testAndMergeAnimations';
 
+const foundryPort = 40000;
+const devPort = 30001;
 const packagePath = `modules/${moduleJSON.id}`;
 const cssId = 'pf2e-g';
 
@@ -89,22 +91,23 @@ export default defineConfig(({ mode }) => ({
 
 	server: {
 		open: '/join',
-		port: 30001,
+		strictPort: true,
+		port: devPort,
 		proxy: {
 			// Serves static files from main Foundry server.
-			[`^(/${packagePath}/(assets|lang|packs|${skippedFiles}))`]: 'http://localhost:30000',
+			[`^(/${packagePath}/(assets|lang|packs|${skippedFiles}))`]: `http://localhost:${foundryPort}`,
 
 			// All other paths besides package ID path are served from main Foundry server.
-			[`^(?!/${packagePath}/)`]: 'http://localhost:30000',
+			[`^(?!/${packagePath}/)`]: `http://localhost:${foundryPort}`,
 
 			// Rewrite incoming `module-id.js` request from Foundry to the dev server `index.ts`.
 			[`/${packagePath}/dist/${moduleJSON.id}.js`]: {
-				target: `http://localhost:30001/${packagePath}/dist`,
+				target: `http://localhost:${devPort}/${packagePath}/dist`,
 				rewrite: () => '/index.ts',
 			},
 
 			// Enable socket.io from main Foundry server.
-			'/socket.io': { target: 'ws://localhost:30000', ws: true },
+			'/socket.io': { target: `ws://localhost:${foundryPort}`, ws: true },
 		},
 	},