Lobby Creation

public/dashboard.html

@@ -41,23 +41,7 @@ <h1 class="text-center text-primary">Blokus Game</h1>
             <div class="tab-pane fade show active" id="lobbies" role="tabpanel" aria-labelledby="lobbies-tab">
                 <h3 class="text-center">Available Lobbies</h3>
                 <div id="lobby-list" class="mt-3">
-                    <ul class="list-group">
-                        <!-- Example Lobbies -->
-
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            Test Lobby 
-                            <button class="btn btn-primary btn-sm" onclick="window.location.href='game.html';">Join</button>
-
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            Lobby 1
-                            <button class="btn btn-primary btn-sm">Join</button>
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            Lobby 2
-                            <button class="btn btn-primary btn-sm">Join</button>
-                        </li>
-                    </ul>
+                    <!-- Dynamic lobby content will be loaded here -->
                 </div>
             </div>
 
@@ -121,6 +105,7 @@ <h3 class="text-center">Create a Game</h3>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="js/lobbys.js"></script>
 </body>
 
 </html>

public/game.html

@@ -66,6 +66,6 @@ <h3 class="text-center">Player 4</h3>
 
     <!-- Bootstrap JS Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="js/game.js"></script>
+    <script src="game.js"></script>
 </body>
 </html>

public/js/game.js

@@ -1,35 +1,46 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const gameBoard = document.querySelector(".game-board");
+    const piecesContainer = document.getElementById("pieces-container");
 
-    // Δημιουργία του grid
-    for (let i = 0; i < 400; i++) { // 20x20 grid
-        const cell = document.createElement("div");
-        cell.addEventListener("click", () => {
-            cell.classList.toggle("active"); // Εναλλαγή κατάστασης κελιού
-        });
-        gameBoard.appendChild(cell);
-    }
-
-    // Δημιουργία κομματιών για κάθε παίκτη
-    const players = document.querySelectorAll(".player .pieces");
-    players.forEach((pieceContainer, index) => {
-        for (let i = 0; i < 10; i++) { // 10 κομμάτια ανά παίκτη
-            const piece = document.createElement("div");
-            piece.style.backgroundColor = getColor(index); // Χρώμα ανάλογα με τον παίκτη
-            pieceContainer.appendChild(piece);
+    // Λειτουργία για να φορτώσει το JSON αρχείο
+    const loadPiecesFromJSON = async () => {
+        try {
+            const response = await fetch("pieces.json"); // Φόρτωση JSON αρχείου
+            if (!response.ok) throw new Error("Could not fetch pieces.json");
+            const pieces = await response.json(); // Μετατροπή των δεδομένων σε JSON
+            renderPieces(pieces);
+        } catch (error) {
+            console.error("Error loading JSON file:", error);
         }
-    });
+    };
+
+    // Λειτουργία για την απόδοση των κομματιών
+    const renderPieces = (pieces) => {
+        pieces.forEach(piece => {
+            // Δημιουργία wrapper για κάθε κομμάτι
+            const pieceElement = document.createElement("div");
+            pieceElement.className = "piece";
+            pieceElement.style.setProperty("--piece-color", piece.color);
+
+            // Απόδοση του grid της τοπολογίας
+            piece.topology.forEach(row => {
+                row.forEach(cell => {
+                    const cellDiv = document.createElement("div");
+                    if (cell === 1) cellDiv.classList.add("active");
+                    pieceElement.appendChild(cellDiv);
+                });
+            });
 
-    // Reset λειτουργικότητα
-    document.getElementById("reset-game").addEventListener("click", () => {
-        document.querySelectorAll(".game-board div").forEach(cell => {
-            cell.classList.remove("active");
+            // Προσθήκη draggable behavior
+            pieceElement.setAttribute("draggable", "true");
+            pieceElement.addEventListener("dragstart", (e) => {
+                e.dataTransfer.setData("piece-id", piece.id);
+            });
+
+            // Εισαγωγή στο container
+            piecesContainer.appendChild(pieceElement);
         });
-    });
-});
+    };
 
-// Επιστρέφει διαφορετικό χρώμα για κάθε παίκτη
-function getColor(playerIndex) {
-    const colors = ["#ff4d4d", "#4d79ff", "#4dff4d", "#ffff4d"]; // Κόκκινο, Μπλε, Πράσινο, Κίτρινο
-    return colors[playerIndex] || "#ccc";
-}
+    // Κάλεσμα της loadPiecesFromJSON
+    loadPiecesFromJSON();
+});

public/js/interact.js

@@ -0,0 +1,16 @@
+interact(".piece").draggable({
+    listeners: {
+        start(event) {
+            console.log(event.target);
+        },
+        move(event) {
+            const target = event.target;
+            const dataX = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
+            const dataY = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+
+            target.style.transform = `translate(${dataX}px, ${dataY}px)`;
+            target.setAttribute("data-x", dataX);
+            target.setAttribute("data-y", dataY);
+        }
+    }
+});

public/js/lobbys.js

@@ -0,0 +1,55 @@
+
+    // Function to fetch and display lobbies
+    async function fetchLobbies() {
+        const lobbyList = document.getElementById('lobby-list');
+        lobbyList.innerHTML = '<p class="text-center">Loading...</p>'; // Show loading message
+
+        try {
+            // Fetch data from the server
+            const response = await fetch('https://users.iee.ihu.gr/~iee2020202/ADISE24_DreamTeam/blokus.php/lobbys');
+
+            if (!response.ok) {
+                throw new Error('Failed to fetch lobbies');
+            }
+
+            const lobbies = await response.json(); // Parse JSON data
+            lobbyList.innerHTML = ''; // Clear loading message
+
+            if (lobbies.length === 0) {
+                lobbyList.innerHTML = '<p class="text-center text-muted">No lobbies available.</p>';
+                return;
+            }
+
+            // Create list items for each lobby
+            const ul = document.createElement('ul');
+            ul.classList.add('list-group');
+
+            lobbies.forEach(lobby => {
+                const li = document.createElement('li');
+                li.className = 'list-group-item d-flex justify-content-between align-items-center';
+
+                li.innerHTML = `
+                    <span>
+                        <strong>Lobby #${lobby.id}</strong> - Game Type: ${lobby.game_type}, Max Players: ${lobby.max_players}
+                    </span>
+                    <button class="btn btn-primary btn-sm">Join</button>
+                `;
+
+                // Optional: Add functionality for the "Join" button
+                li.querySelector('button').addEventListener('click', () => {
+                    window.location.href = `game.html?lobby_id=${lobby.id}`;
+                });
+
+                ul.appendChild(li);
+            });
+
+            lobbyList.appendChild(ul);
+        } catch (error) {
+            console.error(error);
+            lobbyList.innerHTML = '<p class="text-center text-danger">Failed to load lobbies. Please try again later.</p>';
+        }
+    }
+
+    // Call the fetchLobbies function when the page loads
+    document.addEventListener('DOMContentLoaded', fetchLobbies);
+

public/json/test.json

@@ -0,0 +1,31 @@
+[
+    {
+        "id": 1,
+        "name": "L Piece",
+        "color": "blue",
+        "topology": [
+            [1, 0, 0],
+            [1, 0, 0],
+            [1, 1, 0]
+        ]
+    },
+    {
+        "id": 2,
+        "name": "T Piece",
+        "color": "red",
+        "topology": [
+            [0, 1, 0],
+            [1, 1, 1],
+            [0, 1, 0]
+        ]
+    },
+    {
+        "id": 3,
+        "name": "Square",
+        "color": "green",
+        "topology": [
+            [1, 1],
+            [1, 1]
+        ]
+    }
+]