feat: Change game screen and menu class

- Add default option
- Add init and changeView
- Change style to be more specific
- Rename constants and variables

source/screens/demo/examples/game/tfw.liquid

@@ -21,8 +21,8 @@ tags:
 	<button data-view="ready">Ready Room</button>
 	<button data-direction="next">&gt;</button>
 </header>
-<div class="flex_auto">
+<div id="viewQuest" class="view">
-	<main class="flex_auto">
+	<main>
 		<nav>
 			<div class="important">Filter</div>
 			<input placeholder="Search" type="text">
@@ -105,6 +105,8 @@ tags:
 		<button data-action="accept">Accept</button>
 	</footer>
 </div>
+<div id="viewRegion" class="view"></div>
+<div id="viewVendor" class="view"></div>
 {% endblock %}
 
 {%- block script %}
@@ -114,44 +116,70 @@ tags:
 	const placeholder = document.querySelectorAll('.background');
 
 	class Menu {
-		constructor(element) {
+		constructor(element, options = {}) {
 			this._element = element;
+			this._siblings = element.querySelectorAll('button[data-view]');
+			this.default = options.default || 'quest';
+
 			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
+
+			this.#init();
 		}
 
 		escape() {
 			console.log('escape');
 		}
 
-		quest() {
+		#init() {
-			console.log('quest');
+			const currentBtn = Array.from(this._siblings).find(
+				el => el.dataset.view === this.default
+			);
+
+			currentBtn.classList.add('active');
+			this.changeView(this.default);
+		}
+
+		changeView(type) {
+			console.debug(type);
+			const id = 'view' + capitalizeFirstLetter(type);
+			const views = document.querySelectorAll('.view');
+
+			for (const view of views) {
+				view.style.display = 'none';
+			}
+
+			document.getElementById(id).style.display = 'flex';
 		}
 
 		onClick(event) {
+			const siblings = this._siblings;
 			const action = event.target.dataset.action;
 			const view = event.target.dataset.view;
 			const direction = event.target.dataset.direction;
-			const siblings = this._element.querySelectorAll('button[data-view]');
 
 			if (event.button !== 0) return;
 
 			if (direction) {
-				const current = this._element.querySelector('.active');
+				const currentBtn = this._element.querySelector('.active');
-				let view = undefined;
+				let newButton, newView = undefined;
-				console.log(direction, current);
 
-				if (current === null) return;
+				if (currentBtn === null) return;
 
-				view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;
+				if (direction === 'next') {
-
+					newButton = currentBtn.nextElementSibling;
-				current.classList.remove('active');
+					newView = currentBtn.nextElementSibling.dataset.view;
-
-				if (view.dataset.view) {
-					view.classList.add('active');
 				} else {
-					view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
+					newButton = currentBtn.previousElementSibling;
-					view.classList.add('active');
+					newView = currentBtn.previousElementSibling.dataset.view;
 				}
+
+				if (!newButton.dataset.view) {
+					newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
+				}
+
+				currentBtn.classList.remove('active');
+				newButton.classList.add('active');
+				this.changeView(newView);
 			}
 
 			if (view) {
@@ -159,8 +187,8 @@ tags:
 					sibling.classList.remove('active');
 				}
 
+				this.changeView(view);
 				event.target.classList.add('active');
-				this[view]();
 			}
 
 			if (action) this[action]();

source/style/modules/game/_tfw.scss

@@ -9,12 +9,6 @@
 	display: flex;
 	flex-flow: column nowrap;
 
-	.flex_auto {
-		display: flex;
-		flex: auto;
-		min-height: 0;
-	}
-
 	th,
 	.important,
 	.subtle,
@@ -78,12 +72,18 @@
 		}
 	}
 
-	& > div {
+	.view {
+		flex: auto;
+		display: flex;
 		flex-flow: column nowrap;
+		min-height: 0;
 
 		& > main {
+			flex: auto;
+			display: flex;
 			flex-flow: row nowrap;
 			gap: hippie.$space_double;
+			min-height: 0;
 
 			& > div:last-child {
 				flex: 2;