mirror of
https://github.com/Vale54321/schafkopf-bot.git
synced 2025-12-16 03:39:34 +01:00
Message types and server2 (#46)
* fixed building issue * fixed building issue
This commit is contained in:
committed by
GitHub
parent
a0a1cfaa4a
commit
2cd8359518
17
.github/workflows/buildAndTest.yml
vendored
17
.github/workflows/buildAndTest.yml
vendored
@@ -13,6 +13,23 @@ jobs:
|
|||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Use Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: '20.x'
|
||||||
|
|
||||||
|
- name: Install Frontend dependencies
|
||||||
|
run: npm install
|
||||||
|
working-directory: Frontend
|
||||||
|
|
||||||
|
- name: Create .env file
|
||||||
|
run: echo "VITE_APP_WEBSOCKET_IP=localhost" > .env
|
||||||
|
working-directory: Frontend
|
||||||
|
|
||||||
|
- name: Build Frontend
|
||||||
|
run: npm run build
|
||||||
|
working-directory: Frontend
|
||||||
|
|
||||||
- name: Set up JDK 21
|
- name: Set up JDK 21
|
||||||
uses: actions/setup-java@v4
|
uses: actions/setup-java@v4
|
||||||
with:
|
with:
|
||||||
|
|||||||
@@ -29,11 +29,11 @@ function joinGame(): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function sendCard(cardInput: Card): void {
|
function sendCard(cardInput: Card): void {
|
||||||
const index = botCards.value.findIndex(card => card === cardInput);
|
const index = botCards.value!.findIndex(card => card === cardInput);
|
||||||
|
|
||||||
// If card exists in the array, remove it
|
// If card exists in the array, remove it
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
botCards.value.splice(index, 1);
|
botCards.value!.splice(index, 1);
|
||||||
}
|
}
|
||||||
backendConnection.sendMessage(MessageType.PLAYER_CARD, {card: cardInput});
|
backendConnection.sendMessage(MessageType.PLAYER_CARD, {card: cardInput});
|
||||||
}
|
}
|
||||||
@@ -90,11 +90,11 @@ onMounted(() => {
|
|||||||
const messageListener = (message: string) => {
|
const messageListener = (message: string) => {
|
||||||
const message1: BackendMessage = JSON.parse(message);
|
const message1: BackendMessage = JSON.parse(message);
|
||||||
console.log(message1)
|
console.log(message1)
|
||||||
if (message1.message_type === "GAME_STATE") {
|
if (message1.message_type === "GAME_STATE" && "gamestate" in message1.content) {
|
||||||
console.log(message1.content)
|
console.log(message1.content)
|
||||||
showGameState(message1.content)
|
showGameState(message1.content.gamestate)
|
||||||
}
|
}
|
||||||
if (message1.message_type === "ONLINE_PLAYER_HAND") {
|
if (message1.message_type === "ONLINE_PLAYER_HAND" && "cards" in message1.content) {
|
||||||
botCards.value = message1.content.cards;
|
botCards.value = message1.content.cards;
|
||||||
console.log(message1.content.cards)
|
console.log(message1.content.cards)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,186 +1,186 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {onMounted, ref} from 'vue';
|
// import {onMounted, ref} from 'vue';
|
||||||
|
//
|
||||||
import {scg} from 'ioc-service-container';
|
// import {scg} from 'ioc-service-container';
|
||||||
import CardComp from '../components/CardComponent.vue';
|
// import CardComp from '../components/CardComponent.vue';
|
||||||
import {BackendMessage, Card, GamePhase, GameState} from "../BackendMessage";
|
// import {BackendMessage, Card, GamePhase, GameState} from "../BackendMessage";
|
||||||
|
//
|
||||||
const backendConnection = scg("BackendConnection");
|
// const backendConnection = scg("BackendConnection");
|
||||||
|
//
|
||||||
|
//
|
||||||
const messageFromServer = ref<string[]>([]);
|
// const messageFromServer = ref<string[]>([]);
|
||||||
|
//
|
||||||
const gameStateText = ref<string>("Schafkopf");
|
// const gameStateText = ref<string>("Schafkopf");
|
||||||
const gameInfoText = ref<string>("");
|
// const gameInfoText = ref<string>("");
|
||||||
|
//
|
||||||
const socket = ref<WebSocket | null>();
|
// const socket = ref<WebSocket | null>();
|
||||||
const tableCards = ref<Card[]>([]);
|
// const tableCards = ref<Card[]>([]);
|
||||||
const botCards = ref(0);
|
// const botCards = ref(0);
|
||||||
const trickCard = ref<Card>();
|
// const trickCard = ref<Card>();
|
||||||
|
//
|
||||||
const showGameSelect = ref(true);
|
// const showGameSelect = ref(true);
|
||||||
|
//
|
||||||
|
//
|
||||||
function startSimulation(): void {
|
// function startSimulation(): void {
|
||||||
sendMessageToServer("startsimulation");
|
// sendMessageToServer("startsimulation");
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
function startDedicated(): void {
|
// function startDedicated(): void {
|
||||||
sendMessageToServer("startdedicated");
|
// sendMessageToServer("startdedicated");
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
function stopSimulation(): void {
|
// function stopSimulation(): void {
|
||||||
sendMessageToServer("stopsimulation");
|
// sendMessageToServer("stopsimulation");
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
function showTrumpf(): void {
|
// function showTrumpf(): void {
|
||||||
tableCards.value = [];
|
// tableCards.value = [];
|
||||||
sendMessageToServer("showtrumpf");
|
// sendMessageToServer("showtrumpf");
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
function showFarben(): void {
|
// function showFarben(): void {
|
||||||
tableCards.value = [];
|
// tableCards.value = [];
|
||||||
sendMessageToServer("showfarben");
|
// sendMessageToServer("showfarben");
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
function setGame(game: string): void {
|
// function setGame(game: string): void {
|
||||||
sendMessageToServer(game);
|
// sendMessageToServer(game);
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
function sendMessageToServer(message: string) {
|
// function sendMessageToServer(message: string) {
|
||||||
if (socket.value) {
|
// if (socket.value) {
|
||||||
socket.value.send(message);
|
// socket.value.send(message);
|
||||||
console.log("Sent message to server:", message);
|
// console.log("Sent message to server:", message);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
function showGameState(gamestate: GameState) {
|
// function showGameState(gamestate: GameState) {
|
||||||
|
//
|
||||||
|
//
|
||||||
switch (gamestate.gamePhase) {
|
// switch (gamestate.gamePhase) {
|
||||||
case GamePhase.GAME_START:
|
// case GamePhase.GAME_START:
|
||||||
gameStateText.value = "Spiel startet";
|
// gameStateText.value = "Spiel startet";
|
||||||
showGameSelect.value = false;
|
// showGameSelect.value = false;
|
||||||
botCards.value = 8;
|
// botCards.value = 8;
|
||||||
break;
|
// break;
|
||||||
case GamePhase.TRICK_START:
|
// case GamePhase.TRICK_START:
|
||||||
gameStateText.value = "Runde startet";
|
// gameStateText.value = "Runde startet";
|
||||||
tableCards.value = [];
|
// tableCards.value = [];
|
||||||
trickCard.value = undefined
|
// trickCard.value = undefined
|
||||||
gameInfoText.value = "";
|
// gameInfoText.value = "";
|
||||||
break;
|
// break;
|
||||||
case GamePhase.WAIT_FOR_CARD:
|
// case GamePhase.WAIT_FOR_CARD:
|
||||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
|
// gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
|
||||||
break;
|
// break;
|
||||||
case GamePhase.PLAYER_CARD:
|
// case GamePhase.PLAYER_CARD:
|
||||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
|
// gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
|
||||||
if (gamestate.currentPlayer === 0) {
|
// if (gamestate.currentPlayer === 0) {
|
||||||
botCards.value--
|
// botCards.value--
|
||||||
}
|
// }
|
||||||
if (gamestate.trumpf) {
|
// if (gamestate.trumpf) {
|
||||||
gameInfoText.value = "TRUMPF";
|
// gameInfoText.value = "TRUMPF";
|
||||||
} else {
|
// } else {
|
||||||
gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
|
// gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
|
||||||
}
|
// }
|
||||||
tableCards.value.push(gamestate.card!);
|
// tableCards.value.push(gamestate.card!);
|
||||||
|
//
|
||||||
|
//
|
||||||
break;
|
// break;
|
||||||
case GamePhase.PLAYER_TRICK:
|
// case GamePhase.PLAYER_TRICK:
|
||||||
gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
|
// gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
|
||||||
trickCard.value = gamestate.card
|
// trickCard.value = gamestate.card
|
||||||
break;
|
// break;
|
||||||
case GamePhase.GAME_STOP:
|
// case GamePhase.GAME_STOP:
|
||||||
showGameSelect.value = true;
|
// showGameSelect.value = true;
|
||||||
break;
|
// break;
|
||||||
default:
|
// default:
|
||||||
gameStateText.value = "Fehler";
|
// gameStateText.value = "Fehler";
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
onMounted(() => {
|
// onMounted(() => {
|
||||||
socket.value = backendConnection.getWebSocket();
|
// socket.value = backendConnection.getWebSocket();
|
||||||
|
//
|
||||||
const messageListener = (message: string) => {
|
// const messageListener = (message: string) => {
|
||||||
const message1: BackendMessage = JSON.parse(message);
|
// const message1: BackendMessage = JSON.parse(message);
|
||||||
console.log(message1)
|
// console.log(message1)
|
||||||
if ('gamestate' in message1) {
|
// if ('gamestate' in message1) {
|
||||||
console.log(message1.gamestate)
|
// console.log(message1.gamestate)
|
||||||
showGameState(message1.gamestate)
|
// showGameState(message1.gamestate)
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
backendConnection.addMessageListener(messageListener);
|
// backendConnection.addMessageListener(messageListener);
|
||||||
});
|
// });
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<!-- <div>-->
|
||||||
<div v-for="message in messageFromServer" :key="message">{{ message }}</div>
|
<!-- <div v-for="message in messageFromServer" :key="message">{{ message }}</div>-->
|
||||||
|
|
||||||
<div v-if="showGameSelect">
|
<!-- <div v-if="showGameSelect">-->
|
||||||
<!-- <div class="flex gap-2 place-content-center">-->
|
<!-- <!– <div class="flex gap-2 place-content-center">–>-->
|
||||||
<!-- <button @click="setGame('setgame:sauspiel')">Sauspiel</button>-->
|
<!-- <!– <button @click="setGame('setgame:sauspiel')">Sauspiel</button>–>-->
|
||||||
|
|
||||||
<!-- <button @click="setGame('setgame:herzsolo')">herzsolo</button>-->
|
<!-- <!– <button @click="setGame('setgame:herzsolo')">herzsolo</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>-->
|
<!-- <!– <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:blattsolo')">blattsolo</button>-->
|
<!-- <!– <button @click="setGame('setgame:blattsolo')">blattsolo</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:schellsolo')">schellsolo</button>-->
|
<!-- <!– <button @click="setGame('setgame:schellsolo')">schellsolo</button>–>-->
|
||||||
|
|
||||||
<!-- <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>-->
|
<!-- <!– <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:blattwenz')">blattwenz</button>-->
|
<!-- <!– <button @click="setGame('setgame:blattwenz')">blattwenz</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:herzwenz')">herzwenz</button>-->
|
<!-- <!– <button @click="setGame('setgame:herzwenz')">herzwenz</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:schellwenz')">schellwenz</button>-->
|
<!-- <!– <button @click="setGame('setgame:schellwenz')">schellwenz</button>–>-->
|
||||||
|
|
||||||
<!-- <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>-->
|
<!-- <!– <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:blattgeier')">blattgeier</button>-->
|
<!-- <!– <button @click="setGame('setgame:blattgeier')">blattgeier</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:herzgeier')">herzgeier</button>-->
|
<!-- <!– <button @click="setGame('setgame:herzgeier')">herzgeier</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:schellgeier')">schellgeier</button>-->
|
<!-- <!– <button @click="setGame('setgame:schellgeier')">schellgeier</button>–>-->
|
||||||
|
|
||||||
<!-- <button @click="setGame('setgame:geier')">Geier</button>-->
|
<!-- <!– <button @click="setGame('setgame:geier')">Geier</button>–>-->
|
||||||
<!-- <button @click="setGame('setgame:wenz')">Wenz</button>-->
|
<!-- <!– <button @click="setGame('setgame:wenz')">Wenz</button>–>-->
|
||||||
<!-- </div>-->
|
<!-- <!– </div>–>-->
|
||||||
<!-- <div class="flex gap-2 place-content-center">-->
|
<!-- <!– <div class="flex gap-2 place-content-center">–>-->
|
||||||
<!-- <button @click="showFarben">Zeige alle Farben</button>-->
|
<!-- <!– <button @click="showFarben">Zeige alle Farben</button>–>-->
|
||||||
<!-- <button @click="showTrumpf">Zeige alle Trumpfkarten</button>-->
|
<!-- <!– <button @click="showTrumpf">Zeige alle Trumpfkarten</button>–>-->
|
||||||
<!-- </div>-->
|
<!-- <!– </div>–>-->
|
||||||
<div class="flex gap-2 place-content-center">
|
<!-- <div class="flex gap-2 place-content-center">-->
|
||||||
<button class="v-button" @click="startSimulation">Starten</button>
|
<!-- <button class="v-button" @click="startSimulation">Starten</button>-->
|
||||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
<!-- <button class="v-button" @click="stopSimulation">Stoppen</button>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div v-else>
|
<!-- <div v-else>-->
|
||||||
<div class="flex gap-2 place-content-center">
|
<!-- <div class="flex gap-2 place-content-center">-->
|
||||||
<button class="v-button" @click="stopSimulation">Stoppen</button>
|
<!-- <button class="v-button" @click="stopSimulation">Stoppen</button>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>
|
<!-- <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>
|
<!-- <h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>-->
|
||||||
<div v-if="tableCards.length > 0">
|
<!-- <div v-if="tableCards.length > 0">-->
|
||||||
<!-- <div class="grid grid-cols-4 place-content-center">-->
|
<!-- <!– <div class="grid grid-cols-4 place-content-center">–>-->
|
||||||
<!-- <CardComp v-for="card in tableCards" :card="card" class="md" />-->
|
<!-- <!– <CardComp v-for="card in tableCards" :card="card" class="md" />–>-->
|
||||||
<!-- </div>-->
|
<!-- <!– </div>–>-->
|
||||||
<CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute card1 md"/>
|
<!-- <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 > 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 > 2" :card="tableCards[2]" class="absolute card3 md"/>-->
|
||||||
<CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute card4 md"/>
|
<!-- <CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute card4 md"/>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="absolute left-0 top-1/2 transform -translate-y-1/2">
|
<!-- <div class="absolute left-0 top-1/2 transform -translate-y-1/2">-->
|
||||||
<CardComp v-if="trickCard" :card="trickCard" class="xl"/>
|
<!-- <CardComp v-if="trickCard" :card="trickCard" class="xl"/>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
<div class="absolute bottom-0 w-full">
|
<!-- <div class="absolute bottom-0 w-full">-->
|
||||||
<div class="flex flex-row gap-3 w-fit mx-auto justify-center">
|
<!-- <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"/>
|
<!-- <CardComp v-for="i in botCards" :key="i" :card="Card.BACK" class="sm"/>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<router-view/>
|
<!-- <router-view/>-->
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$card-height: 24rem;
|
$card-height: 24rem;
|
||||||
|
|||||||
@@ -1,21 +1,13 @@
|
|||||||
import {MessageType} from "../BackendMessage.ts";
|
import {MessageType} from "../BackendMessage.ts";
|
||||||
|
|
||||||
interface JsonMessage {
|
|
||||||
origin: string;
|
|
||||||
message: any; // Adjust 'any' type as per your expected message structure
|
|
||||||
}
|
|
||||||
|
|
||||||
export class BackendConnection {
|
export class BackendConnection {
|
||||||
|
|
||||||
|
|
||||||
private readonly webSocket: WebSocket;
|
private readonly webSocket: WebSocket;
|
||||||
private messageListeners: ((message: string) => void)[] = [];
|
private messageListeners: ((message: string) => void)[] = [];
|
||||||
private backendUri: string;
|
|
||||||
|
|
||||||
|
|
||||||
constructor(backendUri: string) {
|
constructor(backendUri: string) {
|
||||||
this.backendUri = backendUri;
|
|
||||||
|
|
||||||
this.webSocket = new WebSocket(backendUri);
|
this.webSocket = new WebSocket(backendUri);
|
||||||
|
|
||||||
// Registering event listener for message reception
|
// Registering event listener for message reception
|
||||||
|
|||||||
Reference in New Issue
Block a user