heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Feat : add Leave, kick and game configuration

Browse Source
This commit is contained in:
legonzaur
2024-08-27 11:51:31 +02:00
parent ddcb6c6849
commit 0fb4877266
10 changed files with 243 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/game/modal/options/Dialog.client.vue
+211
View File
@@ -0,0 +1,211 @@
<script setup lang="ts">
const settingsStore = useSettingsStore();
const isVisible = ref(false);
const _devicePixelRatio = computed(() => devicePixelRatio);
const _window = computed(() => window);
</script>
<template>
<button @click="isVisible = true" class="dialog-open-button">
Open Settings
</button>
<div
:class="{ visible: isVisible }"
class="dialog dialog-background"
@click="isVisible = false"
></div>
<div class="dialog dialog-box" :class="{ visible: isVisible }" @click.stop>
<div class="dialog-header">
<h3>Game</h3>
</div>
<div class="dialog-header">
<span>Save discard size</span>
</div>
<div class="dialog-body">
<input type="checkbox" v-model="settingsStore.saveDiscardSize" />
</div>
<div class="dialog-footer">
<template v-if="!settingsStore.saveDiscardSize"
>Discard will always open small
</template>
<template v-else="!settingsStore.saveDiscardSize"
>Discard will remember its size
</template>
</div>
<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-footer">
<span>{{ settingsStore.cardStyle }}</span>
</div>
<div class="dialog-header">
<span>Animation Speed</span>
</div>
<div class="dialog-body">
<input
type="range"
min="0"
max="250"
step="25"
v-model="settingsStore.animationSpeed"
/>
</div>
<div class="dialog-footer">
<span>{{ settingsStore.animationSpeed }}ms</span>
</div>
<div class="dialog-header">
<span>Fast mode</span>
</div>
<div class="dialog-body">
<input type="checkbox" v-model="settingsStore.fastAnimations" />
</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 v-if="_window"
>{{
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>
</template>
<style scoped>
.dialog {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
transition: 0.3s all var(--animation-curve);
}
.dialog-open-button {
cursor: pointer;
}
.dialog-open-button:active {
filter: drop-shadow(0px 0px 1px);
}
.dialog-background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
pointer-events: none;
z-index: 1000;
transition: 0.3s all linear;
}
.dialog-background.visible {
background: rgba(0, 0, 0, 0.5);
pointer-events: all;
}
.dialog-box {
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
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%;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6));
background: rgb(38, 62, 15);
}
.dialog-box.visible {
bottom: 50%;
transform: translate(-50%, 50%);
}
.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>