added responsive toggle

src/core/actions.ts

@@ -12,6 +12,7 @@ export class Actions {
 	public static readonly TOGGLE_GIZMOS = 'TOGGLE_GIZMOS';
 	public static readonly TOGGLE_GUIDES = 'TOGGLE_GUIDES';
 	public static readonly TOGGLE_HIT_AREA = 'TOGGLE_HIT_AREA';
+	public static readonly TOGGLE_RESPONSIVE = 'TOGGLE_RESPONSIVE';
 	public static readonly TOGGLE_REF_IMAGE = 'TOGGLE_REF_IMAGE';
 	public static readonly TOGGLE_ENABLED = 'TOGGLE_ENABLED';
 	public static readonly PRINT_OBJECT = 'PRINT_OBJECT';

src/core/editor.ts

@@ -169,6 +169,12 @@ class EditorClass {
 				label: 'hit area',
 				icon: 'fa-hand-point-up',
 			},
+			{
+				id: Actions.TOGGLE_RESPONSIVE,
+				toggle: true,
+				label: 'responsive',
+				icon: 'fa-expand-arrows-alt',
+			},
 			{
 				id: Actions.TOGGLE_REF_IMAGE,
 				label: 'reference image',

src/core/preferences.ts

@@ -57,6 +57,16 @@ export class Preferences {
 		this.save('hitArea', value);
 	}
 
+	private _responsive = false;
+
+	public get responsive() { return this._responsive; }
+
+	public set responsive(value: boolean) {
+		this._responsive = value;
+		this.notifyListeners('responsive', value);
+		this.save('responsive', value);
+	}
+
 	// #endregion
 
 	public readonly onPreferenceChanged = new Phaser.Signal();
@@ -76,6 +86,7 @@ export class Preferences {
 		actions.setActionCommand(Actions.TOGGLE_GIZMOS, () => this.gizmos = !this._gizmos, () => this._gizmos);
 		actions.setActionCommand(Actions.TOGGLE_HIT_AREA, () => this.hitArea = !this._hitArea, () => this._hitArea);
 		actions.setActionCommand(Actions.TOGGLE_GUIDES, () => this.guides = !this._guides, () => this._guides);
+		actions.setActionCommand(Actions.TOGGLE_RESPONSIVE, () => this.responsive = !this._responsive, () => this._responsive);
 		actions.setActionCommand(Actions.TOGGLE_REF_IMAGE, () => this.refImage = !this._refImage, () => this._refImage);
 	}
 

src/editor-view/actions/actions-toolbar.ts

@@ -14,6 +14,7 @@ export class ActionsToolbar extends Widget {
 		this.createButton(actions.getAction(Actions.TOGGLE_HIT_AREA));
 		this.createButton(actions.getAction(Actions.TOGGLE_GIZMOS));
 		this.createSeparator();
+		this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE));
 		this.createButton(actions.getAction(Actions.ZOOM_OUT));
 		this.createButton(actions.getAction(Actions.ZOOM_IN));
 		this.createSeparator();

src/editor-view/game-container/game-container.scss

@@ -6,6 +6,12 @@ phred-game-container {
 
 	#phred-game-parent {
 		position: absolute;
+
+		&.responsive {
+			width: 100% !important;
+			height: 100% !important;
+		}
+
 		.phred-game,
 		.phred-game * {
 			max-width: 100% !important;

src/editor-view/game-container/game-container.ts

@@ -1,6 +1,8 @@
 import { ComponentTags } from 'component-tags';
 import { ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
+import { Editor } from 'core/editor';
+import { PreferenceKey } from 'core/preferences';
 import './game-container.scss';
 
 const MIN_WIDTH = 100;
@@ -22,12 +24,18 @@ export class GameContainer extends HTMLElement {
 		actions.setActionCommand(Actions.ZOOM, (e) => this.zoom(-(e as WheelEvent).deltaY));
 		actions.setActionCommand(Actions.ZOOM_IN, () => this.zoom(100));
 		actions.setActionCommand(Actions.ZOOM_OUT, () => this.zoom(-100));
+		Editor.prefs.onPreferenceChanged.add(this.onPreferencesChanged, this);
+		this.onPreferencesChanged('responsive', Editor.prefs.responsive);
 
 		this.onmousedown = this.onInputDown;
 		this.onmousemove = this.onInputMove;
 		this.onmouseup = this.onInputUp;
 	}
 
+	private onPreferencesChanged(key: PreferenceKey, value: boolean) {
+		if (key === 'responsive') this.setResponsive(value);
+	}
+
 	public addGame(game: Phaser.Game) {
 		this.game = game;
 		const el = game.canvas.parentElement;
@@ -54,6 +62,17 @@ export class GameContainer extends HTMLElement {
 		this.game.scale.refresh();
 	}
 
+	private setResponsive(responsive: boolean) {
+		const style = this.gameEditorParentElement.style;
+		if (responsive) {
+			style.width = '100%';
+			style.height = '100%';
+		} else {
+			style.width = 'unset';
+			style.height = 'unset';
+		}
+	}
+
 	// #region Panning
 
 	private _downPageX = 0;