129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
export interface Props {
|
|
isVisible: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => {
|
|
emit('close')
|
|
}
|
|
|
|
watch(() => settingsStore.shaderQuality, async () => {
|
|
console.log(settingsStore.shaderQuality)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isVisible" class="dialog-overlay" @click="close">
|
|
<div class="dialog-box" @click.stop>
|
|
<div class="dialog-header">
|
|
<h3>Visuals</h3>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Toggle Card Style</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<button @click="settingsStore.switchCardStyles">Toggle Card style</button>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<h3>Graphics</h3>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Shader Quality</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<input type="range" min="0" max="10" v-model="settingsStore.shaderQuality">
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<span>
|
|
<template v-if="settingsStore.shaderQuality == 0">
|
|
Disabled
|
|
</template>
|
|
<template v-if="settingsStore.shaderQuality > 0">
|
|
{{ settingsStore.shaderQuality }}
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Shader Framerate</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<input type="range" min="10" max="60" step="5" v-model="settingsStore.shaderFramerate"
|
|
:disabled="settingsStore.shaderQuality == 0">
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<span>{{ settingsStore.shaderFramerate }} fps</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
display: grid;
|
|
|
|
}
|
|
|
|
.dialog-box {
|
|
background-image: url('../images/bg-grass.png');
|
|
padding: 0 20px;
|
|
border-radius: 5px;
|
|
width: 800px;
|
|
border-radius: 30px;
|
|
max-width: 100%;
|
|
color: white;
|
|
text-align: center;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
display: grid;
|
|
grid-template-columns: 33% 33% 33%;
|
|
}
|
|
|
|
.dialog-box h3 {
|
|
font-size: 30px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
color: white;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.dialog-header,
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.dialog-header {
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
.dialog-body {
|
|
padding: 10px 0;
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
.dialog-footer {
|
|
grid-column-start: 3;
|
|
}
|
|
</style> |