added number and alpha property editor

.vscode/typescript.code-snippets

@@ -21,7 +21,7 @@
 			"import './${TM_FILENAME_BASE}.scss';",
 			"",
 			"export class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends HTMLElement {",
-			"\tpublic static readonly tagName = 'phed-${TM_FILENAME_BASE}';",
+			"\tpublic static readonly tagName: string = 'phed-${TM_FILENAME_BASE}';",
 			"",
 			"\tpublic connectedCallback() {}",
 			"}",

src/ui/actions/actions-toolbar.ts

@@ -2,7 +2,7 @@ import { Widget } from 'ui/widget/widget';
 import './actions-toolbar.scss'
 
 export class ActionsToolbar extends Widget {
-	public static readonly tagName = 'phred-actions-toolbar';
+	public static readonly tagName: string = 'phred-actions-toolbar';
 }
 
 customElements.define(ActionsToolbar.tagName, ActionsToolbar);

src/ui/properties-editors.ts

@@ -1,8 +1,13 @@
+import { AlphaPropertyEditor } from './properties/editors/number/alpha-property-editor';
+import { NumberPropertyEditor } from './properties/editors/number/number-property-editor';
 import { StringPropertyEditor } from './properties/editors/string/string-property-editor';
 
+// TODO this name is awful. Please find a better one
 class PropertiesEditorsClass {
 	private readonly editors = {
 		string: StringPropertyEditor.tagName,
+		number: NumberPropertyEditor.tagName,
+		alpha: AlphaPropertyEditor.tagName,
 		default: StringPropertyEditor.tagName,
 	};
 

src/ui/properties/editors/number/alpha-property-editor.ts

@@ -0,0 +1,15 @@
+import { NumberPropertyEditor } from './number-property-editor';
+
+export class AlphaPropertyEditor extends NumberPropertyEditor {
+	public static readonly tagName: string = 'phed-alpha-property-editor';
+
+	protected createInput(value: number, propertyId: string) {
+		const el = super.createInput(value, propertyId);
+		el.setAttribute('min', '0');
+		el.setAttribute('max', '1');
+		el.setAttribute('step', '0.1');
+		return el;
+	}
+}
+
+customElements.define(AlphaPropertyEditor.tagName, AlphaPropertyEditor);

src/ui/properties/editors/number/number-property-editor.ts

@@ -0,0 +1,29 @@
+import { PropertyEditor } from '../property-editor';
+import './number-property-editor.scss';
+
+export class NumberPropertyEditor extends PropertyEditor<number> {
+	public static readonly tagName: string = 'phed-number-property-editor';
+
+	protected createContent(value: number, propertyId: string) {
+		const propContent = document.createElement('div');
+		propContent.classList.add('property-content');
+
+		const input = this.createInput(value, propertyId);
+		propContent.append(input);
+
+		return propContent;
+	}
+
+	protected createInput(value: number, propertyId: string) {
+		value = value === null || isNaN(value) ? 0 : value;
+		const input = document.createElement('input');
+		input.id = propertyId;
+
+		input.setAttribute('type', 'number');
+		input.setAttribute('value', value.toString());
+
+		return input;
+	}
+}
+
+customElements.define(NumberPropertyEditor.tagName, NumberPropertyEditor);

src/ui/properties/editors/property-editor.scss

@@ -19,7 +19,7 @@ $property-foreground: $on-background-color;
 		flex: 1;
 		color: $property-foreground;
 
-		input[type="text"] {
+		input[type="text"], input[type="number"] {
 			width: 100%;
 			font-size: 16px;
 			background-color: $property-input-background;

src/ui/properties/editors/property-editor.ts

@@ -13,12 +13,12 @@ export abstract class PropertyEditor<T> extends HTMLElement {
 		return label;
 	}
 
-	protected abstract createValue(value: T, propertyId: string): HTMLElement;
+	protected abstract createContent(value: T, propertyId: string): HTMLElement;
 
 	public setContent(name: string, value: T) {
 		const propId = `prop-${name}`;
 		const title = this.createLabel(name, propId);
-		const content = this.createValue(value, propId);
+		const content = this.createContent(value, propId);
 		this.appendChild(title);
 		this.appendChild(content);
 	}

src/ui/properties/editors/string/string-property-editor.ts

@@ -1,21 +1,25 @@
 import { PropertyEditor } from '../property-editor';
-// import './string-property-editor.scss';
 
 export class StringPropertyEditor extends PropertyEditor<string> {
-	public static readonly tagName = 'phed-string-property-editor';
+	public static readonly tagName: string = 'phed-string-property-editor';
 
-	protected createValue(value: string, propertyId: string) {
+	protected createContent(value: string, propertyId: string) {
 		const propContent = document.createElement('div');
 		propContent.classList.add('property-content');
 
-		const propValue = document.createElement('input');
-		propValue.id = propertyId;
-		propValue.setAttribute('type', 'text');
-		propValue.setAttribute('value', value ?? '');
-		propContent.append(propValue);
+		const input = this.createInput(value, propertyId);
+		propContent.append(input);
 
 		return propContent;
 	}
+
+	protected createInput(value: string, propertyId: string) {
+		const input = document.createElement('input');
+		input.id = propertyId;
+		input.setAttribute('type', 'text');
+		input.setAttribute('value', value ?? '');
+		return input;
+	}
 }
 
 customElements.define(StringPropertyEditor.tagName, StringPropertyEditor);

src/ui/properties/panel/properties-panel.ts

@@ -4,7 +4,7 @@ import { PropertyEditor } from '../editors/property-editor';
 import './properties-panel.scss';
 
 export class PropertiesPanel extends Widget {
-	public static readonly tagName = 'phed-properties-panel';
+	public static readonly tagName: string = 'phed-properties-panel';
 
 	private content: HTMLElement;
 

src/ui/properties/toolbar/properties-toolbar.ts

@@ -3,7 +3,7 @@ import { PropertiesPanel } from '../panel/properties-panel';
 import './properties-toolbar.scss';
 
 export class PropertiesToolbar extends Widget {
-	public static readonly tagName = 'phred-properties-toolbar';
+	public static readonly tagName: string = 'phred-properties-toolbar';
 	private readonly panels: PropertiesPanel[] = [];	// TODO depend on an interface or abstract class here
 
 	public connectedCallback() {

src/ui/stage.ts

@@ -5,7 +5,7 @@ import { Widget } from './widget/widget';
 import './stage.scss';
 
 export class Stage extends Widget {
-	public static readonly tagName = 'phred-stage';
+	public static readonly tagName: string = 'phred-stage';
 
 	private _game: Phaser.Game;
 	private actions: ActionsToolbar;