69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
|
<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>
|