feat: Change menu for game

- Add next and previous behaviour
- Separate views, directions and actions

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

@@ -9,17 +9,17 @@ tags:
 {% block body %}
 <header class="io">
 	<button data-action="escape">☰</button>
-	<button data-action="previous">&lt;</button>
+	<button data-direction="previous">&lt;</button>
-	<button data-action="quest">Quests</button>
+	<button data-view="quest">Quests</button>
-	<button data-action="region">Regions</button>
+	<button data-view="region">Regions</button>
-	<button data-action="vendor">Vendors</button>
+	<button data-view="vendor">Vendors</button>
-	<button data-action="manufacture">Manufacture</button>
+	<button data-view="manufacture">Manufacture</button>
-	<button data-action="character">Characters</button>
+	<button data-view="character">Characters</button>
-	<button data-action="stash">Stash</button>
+	<button data-view="stash">Stash</button>
-	<button data-action="secret">Secret Storage</button>
+	<button data-view="secret">Secret Storage</button>
-	<button data-action="squad">Squads</button>
+	<button data-view="squad">Squads</button>
-	<button data-action="ready">Ready Room</button>
+	<button data-view="ready">Ready Room</button>
-	<button data-action="next">&gt;</button>
+	<button data-direction="next">&gt;</button>
 </header>
 <div class="flex_auto">
 	<main class="flex_auto">
@@ -115,7 +115,7 @@ tags:
 
 	class Menu {
 		constructor(element) {
-			// this._elem = element;
+			this._element = element;
 			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
 		}
 
@@ -123,27 +123,47 @@ tags:
 			console.log('escape');
 		}
 
-		previous() {
-			console.log('previous');
-		}
-
 		quest() {
 			console.log('quest');
 		}
 
 		onClick(event) {
-			console.debug(event.target);
 			const action = event.target.dataset.action;
-			const siblings = event.target.parentElement.querySelectorAll('button');
+			const view = event.target.dataset.view;
+			const direction = event.target.dataset.direction;
+			const siblings = this._element.querySelectorAll('button[data-view]');
 
-			if (action && event.button === 0) {
+			if (event.button !== 0) return;
+
+			if (direction) {
+				const current = this._element.querySelector('.active');
+				let view = undefined;
+				console.log(direction, current);
+
+				if (current === null) return;
+
+				view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;
+
+				current.classList.remove('active');
+
+				if (view.dataset.view) {
+					view.classList.add('active');
+				} else {
+					view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
+					view.classList.add('active');
+				}
+			}
+
+			if (view) {
 				for (const sibling of siblings) {
 					sibling.classList.remove('active');
 				}
 
 				event.target.classList.add('active');
-				this[action]();
+				this[view]();
 			}
+
+			if (action) this[action]();
 		};
 	}