</div>
<div id="visual" class="flex-auto"></div>
</div>
- <div id="text" class="flex-auto"></div>
+ <div class="vflex flex-auto">
+ <div id="text" class="flex-auto"></div>
+ <div id="actions"></div>
+ </div>
<div id="editor-container" class="vflex sidebar">
<h1>Cell Editor</h1>
<h2>Title</h2>
+type ActionCallback = (data: any) => void
+
+export default class Actions {
+ elem: HTMLDivElement
+
+ constructor() {
+ this.elem = <HTMLDivElement>document.getElementById('actions');
+ this.clear();
+ }
+
+ clear() {
+ while (this.elem.firstChild)
+ this.elem.removeChild(this.elem.firstChild);
+ }
+
+ addAction(title: string, callback: ActionCallback, data?: any) {
+ const button = document.createElement('button');
+ button.innerText = title;
+ button.addEventListener('click', this.eventHandler.bind(this, callback, data));
+ this.elem.appendChild(button);
+ }
+
+ eventHandler(callback: ActionCallback, data: any) {
+ if (callback)
+ callback(data);
+ }
+}
+import gs from './gamestate';
+
export enum GameEventType {
Enter,
Leave,
Random,
+ Action,
}
export interface GameEventProperties {
export class GameEvent {
type: GameEventType
+ script: string
+ title: string
+
+ execute() {
+ const f = new Function('gs', this.script)
+ f(gs);
+ }
+
+ getCallback() {
+ return this.execute.bind(this);
+ }
- saveProperties() : GameEventProperties {
+ store() : GameEventProperties {
return {};
}
- loadProperties(properties: GameEventProperties) {
+ load(properties: GameEventProperties) {
}
}
import Editor, { EditorCallback } from './editor';
import MapView from './mapview';
import TextView from './textview';
+import Actions from './actions';
import { ID } from './id';
-import { GameEvent } from './event';
+import { GameEvent, GameEventType } from './event';
import { GameObject } from './object';
import { GameAgent } from './agent';
textView: TextView;
editor: Editor;
mapView: MapView;
+ actions: Actions;
editMode: boolean = true;
init() {
this.editor = new Editor();
this.mapView = new MapView();
this.mapView.updateAll();
+ this.actions = new Actions();
- this.showCellText();
+ this.enterCell();
}
print(...args: string[]) {
movePlayer(x: number, y: number) {
this.map.movePlayer(x, y);
- this.showCellText();
+ this.enterCell();
}
- showCellText() {
+ enterCell() {
const cell = this.map.getCurrentCell();
gs.textView.clear();
gs.textView.print("You have entered the", cell.title);
gs.textView.print();
gs.textView.print(cell.description);
+
+ this.actions.clear();
+ for (let [k, e] of cell.events) {
+ if (e.type == GameEventType.Action) {
+ this.actions.addAction(e.title, e.getCallback());
+ }
+ }
+
+ if (this.editMode) {
+ this.actions.addAction('Toggle Navigable', () => this.map.toggleNavigable());
+ this.actions.addAction('Edit Cell', () => this.map.editDescription());
+ }
}
}
editDescription() {
gs.editor.onClose = (cell: Cell) => {
- gs.showCellText();
+ gs.enterCell();
};
gs.editor.open(this.getCurrentCell());
}
background-color: black;
color: white;
margin: 0;
+ font: 16px "Modern DOS 437";
}
.full {
position: absolute;
top: 6px;
left: 4px;
- font: 16px "Modern DOS 437";
}
#mapview td {
#text {
border: 1px solid yellow;
padding: 16px;
- font: 16px "Modern DOS 437";
}
#editor-container {
.sidebar h2 {
font-size: 16px;
}
+
+#actions {
+ margin: 16px;
+}
+
+#actions button {
+ width: calc(25% - 8px);
+ margin: 4px;
+ padding: 4px;
+ font: 16px "Modern DOS 437";
+ background-color: black;
+ color: white;
+ border: 1px solid white;
+}
+
+#actions button:hover, #actions button:focus {
+ width: calc(25% - 6px);
+ border: 3px double white;
+ margin: 3px;
+ padding: 3px;
+}
+
+#actions button:active {
+ background-color: white;
+ color: black;
+}