Merge branch 'main' into feat/netcode-rework
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
import gsap from 'gsap';
|
||||
import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
|
||||
import goStore from '~/netcode';
|
||||
const worker = new ShaderWorker()
|
||||
|
||||
const canvas = ref<HTMLCanvasElement | null>(null)
|
||||
const canvas_resize_temp = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
|
||||
export interface Props {
|
||||
colorStart?: [number, number, number]
|
||||
colorEnd?: [number, number, number]
|
||||
}
|
||||
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
colorStart: () => [0, .3, 0],
|
||||
colorEnd: () => [0, 1, 0]
|
||||
})
|
||||
|
||||
const _colorStart = reactive(props.colorStart)
|
||||
const _colorEnd = reactive(props.colorEnd)
|
||||
|
||||
|
||||
function initShader() {
|
||||
if (!canvas.value) { return }
|
||||
const offscreen = canvas.value?.transferControlToOffscreen()
|
||||
worker.postMessage({
|
||||
command: "initShader",
|
||||
canvas: offscreen,
|
||||
screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
|
||||
shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
|
||||
}, [offscreen])
|
||||
if (settingsStore.shaderFramerate == 0) {
|
||||
killShader()
|
||||
}
|
||||
resizeShader()
|
||||
}
|
||||
|
||||
function recolorShader() {
|
||||
worker.postMessage({
|
||||
command: 'recolorShader',
|
||||
colorStart: [..._colorStart],
|
||||
colorEnd: [..._colorEnd]
|
||||
})
|
||||
}
|
||||
|
||||
function resizeShader() {
|
||||
worker.postMessage({
|
||||
command: 'resizeShader',
|
||||
screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
|
||||
shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
|
||||
})
|
||||
}
|
||||
|
||||
function killShader() {
|
||||
worker.postMessage({
|
||||
command: 'killShader'
|
||||
})
|
||||
}
|
||||
|
||||
function resumeShader() {
|
||||
worker.postMessage({
|
||||
command: 'resumeShader',
|
||||
shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => [settingsStore.shaderFramerate], () => {
|
||||
if (settingsStore.shaderFramerate == 0) {
|
||||
killShader()
|
||||
return
|
||||
}
|
||||
resumeShader()
|
||||
|
||||
})
|
||||
|
||||
watch(() => [settingsStore.shaderQuality], () => {
|
||||
resizeShader()
|
||||
})
|
||||
|
||||
watch(() => [goStore.current_game?.current_turn], () => {
|
||||
if (goStore.current_game?.current_turn != goStore.self?.team) {
|
||||
gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
|
||||
gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
|
||||
} else {
|
||||
gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
|
||||
gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
|
||||
watch([_colorEnd, _colorStart], () => {
|
||||
recolorShader()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
nextTick(() => {
|
||||
recolorShader()
|
||||
initShader()
|
||||
window.addEventListener("resize", resizeShader, true)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", resizeShader)
|
||||
killShader()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" id="background" :class="{ pixelated: settingsStore.shaderPixelated }" width="480"
|
||||
height="270">test</canvas>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#background {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
image-rendering: smooth;
|
||||
}
|
||||
|
||||
#background.pixelated {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@ export interface Props {
|
||||
card_id: number | undefined
|
||||
}
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const card: Ref<Element | null> = ref(null)
|
||||
@@ -32,7 +33,8 @@ const y = computed(() => {
|
||||
<template>
|
||||
<div :class="`card_overlay`" :style="`top: ${y}px; left: ${x}px`" ref="card">
|
||||
<img :class="`card_image`" v-if="props.card_id"
|
||||
:src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
|
||||
:src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
|
||||
draggable="false">
|
||||
|
||||
<!-- <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false"> -->
|
||||
</div>
|
||||
|
||||
+55
-16
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import goStore from '~/netcode';
|
||||
import { useSettingsStore } from '~/stores/settingsStore';
|
||||
|
||||
export interface Props {
|
||||
card_id: number | undefined
|
||||
@@ -10,14 +11,19 @@ export interface Props {
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
wrapped: () => false,
|
||||
tilted: () => true
|
||||
tilted: () => true,
|
||||
locked: () => true
|
||||
})
|
||||
|
||||
|
||||
const emit = defineEmits(["click"])
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const childCount = ref<number>(0)
|
||||
|
||||
const card = ref<HTMLElement>()
|
||||
|
||||
function cardClick() {
|
||||
if (!props.card_id) return
|
||||
emit("click")
|
||||
@@ -38,17 +44,23 @@ 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) }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<img :class="`card_image`" v-if="props.card_id"
|
||||
:src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
|
||||
:src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
|
||||
draggable="false">
|
||||
|
||||
<img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
|
||||
|
||||
@@ -62,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 {
|
||||
@@ -78,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;
|
||||
}
|
||||
|
||||
@@ -88,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;
|
||||
@@ -111,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 {
|
||||
|
||||
+44
-28
@@ -41,6 +41,7 @@ watch(
|
||||
})
|
||||
|
||||
const showResults = ref(false)
|
||||
const showOptions = ref(false)
|
||||
const isWinner = ref(false)
|
||||
|
||||
function showLoserScreen() {
|
||||
@@ -58,31 +59,37 @@ function showWinnerScreen() {
|
||||
|
||||
<template>
|
||||
<div @contextmenu.prevent="false" id="game_board">
|
||||
<AnimatedBackground></AnimatedBackground>
|
||||
<div id="market">
|
||||
<MarketCards></MarketCards>
|
||||
</div>
|
||||
<div id="player_list">
|
||||
<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"
|
||||
:class="(goStore.current_game?.current_turn && (goStore.current_game?.current_turn === goStore.self?.team)) ? 'self' : ''">
|
||||
<PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
|
||||
|
||||
<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" /> -->
|
||||
<PlayerSlot :player="p"></PlayerSlot>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ResultDialog
|
||||
:isVisible="showResults"
|
||||
:won="isWinner"
|
||||
:players="goStore.current_game?.players"
|
||||
<ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
|
||||
@close="showResults = false">
|
||||
</ResultDialog>
|
||||
<GlobalOverlay></GlobalOverlay>
|
||||
<SelfView></SelfView>
|
||||
</template>
|
||||
|
||||
<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"
|
||||
@@ -95,34 +102,43 @@ function showWinnerScreen() {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#current_player.self {
|
||||
background-image: url('../images/bg-grass.png');
|
||||
}
|
||||
|
||||
#market {
|
||||
grid-area: market;
|
||||
background-image: url("/images/bg-sand.png");
|
||||
padding: 10px;
|
||||
/* background: url('/images/bg-darkgrass.png'); */
|
||||
}
|
||||
|
||||
#current_player {
|
||||
grid-area: current_player;
|
||||
background-image: url("/images/bg-darkgrass.png");
|
||||
}
|
||||
|
||||
#market {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player_list_container {
|
||||
grid-area: player_list;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
||||
/* background-image: url("/images/bg-darkgrass.png"); */
|
||||
}
|
||||
|
||||
#player_list {
|
||||
grid-area: player_list;
|
||||
border-left: 5px solid black;
|
||||
height: 100%;
|
||||
background-image: url("/images/bg-darkgrass.png");
|
||||
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: blur(10px) contrast(90%) brightness(165%);
|
||||
background: rgba(26, 70, 91, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
#player_list .card_image {
|
||||
max-width: 64px;
|
||||
#player_list .card {
|
||||
--max-height: 90px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import goStore from '~/netcode';
|
||||
|
||||
const displayOptions = ref(false)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`card_overlay`" ref="card">
|
||||
<img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true"/>
|
||||
</div>
|
||||
<OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card_overlay {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
/* top: left: */
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.settings_button {
|
||||
pointer-events: all;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
|
||||
const clientStore = useClientSideStore()
|
||||
|
||||
const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -53,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;
|
||||
@@ -60,6 +62,15 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
|
||||
z-index: 2;
|
||||
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, .60));
|
||||
backdrop-filter: blur(5px) brightness(80%);
|
||||
background: rgba(155, 62, 62, 0.46);
|
||||
|
||||
}
|
||||
|
||||
.separator {
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
export interface Props {
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
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-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>{{ Math.floor(_window.innerWidth * _devicePixelRatio * settingsStore.shaderQuality / 10) }}x{{
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
background-image: url('../images/bg-grass.png');
|
||||
padding: 0 20px;
|
||||
border-radius: 5px;
|
||||
width: 800px;
|
||||
border-radius: 30px;
|
||||
max-width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
|
||||
.dialog-box h3 {
|
||||
font-size: 30px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.dialog-header,
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 10px 0;
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,8 @@
|
||||
import goStore from '@/netcode';
|
||||
import type { Player } from "~/netcode/Player";
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const view = ref<"main" | "discard">("main")
|
||||
|
||||
function show(data: "main" | "discard") {
|
||||
@@ -18,10 +20,11 @@ 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]" /> -->
|
||||
<div class="button" id="player_list_buttons">
|
||||
<div class="main_button" @click="show('main')">
|
||||
<div class="tooltip">Board</div>
|
||||
<img :src="`/cards/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
|
||||
<img :src="`/cards/${settingsStore.cardStyle}/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
|
||||
draggable="false" :class="view === 'main' && 'selected'">
|
||||
<span class="button_card_number">{{ player.board.length }}</span>
|
||||
|
||||
@@ -34,7 +37,7 @@ const props = defineProps<Props>()
|
||||
</div>
|
||||
<div class="discard_button" @click="show('discard')">
|
||||
<div class="tooltip">Discard</div>
|
||||
<img :src="`/cards/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
|
||||
<img :src="`/cards/${settingsStore.cardStyle}/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
|
||||
draggable="false" :class="view === 'discard' && 'selected'">
|
||||
<span class="button_card_number">{{ player.discard_pile.length }}</span>
|
||||
|
||||
@@ -61,14 +64,17 @@ const props = defineProps<Props>()
|
||||
|
||||
|
||||
.tooltip {
|
||||
visibility: visible;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
transition: .1s transform;
|
||||
background: white;
|
||||
right: 0;
|
||||
right: -0px;
|
||||
border-top-right-radius: 1em;
|
||||
border-bottom-right-radius: 1em;
|
||||
padding-right: 1em;
|
||||
transition-property: visibility, transform;
|
||||
transition-duration: 0.5s, 0.1s;
|
||||
transition-timing-function: ease-in-out, ease-in-out;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -95,8 +101,9 @@ const props = defineProps<Props>()
|
||||
|
||||
.button div:hover .tooltip {
|
||||
visibility: visible;
|
||||
|
||||
display: block;
|
||||
transform: translateX(100%);
|
||||
transition-duration: 0, 0.1s;
|
||||
}
|
||||
|
||||
.button_card_number {
|
||||
@@ -117,12 +124,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 {
|
||||
|
||||
@@ -60,7 +60,6 @@ function can_buy_fire_gem(): boolean {
|
||||
|
||||
function checkEndTurn() {
|
||||
// TODO: Add a confirmation dialog if resources are left
|
||||
console.log("Checking end turn")
|
||||
if (
|
||||
(!warning.value)
|
||||
&& has_actions_remaining()) {
|
||||
@@ -92,7 +91,7 @@ function check_for_guard(player: Player) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`player ${isPlayerTurn ? 'turn' : ''} ${discard_unwrapped ? 'discard_unwrapped' : ''}`">
|
||||
<div class="player" :class="{ turn: isPlayerTurn, discard_unwrapped, self: isSelf }">
|
||||
<template v-if="!hide_stack_and_discard">
|
||||
<div class="stack">
|
||||
|
||||
@@ -144,9 +143,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 +273,10 @@ function check_for_guard(player: Player) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#end_turn.hidden {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.stack,
|
||||
.discard,
|
||||
.cards_container {
|
||||
@@ -348,8 +350,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 +478,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%) grayscale(80%);
|
||||
}
|
||||
|
||||
#player_stats {
|
||||
|
||||
@@ -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>
|
||||
@@ -66,7 +68,7 @@ const close = () => {
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
background-image: url('../images/bg-grass.png');
|
||||
background-image: url('/images/bg-grass.png');
|
||||
padding: 0 20px;
|
||||
border-radius: 5px;
|
||||
width: 800px;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user