commit:fc8cd864b16d749512ab1251507cae1fb8ab1535
author:Chip Black
committer:Chip Black
date:Wed Oct 17 00:20:07 2018 -0500
parents:a379b9d80514eb163118ec6e992c03dc36f04670
Add action buttons
diff --git a/index.html b/index.html
line changes: +4/-1
index b9b20a0..a1234e9
--- a/index.html
+++ b/index.html
@@ -16,7 +16,10 @@
     </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>

diff --git a/src/actions.ts b/src/actions.ts
line changes: +27/-0
index 0000000..4861fd7
--- /dev/null
+++ b/src/actions.ts
@@ -0,0 +1,27 @@
+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);
+    }
+}

diff --git a/src/event.ts b/src/event.ts
line changes: +16/-2
index 54c44b1..d872397
--- a/src/event.ts
+++ b/src/event.ts
@@ -1,7 +1,10 @@
+import gs from './gamestate';
+
 export enum GameEventType {
     Enter,
     Leave,
     Random,
+    Action,
 }
 
 export interface GameEventProperties {
@@ -9,11 +12,22 @@ 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) {
     }
 }

diff --git a/src/gamestate.ts b/src/gamestate.ts
line changes: +19/-4
index 59d1025..a9e75c0
--- a/src/gamestate.ts
+++ b/src/gamestate.ts
@@ -2,9 +2,10 @@ import GameMap from './map';
 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';
 
@@ -30,6 +31,7 @@ class GameState {
     textView: TextView;
     editor: Editor;
     mapView: MapView;
+    actions: Actions;
     editMode: boolean = true;
 
     init() {
@@ -47,8 +49,9 @@ class GameState {
         this.editor = new Editor();
         this.mapView = new MapView();
         this.mapView.updateAll();
+        this.actions = new Actions();
 
-        this.showCellText();
+        this.enterCell();
     }
 
     print(...args: string[]) {
@@ -62,15 +65,27 @@ class GameState {
 
     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());
+        }
     }
 }
 

diff --git a/src/map.ts b/src/map.ts
line changes: +1/-1
index e4faba2..e35b4ec
--- a/src/map.ts
+++ b/src/map.ts
@@ -106,7 +106,7 @@ export default class GameMap extends Storable {
 
     editDescription() {
         gs.editor.onClose = (cell: Cell) => {
-            gs.showCellText();
+            gs.enterCell();
         };
         gs.editor.open(this.getCurrentCell());
     }

diff --git a/structure.css b/structure.css
line changes: +27/-2
index eb18bca..3f3aaf1
--- a/structure.css
+++ b/structure.css
@@ -2,6 +2,7 @@ body {
 	background-color: black;
 	color: white;
 	margin: 0;
+	font: 16px "Modern DOS 437";
 }
 
 .full {
@@ -45,7 +46,6 @@ body {
 	position: absolute;
 	top: 6px;
 	left: 4px;
-	font: 16px "Modern DOS 437";
 }
 
 #mapview td {
@@ -77,7 +77,6 @@ body {
 #text {
 	border: 1px solid yellow;
 	padding: 16px;
-	font: 16px "Modern DOS 437";
 }
 
 #editor-container {
@@ -96,3 +95,29 @@ body {
 .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;
+}