tag fixes, actions seqs forEach

averrin · Jul 2, 2022 · 9b72d5c · 9b72d5c
1 parent 547c0b4
commit 9b72d5c
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 35 deletions.
diff --git a/src/modules/stores.js b/src/modules/stores.js
@@ -1,37 +1,37 @@
-import {moduleId, SETTINGS} from '../constants.js';
+import { moduleId, SETTINGS } from '../constants.js';
 import { writable } from 'svelte/store';
-import {DSequence} from '../view/components/SequencerTab.js';
+import { DSequence } from '../view/components/SequencerTab.js';
 
 export const tokensStore = writable([]);
 export const tilesStore = writable([]);
 export const currentScene = writable(null);
 
 export const globalTags = writable([]);
 export function initGlobalTags() {
-    globalTags.set(JSON.parse(game.settings.get(moduleId, SETTINGS.GLOBAL_TAGS)));
-    globalTags.subscribe(async (tags) => {
-        game.settings.set(moduleId, SETTINGS.GLOBAL_TAGS, JSON.stringify(tags));
-    });
+  globalTags.set(JSON.parse(game.settings.get(moduleId, SETTINGS.GLOBAL_TAGS)));
+  globalTags.subscribe(async (tags) => {
+    game.settings.set(moduleId, SETTINGS.GLOBAL_TAGS, JSON.stringify(tags));
+  });
 }
 
 export const tagColors = writable({});
 export function initTagColors() {
-    tagColors.set(JSON.parse(game.settings.get(moduleId, SETTINGS.TAG_COLORS)));
-    tagColors.subscribe(async (colors) => {
-        game.settings.set(moduleId, SETTINGS.TAG_COLORS, JSON.stringify(colors));
-    });
+  tagColors.set(JSON.parse(game.settings.get(moduleId, SETTINGS.TAG_COLORS)));
+  tagColors.subscribe(async (colors) => {
+    game.settings.set(moduleId, SETTINGS.TAG_COLORS, JSON.stringify(colors));
+  });
 }
 
 export const sequences = writable([]);
 export function initSequences() {
-    sequences.set(JSON.parse(game.settings.get(moduleId, SETTINGS.SEQUENCES)).map(s => DSequence.fromPlain(s)));
-    sequences.subscribe(async (seqs) => {
-        game.settings.set(moduleId, SETTINGS.SEQUENCES, JSON.stringify(seqs));
-    });
+  sequences.set(JSON.parse(game.settings.get(moduleId, SETTINGS.SEQUENCES)).filter(s => s).map(s => DSequence.fromPlain(s)));
+  sequences.subscribe(async (seqs) => {
+    game.settings.set(moduleId, SETTINGS.SEQUENCES, JSON.stringify(seqs));
+  });
 }
 
 export function initStores() {
-    initGlobalTags();
-    initTagColors();
-    initSequences();
+  initGlobalTags();
+  initTagColors();
+  initSequences();
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -4,7 +4,7 @@
 @tailwind variants;
 
 #director.window-app {
-    min-width: 680px;
+    min-width: 820px;
 
     .window-content {
         padding: 0px;

diff --git a/src/view/MainApplication.js b/src/view/MainApplication.js
@@ -4,6 +4,7 @@ import { moduleId, SETTINGS } from "../constants.js";
 // import { logger } from "../modules/helpers.js";
 import { setting } from "../modules/settings.js";
 import { tilesStore, tokensStore, currentScene, initStores, sequences } from "../modules/stores.js";
+import { DSequence } from "./components/SequencerTab.js";
 
 import MainUI from "./MainUI.svelte";
 
@@ -52,7 +53,7 @@ export default class MainApplication extends SvelteApplication {
     initStores();
     window.Director = API;
 
-    API.getSequence = (name, overrides) => {
+    API.getSequence = async (name, overrides) => {
       let seq;
       sequences.update(seqs => {
         seq = seqs.find(s => s.title == name);
@@ -62,7 +63,8 @@ export default class MainApplication extends SvelteApplication {
         logger.error(`Sequence ${name} not found`);
         return null;
       } else {
-        const s_seq = seq.prepare(overrides);
+        const s_seq = await seq.prepare(overrides);
+        seq.reset();
         return s_seq;
       }
     };
@@ -85,6 +87,7 @@ export default class MainApplication extends SvelteApplication {
       if (!seq) {
         logger.error(`Sequence ${name} not found`);
       } else {
+        seq = DSequence.fromPlain(seq);
         return seq.play(overrides);
       }
     };

diff --git a/src/view/MainUI.svelte b/src/view/MainUI.svelte
@@ -74,7 +74,7 @@
    <main class="director-ui">
       <TagsBar {onTagClick} />
       <div class="ui-tabs ui-tabs-boxed">
-         {#each tabs as t}
+         {#each tabs as t (t.title)}
             <a class="ui-tab ui-tab-lg" on:click={() => (mode = t.mode)} class:ui-tab-active={t.mode == mode}>
                {t.title}
                {#if t.badge}
@@ -91,7 +91,7 @@
          <ActionsTab {onTagClick} onSelect={() => (mode = "selection")} />
       {/if}
       {#if mode == "sequencer"}
-         <SequencerTab />
+         <SequencerTab {onTagClick} />
       {/if}
    </main>
 </ApplicationShell>
diff --git a/src/view/components/ActionsTab.svelte b/src/view/components/ActionsTab.svelte
@@ -96,9 +96,11 @@
             });
             break;
          default:
-            const overrides = {};
-            overrides[action.value.name] = objects[0];
-            globalThis.Director.playSequence(action.type.id, overrides);
+            objects.map(async (o) => {
+               const overrides = {};
+               overrides[action.value.name] = o;
+               globalThis.Director.playSequence(action.type.id, overrides);
+            });
       }
    }
    async function actionTags(event, id) {

diff --git a/src/view/components/SequenceEditor.svelte b/src/view/components/SequenceEditor.svelte
@@ -17,6 +17,8 @@
    import FaExpandArrowsAlt from "svelte-icons/fa/FaExpandArrowsAlt.svelte";
    import FaCompressArrowsAlt from "svelte-icons/fa/FaCompressArrowsAlt.svelte";
 
+   export let onTagClick;
+
    const groupBy = (i) => i.group;
    const groupByCat = (i) => i.cat;
    async function stop() {
@@ -133,7 +135,7 @@
 
 {#if seq}
    {#each seq.variables as variable (variable.id)}
-      <VariableComponent {variable} on:remove={deleteVariable} on:change={updateVariable} />
+      <VariableComponent {variable} {onTagClick} on:remove={deleteVariable} on:change={updateVariable} />
    {/each}
    <div />
 
@@ -164,6 +166,7 @@
                            type={arg.type}
                            bind:value={seq.steps[index].args[i]}
                            on:change={(e) => setStepArg(e, item, i)}
+                           {onTagClick}
                         />
                      {/each}
                   {/if}
@@ -223,6 +226,7 @@
                               type={arg.type}
                               value={mod.args[i]}
                               on:change={(e) => setModArg(e, seq.steps[index], mod, i)}
+                              {onTagClick}
                            />
                         {/each}
                      {/if}

diff --git a/src/view/components/SequencerTab.js b/src/view/components/SequencerTab.js
@@ -13,6 +13,7 @@ export class DSequence {
     this.steps = [];
     this.variables = [];
   }
+
   async prepare(overrides) {
     overrides = overrides || {};
     for (const v of this.variables) {
@@ -22,6 +23,7 @@ export class DSequence {
     }
     return await this.constructSeq(this.steps);
   }
+
   reset() {
     this.onlySection = undefined;
     for (const v of this.variables) {
@@ -31,6 +33,7 @@ export class DSequence {
 
   async play(overrides) {
     overrides = overrides || {};
+    logger.info(`Starting sequence '${this.title}' with overriden ${Object.keys(overrides)}`);
     const sequence = await this.prepare(overrides);
     if (sequence) {
       logger.info("\t.play()");
@@ -108,12 +111,12 @@ export class DSequence {
         const args = await this.makeArgs(step);
         let currentStep = s[step.type](...args);
         if (step.type == "effect") {
-          logger.info(`\t.${step.type}()`);
-          currentStep = currentStep.origin(this.id);
-          logger.info(`\t\t.origin("${this.id}")`);
-          const name = args[0] || `${this.title}-${i}`;
-          currentStep = currentStep.name(name);
-          logger.info(`\t\t.name("${name}")`);
+          // logger.info(`\t.${step.type}()`);
+          // currentStep = currentStep.origin(this.id);
+          // logger.info(`\t\t.origin("${this.id}")`);
+          // const name = args[0] || `${this.title}-${i}`;
+          // currentStep = currentStep.name(name);
+          // logger.info(`\t\t.name("${name}")`);
         } else {
           logger.info(`\t.${step.type}(${args.join(", ")})`);
         }
@@ -150,6 +153,7 @@ export class DSequence {
   }
 
   toJSON() {
+    this.reset();
     return serialize(this);
   }
   static fromPlain(plain) {
@@ -172,6 +176,7 @@ export class Variable {
   }
 
   override(val) {
+    this.value = val;
     this.calcValue = val;
   }
 

diff --git a/src/view/components/SequencerTab.svelte b/src/view/components/SequencerTab.svelte
@@ -8,6 +8,7 @@
    import CopyToClipboard from "svelte-copy-to-clipboard";
    import FaRegCopy from "svelte-icons/fa/FaRegCopy.svelte";
 
+   export let onTagClick;
    let seq;
    const unsubscribe = sequences.subscribe((seqs) => {
       if (!seq) {
@@ -115,5 +116,5 @@
       </div>
    </div>
 
-   <SequenceEditor {seq} />
+   <SequenceEditor {seq} {onTagClick} />
 </div>
diff --git a/src/view/components/Tags.svelte b/src/view/components/Tags.svelte
@@ -33,6 +33,17 @@
    export let labelShow;
    export let colors = {};
 
+   function contrastColor(color) {
+      if (!color || color == "") return "#eeeeeeff";
+      const pRed = 0.299;
+      const pGreen = 0.587;
+      const pBlue = 0.114;
+      const rgb = foundry.utils.hexToRGB(parseInt(color.slice(1).substring(0, 6), 16));
+
+      const contrast = Math.sqrt(pRed * rgb[0] ** 2 + pGreen * rgb[1] ** 2 + pBlue * rgb[2] ** 2);
+      return contrast > 0.5 ? "#232323ff" : "#eeeeeeff";
+   }
+
    let layoutElement;
 
    $: tags = tags || [];
@@ -368,7 +379,8 @@
             draggable={true}
             on:dragstart={onDragStart}
             on:pointerdown={(e) => onTagClickHandler(e, tag)}
-            style="background-color: {colors[tag]}"
+            style:background-color={colors[tag]}
+            style:color={contrastColor(colors[tag])}
          >
             {#if typeof tag === "string"}
                {tag}

diff --git a/src/view/components/Variable.svelte b/src/view/components/Variable.svelte
@@ -8,6 +8,7 @@
    const dispatch = createEventDispatcher();
 
    export let variable;
+   export let onTagClick;
    function remove() {
       dispatch("remove", variable);
    }
@@ -44,7 +45,7 @@
    </label>
 
    <Select items={argSpecs} optionIdentifier="id" labelIdentifier="id" value={variable.type} on:select={updateType} />
-   <ArgInput type={variable.type} bind:value={variable.value} on:change={emitChange} />
+   <ArgInput {onTagClick} type={variable.type} bind:value={variable.value} on:change={emitChange} />
    <button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square ui-justify-self-end" on:click={remove}>
       <XIcon class="ui-h-8 ui-w-8" />
    </button>