Creating Single Macros

src/syrin/components/MacroManager.svelte

@@ -95,10 +95,10 @@
 		let selectedMoods = Array.from(filteredSelectedSoundsets.values())
 			.filter((id) => id.includes(';'))
 			.map((id) => id.split(';'));
-		const folder = await Folder.create({
-			name: 'Syrinscape Soundsets',
-			type: 'Macro'
-		});
+		// const folder = await Folder.create({
+		// 	name: 'Syrinscape Soundsets',
+		// 	type: 'Macro'
+		// });
 		let folders = new Map();
 		for (const entry of selectedMoods) {
 			const [soundsetId, moodId] = entry;
@@ -112,26 +112,15 @@
 				ssFolder = await Folder.create({
 					name: soundset.name,
 					type: 'Macro',
-					parent: folder.id
+					// parent: folder.id
 				});
 				folders.set(soundset.id, ssFolder);
 			}
-			const commandArg = JSON.stringify({
-				soundset: {
-					id: soundset.id,
-					name: soundset.name
-				},
-				mood: mood
-			});
-			const macro = await Macro.create({
-				name: mood.name,
-				type: 'script',
-				folder: ssFolder.id,
-				img: 'icons/svg/sound.svg',
-				command: 'game.syrinscape.playMood(' + commandArg + ')'
-			});
+			ctx.game.createMoodMacro(soundset, mood, ssFolder.id);
 		}
-		ctx.game.notifyInfo(`SyrinControl | Created macro folder "${folder.name}"`)
+		Array.from(folders.values()).forEach((folder) => {
+			ctx.game.notifyInfo(`SyrinControl | Created macro folder "${folder.name}"`)
+		});
 	}
 
 	// Utils
