mirror of
https://github.com/Vale54321/schafkopf-bot.git
synced 2025-12-15 19:29:33 +01:00
Message types and server (#44)
* message type and handling * deleted web-content and fixed bug * edited main page
This commit is contained in:
Valentin Heiserer
committed by
GitHub
GitHub
parent
cab2d36f48
commit
a0a1cfaa4a
89
Frontend/package-lock.json
generated
89
Frontend/package-lock.json
generated
@@ -8,12 +8,16 @@
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"vue": "^3.4.21"
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"ioc-service-container": "^1.6.1",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/parser": "^7.7.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.10.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-vue": "^9.25.0",
|
||||
@@ -1078,6 +1082,11 @@
|
||||
"@vue/shared": "3.4.23"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
|
||||
"integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
|
||||
},
|
||||
"node_modules/@vue/language-core": {
|
||||
"version": "2.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
|
||||
@@ -1307,6 +1316,21 @@
|
||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.11.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
|
||||
"integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
@@ -1518,6 +1542,16 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-selector-tokenizer": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
|
||||
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"fastparse": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@@ -1535,6 +1569,34 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/culori": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
|
||||
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/daisyui": {
|
||||
"version": "4.10.2",
|
||||
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
|
||||
"integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css-selector-tokenizer": "^0.8",
|
||||
"culori": "^3",
|
||||
"picocolors": "^1",
|
||||
"postcss-js": "^4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/daisyui"
|
||||
}
|
||||
},
|
||||
"node_modules/de-indent": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
|
||||
@@ -1958,6 +2020,12 @@
|
||||
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fastparse": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
|
||||
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
||||
@@ -2246,6 +2314,11 @@
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ioc-service-container": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/ioc-service-container/-/ioc-service-container-1.6.1.tgz",
|
||||
"integrity": "sha512-eXWKOjYubIyi7j+O3ZeJB401h9VO9TgTqkL8vXHscQfdY+VT9ng6N/bxKRjKbk9wJVIjhUOaFLPUQZZpEdW+XA=="
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
@@ -3674,6 +3747,20 @@
|
||||
"eslint": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
|
||||
"integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-template-compiler": {
|
||||
"version": "2.7.16",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
|
||||
|
||||
@@ -9,12 +9,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.21"
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"ioc-service-container": "^1.6.1",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/parser": "^7.7.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.10.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-vue": "^9.25.0",
|
||||
|
||||
@@ -1,235 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import {onMounted, ref} from 'vue';
|
||||
import CardComp from './components/CardComponent.vue';
|
||||
import {BackendMessage, Card, GamePhase, GameState} from "./BackendMessage";
|
||||
|
||||
const messageFromServer = ref<string[]>([]);
|
||||
|
||||
const gameStateText = ref<string>("Schafkopf");
|
||||
const gameInfoText = ref<string>("");
|
||||
|
||||
const socket = ref<WebSocket | null>();
|
||||
const tableCards = ref<Card[]>([]);
|
||||
const botCards = ref(0);
|
||||
const trickCard = ref<Card>();
|
||||
|
||||
const showGameSelect = ref(true);
|
||||
|
||||
|
||||
function startSimulation(): void {
|
||||
sendMessageToServer("startsimulation");
|
||||
|
||||
}
|
||||
|
||||
function startDedicated(): void {
|
||||
sendMessageToServer("startdedicated");
|
||||
|
||||
}
|
||||
|
||||
|
||||
function stopSimulation(): void {
|
||||
sendMessageToServer("stopsimulation");
|
||||
}
|
||||
|
||||
function showTrumpf(): void {
|
||||
tableCards.value = [];
|
||||
sendMessageToServer("showtrumpf");
|
||||
}
|
||||
|
||||
function showFarben(): void {
|
||||
tableCards.value = [];
|
||||
sendMessageToServer("showfarben");
|
||||
}
|
||||
|
||||
function setGame(game: string): void {
|
||||
sendMessageToServer(game);
|
||||
}
|
||||
|
||||
|
||||
function sendMessageToServer(message: string) {
|
||||
if (socket.value) {
|
||||
socket.value.send(message);
|
||||
console.log("Sent message to server:", message);
|
||||
}
|
||||
}
|
||||
|
||||
function showGameState(gamestate: GameState) {
|
||||
|
||||
|
||||
switch (gamestate.gamePhase) {
|
||||
case GamePhase.GAME_START:
|
||||
gameStateText.value = "Spiel startet";
|
||||
showGameSelect.value = false;
|
||||
botCards.value = 8;
|
||||
break;
|
||||
case GamePhase.TRICK_START:
|
||||
gameStateText.value = "Runde startet";
|
||||
tableCards.value = [];
|
||||
trickCard.value = undefined
|
||||
gameInfoText.value = "";
|
||||
break;
|
||||
case GamePhase.WAIT_FOR_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
|
||||
break;
|
||||
case GamePhase.PLAYER_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
|
||||
if (gamestate.currentPlayer === 0) {
|
||||
botCards.value--
|
||||
}
|
||||
if (gamestate.trumpf) {
|
||||
gameInfoText.value = "TRUMPF";
|
||||
} else {
|
||||
gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
|
||||
}
|
||||
tableCards.value.push(gamestate.card!);
|
||||
|
||||
|
||||
break;
|
||||
case GamePhase.PLAYER_TRICK:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
|
||||
trickCard.value = gamestate.card
|
||||
break;
|
||||
case GamePhase.GAME_STOP:
|
||||
showGameSelect.value = true;
|
||||
break;
|
||||
default:
|
||||
gameStateText.value = "Fehler";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const websocketIp = import.meta.env.VITE_APP_WEBSOCKET_IP;
|
||||
// Open a WebSocket connection when the component is mounted
|
||||
socket.value = new WebSocket("ws://" + websocketIp + ":8080/schafkopf-events/");
|
||||
|
||||
// Handle connection opened
|
||||
socket.value.addEventListener("open", (event) => {
|
||||
console.log("WebSocket connection opened:", event);
|
||||
});
|
||||
|
||||
// Handle messages received from the server
|
||||
socket.value.addEventListener("message", (event) => {
|
||||
const message: BackendMessage = JSON.parse(event.data);
|
||||
console.log(message)
|
||||
if ('gamestate' in message) {
|
||||
console.log(message.gamestate)
|
||||
showGameState(message.gamestate)
|
||||
} else {
|
||||
console.log("Invalid BackendMessage format: ", event);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle connection closed
|
||||
socket.value.addEventListener("close", (event) => {
|
||||
console.log("WebSocket connection closed:", event);
|
||||
});
|
||||
|
||||
// Handle errors
|
||||
socket.value.addEventListener("error", (event) => {
|
||||
console.error("WebSocket error:", event);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="message in messageFromServer" :key="message">{{ message }}</div>
|
||||
|
||||
<div v-if="showGameSelect">
|
||||
<!-- <div class="flex gap-2 place-content-center">-->
|
||||
<!-- <button @click="setGame('setgame:sauspiel')">Sauspiel</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:herzsolo')">herzsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattsolo')">blattsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellsolo')">schellsolo</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattwenz')">blattwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:herzwenz')">herzwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellwenz')">schellwenz</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattgeier')">blattgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:herzgeier')">herzgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellgeier')">schellgeier</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:geier')">Geier</button>-->
|
||||
<!-- <button @click="setGame('setgame:wenz')">Wenz</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="flex gap-2 place-content-center">-->
|
||||
<!-- <button @click="showFarben">Zeige alle Farben</button>-->
|
||||
<!-- <button @click="showTrumpf">Zeige alle Trumpfkarten</button>-->
|
||||
<!-- </div>-->
|
||||
<div class="flex gap-2 place-content-center">
|
||||
<button class="v-button" @click="startDedicated">Dedicated Starten</button>
|
||||
<button class="v-button" @click="startSimulation">Starten</button>
|
||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex gap-2 place-content-center">
|
||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
||||
</div>
|
||||
<h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>
|
||||
<h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>
|
||||
<div v-if="tableCards.length > 0">
|
||||
<!-- <div class="grid grid-cols-4 place-content-center">-->
|
||||
<!-- <CardComp v-for="card in tableCards" :card="card" class="md" />-->
|
||||
<!-- </div>-->
|
||||
<CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute card1 md"/>
|
||||
<CardComp v-if="tableCards.length > 1" :card="tableCards[1]" class="absolute card2 md"/>
|
||||
<CardComp v-if="tableCards.length > 2" :card="tableCards[2]" class="absolute card3 md"/>
|
||||
<CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute card4 md"/>
|
||||
</div>
|
||||
<div class="absolute left-0 top-1/2 transform -translate-y-1/2">
|
||||
<CardComp v-if="trickCard" :card="trickCard" class="xl"/>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="flex flex-row gap-3 w-fit mx-auto justify-center">
|
||||
<CardComp v-for="i in botCards" :key="i" :card="Card.BACK" class="sm"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view/>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
$card-height: 24rem;
|
||||
|
||||
.card0 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card1 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card2 {
|
||||
z-index: 2;
|
||||
top: calc(50% + ($card-height * 0.10));
|
||||
left: calc(50% - ($card-height * 0.3));
|
||||
transform: rotate(50deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card3 {
|
||||
z-index: 3;
|
||||
top: calc(50% - ($card-height * 0.125));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-30deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card4 {
|
||||
z-index: 4;
|
||||
top: calc(50% - ($card-height * 0.4));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-60deg) translate(-50%, -50%);
|
||||
}
|
||||
@import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
</style>
|
||||
|
||||
@@ -71,6 +71,13 @@ export enum GamePhase {
|
||||
PLAYER_TRICK = "PLAYER_TRICK"
|
||||
}
|
||||
|
||||
export enum MessageType {
|
||||
PLAYER_CARD = "PLAYER_CARD",
|
||||
START_DEDICATED_GAME = "START_DEDICATED_GAME",
|
||||
JOIN_GAME = "JOIN_GAME",
|
||||
REQUEST_SERVER_CONNECTION = "REQUEST_SERVER_CONNECTION",
|
||||
}
|
||||
|
||||
// Define the interface for an array of cards
|
||||
export interface CardArray {
|
||||
cards: Card[];
|
||||
@@ -92,8 +99,13 @@ export interface GameState {
|
||||
|
||||
|
||||
export interface GameStateJson {
|
||||
gamestate: GameState
|
||||
gamestate: GameState,
|
||||
}
|
||||
|
||||
export interface EmptyMessage {
|
||||
message_type: string;
|
||||
content: GameStateJson | CardArray | CardObject;
|
||||
}
|
||||
|
||||
// Define a union type for all possible message types
|
||||
export type BackendMessage = CardObject | CardArray | GameStateJson;
|
||||
export type BackendMessage = EmptyMessage
|
||||
@@ -21,7 +21,7 @@ watch(() => props.card, (newCard) => {
|
||||
<template>
|
||||
<div
|
||||
:class="{'!scale-105 !z-10 !top-1/2 !left-1/2' : focus}" class="card transition overflow-hidden"
|
||||
@click="focus=!focus">
|
||||
>
|
||||
<img class="h-full rounded-[1rem] mx-auto" :src="imgSrc" alt="card">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,24 @@
|
||||
import { createApp } from 'vue'
|
||||
import {createApp} from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import {createRouter, createWebHistory} from "vue-router";
|
||||
import {setupService} from "./services/DependencyInjection.ts";
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const routes = [
|
||||
{path: '/', component: () => import('./pages/MainMenu.vue'),},
|
||||
{path: '/online', component: () => import('./pages/OnlineGameList.vue'),},
|
||||
{path: '/localgame', component: () => import('./pages/LocalGame.vue'),},
|
||||
{path: '/dedicatedgame', component: () => import('./pages/DedicatedGame.vue'),},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
const websocketIp = import.meta.env.VITE_APP_WEBSOCKET_IP;
|
||||
setupService("ws://" + websocketIp + ":8080/schafkopf-events/");
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
||||
181
Frontend/src/pages/DedicatedGame.vue
Normal file
181
Frontend/src/pages/DedicatedGame.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<script lang="ts" setup>
|
||||
import {onMounted, ref} from 'vue';
|
||||
|
||||
import {scg} from 'ioc-service-container';
|
||||
import CardComp from '../components/CardComponent.vue';
|
||||
import {BackendMessage, Card, GamePhase, GameState, MessageType} from "../BackendMessage";
|
||||
|
||||
const backendConnection = scg("BackendConnection");
|
||||
|
||||
|
||||
const messageFromServer = ref<string[]>([]);
|
||||
|
||||
const gameStateText = ref<string>("Schafkopf");
|
||||
const gameInfoText = ref<string>("");
|
||||
|
||||
const socket = ref<WebSocket | null>();
|
||||
const tableCards = ref<Card[]>([]);
|
||||
const botCards = ref<Card[]>();
|
||||
const trickCard = ref<Card>();
|
||||
|
||||
const showGameSelect = ref(true);
|
||||
|
||||
function startDedicated(): void {
|
||||
backendConnection.sendMessage(MessageType.START_DEDICATED_GAME,);
|
||||
}
|
||||
|
||||
function joinGame(): void {
|
||||
backendConnection.sendMessage(MessageType.JOIN_GAME,);
|
||||
}
|
||||
|
||||
function sendCard(cardInput: Card): void {
|
||||
const index = botCards.value.findIndex(card => card === cardInput);
|
||||
|
||||
// If card exists in the array, remove it
|
||||
if (index !== -1) {
|
||||
botCards.value.splice(index, 1);
|
||||
}
|
||||
backendConnection.sendMessage(MessageType.PLAYER_CARD, {card: cardInput});
|
||||
}
|
||||
|
||||
function showGameState(gamestate: GameState) {
|
||||
|
||||
|
||||
switch (gamestate.gamePhase) {
|
||||
case GamePhase.GAME_START:
|
||||
gameStateText.value = "Spiel startet";
|
||||
showGameSelect.value = false;
|
||||
// botCards.value = 0;
|
||||
break;
|
||||
case GamePhase.TRICK_START:
|
||||
gameStateText.value = "Runde startet";
|
||||
tableCards.value = [];
|
||||
trickCard.value = undefined
|
||||
gameInfoText.value = "";
|
||||
break;
|
||||
case GamePhase.WAIT_FOR_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
|
||||
break;
|
||||
case GamePhase.PLAYER_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
|
||||
if (gamestate.currentPlayer === 0) {
|
||||
// botCards.value.pop();
|
||||
}
|
||||
if (gamestate.trumpf) {
|
||||
gameInfoText.value = "TRUMPF";
|
||||
} else {
|
||||
gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
|
||||
}
|
||||
tableCards.value.push(gamestate.card!);
|
||||
|
||||
|
||||
break;
|
||||
case GamePhase.PLAYER_TRICK:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
|
||||
trickCard.value = gamestate.card
|
||||
break;
|
||||
case GamePhase.GAME_STOP:
|
||||
showGameSelect.value = true;
|
||||
break;
|
||||
default:
|
||||
gameStateText.value = "Fehler";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socket.value = backendConnection.getWebSocket();
|
||||
|
||||
const messageListener = (message: string) => {
|
||||
const message1: BackendMessage = JSON.parse(message);
|
||||
console.log(message1)
|
||||
if (message1.message_type === "GAME_STATE") {
|
||||
console.log(message1.content)
|
||||
showGameState(message1.content)
|
||||
}
|
||||
if (message1.message_type === "ONLINE_PLAYER_HAND") {
|
||||
botCards.value = message1.content.cards;
|
||||
console.log(message1.content.cards)
|
||||
}
|
||||
};
|
||||
|
||||
backendConnection.addMessageListener(messageListener);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="message in messageFromServer" :key="message">{{ message }}</div>
|
||||
|
||||
<div v-if="showGameSelect">
|
||||
<div class="flex gap-2 place-content-center">
|
||||
<button class="v-button" @click="startDedicated">Starten</button>
|
||||
<button class="v-button" @click="joinGame">Join</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex gap-2 place-content-center">
|
||||
</div>
|
||||
<h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>
|
||||
<h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>
|
||||
<div v-if="tableCards.length > 0">
|
||||
<!-- <div class="grid grid-cols-4 place-content-center">-->
|
||||
<!-- <CardComp v-for="card in tableCards" :card="card" class="md" />-->
|
||||
<!-- </div>-->
|
||||
<CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute card1 md"/>
|
||||
<CardComp v-if="tableCards.length > 1" :card="tableCards[1]" class="absolute card2 md"/>
|
||||
<CardComp v-if="tableCards.length > 2" :card="tableCards[2]" class="absolute card3 md"/>
|
||||
<CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute card4 md"/>
|
||||
</div>
|
||||
<div class="absolute left-0 top-1/2 transform -translate-y-1/2">
|
||||
<CardComp v-if="trickCard" :card="trickCard" class="xl"/>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="flex flex-row gap-3 w-fit mx-auto justify-center">
|
||||
<CardComp v-for="card in botCards" :card="card" class="sm" @click="sendCard(card)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-view/>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
$card-height: 24rem;
|
||||
|
||||
.card0 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card1 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card2 {
|
||||
z-index: 2;
|
||||
top: calc(50% + ($card-height * 0.10));
|
||||
left: calc(50% - ($card-height * 0.3));
|
||||
transform: rotate(50deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card3 {
|
||||
z-index: 3;
|
||||
top: calc(50% - ($card-height * 0.125));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-30deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card4 {
|
||||
z-index: 4;
|
||||
top: calc(50% - ($card-height * 0.4));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-60deg) translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
222
Frontend/src/pages/LocalGame.vue
Normal file
222
Frontend/src/pages/LocalGame.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import {onMounted, ref} from 'vue';
|
||||
|
||||
import {scg} from 'ioc-service-container';
|
||||
import CardComp from '../components/CardComponent.vue';
|
||||
import {BackendMessage, Card, GamePhase, GameState} from "../BackendMessage";
|
||||
|
||||
const backendConnection = scg("BackendConnection");
|
||||
|
||||
|
||||
const messageFromServer = ref<string[]>([]);
|
||||
|
||||
const gameStateText = ref<string>("Schafkopf");
|
||||
const gameInfoText = ref<string>("");
|
||||
|
||||
const socket = ref<WebSocket | null>();
|
||||
const tableCards = ref<Card[]>([]);
|
||||
const botCards = ref(0);
|
||||
const trickCard = ref<Card>();
|
||||
|
||||
const showGameSelect = ref(true);
|
||||
|
||||
|
||||
function startSimulation(): void {
|
||||
sendMessageToServer("startsimulation");
|
||||
|
||||
}
|
||||
|
||||
function startDedicated(): void {
|
||||
sendMessageToServer("startdedicated");
|
||||
|
||||
}
|
||||
|
||||
|
||||
function stopSimulation(): void {
|
||||
sendMessageToServer("stopsimulation");
|
||||
}
|
||||
|
||||
function showTrumpf(): void {
|
||||
tableCards.value = [];
|
||||
sendMessageToServer("showtrumpf");
|
||||
}
|
||||
|
||||
function showFarben(): void {
|
||||
tableCards.value = [];
|
||||
sendMessageToServer("showfarben");
|
||||
}
|
||||
|
||||
function setGame(game: string): void {
|
||||
sendMessageToServer(game);
|
||||
}
|
||||
|
||||
|
||||
function sendMessageToServer(message: string) {
|
||||
if (socket.value) {
|
||||
socket.value.send(message);
|
||||
console.log("Sent message to server:", message);
|
||||
}
|
||||
}
|
||||
|
||||
function showGameState(gamestate: GameState) {
|
||||
|
||||
|
||||
switch (gamestate.gamePhase) {
|
||||
case GamePhase.GAME_START:
|
||||
gameStateText.value = "Spiel startet";
|
||||
showGameSelect.value = false;
|
||||
botCards.value = 8;
|
||||
break;
|
||||
case GamePhase.TRICK_START:
|
||||
gameStateText.value = "Runde startet";
|
||||
tableCards.value = [];
|
||||
trickCard.value = undefined
|
||||
gameInfoText.value = "";
|
||||
break;
|
||||
case GamePhase.WAIT_FOR_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
|
||||
break;
|
||||
case GamePhase.PLAYER_CARD:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
|
||||
if (gamestate.currentPlayer === 0) {
|
||||
botCards.value--
|
||||
}
|
||||
if (gamestate.trumpf) {
|
||||
gameInfoText.value = "TRUMPF";
|
||||
} else {
|
||||
gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
|
||||
}
|
||||
tableCards.value.push(gamestate.card!);
|
||||
|
||||
|
||||
break;
|
||||
case GamePhase.PLAYER_TRICK:
|
||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
|
||||
trickCard.value = gamestate.card
|
||||
break;
|
||||
case GamePhase.GAME_STOP:
|
||||
showGameSelect.value = true;
|
||||
break;
|
||||
default:
|
||||
gameStateText.value = "Fehler";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socket.value = backendConnection.getWebSocket();
|
||||
|
||||
const messageListener = (message: string) => {
|
||||
const message1: BackendMessage = JSON.parse(message);
|
||||
console.log(message1)
|
||||
if ('gamestate' in message1) {
|
||||
console.log(message1.gamestate)
|
||||
showGameState(message1.gamestate)
|
||||
}
|
||||
};
|
||||
|
||||
backendConnection.addMessageListener(messageListener);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="message in messageFromServer" :key="message">{{ message }}</div>
|
||||
|
||||
<div v-if="showGameSelect">
|
||||
<!-- <div class="flex gap-2 place-content-center">-->
|
||||
<!-- <button @click="setGame('setgame:sauspiel')">Sauspiel</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:herzsolo')">herzsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattsolo')">blattsolo</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellsolo')">schellsolo</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattwenz')">blattwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:herzwenz')">herzwenz</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellwenz')">schellwenz</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:blattgeier')">blattgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:herzgeier')">herzgeier</button>-->
|
||||
<!-- <button @click="setGame('setgame:schellgeier')">schellgeier</button>-->
|
||||
|
||||
<!-- <button @click="setGame('setgame:geier')">Geier</button>-->
|
||||
<!-- <button @click="setGame('setgame:wenz')">Wenz</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="flex gap-2 place-content-center">-->
|
||||
<!-- <button @click="showFarben">Zeige alle Farben</button>-->
|
||||
<!-- <button @click="showTrumpf">Zeige alle Trumpfkarten</button>-->
|
||||
<!-- </div>-->
|
||||
<div class="flex gap-2 place-content-center">
|
||||
<button class="v-button" @click="startSimulation">Starten</button>
|
||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex gap-2 place-content-center">
|
||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
||||
</div>
|
||||
<h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>
|
||||
<h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>
|
||||
<div v-if="tableCards.length > 0">
|
||||
<!-- <div class="grid grid-cols-4 place-content-center">-->
|
||||
<!-- <CardComp v-for="card in tableCards" :card="card" class="md" />-->
|
||||
<!-- </div>-->
|
||||
<CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute card1 md"/>
|
||||
<CardComp v-if="tableCards.length > 1" :card="tableCards[1]" class="absolute card2 md"/>
|
||||
<CardComp v-if="tableCards.length > 2" :card="tableCards[2]" class="absolute card3 md"/>
|
||||
<CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute card4 md"/>
|
||||
</div>
|
||||
<div class="absolute left-0 top-1/2 transform -translate-y-1/2">
|
||||
<CardComp v-if="trickCard" :card="trickCard" class="xl"/>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="flex flex-row gap-3 w-fit mx-auto justify-center">
|
||||
<CardComp v-for="i in botCards" :key="i" :card="Card.BACK" class="sm"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view/>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
$card-height: 24rem;
|
||||
|
||||
.card0 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card1 {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card2 {
|
||||
z-index: 2;
|
||||
top: calc(50% + ($card-height * 0.10));
|
||||
left: calc(50% - ($card-height * 0.3));
|
||||
transform: rotate(50deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card3 {
|
||||
z-index: 3;
|
||||
top: calc(50% - ($card-height * 0.125));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-30deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.card4 {
|
||||
z-index: 4;
|
||||
top: calc(50% - ($card-height * 0.4));
|
||||
left: calc(50% + ($card-height * 0.35));
|
||||
transform: rotate(-60deg) translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
187
Frontend/src/pages/MainMenu.vue
Normal file
187
Frontend/src/pages/MainMenu.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import {onBeforeMount, ref} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {scg} from "ioc-service-container";
|
||||
import {BackendMessage, MessageType} from "../BackendMessage.ts";
|
||||
|
||||
const backendConnection = scg("BackendConnection");
|
||||
|
||||
const serverAddress = ref("http://10.6.9.57:8085/")
|
||||
const isConnected = ref<boolean>(false);
|
||||
const isPingInProgress = ref<boolean>(false);
|
||||
const secondsRemaining = ref<number>(10);
|
||||
|
||||
const checkInterval: number = 10;
|
||||
const router = useRouter();
|
||||
|
||||
onBeforeMount(async () => {
|
||||
// Call checkConnection immediately and then every 10 seconds
|
||||
await checkConnectionWithCountdown();
|
||||
});
|
||||
|
||||
async function checkConnectionWithCountdown() {
|
||||
await checkConnection();
|
||||
setTimeout(checkConnectionWithCountdown, checkInterval * 1000);
|
||||
}
|
||||
|
||||
async function checkConnection(): Promise<void> {
|
||||
if (!isConnected.value) {
|
||||
isPingInProgress.value = true;
|
||||
}
|
||||
try {
|
||||
// Try to fetch a resource from the internet
|
||||
await fetch(serverAddress.value + "health", {mode: "no-cors"})
|
||||
// If successful, set isConnected to true
|
||||
isConnected.value = true;
|
||||
} catch (error) {
|
||||
// If an error occurs (e.g., network error), set isConnected to false
|
||||
isConnected.value = false;
|
||||
}
|
||||
isPingInProgress.value = false;
|
||||
|
||||
let countDown = checkInterval;
|
||||
secondsRemaining.value = countDown;
|
||||
|
||||
let countdownInterval = setTimeout(updateCountdown, 1000);
|
||||
|
||||
function updateCountdown() {
|
||||
secondsRemaining.value = --countDown;
|
||||
if (countDown <= 0) clearInterval(countdownInterval);
|
||||
else countdownInterval = setTimeout(updateCountdown, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
async function openOnlineGameList() {
|
||||
backendConnection.sendMessage(MessageType.REQUEST_SERVER_CONNECTION, {serverAddress: serverAddress.value});
|
||||
|
||||
// Create a Promise<void> that resolves when the success message is received
|
||||
const successMessageReceived = new Promise<void>((resolve) => {
|
||||
const messageListener = (message: string) => {
|
||||
const message1: BackendMessage = JSON.parse(message);
|
||||
console.log(message)
|
||||
if (message1.message_type === "SERVER_CONNECTION_SUCCESSFUL") {
|
||||
// Resolve the Promise when the success message is received
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
backendConnection.addMessageListener(messageListener);
|
||||
});
|
||||
|
||||
|
||||
// Wait for the success message to be received
|
||||
await successMessageReceived;
|
||||
|
||||
// Once the success message is received, route to '/online'
|
||||
await router.push("/online");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col place-content-center h-screen gap-8 items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 items-stretch px-2 gap-8">
|
||||
<div class="flex flex-col gap-6 bg-base-200 rounded-box p-8">
|
||||
<div class="flex flex-col gap-4 text-center">
|
||||
<h1 class="text-5xl font-bold">Lokales Spiel</h1>
|
||||
|
||||
<span class="text-sm">mit NFC Reader</span>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-person text-accent"></i>
|
||||
für 3-4 reale Spieler
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-robot text-accent"></i>
|
||||
ggf. 1 virtueller Mitspieler
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-6 items-center">
|
||||
<i class="bi bi-exclamation-circle text-accent"></i>
|
||||
NFC Reader erforderlich
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary">Spielen</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-6 bg-base-200 rounded-box p-8">
|
||||
<div class="flex flex-col gap-4 text-center">
|
||||
<h1 class="text-5xl font-bold">Online</h1>
|
||||
|
||||
<span class="text-sm">spiele gegen Spieler aus der ganzen Welt</span>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-person text-accent"></i>
|
||||
1 Spieler
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-pc-display text-accent"></i>
|
||||
2-3 online Mitspieler
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-robot text-accent"></i>
|
||||
ggf. 1-2 virtuelle Mitspieler
|
||||
</div>
|
||||
|
||||
<div v-if="isPingInProgress" class="flex gap-2 mt-6 items-center">
|
||||
<i class="bi bi bi-arrow-repeat text-info animate-spin"></i>
|
||||
Serververbindung wird hergestellt ...
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isConnected" class="flex gap-2 mt-6 items-center">
|
||||
<i class="bi bi-x-lg text-error"></i>
|
||||
Serververbindung fehlgeschlagen ({{ secondsRemaining }} Sekunden)
|
||||
</div>
|
||||
|
||||
<div v-else class="flex gap-2 mt-6 items-center">
|
||||
<i class="bi bi-check2 text-success"></i>
|
||||
Verbindung zum Server hergestellt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button :disabled="!isConnected" class="btn btn-primary" @click="openOnlineGameList()">Spielen</button>
|
||||
<div class="divider"></div>
|
||||
<input
|
||||
v-model="serverAddress"
|
||||
type="text" placeholder="Serveradresse" class="input input-bordered w-full max-w-xs"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-6 bg-base-200 rounded-box p-8">
|
||||
<div class="flex flex-col gap-4 text-center">
|
||||
<h1 class="text-5xl font-bold">Übung</h1>
|
||||
|
||||
<span class="text-sm">spiele zum Üben gegen NPCs</span>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-person text-accent"></i>
|
||||
1 Spieler
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<i class="bi bi-robot text-accent"></i>
|
||||
3 virtuelle Mitspieler
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary">Spielen</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
14
Frontend/src/pages/OnlineGameList.vue
Normal file
14
Frontend/src/pages/OnlineGameList.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<router-link to="/dedicatedgame">
|
||||
<button class="btn btn-primary">Zum Spiel</button>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
76
Frontend/src/services/BackendConnection.ts
Normal file
76
Frontend/src/services/BackendConnection.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import {MessageType} from "../BackendMessage.ts";
|
||||
|
||||
interface JsonMessage {
|
||||
origin: string;
|
||||
message: any; // Adjust 'any' type as per your expected message structure
|
||||
}
|
||||
|
||||
export class BackendConnection {
|
||||
|
||||
|
||||
private readonly webSocket: WebSocket;
|
||||
private messageListeners: ((message: string) => void)[] = [];
|
||||
private backendUri: string;
|
||||
|
||||
|
||||
constructor(backendUri: string) {
|
||||
this.backendUri = backendUri;
|
||||
|
||||
this.webSocket = new WebSocket(backendUri);
|
||||
|
||||
// Registering event listener for message reception
|
||||
this.webSocket.addEventListener('message', this.handleMessage.bind(this));
|
||||
// Handle connection closed
|
||||
this.webSocket.addEventListener("close", (event) => {
|
||||
console.log("WebSocket connection closed:", event);
|
||||
});
|
||||
|
||||
// Handle errors
|
||||
this.webSocket.addEventListener("error", (event) => {
|
||||
console.error("WebSocket error:", event);
|
||||
});
|
||||
}
|
||||
|
||||
public sendMessage(messageType: MessageType, message?: any): void {
|
||||
let jsonMessage;
|
||||
if (message === undefined) {
|
||||
jsonMessage = {
|
||||
origin: "FRONTEND",
|
||||
message: {
|
||||
message_type: messageType,
|
||||
}
|
||||
};
|
||||
} else {
|
||||
jsonMessage = {
|
||||
origin: "FRONTEND",
|
||||
message: {
|
||||
message_type: messageType,
|
||||
content: message
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
console.log("Sending message:", jsonMessage);
|
||||
this.webSocket.send(JSON.stringify(jsonMessage));
|
||||
}
|
||||
|
||||
public getWebSocket(): WebSocket {
|
||||
return this.webSocket;
|
||||
}
|
||||
|
||||
public addMessageListener(listener: (message: string) => void): void {
|
||||
this.messageListeners.push(listener);
|
||||
}
|
||||
|
||||
public removeMessageListener(listener: (message: string) => void): void {
|
||||
this.messageListeners = this.messageListeners.filter(l => l !== listener);
|
||||
}
|
||||
|
||||
private handleMessage(event: MessageEvent): void {
|
||||
const message = event.data as string;
|
||||
// Notify all registered message listeners
|
||||
this.messageListeners.forEach(listener => {
|
||||
listener(message);
|
||||
});
|
||||
}
|
||||
}
|
||||
15
Frontend/src/services/DependencyInjection.ts
Normal file
15
Frontend/src/services/DependencyInjection.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import {ServiceContainer} from "ioc-service-container";
|
||||
import {BackendConnection} from "./BackendConnection.ts";
|
||||
|
||||
type IoCTypes = {
|
||||
BackendConnection: BackendConnection,
|
||||
};
|
||||
|
||||
declare module 'ioc-service-container' {
|
||||
export function scg<T extends keyof IoCTypes, U extends IoCTypes[T]>(id: T): U;
|
||||
}
|
||||
|
||||
export function setupService(backendUri: string) {
|
||||
const backendConnection = new BackendConnection(backendUri);
|
||||
ServiceContainer.set('BackendConnection', () => backendConnection);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("daisyui")],
|
||||
}
|
||||
Reference in New Issue
Block a user