From f9197d470eff68e63101f29a2ab675a03d32cfbb Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 1 Aug 2024 18:28:27 +0200
Subject: [PATCH] Feat : settings dialog animation

---
 app.vue                                    |   3 +
 components/game/Card.vue                   |   6 +-
 components/game/Market.vue                 |   4 +-
 components/game/card/Grouped.vue           |   1 -
 components/game/overlay/options/Dialog.vue | 225 ++++++++++++---------
 components/game/player/Self.vue            |   4 +-
 pages/game.vue                             |   2 +-
 7 files changed, 142 insertions(+), 103 deletions(-)

diff --git a/app.vue b/app.vue
index e20f6e9..9cd2238 100644
--- a/app.vue
+++ b/app.vue
@@ -32,6 +32,9 @@ onMounted(() => {
 </template>
 
 <style>
+:root {
+  --animation-curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
 html {
   text-align: center;
 }
diff --git a/components/game/Card.vue b/components/game/Card.vue
index 7e79230..d957869 100644
--- a/components/game/Card.vue
+++ b/components/game/Card.vue
@@ -153,7 +153,7 @@ function rightClickUp(e: MouseEvent) {
   bottom: 0;
   width: 99%;
   transform: translateY(-0px);
-  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
+  transition: 0.05s transform var(--animation-curve);
 }
 
 .card.active:hover #contextMenuButtons {
@@ -192,7 +192,7 @@ function rightClickUp(e: MouseEvent) {
 .svg_resource_icon {
   cursor: pointer;
   animation: gelatine 0.3s normal;
-  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 1s var(--animation-curve);
 }
 
 .svg_resource_icon:active {
@@ -222,7 +222,7 @@ function rightClickUp(e: MouseEvent) {
   justify-content: center;
   margin-bottom: 0px;
   margin-top: var(--margin-bottom);
-  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 0.15s var(--animation-curve);
   pointer-events: all;
   max-height: var(--max-height);
   max-width: var(--max-width);
diff --git a/components/game/Market.vue b/components/game/Market.vue
index 64eeaab..12754ac 100644
--- a/components/game/Market.vue
+++ b/components/game/Market.vue
@@ -102,8 +102,8 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
   padding-bottom: 10px;
   border-radius: 10px;
   isolation: initial;
-  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
-  /* backdrop-filter: blur(5px) brightness(80%); */
+  filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6));
+  backdrop-filter: blur(5px) brightness(80%);
   background: rgba(155, 62, 62, 0.46);
 }
 
diff --git a/components/game/card/Grouped.vue b/components/game/card/Grouped.vue
index ee7bfbe..dbcee3e 100644
--- a/components/game/card/Grouped.vue
+++ b/components/game/card/Grouped.vue
@@ -42,7 +42,6 @@ const settingsStore = useSettingsStore();
 const cards = computed(() => {
   if (props.hidden) {
     return props.container.cards.map((_v, i) => ({
-      _id: i,
       cardId: undefined,
     })) as unknown as Card[];
   }
diff --git a/components/game/overlay/options/Dialog.vue b/components/game/overlay/options/Dialog.vue
index cd1bf72..be9e080 100644
--- a/components/game/overlay/options/Dialog.vue
+++ b/components/game/overlay/options/Dialog.vue
@@ -1,127 +1,157 @@
 <script setup lang="ts">
 const settingsStore = useSettingsStore();
 
-export interface Props {
-  isVisible: boolean;
-}
+const isVisible = ref(false);
 
 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-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>{{
+  <div @click="isVisible = true" class="dialog-open-button">Open Settings</div>
+  <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>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
+              10
           )
         }}x{{
-            Math.floor(
-              (_window.innerHeight *
-                _devicePixelRatio *
-                settingsStore.shaderQuality) /
+          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 class="dialog-header">
-        <h3>Other</h3>
-      </div>
-      <div class="dialog-header">
-        <span>Enable dragging (experimental)</span>
-      </div>
-      <div class="dialog-body">
-        <input type="checkbox" v-model="settingsStore.enableDragging" />
-      </div>
+          )
+        }}</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 class="dialog-header">
+      <h3>Other</h3>
+    </div>
+    <div class="dialog-header">
+      <span>Enable dragging (experimental)</span>
+    </div>
+    <div class="dialog-body">
+      <input type="checkbox" v-model="settingsStore.enableDragging" />
     </div>
   </div>
 </template>
 
 <style scoped>
-.dialog-overlay {
+.dialog {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  transition: 0.3s all var(--animation-curve);
+}
+.dialog-open-button {
   position: fixed;
   top: 0;
   left: 0;
+  filter: drop-shadow(2px 2px 1px);
+  cursor: pointer;
+}
+.dialog-open-button:active {
+  filter: drop-shadow(0px 0px 1px);
+}
+
+.dialog-background {
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
   z-index: 1000;
-  display: grid;
+}
+
+.dialog-background.visible {
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: all;
 }
 
 .dialog-box {
-  background-image: url("../img/bg-grass.png");
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%);
   padding: 0 20px;
   border-radius: 5px;
   width: 800px;
@@ -132,6 +162,13 @@ const close = () => {
   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 {
diff --git a/components/game/player/Self.vue b/components/game/player/Self.vue
index c6578b7..91b6cb1 100644
--- a/components/game/player/Self.vue
+++ b/components/game/player/Self.vue
@@ -73,7 +73,7 @@ const props = defineProps<Props>();
   bottom: -50px;
   max-width: 100vw;
   justify-content: flex-start;
-  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: 0.5s all var(--animation-curve);
   transform: translate(-50%, 150px);
 }
 
@@ -89,7 +89,7 @@ const props = defineProps<Props>();
 
 <style>
 #self_hand .card {
-  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: 0.5s all var(--animation-curve);
   overflow: visible;
 }
 
diff --git a/pages/game.vue b/pages/game.vue
index 7780ba1..4f9dea3 100644
--- a/pages/game.vue
+++ b/pages/game.vue
@@ -331,7 +331,7 @@ onUnmounted(() => {
       @ready="loaded = true"
       :isTurn="isTurn ?? false"
     ></AnimatedBackground>
-    <!-- <AnimatedBackground :isTurn="false"></AnimatedBackground> -->
+    <GameOverlayOptionsDialog></GameOverlayOptionsDialog>
     <template v-if="game && focusedPlayer && playerList">
       <Transition name="slide-left" mode="out-in">
         <div id="stack_discard" :key="focusedPlayer?._id">