commit:1cdf51587e49325e72a6d2a750cdad6679234ee5
author:Chip Black
committer:Chip Black
date:Wed Oct 17 01:27:36 2018 -0500
parents:fc8cd864b16d749512ab1251507cae1fb8ab1535
Add event editing
diff --git a/index.html b/index.html
line changes: +3/-0
index a1234e9..0952667
--- a/index.html
+++ b/index.html
@@ -26,6 +26,9 @@
     <input name="title">
     <h2>Description</h2>
     <textarea name="description" class="flex-auto"></textarea>
+    <h2>Events</h2>
+    <div id="event-list"></div>
+    <button id="add-event">Add Event</button>
     <div class="hflex">
       <button id="editor-close">Close</button>
     </div>

diff --git a/src/editor.ts b/src/editor.ts
line changes: +74/-0
index b0530a9..c11a75a
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,4 +1,5 @@
 import { Cell } from './cell';
+import { GameEvent, GameEventType } from './event';
 
 export type EditorCallback = (cell: Cell) => void;
 
@@ -6,6 +7,7 @@ export default class Editor {
     container: HTMLDivElement
     titleRef: HTMLInputElement
     descriptionRef: HTMLTextAreaElement
+    eventListRef: HTMLDivElement
     cell: Cell
 
     onClose: (cell: Cell) => void
@@ -19,6 +21,10 @@ export default class Editor {
         this.titleRef = this.container.querySelector('[name=title]');
         this.descriptionRef = this.container.querySelector('[name=description]');
 
+        const addEventButton = document.getElementById('add-event');
+        addEventButton.addEventListener('click', this.addEventHandler.bind(this));
+        this.eventListRef = <HTMLDivElement>document.getElementById('event-list');
+
         const closeButton = document.getElementById('editor-close');
         closeButton.addEventListener('click', this.closeHandler.bind(this));
     }
@@ -27,10 +33,59 @@ export default class Editor {
         this.cell = cell;
         this.titleRef.value = cell.title;
         this.descriptionRef.value = cell.description;
+
+        while (this.eventListRef.firstChild)
+            this.eventListRef.removeChild(this.eventListRef.firstChild);
+
+        for (let [k, e] of cell.events) {
+            this.addEvent(e);
+        }
         this.container.classList.add('visible');
         this.titleRef.focus();
     }
 
+    addEventHandler() {
+        this.addEvent();
+    }
+
+    addEvent(event?: GameEvent) {
+        const eventForm = document.createElement('div');
+        eventForm.innerHTML = `
+            <h3>ID</h3>
+            <input name="id">
+            <h3>Type</h3>
+            <select name="type">
+                <option value="0">Enter</option>
+                <option value="1">Leave</option>
+                <option value="2">Random</option>
+                <option value="3">Action</option>
+            </select>
+            <h3>Title</h3>
+            <input name="title">
+            <h3>Script</h3>
+            <textarea name="script"></textarea>
+            <button name="delete">Delete Event</button>
+        `;
+        this.eventListRef.appendChild(eventForm);
+
+        const deleteButton = eventForm.querySelector('[name=delete]');
+        deleteButton.addEventListener('click', () => {
+            this.eventListRef.removeChild(eventForm);
+        });
+
+        if (!event) {
+            event = new GameEvent();
+        }
+        (<HTMLInputElement>eventForm.querySelector('[name=id]'))
+            .value = event.id;
+        (<HTMLSelectElement>eventForm.querySelector('[name=type]'))
+            .value = event.type.toString();
+        (<HTMLInputElement>eventForm.querySelector('[name=title]'))
+            .value = event.title;
+        (<HTMLTextAreaElement>eventForm.querySelector('[name=script]'))
+            .value = event.script;
+    }
+
     close() {
         this.closeHandler();
     }
@@ -38,6 +93,25 @@ export default class Editor {
     closeHandler() {
         this.cell.title = this.titleRef.value;
         this.cell.description = this.descriptionRef.value;
+
+        // We recreate all of the cell's events to make sure we remove any deleted ones
+        this.cell.events.clear();
+        for (let i = 0; i < this.eventListRef.children.length; i++) {
+            const eventForm = this.eventListRef.children[i];
+            const id = (<HTMLInputElement>eventForm.querySelector('[name=id]')).value;
+            const type = <GameEventType>parseInt((<HTMLInputElement>eventForm.querySelector('[name=type]')).value);
+            const title = (<HTMLInputElement>eventForm.querySelector('[name=title]')).value;
+            const script = (<HTMLInputElement>eventForm.querySelector('[name=script]')).value;
+
+            const e = new GameEvent();
+
+            e.id = id;
+            e.type = type;
+            e.title = title;
+            e.script = script;
+
+            this.cell.events.set(id, e);
+        }
         if (this.onClose) {
             this.onClose(this.cell);
             this.onClose = null;

diff --git a/src/event.ts b/src/event.ts
line changes: +9/-0
index d872397..ca1ed27
--- a/src/event.ts
+++ b/src/event.ts
@@ -1,3 +1,4 @@
+import { ID, generateID } from './id';
 import gs from './gamestate';
 
 export enum GameEventType {
@@ -11,10 +12,18 @@ export interface GameEventProperties {
 }
 
 export class GameEvent {
+    id: ID
     type: GameEventType
     script: string
     title: string
 
+    constructor() {
+        this.id = generateID();
+        this.type = GameEventType.Random;
+        this.script = '';
+        this.title = '';
+    }
+
     execute() {
         const f = new Function('gs', this.script)
         f(gs);

diff --git a/structure.css b/structure.css
line changes: +4/-0
index 3f3aaf1..f636dd5
--- a/structure.css
+++ b/structure.css
@@ -96,6 +96,10 @@ body {
 	font-size: 16px;
 }
 
+.sidebar h3 {
+	font-size: 16px;
+}
+
 #actions {
 	margin: 16px;
 }