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

small css changes

Browse Source
This commit is contained in:
legonzaur
2024-05-03 17:00:31 +02:00
parent 823baa4034
commit 77f44ec1db
6 changed files with 108 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.vue
+4
View File
@@ -23,4 +23,8 @@ let username = ref<string>('legonzaur')
html {
text-align: center;
}
body {
margin: 0;
}
</style>
components/CardPreview.vue
+1
View File
@@ -110,6 +110,7 @@ watch(
}
#contextMenu {
z-index: 5;
position: fixed;
height: 100%;
width: 100%;
components/CardSlot.vue
+7 -1
View File
@@ -28,4 +28,10 @@ const unwrapped = ref(false)
</template>
<style scoped></style>
<style scoped>
.cards_container {
position: relative;
max-width: 30vw;
grid-auto-columns: auto;
}
</style>
components/GameBoard.vue
+2 -4
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import goStore, { buy, endTurn, useEffect } from '@/netcode';
import goStore, { buy, useEffect } from '@/netcode';
import { CardEffects } from '@/netcode/Effect'
import { CardType } from '@/netcode/Card'
@@ -9,7 +9,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
<template>
<div @contextmenu.prevent="false">
<button v-if="isTurn" @click="endTurn">END TURN</button>
<div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
<div>
market_amount = {{ goStore.game?.market_stack?.length }}
@@ -31,8 +30,7 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
</button>
</template>
</CardSlot>
<div class="separator"></div>
<CardPreview :data="c" v-for=" c in goStore.game?.market " @click="c && buy(c)">
<CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
<template v-if="isTurn && c">
<button @click="buy(c)"
:disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
components/PlayerStats.vue
+58
View File
@@ -0,0 +1,58 @@
<script setup lang="ts">
import type { Player } from '~/netcode/Player';
export interface Props {
player: Player
}
const props = defineProps<Props>()
</script>
<template>
<div class="turn_icon">
<img src="/images/heal.png" />
<span class="turn_icon_number">
{{ player.turn.heal_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/damage.png" />
<span class="turn_icon_number">
{{ player.turn.damage_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/gold.png" />
<span class="turn_icon_number">
{{ player.turn.gold_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/champion-shield.png" />
<span class="turn_icon_number">
{{ player.team.health }}
</span>
</div>
</template>
<style scoped>
.turn_icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.turn_icon img {
height: 50px;
}
.turn_icon_number {
position: absolute;
text-shadow: white 0 0 1px;
}
</style>
components/SelfView.vue
+36 -50
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
import type { Card } from '~/netcode/Card';
import { CardEffects } from '@/netcode/Effect'
import { CardType } from '~/netcode/Card';
@@ -21,39 +21,12 @@ const discard_unwrapped = ref(false)
:disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
make Discard</button>
<div id="turn_data">
<div class="turn_icon">
<img src="/images/heal.png" />
<span class="turn_icon_number">
{{ goStore.self?.turn.heal_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/damage.png" />
<span class="turn_icon_number">
{{ goStore.self?.turn.damage_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/gold.png" />
<span class="turn_icon_number">
{{ goStore.self?.turn.gold_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/champion-shield.png" />
<span class="turn_icon_number">
{{ goStore.self?.team.health }}
</span>
</div>
<button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
<PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
</div>
<div class="cards_container" id="self_hand">
<button v-if="isTurn && (goStore.self?.hand.length ?? 0) > 1"
@click="playAllCards(goStore.self?.hand as Card[])">
PLAY ALL
</button>
<CardPreview :data="c" v-for=" c in goStore.self?.hand " @click="c && playCard(c)">
<button v-if="c && isTurn" @click="playCard(c)">PLAY</button>
<button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
@click="discard(c!)">DISCARD</button>
</CardPreview>
@@ -145,53 +118,66 @@ const discard_unwrapped = ref(false)
background: lightgreen;
}
#play_all {
display: flex;
flex-direction: row;
align-items: center;
font-size: 10em;
}
#turn_data {
position: fixed;
bottom: 0;
right: 10px;
bottom: 10px;
left: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.turn_icon {
position: relative;
}
.turn_icon img {
height: 50px;
}
.turn_icon_number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#self_hand {
position: fixed;
z-index: 1;
display: flex;
flex-direction: row-reverse;
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
position: fixed;
right: 60px;
left: 70px;
bottom: -50px;
max-width: 100vw;
justify-content: flex-start;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
transform: translateY(150px)
}
#self_hand:hover {
transform: translateY(0px);
}
#end_turn {
width: 50px;
height: 50px;
}
</style>
<style>
#turn_data * {
margin: 2.5px 0 2.5px 0;
}
#self_hand .card {
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
overflow: visible;
}
#self_hand .card:hover {
transform: translateY(-40px);
}
.cards_container {
min-width: 250px;
}