167 lines
3.5 KiB
Vue
167 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { deleteGame, kickPlayer } from "~/netcode";
|
|
import type { Game } from "~/netcode/interfaces";
|
|
|
|
export interface Props {
|
|
game: Game;
|
|
}
|
|
|
|
const deletionConfirmation = ref("Delete Game");
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const isVisible = ref(false);
|
|
|
|
watch(isVisible, () => {
|
|
deletionConfirmation.value = "Delete Game";
|
|
});
|
|
|
|
function deleteButtonClick() {
|
|
if (deletionConfirmation.value == "Delete Game") {
|
|
deletionConfirmation.value = "Are you sure?";
|
|
} else {
|
|
deleteGame(props.game._id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button @click="isVisible = true" class="dialog-open-button yellow">
|
|
Game Configuration
|
|
</button>
|
|
<div
|
|
:class="{ visible: isVisible }"
|
|
class="dialog dialog-background"
|
|
@click="isVisible = false"
|
|
></div>
|
|
<div class="dialog dialog-box" :class="{ visible: isVisible }" @click.stop>
|
|
<div class="dialog-header">
|
|
<h3>Extensions</h3>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<span>Enable extensions</span>
|
|
</div>
|
|
<div class="dialog-body dialog-flex">
|
|
<span v-for="extension in props.game.packs"
|
|
><input type="checkbox" checked="true" disabled />{{ extension }}</span
|
|
>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<h3>Players</h3>
|
|
</div>
|
|
<template v-for="team in game.teams">
|
|
<template v-for="player in team.players">
|
|
<div class="dialog-header">
|
|
<span>{{ player.user.username }}</span>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<button
|
|
:disabled="game.owner._id == player.user._id"
|
|
@click="kickPlayer(game._id, player._id)"
|
|
>
|
|
Kick
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<div class="dialog-header">
|
|
<h3>Danger Zone</h3>
|
|
</div>
|
|
<div class="dialog-header">
|
|
<button class="red" @click="deleteButtonClick">
|
|
{{ deletionConfirmation }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dialog {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
transition: 0.3s all var(--animation-curve);
|
|
}
|
|
.dialog-open-button {
|
|
cursor: pointer;
|
|
}
|
|
.dialog-open-button:active {
|
|
filter: drop-shadow(0px 0px 1px);
|
|
}
|
|
|
|
.dialog-flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.dialog-background {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0);
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
transition: 0.3s all linear;
|
|
}
|
|
|
|
.dialog-background.visible {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.dialog-box {
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 100%);
|
|
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%;
|
|
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6));
|
|
background: rgb(124, 85, 13);
|
|
}
|
|
|
|
.dialog-box.visible {
|
|
bottom: 50%;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
|
|
.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>
|