feat: add game config panel UI (template, Stimulus controller, CSS)
Config panel with toggle for watched films, hint type checkboxes, and multi-select for award types above the start game button. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
41
assets/controllers/game_config_controller.js
Normal file
41
assets/controllers/game_config_controller.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Controller } from '@hotwired/stimulus';
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ['hintType', 'awardSection', 'allAwards', 'awardType'];
|
||||
|
||||
toggleAwardSection() {
|
||||
const awardChecked = this.hintTypeTargets.find(
|
||||
(el) => el.name === 'hint_award'
|
||||
)?.checked;
|
||||
|
||||
this.awardSectionTarget.style.display = awardChecked ? '' : 'none';
|
||||
}
|
||||
|
||||
toggleAllAwards() {
|
||||
const checked = this.allAwardsTarget.checked;
|
||||
this.awardTypeTargets.forEach((el) => {
|
||||
el.checked = checked;
|
||||
});
|
||||
}
|
||||
|
||||
syncAllAwards() {
|
||||
const allChecked = this.awardTypeTargets.every((el) => el.checked);
|
||||
this.allAwardsTarget.checked = allChecked;
|
||||
}
|
||||
|
||||
hintTypeTargetConnected() {
|
||||
this.#bindMinOneChecked();
|
||||
}
|
||||
|
||||
#bindMinOneChecked() {
|
||||
this.hintTypeTargets.forEach((el) => {
|
||||
el.addEventListener('change', () => {
|
||||
const checked = this.hintTypeTargets.filter((e) => e.checked);
|
||||
if (checked.length === 0) {
|
||||
el.checked = true;
|
||||
}
|
||||
this.toggleAwardSection();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user