front/components/game/modal/options/Dialog.client.vue

<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>