<template> <div id="config"> <h3>{{l('h3Config')}}</h3> <div> <span>{{l('lblButton')}}</span> <div v-for="info in buttonInfos" class="inline" :key="info.value"> <input type="checkbox" :checked="button & info.value" @change="toggleButton($event, info.value)"><span>{{info.text}}</span> </div> </div> <div> <span>{{l('lblDPad')}}</span> <div v-for="info in dpadButtonInfos" class="inline" :key="info.value"> <input type="checkbox" :checked="button & info.value" @change="toggleButton($event, info.value)"><span>{{info.text}}</span> </div> </div> <div v-if="button & buttonValues.Z" class="custom-block danger"> <p>{{l('pCautionZ')}}</p> </div> </div> </template> <script> import {getConfig, lskey, buttonValues} from './codegen.js'; import labels from './labels.json'; import {getLabels} from '../codegen.js'; export default { methods: { updateConfig() { localStorage.setItem(lskey, JSON.stringify({button: this.button})); }, toggleButton(event, value) { this.button = event.target.checked ? this.button | value : // ON this.button & ~value; // OFF this.updateConfig(); }, l(id) { return labels[id][this.$lang] ?? labels[id]['en-US']; }, }, data() { const {button} = getConfig(); return { button, // const buttonInfos: [ 'A', 'B', 'X', 'Y', 'L', 'R', 'Z', ].map(text => ({text, value: buttonValues[text]})), dpadButtonInfos: [ {text: '←', value: buttonValues.DL}, {text: '↓', value: buttonValues.DD}, {text: '↑', value: buttonValues.DU}, {text: '→', value: buttonValues.DR}, ], buttonValues, }; }, } </script> <style> .inline { display: inline-block; } </style>