Feat: better discard overlay

app.vue

@@ -33,7 +33,7 @@ onMounted(() => {
 
 <style>
 :root {
-  --animation-curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --animation-curve: cubic-bezier(0.68, -0.275, 0.32, 1.275);
 }
 html {
   text-align: center;

components/game/Card.vue

@@ -83,6 +83,7 @@ function rightClickUp(e: MouseEvent) {
     @contextmenu.prevent="false"
     @mousedown.right="rightClickDown"
     @mouseup.right="rightClickUp"
+    @click.stop="cardClick"
     @mouseenter="mouseenter"
     @mouseleave="mouseleave"
   >

components/game/card/Grouped.vue

@@ -18,6 +18,7 @@ export interface Props {
   tokens?: Effect[];
   championsKillable?: boolean;
   discardable?: boolean;
+  locked?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -145,7 +146,9 @@ function discardCardClick(card: Card) {
         :wrapped="wrapped"
         :key="c?._id || i"
         :locked="
-          !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
+          locked ||
+          !playingTurn ||
+          playingTurn?.cardsLocked.includes(c._id.toString())
         "
         :used_effects_indexes="c?.effects?.reduce( (prev,e, i)=>{
           if(playingTurn?.lockedEffects.includes(e._id)){
@@ -228,7 +231,8 @@ function discardCardClick(card: Card) {
 .cards_container {
   display: flex;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: flex-start;
+  gap: 30px;
   min-width: 200px;
   flex-wrap: wrap;
   transition: rotate v-bind("shuffleAnimationSpeed") ease;
@@ -237,6 +241,7 @@ function discardCardClick(card: Card) {
 .cards_container.wrapped {
   flex-direction: column-reverse;
   justify-content: center;
+  gap: 0;
 }
 
 .cards_container.wrapped:before {

components/game/overlay/Discard.client.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { initCustomFormatter } from "vue";
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
+
+export interface Props {
+  game: Game;
+  player: Player;
+}
+
+const settingsStore = useSettingsStore();
+const props = defineProps<Props>();
+
+const isVisible = ref(false);
+
+const discardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.RESTACK_DISCARDED_ACTION,
+      CardEffects.RESTACK_DISCARDED_CARD,
+      CardEffects.RESTACK_DISCARDED_CHAMPION,
+      CardEffects.SACRIFICE,
+    ].includes(t.effect)
+  )
+);
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
+
+function openDiscard() {
+  isVisible.value = true;
+  if (!settingsStore.saveDiscardSize) {
+    settingsStore.discardFullscreen = false;
+  }
+}
+</script>
+
+<template>
+  <div id="discard">
+    <GameCardGrouped
+      @cardClick="openDiscard"
+      :container="player.discard"
+      :wrapped="true"
+      :no-effects="true"
+    >
+    </GameCardGrouped>
+  </div>
+  <div
+    class="discard-animations discard-background"
+    :class="{ visible: isVisible, fullscreen: settingsStore.discardFullscreen }"
+    @click.stop="isVisible = false"
+  ></div>
+  <div
+    class="discard-animations discard-menu"
+    :class="{ visible: isVisible, fullscreen: settingsStore.discardFullscreen }"
+    @click.stop="isVisible = false"
+  >
+    <span>Discard of {{ player.user.username }}</span>
+    <button
+      class="discard-fullscreen-btn"
+      @click.stop="
+        settingsStore.discardFullscreen = !settingsStore.discardFullscreen
+      "
+    >
+      TOGGLE FULLSCREEN
+    </button>
+    <GameCardGrouped
+      :container="player.discard"
+      :wrapped="false"
+      :hidden="false"
+      :tokens="discardTokens"
+      :noEffects="true"
+      :playingTurn="game.currentTurn"
+      :locked="true"
+      @tokenClick="tokenClick"
+    ></GameCardGrouped>
+  </div>
+</template>
+
+<style scoped>
+span {
+  background: white;
+}
+.discard-fullscreen-btn {
+  pointer-events: all;
+}
+
+.discard-animations {
+  transition: 0.3s all var(--animation-curve);
+}
+.discard-background {
+  transition: 0.3s all linear;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  z-index: 200;
+}
+
+.discard-background.visible {
+  background: rgba(0, 0, 0, 0.6);
+  pointer-events: all;
+  backdrop-filter: blur(2px);
+}
+
+.discard-menu {
+  left: -75%;
+  top: 0;
+  width: 25%;
+  height: 100%;
+  padding-left: 50%;
+  background: rgb(100, 53, 44);
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.discard-menu.visible {
+  left: -50%;
+}
+
+.discard-menu.fullscreen {
+  left: -100%;
+  width: 100%;
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+}
+
+.discard-menu.visible.fullscreen {
+  left: 0%;
+}
+
+.discard-menu > .cards_container {
+  pointer-events: all;
+  overflow: scroll;
+  padding: 30px;
+  max-width: 100%;
+  transition: 0.3s all var(--animation-curve);
+  justify-content: center;
+}
+
+.discard-menu.fullscreen > .cards_container {
+  max-width: 50%;
+}
+</style>

components/game/overlay/Discard.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { buyCard, buyGem, useToken } from "~/netcode";
-import {
-  CardEffects,
-  type Card,
-  type Container,
-  type Effect,
-  type Game,
-  type Player,
-} from "~/netcode/interfaces";
-
-export interface Props {
-  game: Game;
-  discard: Container;
-  player: Player;
-}
-
-const props = defineProps<Props>();
-
-const authStore = useAuthStore();
-
-const emit = defineEmits(["close"]);
-function marketCardClick(e: string) {
-  buyCard(props.game._id, e);
-}
-
-function fireGemCardClick(e: string) {
-  buyGem(props.game._id);
-}
-
-const discardTokens = computed(() =>
-  props.game.currentTurn.tokens.filter((t) =>
-    [
-      CardEffects.RESTACK_DISCARDED_ACTION,
-      CardEffects.RESTACK_DISCARDED_CARD,
-      CardEffects.RESTACK_DISCARDED_CHAMPION,
-      CardEffects.SACRIFICE,
-    ].includes(t.effect)
-  )
-);
-
-function tokenClick({ card, token }: { card: Card; token: Effect }) {
-  useToken(props.game._id, token._id, card._id);
-}
-</script>
-
-<template>
-  <div class="overlay">
-    <button @click="$emit('close')">Close</button>
-    <span>Discard of {{ player.user.username }}</span>
-
-    <div class="discard_unwrapped" @click.stop>
-      <GameCardGrouped
-        :container="discard"
-        :wrapped="false"
-        :hidden="false"
-        :tokens="discardTokens"
-        :noEffects="true"
-        :playingTurn="game.currentTurn"
-        @tokenClick="tokenClick"
-      ></GameCardGrouped>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-span {
-  background: white;
-}
-.overlay {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  position: fixed;
-  z-index: 200;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-</style>
-
-<style>
-.discard_unwrapped {
-  width: max-content;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-  /* position: relative; */
-  gap: 2px;
-  margin: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 10px;
-  border-radius: 10px;
-  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
-  /* backdrop-filter: blur(5px) brightness(80%); */
-  background: rgba(60, 47, 117, 0.46);
-  /* left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%); */
-}
-</style>

components/game/overlay/options/Dialog.client.vue

@@ -17,6 +17,23 @@ const _window = computed(() => window);
     @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>
@@ -106,15 +123,6 @@ const _window = computed(() => window);
     <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>
 
@@ -139,6 +147,7 @@ const _window = computed(() => window);
   background: rgba(0, 0, 0, 0);
   pointer-events: none;
   z-index: 1000;
+  transition: 0.3s all linear;
 }
 
 .dialog-background.visible {

pages/game.vue

@@ -327,19 +327,10 @@ onUnmounted(() => {
               </GameCardGrouped>
             </div>
 
-            <div
-              id="discard"
-              :class="{ invisible: discard_unwrapped }"
-              @click="() => (discard_unwrapped = true)"
-            >
-              <GameCardGrouped
-                :container="focusedPlayer.discard"
-                :wrapped="true"
-                @card-click="showDiscard"
-                :no-effects="true"
-              >
-              </GameCardGrouped>
-            </div>
+            <GameOverlayDiscard
+              :game="game"
+              :player="focusedPlayer"
+            ></GameOverlayDiscard>
           </div>
         </Transition>
 
@@ -381,13 +372,6 @@ onUnmounted(() => {
             ></GamePlayerSlot>
           </Transition>
         </div>
-        <GameOverlayDiscard
-          v-show="discard_unwrapped"
-          :game="game"
-          :player="focusedPlayer"
-          :discard="focusedPlayer.discard"
-          @close="discard_unwrapped = false"
-        ></GameOverlayDiscard>
         <GameOverlayResultDialog
           :isVisible="showResults"
           :won="isWinner"

stores/settingsStore.ts

@@ -14,7 +14,8 @@ export const useSettingsStore = defineStore("settingstore", {
     shaderQuality: 3,
     shaderFramerate: 10,
     shaderPixelated: true,
-    enableDragging: false,
+    saveDiscardSize: false,
+    discardFullscreen: false,
   }),
   actions: {
     switchCardStyles() {