<template lang="pug">
div
input#modalSettings.modal(type="checkbox")
- div(
+ div#settingsDiv(
role="dialog"
data-checkbox="modalSettings"
)
)
div(@change="updateSettings($event)")
fieldset
- label(for="setHints") {{ st.tr["Show possible moves?"] }}
+ label(for="setHints") {{ st.tr["Show possible moves"] }}
input#setHints(
type="checkbox"
v-model="st.settings.hints"
)
fieldset
label(for="setHighlight")
- | {{ st.tr["Highlight last move and checks?"] }}
+ | {{ st.tr["Highlight last move"] }}
input#setHighlight(
type="checkbox"
v-model="st.settings.highlight"
option(value="chesstempo") {{ st.tr["blue"] }}
fieldset
label(for="setSound")
- | {{ st.tr["Sound alert when game starts?"] }}
+ | {{ st.tr["Sound alert at game start"] }}
input#setSound(
type="checkbox"
v-model="st.settings.sound"
)
+ fieldset
+ label(for="setGotonext")
+ | {{ st.tr["Show next game after a move"] }}
+ input#setGotonext(
+ type="checkbox"
+ v-model="st.settings.gotonext"
+ )
+ fieldset
+ label(for="setRandomness") {{ st.tr["Randomness"] }}
+ select#setRandomness(v-model="st.settings.randomness")
+ option(value="0") {{ st.tr["Deterministic"] }}
+ option(value="1") {{ st.tr["Symmetric random"] }}
+ option(value="2") {{ st.tr["Asymmetric random"] }}
</template>
<script>
import { store } from "@/store.js";
+import { processModalClick } from "@/utils/modalClick.js";
export default {
name: "my-settings",
data: function() {
};
},
mounted: function() {
+ document.getElementById("settingsDiv")
+ .addEventListener("click", processModalClick);
// NOTE: better style would be in pug directly, but how?
document.querySelectorAll("#langSelect > option").forEach(opt => {
if (opt.value == this.st.lang) opt.selected = true;
const propName = event.target.id
.substr(3)
.replace(/^\w/, c => c.toLowerCase());
- const value = propName == "bcolor"
+ const value = ["bcolor","randomness"].includes(propName)
? event.target.value
: event.target.checked;
store.updateSetting(propName, value);
<style lang="sass" scoped>
[type="checkbox"].modal+div .card
- max-width: 767px
+ max-width: 520px
max-height: 100%
#flagContainer
display: inline-block