Expand editor capabilities
<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>
+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() {
}
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');
}
import GameMap from './map';
-import Editor from './editor';
+import Editor, { EditorCallback } from './editor';
import MapView from './mapview';
import TextView from './textview';
this.showCellText();
}
- edit(initialText: string, callback: (elem: HTMLTextAreaElement) => void) {
- this.editor.onClose = callback;
- this.editor.open(initialText);
- }
-
print(...args: string[]) {
this.textView.print(...args);
}
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);
}
}
}
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() {
#editor-container.visible {
display: initial;
}
+
+.sidebar h1 {
+ font-size: 18px;
+}
+
+.sidebar h2 {
+ font-size: 16px;
+}