Feat : add Leave, kick and game configuration
This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { kickPlayer } from "~/netcode";
|
||||
import type { Game } from "~/netcode/interfaces";
|
||||
|
||||
export interface Props {
|
||||
game: Game;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const isVisible = ref(false);
|
||||
</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>
|
||||
</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>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import type { Player } from "~/netcode/interfaces";
|
||||
|
||||
export interface Props {
|
||||
isVisible: Boolean;
|
||||
won: Boolean;
|
||||
players: Array<Player>;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
won: () => false,
|
||||
players: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
reloadNuxtApp();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isVisible" class="dialog-overlay" @click="close">
|
||||
<div class="dialog-box">
|
||||
<div class="dialog-header">
|
||||
<h3 v-if="won">Victoire!</h3>
|
||||
<h3 v-else>Défaite!</h3>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<GamePlayerIcon :user="players[0].user"></GamePlayerIcon>
|
||||
<p v-if="won">Vous avez gagné!</p>
|
||||
<p v-else>
|
||||
Vous avez perdu face à ce magnifique individu qui a très clairement
|
||||
beaucoup plus de bitches que vous! Cela dit, je pense qu'il n'y a pas
|
||||
de bonnes ou de mauvaises situations, juste des situations
|
||||
différentes. Vous avez perdu, mais vous avez gagné en expérience!
|
||||
C'est ça le plus important dans la vie, n'est-ce pas? Apprendre de ses
|
||||
erreurs et devenir meilleur! Alors, ne soyez pas triste, soyez heureux
|
||||
d'avoir eu l'opportunité d'apprendre quelque chose aujourd'hui! Et
|
||||
puis, vous savez ce qu'on dit, "ce qui ne nous tue pas nous rend plus
|
||||
fort"! Alors, allez-y, soyez fort! 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="/img/so_back.png"
|
||||
alt="Une image décrivant le meme 'We are so back'"
|
||||
/>
|
||||
</p>
|
||||
</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;
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
background-image: url("/img/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: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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-body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const isVisible = ref(false);
|
||||
|
||||
const _devicePixelRatio = computed(() => devicePixelRatio);
|
||||
const _window = computed(() => window);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="isVisible = true" class="dialog-open-button">
|
||||
Open Settings
|
||||
</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>Game</h3>
|
||||
</div>
|
||||
<div class="dialog-header">
|
||||
<span>Save discard size</span>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<input type="checkbox" v-model="settingsStore.saveDiscardSize" />
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<template v-if="!settingsStore.saveDiscardSize"
|
||||
>Discard will always open small
|
||||
</template>
|
||||
<template v-else="!settingsStore.saveDiscardSize"
|
||||
>Discard will remember its size
|
||||
</template>
|
||||
</div>
|
||||
<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-footer">
|
||||
<span>{{ settingsStore.cardStyle }}</span>
|
||||
</div>
|
||||
<div class="dialog-header">
|
||||
<span>Animation Speed</span>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="250"
|
||||
step="25"
|
||||
v-model="settingsStore.animationSpeed"
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<span>{{ settingsStore.animationSpeed }}ms</span>
|
||||
</div>
|
||||
<div class="dialog-header">
|
||||
<span>Fast mode</span>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<input type="checkbox" v-model="settingsStore.fastAnimations" />
|
||||
</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 v-if="_window"
|
||||
>{{
|
||||
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>
|
||||
</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-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(38, 62, 15);
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user