added properties panel widget

example/game.js

@@ -155,7 +155,7 @@ function el(x, y, w, h, parent, name) {
 	const color = COLORS[_colorIndex];
 	const g = game.add.graphics(x, y)
 		.lineStyle(1, color, 1)
-		.beginFill(color, 0.1)
+		.beginFill(color, 0.2)
 		.drawRect(0, 0, w, h)
 		.endFill();
 	parent.addChild(g);

src/plugin.ts

@@ -6,7 +6,7 @@ export class Plugin extends Phaser.Plugin {
 	public constructor(game: Phaser.Game, group?: Phaser.Group | Phaser.Stage) {
 		super(game, game.plugins);
 
-		const stage = document.createElement(Stage.eid) as Stage;
+		const stage = document.createElement(Stage.tagId) as Stage;
 		document.body.appendChild(stage);
 
 		group = group ?? game.world;

src/ui/actions.toolbar.ts

@@ -1,7 +1,7 @@
 import { Widget } from './widget';
 
 export class ActionsToolbar extends Widget {
-	public static eid = 'phred-actions-toolbar';
+	public static readonly tagId = 'phred-actions-toolbar';
 }
 
-customElements.define(ActionsToolbar.eid, ActionsToolbar);
+customElements.define(ActionsToolbar.tagId, ActionsToolbar);

src/ui/properties.panel.ts

@@ -0,0 +1,7 @@
+import { Widget } from './widget';
+
+export class PropertiesPanel extends Widget {
+	public static readonly tagId = 'phed-properties-panel';
+}
+
+customElements.define(PropertiesPanel.tagId, PropertiesPanel);

src/ui/properties.toolbar.ts

@@ -1,7 +1,14 @@
+import { PropertiesPanel } from './properties.panel';
 import { Widget } from './widget';
 
 export class PropertiesToolbar extends Widget {
-	public static eid = 'phred-properties-toolbar';
+	public static readonly tagId = 'phred-properties-toolbar';
+
+	public connectedCallback() {
+		super.connectedCallback();
+		const panel = document.createElement(PropertiesPanel.tagId);
+		this.appendChild(panel);
+	}
 }
 
-customElements.define(PropertiesToolbar.eid, PropertiesToolbar);
+customElements.define(PropertiesToolbar.tagId, PropertiesToolbar);

src/ui/stage.ts

@@ -3,7 +3,7 @@ import { PropertiesToolbar } from './properties.toolbar';
 import { Widget } from './widget';
 
 export class Stage extends Widget {
-	public static eid = 'phred-stage';
+	public static readonly tagId = 'phred-stage';
 
 	private _game: Phaser.Game;
 	private _actions: ActionsToolbar;
@@ -32,16 +32,16 @@ export class Stage extends Widget {
 		content.classList.add('phred-content');
 		this.appendChild(content);
 
-		this._actions = document.createElement(ActionsToolbar.eid) as ActionsToolbar;
+		this._actions = document.createElement(ActionsToolbar.tagId) as ActionsToolbar;
 		content.appendChild(this._actions);
 
 		this._gameContainer = document.createElement('div');
 		this._gameContainer.classList.add('phred-game-container');
 		content.appendChild(this._gameContainer);
 
-		this._properties = document.createElement(PropertiesToolbar.eid) as PropertiesToolbar;
+		this._properties = document.createElement(PropertiesToolbar.tagId) as PropertiesToolbar;
 		this.appendChild(this._properties);
 	}
 }
 
-customElements.define(Stage.eid, Stage);
+customElements.define(Stage.tagId, Stage);