442 lines
12 KiB
Vue
442 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import LoadingScreen from "~/components/LoadingScreen.vue";
|
|
import { subscribe } from "~/netcode";
|
|
import { delay } from "~/netcode/events";
|
|
import { type Container, type Game, type Player } from "~/netcode/interfaces";
|
|
import { playSound } from "~/helpers/audioHelpers";
|
|
|
|
const config = useRuntimeConfig();
|
|
const settingsStore = useSettingsStore();
|
|
const authStore = useAuthStore();
|
|
|
|
const route = useRoute();
|
|
const gameId = route.params.id;
|
|
|
|
const {
|
|
data: game,
|
|
pending,
|
|
error,
|
|
refresh,
|
|
} = await useFetch<Game>(
|
|
new URL(`/games/${gameId}`, config.public.endpoint).href,
|
|
{
|
|
credentials: "include",
|
|
}
|
|
);
|
|
|
|
if (game.value == null) {
|
|
navigateTo("/lobby");
|
|
throw new Error("game not found");
|
|
}
|
|
|
|
console.log(game);
|
|
const containers = computed<Record<string, Container>>(() => ({
|
|
[game.value!.fireGems._id]: game.value!.fireGems,
|
|
[game.value!.market._id]: game.value!.market,
|
|
[game.value!.marketStack._id]: game.value!.marketStack,
|
|
...Object.fromEntries(
|
|
game
|
|
.value!.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[])
|
|
.map((p) => [
|
|
[p.board._id, p.board],
|
|
[p.discard._id, p.discard],
|
|
[p.hand._id, p.hand],
|
|
[p.stack._id, p.stack],
|
|
])
|
|
.flat(1)
|
|
),
|
|
}));
|
|
|
|
const eventSource = subscribe(`/games/${gameId}/subscribe`);
|
|
|
|
const actions = ref<(() => Promise<any>)[]>([]);
|
|
|
|
function queueAction(callback: () => Promise<any>) {
|
|
actions.value.push(callback);
|
|
if (actions.value.length == 1) {
|
|
execAction(callback);
|
|
}
|
|
}
|
|
|
|
async function execAction(callback: () => Promise<any>) {
|
|
await callback();
|
|
actions.value.shift();
|
|
if (actions.value.length > 0) {
|
|
execAction(actions.value[0]);
|
|
}
|
|
}
|
|
|
|
eventSource.addEventListener("message", async (message) => {
|
|
const current_game = game.value;
|
|
if (!current_game) {
|
|
throw new Error("game not found");
|
|
}
|
|
const data = JSON.parse(message.data);
|
|
console.log(data);
|
|
if (data.type == "start") {
|
|
throw new Error("not implemented");
|
|
} else if (data.type == "populateContainer") {
|
|
queueAction(async () => {
|
|
// await containerEvents.get(data.container)?.startAnimation();
|
|
});
|
|
const fromContainer = containers.value[data.container._id as string];
|
|
queueAction(async () => {
|
|
for (const card of data.container.cards) {
|
|
playSound("/sounds/distribute.mp3");
|
|
fromContainer.cards.push(card);
|
|
await delay(settingsStore.animationSpeed);
|
|
}
|
|
});
|
|
queueAction(async () => {
|
|
// await containerEvents.get(data.container)?.endAnimation();
|
|
});
|
|
} else if (data.type == "shuffleContainer") {
|
|
queueAction(async () => {
|
|
playSound("/sounds/shuffle.mp3");
|
|
const container = containers.value[data.container as string];
|
|
container.shuffling = true;
|
|
await delay(settingsStore.animationSpeed * 2);
|
|
container.shuffling = false;
|
|
await delay(settingsStore.animationSpeed * 2);
|
|
});
|
|
} else if (data.type == "distributeCards") {
|
|
// containerEvents.get(data.from)?.getCardsPosition(data.cards)
|
|
|
|
queueAction(async () => {
|
|
// containerEvents.get(data.from)?.startAnimation();
|
|
// containerEvents.get(data.to)?.startAnimation();
|
|
});
|
|
|
|
const fromContainer = containers.value[data.from as string];
|
|
const toContainer = containers.value[data.to as string];
|
|
for (const card of data.cards) {
|
|
queueAction(async () => {
|
|
const index = fromContainer.cards.findIndex((c) => c._id == card._id);
|
|
fromContainer.cards.splice(index, 1);
|
|
await delay(settingsStore.animationSpeed);
|
|
});
|
|
|
|
queueAction(async () => {
|
|
playSound("/sounds/distribute.mp3");
|
|
toContainer.cards.push(card);
|
|
await delay(settingsStore.animationSpeed);
|
|
});
|
|
}
|
|
queueAction(async () => {
|
|
// containerEvents.get(data.from)?.endAnimation();
|
|
// containerEvents.get(data.to)?.endAnimation();
|
|
await delay(settingsStore.animationSpeed * 2);
|
|
});
|
|
} else if (data.type == "endTurn") {
|
|
queueAction(async () => {
|
|
current_game.currentTurn = data.currentTurn;
|
|
await delay(settingsStore.animationSpeed);
|
|
const playingPlayer = current_game.teams.find(
|
|
(t) => t._id == current_game.currentTurn.currentTeam
|
|
)?.players[0];
|
|
console.log(playingPlayer);
|
|
if (playingPlayer) {
|
|
focusPlayer(playingPlayer);
|
|
await delay(settingsStore.animationSpeed);
|
|
}
|
|
});
|
|
} else if (data.type == "lockCard") {
|
|
queueAction(async () => {
|
|
playSound("/sounds/lock.mp3");
|
|
current_game.currentTurn.cardsLocked.push(data.card);
|
|
await delay(settingsStore.animationSpeed);
|
|
});
|
|
} else if (data.type == "joinGame") {
|
|
queueAction(async () => {
|
|
playSound("/sounds/teleport.mp3");
|
|
current_game.teams.push(data.team);
|
|
});
|
|
} else if (data.type == "useEffect") {
|
|
queueAction(async () => {
|
|
current_game.currentTurn.effectsUsed.push(data.effect);
|
|
await delay(settingsStore.animationSpeed);
|
|
});
|
|
} else if (data.type == "currentTurn.updateGold") {
|
|
queueAction(async () => {
|
|
console.log(`adding gold amount : ` + data.operation);
|
|
current_game.currentTurn.gold = data.gold;
|
|
});
|
|
} else if (data.type == "currentTurn.updateDamage") {
|
|
queueAction(async () => {
|
|
console.log(`adding damage amount : ` + data.operation);
|
|
current_game.currentTurn.damage = data.damage;
|
|
});
|
|
} else if (data.type == "team.updateHealth") {
|
|
queueAction(async () => {
|
|
const team = game.value?.teams.find((t) => t._id == data.team);
|
|
if (!team) {
|
|
throw new Error("Team not found");
|
|
}
|
|
console.log(`adding health amount : ` + data.operation);
|
|
team.health = data.health;
|
|
});
|
|
}
|
|
});
|
|
|
|
const playerList = computed(() =>
|
|
game.value!.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[])
|
|
);
|
|
const selfPlayer = computed(() =>
|
|
authStore.logged
|
|
? playerList.value?.find((p) => p.user.userId == authStore.selfUser.userId)
|
|
: undefined
|
|
);
|
|
const isTurn = computed(
|
|
() =>
|
|
selfPlayer.value &&
|
|
game.value &&
|
|
game.value.teams.find((t) => t.players.includes(selfPlayer.value!))?._id ==
|
|
game.value.currentTurn.currentTeam
|
|
);
|
|
|
|
const turnChangeAnimationSpeed = computed(
|
|
() => settingsStore.animationSpeed * 2 + "ms"
|
|
);
|
|
// TODO : current turn sound
|
|
|
|
// TODO : winner screen
|
|
|
|
// TODO : join sound
|
|
|
|
const showResults = ref(false);
|
|
const isWinner = ref(false);
|
|
const loaded = ref(false);
|
|
const discard_unwrapped = ref(false);
|
|
const focusedPlayer = ref<Player>(selfPlayer.value ?? playerList.value[0]);
|
|
|
|
function showLoserScreen() {
|
|
// playSound('/sounds/ding.mp3')
|
|
showResults.value = true;
|
|
isWinner.value = false;
|
|
}
|
|
|
|
function showWinnerScreen() {
|
|
// playSound('/sounds/ding.mp3')
|
|
showResults.value = true;
|
|
isWinner.value = true;
|
|
}
|
|
|
|
// const clientStore = useClientSideStore()
|
|
// const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
|
|
// const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
|
|
// const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
|
|
|
|
function focusPlayer(p: Player) {
|
|
focusedPlayer.value = p;
|
|
}
|
|
|
|
// watch<Team>(() => goStore.current_game!.current_turn, (new_team, old_team) => {
|
|
// if (focusedPlayer.value.team != old_team) { return }
|
|
// const first_player = goStore.current_game?.players.find(p => p.team == goStore.current_game?.current_turn)
|
|
// if (!first_player) {
|
|
// return
|
|
// }
|
|
// focusPlayer(first_player)
|
|
// })
|
|
|
|
onUnmounted(() => {
|
|
eventSource.close();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div @contextmenu.prevent="false" id="game_board" v-if="game">
|
|
<AnimatedBackground
|
|
@ready="loaded = true"
|
|
:isTurn="isTurn ?? false"
|
|
></AnimatedBackground>
|
|
<Transition name="slide-left" mode="out-in">
|
|
<div id="stack_discard" :key="focusedPlayer._id">
|
|
<div id="stack">
|
|
<CardsGrouped
|
|
:container="focusedPlayer.stack"
|
|
:wrapped="true"
|
|
:hidden="true"
|
|
>
|
|
</CardsGrouped>
|
|
</div>
|
|
|
|
<div
|
|
id="discard"
|
|
:class="{ invisible: discard_unwrapped }"
|
|
@click="() => (discard_unwrapped = true)"
|
|
>
|
|
<CardsGrouped :container="focusedPlayer.discard" :wrapped="true">
|
|
</CardsGrouped>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<MarketCards
|
|
:game="game"
|
|
:market="game.market"
|
|
:fire_gems="game.fireGems"
|
|
:marketStack="game.marketStack"
|
|
></MarketCards>
|
|
<!-- <div id="turnStats">{{ game.currentTurn.gold }} {{ game.currentTurn.damage }}</div> -->
|
|
<div id="player_list_container">
|
|
<div id="player_list">
|
|
<PlayerListElement
|
|
v-for="p in playerList"
|
|
:player="p"
|
|
:game="game"
|
|
@click="focusPlayer(p)"
|
|
:focused="focusedPlayer == p"
|
|
:self="selfPlayer == p"
|
|
>
|
|
</PlayerListElement>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="current_player">
|
|
<Transition name="slide-left" mode="out-in">
|
|
<PlayerSlot
|
|
v-if="focusedPlayer"
|
|
:player="focusedPlayer"
|
|
:game="game!"
|
|
:key="focusedPlayer._id"
|
|
></PlayerSlot>
|
|
</Transition>
|
|
</div>
|
|
<ResultDialog
|
|
:isVisible="showResults"
|
|
:won="isWinner"
|
|
:players="playerList"
|
|
@close="showResults = false"
|
|
>
|
|
</ResultDialog>
|
|
<GlobalOverlay></GlobalOverlay>
|
|
<SelfView v-if="selfPlayer" :container="selfPlayer.hand"></SelfView>
|
|
<LoadingScreen v-if="!loaded"></LoadingScreen>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#game_status {
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
#game_board {
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content 1fr;
|
|
grid-template-rows: min-content min-content 1fr;
|
|
grid-template-areas:
|
|
"stack_discard market turn_stats"
|
|
"player_list player_list player_list"
|
|
"current_player current_player current_player";
|
|
height: 100%;
|
|
}
|
|
|
|
#player_list {
|
|
display: flex;
|
|
flex-direction: inherit;
|
|
justify-content: center;
|
|
}
|
|
|
|
#current_player {
|
|
grid-area: current_player;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
/* background: url('/img/bg-darkgrass.png'); */
|
|
}
|
|
|
|
#stack_discard {
|
|
grid-area: stack_discard;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#stack,
|
|
#discard {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#discard {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.discard_overlay {
|
|
z-index: 9;
|
|
display: flex;
|
|
/* background: blue; */
|
|
pointer-events: none;
|
|
gap: 2px;
|
|
flex-wrap: wrap-reverse;
|
|
align-content: flex-end;
|
|
cursor: default;
|
|
position: absolute;
|
|
padding-bottom: inherit;
|
|
padding-left: 40px;
|
|
height: calc(100% - 64px);
|
|
padding-top: 64px;
|
|
width: calc(100% -40px);
|
|
margin-left: 0;
|
|
}
|
|
|
|
#discard_unwrapped_bg {
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 8;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
pointer-events: all;
|
|
padding: inherit;
|
|
}
|
|
|
|
#discard_unwrapped_bg.unwrapped {
|
|
display: block;
|
|
}
|
|
|
|
#market {
|
|
grid-area: market;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
#player_list_container {
|
|
grid-area: player_list;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
|
|
/* background-image: url("/img/bg-darkgrass.png"); */
|
|
}
|
|
|
|
#player_list {
|
|
/* border: 5px solid #000; */
|
|
display: flex;
|
|
}
|
|
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active {
|
|
transition: all v-bind("turnChangeAnimationSpeed") ease-out;
|
|
}
|
|
|
|
.slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
</style>
|