heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Merge pull request 'feat/panels-visuals' (#94) from feat/panels-visuals into main
release-tag / release-image (push) Has been cancelled
Details

Browse Source 
Reviewed-on: #94
This commit was merged in pull request #94.
This commit is contained in:
legonzaur
2024-05-24 17:58:06 +00:00
parent 90ed8a6211 3f8a580984
commit 37ad826a80
7 changed files with 114 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+50 -15
View File
@@ -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;
transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
margin-top: var(--margin-bottom);
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;
transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
max-height: var(--max-height);
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;
filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
margin-bottom: var(--margin-bottom);
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
+35 -20
View File
@@ -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">
<AnimatedBackground />
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
</PlayerListElement>
<div id="player_list_container">
<div id="player_list">
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
</PlayerListElement>
</div>
</div>
<div id="current_player">
<template v-for="p in current_players">
<AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
:color-end="goStore.self == p ? [.0, 1, 1] : undefined" />
<!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : 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,42 @@ function showWinnerScreen() {
overflow: auto;
position: relative;
isolation: isolate;
background: url('/images/bg-darkgrass.png');
}
#market {
grid-area: market;
background-image: url("/images/bg-sand.png");
border-bottom: 3px solid black;
;
/* background: url('/images/bg-darkgrass.png'); */
}
#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: rgba(0, 0, 0, 0.35);
border: 5px solid #000;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
margin: 10px;
backdrop-filter: hue-rotate(73deg) blur(10px) contrast(90%) brightness(165%);
}
</style>
<style>
#player_list .card_image {
max-width: 64px;
#player_list .card {
--max-height: 90px;
}
</style>
components/MarketCards.vue
+8 -3
View File
@@ -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,13 @@ 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;
padding-bottom: 10px;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
backdrop-filter: hue-rotate(625deg) blur(5px) brightness(80%);
}
.separator {
components/PlayerList.vue
View File
components/PlayerListElement.vue
+3 -3
View File
@@ -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 black;
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
+18 -7
View File
@@ -144,9 +144,8 @@ function check_for_guard(player: Player) {
<PlayerStats :player="props.player">
</PlayerStats>
<template v-if="!hide_stack_and_discard">
<button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon"
@click="checkEndTurn">END
TURN</button>
<button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
@click="checkEndTurn">END TURN</button>
<div class="warning"
:class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
@@ -275,6 +274,10 @@ function check_for_guard(player: Player) {
height: 100%;
}
#end_turn.hidden {
visibility: hidden
}
.stack,
.discard,
.cards_container {
@@ -348,8 +351,8 @@ function check_for_guard(player: Player) {
"stack player"
"discard player";
transition: all 1s;
margin-bottom: -75px;
padding-bottom: 75px;
/* margin-bottom: -75px;
padding-bottom: 75px; */
}
.discard_overlay {
@@ -476,10 +479,18 @@ function check_for_guard(player: Player) {
#player_info {
display: flex;
align-items: center;
min-width: 200px;
}
#player_banner.big>#player_info {
margin-left: 500px;
#player_banner.big {
padding: 0;
left: 50%;
transform: translateX(-50%);
max-width: min-content;
border: 5px solid black;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
backdrop-filter: blur(5px) brightness(80%) hue-rotate(0deg) grayscale(80%);
}
#player_stats {
pages/index.vue
-1
View File
@@ -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>