<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>
import { Cell } from './cell';
+import { GameEvent, GameEventType } from './event';
export type EditorCallback = (cell: Cell) => void;
container: HTMLDivElement
titleRef: HTMLInputElement
descriptionRef: HTMLTextAreaElement
+ eventListRef: HTMLDivElement
cell: Cell
onClose: (cell: Cell) => void
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));
}
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();
}
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;
+import { ID, generateID } from './id';
import gs from './gamestate';
export enum GameEventType {
}
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);
font-size: 16px;
}
+.sidebar h3 {
+ font-size: 16px;
+}
+
#actions {
margin: 16px;
}