93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { getCardsType } from '~/helpers/settingsCookies';
|
|
import type { Player } from '~/netcode/Player';
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
export interface Props {
|
|
isVisible: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => {
|
|
emit('close')
|
|
}
|
|
|
|
const switchCardStyle = () => {
|
|
if (settingsStore.cardStyle === 'heron') {
|
|
settingsStore.changeCardStyle('original')
|
|
} else {
|
|
settingsStore.changeCardStyle('heron')
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isVisible" class="dialog-overlay" @click="close">
|
|
<div class="dialog-box" @click.stop>
|
|
<div class="dialog-header">
|
|
<h3>Options</h3>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<button @click="switchCardStyle">Toggle Card style</button>
|
|
</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;
|
|
}
|
|
|
|
.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: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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-body {
|
|
padding: 10px 0;
|
|
}
|
|
</style> |