130 lines
3.0 KiB
Vue
130 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
export interface Props {
|
|
isVisible: boolean;
|
|
}
|
|
|
|
const _devicePixelRatio = computed(() => devicePixelRatio)
|
|
const _window = computed(() => window)
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => {
|
|
emit('close')
|
|
}
|
|
|
|
</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="1" max="10" v-model="settingsStore.shaderQuality"
|
|
:disabled="settingsStore.shaderFramerate == 0">
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<span>{{ Math.floor(_window.innerWidth * _devicePixelRatio * settingsStore.shaderQuality / 10) }}x{{
|
|
Math.floor(_window.innerHeight *
|
|
_devicePixelRatio * settingsStore.shaderQuality / 10) }}</span>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Shader Framerate</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<input type="range" min="0" max="65" step="5" v-model="settingsStore.shaderFramerate">
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<span v-if="settingsStore.shaderFramerate == 65">vsync</span>
|
|
<span v-else>{{ settingsStore.shaderFramerate }} fps</span>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Pixelated</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<input type="checkbox" v-model="settingsStore.shaderPixelated">
|
|
</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> |