+
+
+
{% 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() {
- console.log('quest');
+ #init() {
+ 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');
- let view = undefined;
- console.log(direction, current);
+ const currentBtn = this._element.querySelector('.active');
+ let newButton, newView = undefined;
- if (current === null) return;
+ if (currentBtn === null) return;
- view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;
-
- current.classList.remove('active');
-
- if (view.dataset.view) {
- view.classList.add('active');
+ if (direction === 'next') {
+ newButton = currentBtn.nextElementSibling;
+ newView = currentBtn.nextElementSibling.dataset.view;
} else {
- view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
- view.classList.add('active');
+ newButton = currentBtn.previousElementSibling;
+ 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]();
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 6e92dde..289d22b 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/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;