70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-color flex items-center justify-center z-50">
|
|
<div class="bg-white text-black p-6 rounded-lg w-full max-w-md">
|
|
<h2 class="text-2xl font-bold mb-4">Options</h2>
|
|
|
|
<div class="space-y-3">
|
|
<label class="block">
|
|
<span class="text-gray-700">Data Source:</span>
|
|
<select v-model="dataSource" class="mt-1 block w-full">
|
|
<option value="local">Local (Mock)</option>
|
|
<option value="remote">Remote (API)</option>
|
|
<option value="remote-showcase">Showcase</option>
|
|
<option value="new-model">New Model</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span class="text-gray-700">Volume:</span>
|
|
<input type="range" min="0" max="100" v-model="volume" class="w-full" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<button @click="$emit('close')" class="px-4 py-2 bg-gray-600 text-white rounded">Close</button>
|
|
<button @click="save" class="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useAppStore } from "../stores/app-store";
|
|
import { log } from "../services/logger-service";
|
|
|
|
const emit = defineEmits(['close']);
|
|
const store = useAppStore();
|
|
|
|
const dataSource = ref(localStorage.getItem('dataSource') || 'local');
|
|
const volume = ref(+localStorage.getItem('volume') || 50);
|
|
|
|
async function save() {
|
|
const oldSource = localStorage.getItem('dataSource');
|
|
log(dataSource.value);
|
|
localStorage.setItem('dataSource', dataSource.value);
|
|
localStorage.setItem('volume', volume.value.toString());
|
|
|
|
|
|
try {
|
|
await store.loadGames();
|
|
}
|
|
catch (error) {
|
|
console.error(error);
|
|
}
|
|
//
|
|
// if (oldSource !== dataSource.value) {
|
|
// log("Reloading games")
|
|
// await store.loadGames();
|
|
// }
|
|
|
|
emit('close');
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg-color {
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
}
|
|
</style>
|