Merge branch 'feat/panels-visuals' into feat/shader-background

components/CardPreview.vue

@@ -11,7 +11,8 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     wrapped: () => false,
-    tilted: () => true
+    tilted: () => true,
+    locked: () => true
 })
 
 
@@ -21,6 +22,8 @@ const settingsStore = useSettingsStore()
 
 const childCount = ref<number>(0)
 
+const card = ref<HTMLElement>()
+
 function cardClick() {
     if (!props.card_id) return
     emit("click")
@@ -41,10 +44,15 @@ watch(
         props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
     },
     { immediate: true })
+
+
+onMounted(() => {
+    card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
+})
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
+    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }"
         @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
         @mouseenter="mouseenter" @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
@@ -66,15 +74,17 @@ watch(
 
 <style scoped>
 .card {
-    transition: 0.025s rotate linear;
+    --max-height: 250px;
+    --margin-bottom: calc(var(--max-height) * 0.05);
     max-width: 256px;
     position: relative;
     display: flex;
     margin-bottom: 0px;
-    margin-top: 15px;
+    margin-top: var(--margin-bottom);
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
     isolation: isolate;
     pointer-events: all;
+    max-height: var(--max-height);
 }
 
 .card.active {
@@ -82,8 +92,7 @@ watch(
 }
 
 .card_image {
-    max-height: 250px;
+    max-height: var(--max-height);
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
 }
 
@@ -92,20 +101,46 @@ watch(
     outline-offset: -2px;
 }
 
-.card.locked {
+@keyframes unlocked-float {
+    from {
+        transform: none;
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    }
+
+    to {
+        transform: translateY(calc(var(--margin-bottom)*-.25));
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) calc(var(--margin-bottom)*1.5) 1px rgba(0, 0, 0, .60));
+    }
+}
+
+@keyframes unlocked-rotate {
+    from {
+        rotate: -2deg;
+    }
+
+    to {
+        rotate: 2deg;
+    }
+}
+
+.card.unlocked {
     margin-top: 0px;
-    margin-bottom: 15px;
+    margin-bottom: var(--margin-bottom);
-    filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
+    filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    animation: 2s infinite alternate ease-in-out unlocked-float, 3.1s infinite alternate ease-in-out unlocked-rotate;
+    animation-delay: var(--random-seed);
+    animation-play-state: running;
+}
+
+.card:not(.unlocked):hover {
+    animation-play-state: paused;
+    rotate: none !important;
 }
 
 .card.wrapped {
     max-width: 10px;
 }
 
-.card_image {
-    max-height: 250px;
-}
-
 #contextMenuButtons {
     position: absolute;
     display: flex;
@@ -115,7 +150,7 @@ watch(
     bottom: 0;
     width: 99%;
     transform: translateY(-0px);
-    transition: 0.1s transform cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: 0.1s transform cubic-bezier(1, 1.81, .59, 1.42);
 }
 
 .card.active:hover #contextMenuButtons {

components/GameBoard.vue

@@ -59,18 +59,21 @@ function showWinnerScreen() {
 
 <template>
     <div @contextmenu.prevent="false" id="game_board">
+        <AnimatedBackground></AnimatedBackground>
         <div id="market">
             <MarketCards></MarketCards>
         </div>
-        <div id="player_list">
+        <div id="player_list_container">
-            <AnimatedBackground />
+            <div id="player_list">
-            <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
+                <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
-            </PlayerListElement>
+                </PlayerListElement>
+            </div>
         </div>
+
         <div id="current_player">
             <template v-for="p in current_players">
-                <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
+                <!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
-                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" />
+                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
                 <PlayerSlot :player="p"></PlayerSlot>
             </template>
 
@@ -86,7 +89,7 @@ function showWinnerScreen() {
 <style scoped>
 #game_board {
     display: grid;
-    grid-template-columns: 1fr 400px;
+    grid-template-columns: 1fr 450px;
     grid-template-rows: min-content 1fr;
     grid-template-areas:
         "market         player_list"
@@ -99,30 +102,41 @@ function showWinnerScreen() {
     overflow: auto;
     position: relative;
     isolation: isolate;
-    background: url('/images/bg-darkgrass.png');
+    /* background: url('/images/bg-darkgrass.png'); */
-}
-
-#market {
-    grid-area: market;
-    background-image: url("/images/bg-sand.png");
-    border-bottom: 3px solid black;
-    ;
 }
 
 #current_player {
     grid-area: current_player;
 }
 
-#player_list {
+#market {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#player_list_container {
     grid-area: player_list;
-    border-left: 5px solid black;
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    background-image: url("/images/bg-darkgrass.png");
+    justify-content: center;
+
+    /* background-image: url("/images/bg-darkgrass.png"); */
+}
+
+#player_list {
+    min-height: 90%;
+    background: burlywood;
+    border: 5px solid darkgoldenrod;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    margin: 10px;
 }
 </style>
 
 <style>
