@pictogrammers/components 0.5.15 → 0.5.18

package/pg/nodes/__examples__/basic/basic.ts

@@ -0,0 +1,716 @@
+import { Component, Part, Local } from '@pictogrammers/element';
+import PgNodes from '../../nodes';
+
+import template from './basic.html';
+import PgNodeEditorText from 'components/pg/nodeEditorText/nodeEditorText';
+import PgNodeEditorRange from 'components/pg/nodeEditorRange/nodeEditorRange';
+import PgNodeEditorNumber from 'components/pg/nodeEditorNumber/nodeEditorNumber';
+import PgInputSelect from 'components/pg/inputSelect/inputSelect';
+import PgNodeEditorTextArray from 'components/pg/nodeEditorTextArray/nodeEditorTextArray';
+import PgNodeEditorLink from 'components/pg/nodeEditorLink/nodeEditorLink';
+import { KeyStore } from './keystore';
+
+@Component({
+  selector: 'x-pg-nodes-basic',
+  template,
+})
+export default class XPgNodesBasic extends HTMLElement {
+
+  @Part() $script: PgNodes;
+  @Part() $state: HTMLPreElement;
+  @Part() $log: HTMLPreElement;
+
+  @Part() $files: PgInputSelect;
+  @Part() $save: HTMLButtonElement;
+  @Part() $open: HTMLButtonElement;
+  @Part() $new: HTMLButtonElement;
+
+  @Part() $debug: HTMLButtonElement;
+  @Part() $debugNext: HTMLButtonElement;
+  @Part() $play: HTMLButtonElement;
+  @Part() $restart: HTMLButtonElement;
+  @Part() $fullscreen: HTMLButtonElement;
+
+  @Local('nodes.basic') store = new Map<string, any>([
+    ['list', []]
+  ]);
+
+  #state = new KeyStore();
+
+  connectedCallback() {
+    // State
+    this.#state.add({ name: '' });
+    // Wire up script
+    this.$script.state = this.#state;
+    this.$script.globals.push([
+      'trace',
+      (message) => {
+        this.$log.appendChild(document.createTextNode(`${message}\n`));
+      }
+    ]);
+    // Node Editors
+    this.$script.editors.push(PgNodeEditorText);
+    this.$script.editors.push(PgNodeEditorNumber);
+    this.$script.editors.push(PgNodeEditorRange);
+    this.$script.editors.push(PgNodeEditorTextArray);
+    this.$script.editors.push(PgNodeEditorLink);
+    // Node type registry
+    this.$script.nodes.push({
+      name: 'stateHas',
+      label: 'Has',
+      width: 6,
+      args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, key, t, f }: any) => {
+        return state.has(key) ? t : f;
+      },
+    }, {
+      name: 'stateAdd',
+      label: 'Add',
+      width: 6,
+      args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
+        key: 'value',
+        label: 'Value',
+        editor: 'Number',
+        value: 0,
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }],
+      handler: ({ state, key, node, then, value }: any) => {
+        const current = parseFloat(state.get(key) ?? 0);
+        state.set(key, current + value);
+        state.delete('$state');
+        return then;
+      },
+    }, {
+      name: 'link',
+      label: 'Link',
+      width: 6,
+      args: [{
+        key: 'link',
+        label: 'Link',
+        editor: 'Link',
+        value: 0,
+      }],
+      nodes: [],
+      handler: ({ state, link }: any) => {
+        return link;
+      },
+    }, {
+      name: 'stateSet',
+      label: 'Set',
+      width: 6,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Text',
+        value: '',
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }],
+      handler: ({ state, then, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before set');
+        }
+        const key = state.get('$state');
+        state.set(key, value);
+        state.delete('$state');
+        return then;
+      },
+    }, {
+      name: 'equals',
+      label: 'Equals',
+      width: 10,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Text',
+        value: '',
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before equals');
+        }
+        const key = state.get('$state');
+        if (state.get(key) === String(value)) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'lessThan',
+      label: 'Less Than',
+      width: 10,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Number',
+        value: 0,
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before lessThan');
+        }
+        const key = state.get('$state');
+        if (parseFloat(state.get(key)) < value) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'lessThanOrEqual',
+      label: 'Less Than or Equal',
+      width: 10,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Number',
+        value: 0,
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before lessThanOrEqual');
+        }
+        const key = state.get('$state');
+        if (parseFloat(state.get(key)) <= value) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'greaterThan',
+      label: 'Greater Than',
+      width: 10,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Number',
+        value: 0,
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before greaterThan');
+        }
+        const key = state.get('$state');
+        if (parseFloat(state.get(key)) > value) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'greaterThanOrEqual',
+      label: 'Greater Than or Equal',
+      width: 10,
+      args: [{
+        key: 'value',
+        label: 'Value',
+        editor: 'Number',
+        value: 0,
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f, value }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before greaterThanOrEqual');
+        }
+        const key = state.get('$state');
+        if (parseFloat(state.get(key)) >= value) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'log',
+      label: 'Log',
+      width: 12,
+      args: [{
+        key: 'message',
+        label: 'Message',
+        editor: 'Text',
+        value: '',
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }],
+      handler: ({ then, message }: any) => {
+        this.$log.appendChild(document.createTextNode(`${message}\n`));
+        return then;
+      },
+    }, {
+      name: 'coin',
+      label: 'Coin Flip',
+      args: [],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ t, f }: any) => {
+        return Math.random() < 0.5 ? t : f;
+      },
+    }, {
+      name: 'some',
+      label: 'Some',
+      width: 10,
+      args: [{
+        key: 'keys',
+        label: 'Keys',
+        editor: 'TextArray',
+        value: [''],
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, keys, t, f }: any) => {
+        return keys.some((key) => state.has(key)) ? t : f;
+      },
+    }, {
+      name: 'every',
+      label: 'Every',
+      width: 10,
+      args: [{
+        key: 'keys',
+        label: 'Keys',
+        editor: 'TextArray',
+        value: [''],
+      }],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, keys, t, f }: any) => {
+        return keys.every((key) => state.has(key)) ? t : f;
+      },
+    }, {
+      name: 'isTrue',
+      label: 'Is True',
+      width: 4,
+      args: [],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before isTrue');
+        }
+        const key = state.get('$state');
+        if (state.has(key) && state.get(key) === true) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'isFalse',
+      label: 'Is False',
+      width: 4,
+      args: [],
+      nodes: [{
+        key: 't',
+        label: 'True',
+      }, {
+        key: 'f',
+        label: 'False',
+      }],
+      handler: ({ state, t, f }: any) => {
+        if (!state.has('$state')) {
+          throw new Error('Missing get before isFalse');
+        }
+        const key = state.get('$state');
+        if (state.has(key) && state.get(key) === true) {
+          return t;
+        } else {
+          return f;
+        }
+      },
+    }, {
+      name: 'random',
+      label: 'Random',
+      width: 6,
+      args: [],
+      nodes: [{
+        key: 'options',
+        label: 'Options',
+      }],
+      handler: ({ state, options }: any) => {
+        if (!state.has('$random')) {
+          state.set('$random', []);
+          return options;
+        }
+        const values = state.get('$random');
+        if (values.length !== options.length) {
+          return [];
+        }
+        function weightedRandom<T extends { weight: string, then: number[] }>(items: T[]): T {
+          const totalWeight = items.reduce((sum, item) => sum + Number(item.weight), 0);
+          let random = Math.random() * totalWeight;
+
+          for (const item of items) {
+            random -= Number(item.weight);
+            if (random <= 0) return item;
+          }
+
+          return items[items.length - 1]; // fallback
+        }
+        state.delete('$random');
+        return weightedRandom(values).then;
+      },
+    }, {
+      name: 'randomOption',
+      label: 'Random Option',
+      width: 8,
+      args: [{
+        key: 'weight',
+        label: 'Weight',
+        editor: 'Number',
+        value: 1,
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }],
+      handler: ({ state, then, node, weight, options }: any) => {
+        if (!state.has('$random')) {
+          throw new Error('invalid node');
+        }
+        const values = state.get('$random');
+        values.push({
+          weight: weight ?? 0,
+          then,
+        });
+        return [node];
+      },
+    }, {
+      name: 'dialog',
+      label: 'Dialog',
+      width: 12,
+      args: [{
+        key: 'message',
+        label: 'Message',
+        editor: 'Text',
+        value: 'Hello',
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }, {
+        key: 'options',
+        label: 'Options',
+      }],
+      handler: ({ nodeId, state, message, then, options }: any) => {
+        if (!state.has('$dialog')) {
+          state.set('$dialog', []);
+          return [...options, nodeId, ...then];
+        }
+        const values = state.get('$dialog');
+        state.delete('$dialog');
+        return new Promise((resolve) => {
+          if (values.length) {
+            const options = values.map((v, i) => `${i}. ${v.message}`).join('\n');
+            const result = window.prompt(`${message}\n${options}`);
+            const value = values[parseInt(result || '0', 10)];
+            resolve(value.then);
+          } else {
+            window.alert(message);
+            resolve([]);
+          }
+        });
+      },
+    }, {
+      name: 'dialogOption',
+      label: 'Dialog Option',
+      width: 12,
+      args: [{
+        key: 'message',
+        label: 'Message',
+        editor: 'Text',
+        value: 'Reply',
+      }],
+      nodes: [{
+        key: 'then',
+        label: 'Then',
+      }],
+      handler: ({ state, then, message }: any) => {
+        if (!state.has('$dialog')) {
+          throw new Error('invalid node');
+        }
+        const values = state.get('$dialog');
+        values.push({
+          message: message ?? '',
+          then,
+        });
+        return [];
+      },
+    }, {
+      name: 'dialogSkip',
+      label: 'Dialog Skip',
+      width: 6,
+      args: [],
+      nodes: [],
+      handler: ({ state }: any) => {
+        if (!state.has('$dialog')) {
+          throw new Error('invalid node');
+        }
+        return [];
+      },
+    });
+    // Items
+    this.$script.items.push({
+      id: 0,
+      x: 2,
+      y: 2,
+      width: 12,
+      height: 4,
+      args: {
+        description: 'Basic example.',
+      },
+      nodes: {
+        then: [1],
+      },
+    });
+    this.$script.items.push({
+      id: 1,
+      x: 16,
+      y: 2,
+      node: 'lessThan',
+      args: {
+        key: 'health',
+        value: 5,
+      },
+      nodes: {
+        t: [2],
+        f: [3],
+      },
+    });
+    this.$script.items.push({
+      id: 2,
+      x: 30,
+      y: 2,
+      node: 'stateSet',
+      args: {
+        value: '10',
+      },
+      nodes: {
+        then: [4],
+      },
+    });
+    this.$script.items.push({
+      id: 3,
+      x: 30,
+      y: 10,
+      node: 'stateSet',
+      args: {
+        value: '20',
+      },
+      nodes: {
+        then: [4],
+      },
+    });
+    this.$script.items.push({
+      id: 4,
+      x: 44,
+      y: 8,
+      node: 'log',
+      args: {
+        message: "Health increased to ${state.get('health')}",
+      },
+      nodes: {
+        then: [],
+      },
+    });
+    this.$script.addEventListener('debug', this.#handleDebug.bind(this));
+    this.$script.addEventListener('change', this.#handleChange.bind(this));
+    this.$script.addEventListener('input', this.#handleInput.bind(this));
+    this.$debug.addEventListener('click', this.#handleButtonDebug.bind(this));
+    this.$debugNext.addEventListener('click', this.#handleDebugNext.bind(this));
+    this.$play.addEventListener('click', this.#handlePlay.bind(this));
+    this.$restart.addEventListener('click', this.#handleRestart.bind(this));
+    this.$save.addEventListener('click', this.#handleSave.bind(this));
+    this.$open.addEventListener('click', this.#handleOpen.bind(this));
+    this.$new.addEventListener('click', this.#handleNew.bind(this));
+    this.$files.addEventListener('change', this.#handleFilesChange.bind(this));
+    this.$fullscreen.addEventListener('click', this.#handleFullscreen.bind(this));
+    this.#initFiles();
+  }
+
+  #handleChange(_e: CustomEvent) {}
+
+  #handleInput(_e: CustomEvent) {}
+
+  #handleButtonDebug(_e: CustomEvent) {
+    this.$script.debug();
+  }
+
+  #handleDebug(e: any) {
+    const { state } = e.detail;
+    this.$state.replaceChildren(Array.from(state).map((args: string[]) => {
+      return `${args[0]} = ${args[1]}`;
+    }).join('\n'));
+  }
+
+  #handleDebugNext(_e: CustomEvent) {
+    this.$script.debugNext();
+  }
+
+  #handlePlay(_e: CustomEvent) {
+    this.$script.play();
+  }
+
+  #handleRestart(_e: CustomEvent) {
+    this.$script.restart();
+  }
+
+  #initFiles() {
+    const list = this.store.get('list');
+    list.forEach((value) => {
+      const items = JSON.parse(value);
+      const { description } = items[0].args;
+      this.$files.options.push({
+        label: description,
+        value: value,
+      });
+    });
+    if (list.length > 0) {
+      this.$files.value = list[0];
+    }
+  }
+
+  #handleSave(e: CustomEvent) {
+    const list = this.store.get('list');
+    const { description: newDescription } = this.$script.items[0].args;
+    // Search for index
+    const index = list.findIndex((value) => {
+      const items = JSON.parse(value);
+      const { description } = items[0].args;
+      return newDescription === description;
+    });
+    if (index === -1) {
+      list?.push(this.$script.json);
+    } else {
+      list[index] = this.$script.json;
+    }
+    this.store.set('list', list);
+    // update list
+    if (index === -1) {
+      this.$files.options.push({
+        label: newDescription,
+        value: this.$script.json,
+      });
+    } else {
+      this.$files.options.splice(index, 1, {
+        label: newDescription,
+        value: this.$script.json,
+      });
+    }
+    // select
+    this.$files.value = this.$script.json;
+  }
+
+  #handleOpen(e: CustomEvent) {
+    this.$script.json = this.$files.value;
+  }
+
+  #handleNew(e: CustomEvent) {
+    this.$script.json = '[{"id":0,"x":2,"y":2,"width":12,"height":4,"args":{"description":"New script"},"nodes":{"then":[]}}]'
+  }
+
+  #handleFilesChange(e: CustomEvent) {
+    this.$files.value = e.detail.value;
+    this.$script.json = e.detail.value;
+  }
+
+  #handleFullscreen() {
+
+    const handler = () => {
+      if (document.fullscreenElement) {
+        this.$script.style.setProperty('position', 'fixed');
+        this.$script.style.setProperty('top', '0');
+        this.$script.style.setProperty('bottom', '0');
+        this.$script.style.setProperty('left', '0');
+        this.$script.style.setProperty('right', '0');
+      } else {
+        this.$script.style.removeProperty('position');
+        this.$script.style.removeProperty('top');
+        this.$script.style.removeProperty('bottom');
+        this.$script.style.removeProperty('left');
+        this.$script.style.removeProperty('right');
+        document.body.removeEventListener("fullscreenchange", handler);
+      }
+    }
+    document.body.addEventListener("fullscreenchange", handler);
+
+    document.body.requestFullscreen();
+  }
+}