jhim/DoubleSnake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Working Playground

Browse Source
This commit is contained in:
Jonas Himmelberg
2025-04-08 17:21:56 +02:00
parent a8220e6959
commit dcea0d24f5
7 changed files with 117 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/game/index.html
View File

@@ -9,8 +9,10 @@
<link rel="icon" type="image/png" href="../assets/Logo.png"> <link rel="icon" type="image/png" href="../assets/Logo.png">
</head> </head>
<body> <body>
<h1 id="wM"></h1> <div class="container menu" id="mainMenu">
<h1 id="wS"></h1> <h1 id="wM" class="message"></h1>
<h1 id="wS"></h1>
</div>
</body> </body>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script> <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

43
frontend/game/scripts/Game/Elements/Playground.js Normal file
View File

@@ -0,0 +1,43 @@
import UIManager from "../UI/UIManager.js";
import Game from "../Game.js";
class Playground{
/**@param {import(Game} game @param {UIManager} uiManager */
constructor(game, uiManager, playgroundSize){
this.playgroundSize = playgroundSize;
this.game = game;
this.uiManager = uiManager;
this.tiles = [];
this.tileSize = window.innerHeight / playgroundSize.height;
this.setupTiles();
}
setupTiles(){
for(let i = 0; i < this.playgroundSize.width; i++){
const row = document.createElement("tr");
let rowTiles = [];
this.uiManager.gameTable.appendChild(row);
for(let u = 0; u < this.playgroundSize.height; u++){
const td = document.createElement("td");
const bgImage = document.createElement("img");
(u % 2 == i % 2) ? bgImage.src = "./assets/Gras/Gras1.png" : bgImage.src = "./assets/Gras/Gras2.png";
bgImage.height = this.tileSize;
bgImage.width = this.tileSize;
bgImage.classList.add("backgroundTile");
td.appendChild(bgImage);
row.appendChild(td);
rowTiles.push(td);
}
this.tiles.push(rowTiles);
}
}
}
export default Playground;

27
frontend/game/scripts/Game/Game.js Normal file
View File

@@ -0,0 +1,27 @@
import Loop from "./Loop.js";
import UIManager from "./UI/UIManager.js";
import Playground from "./Elements/Playground.js";
class Game{
/**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
constructor(socket) {
this.socket = socket;
this.loop = new Loop(this.socket, this);
this.uiManager = new UIManager();
this.playGround = undefined;
this.gameStarted = false;
this.socket.on("startGame", (data) => { this.start(data) });
}
start(playgroundSize){
this.gameStarted = true;
this.uiManager.loadGameContent();
this.playGround = new Playground(this, this.uiManager, playgroundSize);
}
}
export default Game;

12
frontend/game/scripts/Game/Loop.js
View File

@@ -1,10 +1,10 @@
class Loop{ import Game from "./Game.js"
/**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket @param {HTMLDivElement} tilesDiv Autocompletions VSC*/
constructor(socket, tilesDiv, tileSize){
this.socket = socket;
this.tilesDiv = tilesDiv;
this.tileSize = tileSize; class Loop{
/**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket @param {Game} game Autocompletions VSC*/
constructor(socket, game){
this.socket = socket;
this.game = game;
this.socket.on("loop", (data) => { this.loop(data) }); this.socket.on("loop", (data) => { this.loop(data) });
} }

23
frontend/game/scripts/Game/UI/UIManager.js Normal file
View File

@@ -0,0 +1,23 @@
class UIManager{
constructor(){
this.mainDiv = document.getElementById("mainMenu");
this.gameTable = undefined;
}
// Erstellen des Grundgerüstes der UI
loadGameContent(){
this.mainDiv.innerHTML = "";
const body = document.body;
body.style.backgroundImage = "none";
body.style.backgroundRepeat = "no-repeat";
body.style.backgroundColor = "#3b3b3f";
this.gameTable = document.createElement("table");
this.mainDiv.appendChild(this.gameTable);
}
}
export default UIManager;

20
frontend/game/scripts/index.js
View File

@@ -1,4 +1,4 @@
import Loop from "./Game/Loop.js"; import Game from "./Game/Game.js";
class ServerConnectionManager { class ServerConnectionManager {
constructor() { constructor() {
@@ -7,31 +7,15 @@ class ServerConnectionManager {
this.body = document.getElementsByTagName("body")[0]; this.body = document.getElementsByTagName("body")[0];
this.gameStarted = false; this.game = new Game(this.socket);
this.loop = undefined;
// Socket.on Handler und Routen // Socket.on Handler und Routen
this.socket.on("startGame", (data) => { this.startGame(data) });
this.socket.on("waitingForPlayers", (data) => { this.waitingForPlayers(data) }); this.socket.on("waitingForPlayers", (data) => { this.waitingForPlayers(data) });
this.socket.on("gameEnd", (msg) => { this.gameEnd(msg) }); this.socket.on("gameEnd", (msg) => { this.gameEnd(msg) });
this.basicSetup(); this.basicSetup();
} }
startGame(tileSize){
this.gameStarted = true;
this.body.innerHTML = "";
const tilesDiv = document.createElement("div")
this.body.appendChild(tilesDiv);
tilesDiv.id="tiles";
tilesDiv.classList.add("container")
this.loop = new Loop(this.socket, tilesDiv, tileSize);
}
waitingForPlayers(data){ waitingForPlayers(data){
document.getElementById("wM").innerText = data.msg; document.getElementById("wM").innerText = data.msg;
document.getElementById("wS").innerText = data.waitingSeconds; document.getElementById("wS").innerText = data.waitingSeconds;

14
frontend/game/style/mainStyle.css
View File

@@ -1,3 +1,13 @@
#tiles{ table {
border-spacing: 0;
border-collapse: collapse;
}
td, tr {
margin: 0;
padding: 0;
}
td img {
vertical-align: top;
} }