@@ -161,7 +150,7 @@
 			<th class="actions-cell-header"></th>
 		</tr>
 		{#each soundsetsList as item, idx}
-			<MMSoundset {item} {filteredSelectedSoundsets} on:expand={onExpand(item)} />
+			<MMSoundset {item} {filteredSelectedSoundsets} on:expand={onExpand(item)}  />
 		{/each}
 	</table>
 	</div>

src/syrin/components/Playlist.svelte

@@ -237,8 +237,8 @@
 				<Toggable
 					on:click={openMM}
 					toggled={false}
-					on={['Macro Manager', 'terminal']}
-					off={['Macro Manager', 'terminal']}
+					on={['Open Soundset Search', 'music']}
+					off={['Open Soundset Search', 'music']}
 					disabled={false}
 				/>
 

src/syrin/components/macromanager/MMMood.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+  import type { Mood, Soundset } from '@/models';
+	import Context from '@/services/context';
+	import Toggable from '@/components/Toggable.svelte';
+
+	// Context
+	const ctx = Context();
+	const managerApp = ctx.stores.macroManagerApp;
+	const dispatcher = createEventDispatcher();
+  const current = ctx.stores.currentlyPlaying;
+
+  // Params & State
+  export let soundset: Soundset;
+  export let mood: Mood;
+  export let filteredSelectedSoundsets: Set<string>;
+
+  let isPlaying = false;
+
+  // Reactive Blocks
+  const reactiveIsPlaying = (current, mood) => {
+      ctx.utils.trace("MMMood | Is Playing Reaction | is = ", { isPlaying });
+      isPlaying = ctx.stores.isPlaying(mood);
+      ctx.utils.trace("MMMood | Is Playing Reaction | is = ", { isPlaying });
+  };
+
+  $: reactiveIsPlaying($current, mood);
+
+  // Event handlers
+	function onSelectMood(event) {
+		const key = soundset.id + ';' + mood.id;
+			if (event.target.checked) {
+				$managerApp.selectedSoundsets.add(key);
+			} else {
+				$managerApp.selectedSoundsets.delete(key);
+			}
+			$managerApp = $managerApp;
+	}
+
+	async function onPlayMood() {
+		if(isPlaying) {
+			await ctx.syrin.stopAll();
+		}
+    else {
+  		await ctx.syrin.setMood(soundset, mood);
+    }
+	}
+
+  async function onCreateMacro() {
+    const macro = await ctx.game.createMoodMacro(soundset, mood, undefined);
+		ctx.game.notifyInfo(`SyrinControl | Created macro "${macro.name}"`)
+  }
+</script>
+
+<tr class="mood">
+	<td>
+	<input
+		type="checkbox"
+		on:click={onSelectMood}
+		checked={filteredSelectedSoundsets.has(soundset.id + ';' + mood.id)}
+	/>
+	</td>
+	<td>
+	<span class="name">
+		{mood.name}
+	</span>
+	</td>
+	<td class="actions-cell">
+		<span class="macro-icon" role="button" title="Create Macro" on:click={onCreateMacro}>
+			<i class="fas fa-terminal" />
+		</span>
+		<Toggable 
+			on:click={onPlayMood}
+			toggled={isPlaying}
+			on={['Stop Mood', 'stop']}
+			off={['Play Mood', 'play']}
+		/>
+	</td>
+</tr>
+
+<style>
+	.mood > td >  .name {
+		padding-left: 2em;
+	}
+	.checkbox-cell {
+		text-align: left;
+	}
+	.actions-cell {
+		text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 2em;
+	}
+  .actions-cell .macro-icon {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+</style>

src/syrin/components/macromanager/MMSoundset.svelte

@@ -3,6 +3,8 @@
 	import type { Mood, Soundset } from '@/models';
 	import Context from '@/services/context';
 	import Toggable from '@/components/Toggable.svelte';
+	import MMMood from './MMMood.svelte';
+	import { openElements } from '@/ui/elements';
 
 	// Context
 	const ctx = Context();
@@ -18,6 +20,7 @@
 	let isSoundsetPartiallyChecked = false;
 	let soundsetCheckboxTitle: string = "";
 	let soundsetButtonTitle: string = "";
+	let loading = false;
 
 	// Reactive Blocks
 	const reactiveIsSoundsetChecked = (filteredSelectedSoundsets, item) => {
@@ -34,16 +37,21 @@
 	const reactiveButtonTitle = (expanded, item) => {
 		soundsetButtonTitle = (expanded ? 'Collapse: ' : 'Expand: ') + item.name;
 	};
+	const reactiveLoading = (item) => {
+		loading = false;
+	};
 
 	$: reactiveIsSoundsetChecked(filteredSelectedSoundsets, item);
 	$: reactiveIsSoundsetPartiallyChecked(isSoundsetChecked, item, filteredSelectedSoundsets);
 	$: reactiveSoundsetCheckboxTitle(isSoundsetChecked, item);
 	$: reactiveButtonTitle(expanded, item);
+  $: reactiveLoading(item);
 
 	// Event handlers
 	function onExpand() {
 		expanded = !expanded;
 		if (expanded) {
+			loading = true;
 			dispatcher('expand', item);
 		}
 	}
@@ -61,34 +69,13 @@
 		dispatcher('expand', item);
 	}
 
-	function onSelectMood(mood: Mood) {
-		const key = item.id + ';' + mood.id;
-		return function (event) {
-			if (event.target.checked) {
-				$managerApp.selectedSoundsets.add(key);
-			} else {
-				$managerApp.selectedSoundsets.delete(key);
-			}
-			$managerApp = $managerApp;
-		};
-	}
-
-	function onPlayMood(mood: Mood) {
-		if(mood === undefined || isPlaying(mood, $current.mood)) {
-			return async function () {
-				await ctx.syrin.stopAll();
-			};
-		}
-		return async function () {
-			await ctx.syrin.setMood(item, mood);
-		};
-	}
-	// Utils
-	function isPlaying(m: Mood | undefined, current: Mood | undefined) {
-		if (!current) return false;
-
-		return current?.id === m?.id;
-	}
+  async function onSoundsetElements() {
+    ctx.stores.elementsApp.update(p => {
+      p.addTab({ soundset: item, kind: 'soundset' });
+      return p;
+    });
+    openElements(ctx);
+  }
 </script>
 
 <tr class="soundset">
@@ -104,41 +91,25 @@
 	<td>
 	<span role="button" title={soundsetButtonTitle} on:click={onExpand}>
 		{item.name}
+		{#if loading}
+				(Loading ...)
+		{/if}
 	</span>
 	</td>
-	<td></td>
+	<td class="actions-cell">
+		<span role="button" title="Soundset Elements" on:click={onSoundsetElements}>
+			<i class="fas fa-drum" />
+		</span>
+
+	</td>
 </tr>
 	{#if expanded}
 		{#each item.moods as mood}
-			<tr class="mood">
-				<td>
-				<input
-					type="checkbox"
-					on:click={onSelectMood(mood)}
-					checked={filteredSelectedSoundsets.has(item.id + ';' + mood.id)}
-				/>
-				</td>
-				<td>
-				<span class="name">
-					{mood.name}
-				</span>
-				</td>
-				<td class="actions-cell">
-					<Toggable 
-						on:click={onPlayMood(mood)}
-						toggled={mood.isPlaying}
-						on={['Stop Mood', 'stop']}
-						off={['Play Mood', 'play']}
-					/>
-				</td>
-			</tr>
+			<MMMood soundset={item} mood={mood} filteredSelectedSoundsets={filteredSelectedSoundsets}/>
 		{/each}
 	{/if}
 
 <style>
-	.mood > td >  .name {
-		padding-left: 2em;
-	}
 	.checkbox-cell {
 		text-align: left;
 	}

src/syrin/services/game.ts

@@ -1,6 +1,7 @@
 /// <reference types="@league-of-foundry-developers/foundry-vtt-types" />
 import { injectable } from 'tsyringe';
 import { MODULE } from './utils';
+import type { Soundset, Mood } from '@/types';
 
 export interface Global {
 	playElement(id: number): Promise<void>;
@@ -72,6 +73,24 @@ export class FVTTGameImpl implements FVTTGame {
 	setSetting<T>(name: string, t: T) {
 		this.game.settings.set(MODULE, name, t);
 	}
+
+	async createMoodMacro(soundset: Soundset, mood: Mood, folder) {
+		const commandArg = JSON.stringify({
+			soundset: {
+				id: soundset.id,
+				name: soundset.name
+			},
+			mood
+		});
+		const macro = await Macro.create({
+			name: mood.name,
+			type: 'script',
+			folder: folder,
+			img: 'icons/svg/sound.svg',
+			command: 'game.syrinscape.playMood(' + commandArg + ')'
+		});
+		return macro;
+	}
 }
 
 export function getGame(): Game {

src/syrin/services/stores.ts

@@ -79,7 +79,7 @@ export class Stores {
 		if (!soundsetId) return {};
 		if (!soundsets[soundsetId]) return {};
 
-		this.utils.trace('Select | Get Moods | soundset = ', soundsets[soundsetId]);
+		this.utils.trace('Stores | Get Moods | soundset = ', soundsets[soundsetId]);
 
 		let moods = soundsets[soundsetId].moods;
 		if (Object.keys(moods).length === 0) {
@@ -96,14 +96,22 @@ export class Stores {
 		if (!soundsets) return [];
 		if (!soundsets[soundsetId]) return [];
 
-		this.utils.trace('Select | Get Soundset Elements | soundset = ', soundsets[soundsetId]);
+		this.utils.trace('Stores | Get Soundset Elements | soundset = ', soundsets[soundsetId]);
 
 		const elements = soundsets[soundsetId].elements;
 		if (elements.length === 0) {
 			return await this.api.onlineElements(soundsetId);
 		}
 		return elements;
 	}
+
+	isPlaying(mood: Mood | undefined) {
+		const current = get(this.currentlyPlaying);
+		this.utils.trace('Stores | Is Playing', { current, mood });
+		if (!current) return false;
+
+		return current?.mood?.id === mood?.id;
+	}
 }
 
 export interface MoodStore {

src/syrin/ui/macromanager.ts

@@ -8,7 +8,7 @@ export class MacroManagerApplication extends Dialog {
 	constructor(context: Context, dialog: Partial<Dialog.Options> = {}) {
 		super(
 			{
-				title: 'Syrinscape: Macro Manager',
+				title: 'Syrinscape Online',
 				content: '',
 				buttons: {},
 				default: ''