59 lines
2.4 KiB
Vue
59 lines
2.4 KiB
Vue
<script lang="ts">
|
|
import {defineComponent, Ref, ref, SetupContext} from 'vue';
|
|
import DebugLog from "./classes/debugger";
|
|
import Settings from "./components/Settings.vue";
|
|
|
|
export default defineComponent({
|
|
components: {Settings, GameInput, AttemptList},
|
|
setup() {
|
|
var showSettings:Ref<boolean> = ref(false);
|
|
|
|
// check if data storage was allowed and if check for localstorage settings
|
|
if (localStorage.getItem("allow-data-storage") !== null) {
|
|
|
|
if (localStorage.getItem("theme") !== null) {
|
|
document.documentElement.setAttribute('data-theme', localStorage.getItem("theme") ?? "dark");
|
|
}
|
|
|
|
} else {
|
|
// if data collection isn't allowed set the default values
|
|
document.documentElement.setAttribute('data-theme', "dark");
|
|
}
|
|
|
|
var debugInputs = [
|
|
{logText: "httpAttr: theme", logValue: document.documentElement.getAttribute('data-theme')},
|
|
{logText: "storage: allow-data-storage", logValue:localStorage.getItem("allow-data-storage")},
|
|
{logText: "storage theme", logValue: localStorage.getItem("theme")},
|
|
]
|
|
DebugLog(debugInputs);
|
|
|
|
const toggleSettings = () => {
|
|
showSettings.value = !showSettings.value;
|
|
}
|
|
|
|
|
|
|
|
const attemptList = ref<InstanceType<typeof AttemptList> | null>(null);
|
|
|
|
return { showSettings, toggleSettings, attemptList };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<button class="btn btn-primary round" style="float: right" @click="toggleSettings">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
|
|
<path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
|
|
</svg>
|
|
</button>
|
|
<Settings v-if="showSettings" @close="toggleSettings"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
margin: 10%;
|
|
}
|
|
</style>
|