-#player_list .card_image {
+#player_list .card {
-    max-width: 64px;
+    --max-height: 90px;
 }
 </style>

components/GlobalOverlay.vue

@@ -7,7 +7,7 @@ const displayOptions = ref(false)
 
 <template>
     <div :class="`card_overlay`" ref="card">
-        <img class="settings_button" src="/settings.png" alt="settings" @click="displayOptions = true"/>
+        <img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true"/>
     </div>
     <OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
 </template>

components/MarketCards.vue

@@ -12,7 +12,6 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <template>
     <div id="market">
-        <AnimatedBackground :color-end="[1, 1, 0]" :color-start="[.3, .3, 0]"></AnimatedBackground>
         <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
         <div class="separator"></div>
         <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
@@ -55,6 +54,7 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <style scoped>
 #market {
+    width: min-content;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -62,8 +62,14 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     z-index: 2;
     position: relative;
     gap: 2px;
-    padding: 10px;
+    margin: 10px;
-    ;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    background: brown;
+    border: 5px solid darkred;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+
 }
 
 .separator {

components/PlayerListElement.vue

@@ -18,7 +18,7 @@ const props = defineProps<Props>()
 
 <template>
     <div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
-        <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" />
+        <!-- <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" /> -->
         <div class="button" id="player_list_buttons">
             <div class="main_button" @click="show('main')">
                 <div class="tooltip">Board</div>
@@ -118,13 +118,13 @@ const props = defineProps<Props>()
     grid-template-columns: min-content 1fr;
     grid-template-areas:
         "button     player";
-    border-bottom: 5px solid black;
+    border: 5px solid brown;
     min-height: 200px;
     position: relative;
 }
 
 .player_list_element.self {
-    background-image: url('/images/bg-grass.png');
+    /* background-image: url('/images/bg-grass.png'); */
 }
 
 .view {

components/PlayerSlot.vue

@@ -347,8 +347,8 @@ function check_for_guard(player: Player) {
         "stack          player"
         "discard        player";
     transition: all 1s;
-    margin-bottom: -75px;
+    /* margin-bottom: -75px;
-    padding-bottom: 75px;
+    padding-bottom: 75px; */
 }
 
 .discard_overlay {
@@ -477,8 +477,15 @@ function check_for_guard(player: Player) {
     align-items: center;
 }
 
-#player_banner.big>#player_info {
+#player_banner.big {
-    margin-left: 500px;
+    padding: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: min-content;
+    background: burlywood;
+    border: 5px solid maroon;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
 }
 
 #player_stats {

components/ResultDialog.vue

@@ -45,7 +45,9 @@ const close = () => {
           Et n'oubliez pas, la prochaine fois, vous gagnerez! Vous verrez! Vous êtes un gagnant, vous êtes un champion!
           Vous êtes le meilleur! Vous êtes
           le roi du monde!
+          <img src="/images/so_back.png" alt="Une image décrivant le meme 'We are so back'" />
         </p>
+        
       </div>
     </div>
   </div>

components/RulesDisplay.vue

@@ -243,6 +243,8 @@ const router = useRouter();
                 </p>
                 <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
                     sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+                <h2>Zoomer sur les cartes</h2>
+                <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
             </section>
         </div>
     </div>

pages/index.vue

@@ -18,7 +18,6 @@ import goStore, { setReady } from "@/netcode";
     <LoginView v-if="goStore.context === 'login'"></LoginView>
     <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
     <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
-    <RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
   </div>
 </template>