commit:a379b9d80514eb163118ec6e992c03dc36f04670
author:Chip Black
committer:Chip Black
date:Tue Oct 16 01:50:47 2018 -0500
parents:ac0c20c146753964a11368f63a64402ac30765d7
Expand editor capabilities
diff --git a/index.html b/index.html
line changes: +6/-2
index 6439f63..b9b20a0
--- a/index.html
+++ b/index.html
@@ -17,8 +17,12 @@
     <div id="visual" class="flex-auto"></div>
   </div>
   <div id="text" class="flex-auto"></div>
-  <div id="editor-container" class="vflex">
-    <textarea id="editor" class="flex-auto"></textarea>
+  <div id="editor-container" class="vflex sidebar">
+    <h1>Cell Editor</h1>
+    <h2>Title</h2>
+    <input name="title">
+    <h2>Description</h2>
+    <textarea name="description" class="flex-auto"></textarea>
     <div class="hflex">
       <button id="editor-close">Close</button>
     </div>

diff --git a/src/editor.ts b/src/editor.ts
line changes: +23/-10
index f491d4a..b0530a9
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,24 +1,34 @@
+import { Cell } from './cell';
+
+export type EditorCallback = (cell: Cell) => void;
+
 export default class Editor {
-    elem: HTMLTextAreaElement
-    container: HTMLDivElement;
-    onClose: (elem: HTMLTextAreaElement) => void
+    container: HTMLDivElement
+    titleRef: HTMLInputElement
+    descriptionRef: HTMLTextAreaElement
+    cell: Cell
 
-    constructor() {
-        this.elem = document.getElementById('editor') as HTMLTextAreaElement;
+    onClose: (cell: Cell) => void
 
-        this.container = document.getElementById('editor-container') as HTMLDivElement;
+    constructor() {
+        this.container = <HTMLDivElement>document.getElementById('editor-container');
         this.container.addEventListener('keydown', function(e: KeyboardEvent) {
             e.cancelBubble = true;
         });
 
+        this.titleRef = this.container.querySelector('[name=title]');
+        this.descriptionRef = this.container.querySelector('[name=description]');
+
         const closeButton = document.getElementById('editor-close');
         closeButton.addEventListener('click', this.closeHandler.bind(this));
     }
 
-    open(initialText: string = '') {
-        this.elem.value = initialText;
+    open(cell: Cell) {
+        this.cell = cell;
+        this.titleRef.value = cell.title;
+        this.descriptionRef.value = cell.description;
         this.container.classList.add('visible');
-        this.elem.focus();
+        this.titleRef.focus();
     }
 
     close() {
@@ -26,8 +36,11 @@ export default class Editor {
     }
 
     closeHandler() {
+        this.cell.title = this.titleRef.value;
+        this.cell.description = this.descriptionRef.value;
         if (this.onClose) {
-            this.onClose(this.elem);
+            this.onClose(this.cell);
+            this.onClose = null;
         }
         this.container.classList.remove('visible');
     }

diff --git a/src/gamestate.ts b/src/gamestate.ts
line changes: +2/-6
index 1fbefb3..59d1025
--- a/src/gamestate.ts
+++ b/src/gamestate.ts
@@ -1,5 +1,5 @@
 import GameMap from './map';
-import Editor from './editor';
+import Editor, { EditorCallback } from './editor';
 import MapView from './mapview';
 import TextView from './textview';
 
@@ -51,11 +51,6 @@ class GameState {
         this.showCellText();
     }
 
-    edit(initialText: string, callback: (elem: HTMLTextAreaElement) => void) {
-        this.editor.onClose = callback;
-        this.editor.open(initialText);
-    }
-
     print(...args: string[]) {
         this.textView.print(...args);
     }
@@ -74,6 +69,7 @@ class GameState {
         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);
     }
 }

diff --git a/src/map.ts b/src/map.ts
line changes: +4/-5
index 6cb1444..e4faba2
--- a/src/map.ts
+++ b/src/map.ts
@@ -105,11 +105,10 @@ export default class GameMap extends Storable {
     }
 
     editDescription() {
-        const { x, y } = this.player;
-
-        gs.edit(this.cells[y][x].description, elem => {
-            this.cells[y][x].description = elem.value;
-        });
+        gs.editor.onClose = (cell: Cell) => {
+            gs.showCellText();
+        };
+        gs.editor.open(this.getCurrentCell());
     }
 
     store() {

diff --git a/structure.css b/structure.css
line changes: +8/-0
index c6eb71a..eb18bca
--- a/structure.css
+++ b/structure.css
@@ -88,3 +88,11 @@ body {
 #editor-container.visible {
 	display: initial;
 }
+
+.sidebar h1 {
+	font-size: 18px;
+}
+
+.sidebar h2 {
+	font-size: 16px;
+}