+
+
+
+
+
+
+
+ View Journal
+ +
+
+
+
+
+
+
+
diff --git a/journal/viewjournal.js b/journal/viewjournal.js
new file mode 100644
index 0000000..7d4cd48
--- /dev/null
+++ b/journal/viewjournal.js
@@ -0,0 +1,75 @@
+const params = new URLSearchParams(window.location.search);
+const playerId = params.get("player_id");
+
+function goBack() {
+ window.location.href = `/game?player_id=${playerId}`;
+}
+
+async function loadJournalPage(playerId) {
+ const journal = document.getElementById("journal");
+
+ const existingGrid = document.getElementById("journalList");
+ if (existingGrid) existingGrid.remove();
+
+ try {
+ const response = await fetch(`/journal?player_id=${playerId}`);
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error("Failed to fetch journal data");
+ }
+
+ const existingSummary = document.querySelector(".journal-summary");
+ if (existingSummary) existingSummary.remove();
+
+ const summary = document.createElement("div");
+ summary.className = "journal-summary";
+ summary.textContent = `Discovered: ${data.discovered_count || 0} / ${
+ data.total_species || 16
+ }`;
+ journal.appendChild(summary);
+
+ const grid = document.createElement("div");
+ grid.id = "journalList";
+ journal.appendChild(grid);
+
+ data.creatures.forEach((creature) => {
+ const item = document.createElement("div");
+ item.className = "journal-item";
+
+ if (creature.discovered) {
+ const img = document.createElement("img");
+ img.src = `../${creature.image}`;
+ img.alt = creature.name;
+
+ img.onerror = () => {
+ img.src = "https://placehold.co/600x400";
+ };
+
+ item.appendChild(img);
+
+ const info = document.createElement("p");
+ info.innerHTML = `${creature.name}${creature.type}`; + item.appendChild(info); + } else { + const placeholder = document.createElement("div"); + placeholder.className = "placeholder"; + placeholder.textContent = "???"; + item.appendChild(placeholder); + + const info = document.createElement("p"); + info.textContent = "???"; + item.appendChild(info); + } + + grid.appendChild(item); + }); + } catch (error) { + console.error("Error loading journal:", error); + journal.textContent = "Failed to load journal."; + } +} + +document.addEventListener("DOMContentLoaded", () => { + loadJournalPage(playerId); +}); diff --git a/loginpage/login.html b/loginpage/login.html new file mode 100644 index 0000000..ff12560 --- /dev/null +++ b/loginpage/login.html @@ -0,0 +1,26 @@ + + + + + + +
+
+
+
+
diff --git a/manage_page/app.py b/manage_page/app.py
new file mode 100644
index 0000000..248a916
--- /dev/null
+++ b/manage_page/app.py
@@ -0,0 +1,42 @@
+from flask import Flask, jsonify, render_template
+
+app = Flask(__name__, template_folder='templates', static_folder='static')
+
+@app.route('/manage')
+def manage_page():
+ return render_template('manage.html')
+
+@app.route('/manage/data')
+def display_data():
+ data = {
+ "habitats": {
+ "h1s1": {"name": "Spriggle", "image": "/static/images/spriggle.png"},
+ "h1s2": None,
+ "h1s3": None,
+ "h1s4": None,
+
+ "h2s1": None,
+ "h2s2": None,
+ "h2s3": None,
+ "h2s4": None,
+
+ "h3s1": None,
+ "h3s2": None,
+ "h3s3": None,
+ "h3s4": None,
+
+ "h4s1": None,
+ "h4s2": None,
+ "h4s3": None,
+ "h4s4": None,
+
+ "unplaced": [
+ # empty for now
+ ]
+ }
+ }
+ return jsonify(data)
+
+if __name__ == "__main__":
+ app.run(debug=True)
+
diff --git a/manage_page/game.py b/manage_page/game.py
new file mode 100644
index 0000000..a7846ea
--- /dev/null
+++ b/manage_page/game.py
@@ -0,0 +1,21 @@
+import mysql.connector
+
+connection = mysql.connector.connect(
+ host='127.0.0.1',
+ port= 5000,
+ database='creature_catcher',
+ user='root',
+ password='123456789',
+ autocommit=True
+ )
+
+cursor = connection.cursor()
+
+player_id = 1
+
+cursor.execute("Insert ignore into players (id, username) values (1,'player1)")
+
+for i in range (1,5):
+ cursor.execute(
+ "Insert ignore into habitats (payer_id"
+ )
\ No newline at end of file
diff --git a/manage_page/managepage.png b/manage_page/managepage.png
new file mode 100644
index 0000000..834af03
Binary files /dev/null and b/manage_page/managepage.png differ
diff --git a/manage_page/static/manage.css b/manage_page/static/manage.css
new file mode 100644
index 0000000..2e27fa1
--- /dev/null
+++ b/manage_page/static/manage.css
@@ -0,0 +1,159 @@
+/* /*
+body {
+ margin: 0;
+ padding: 0;
+ background: url("./Untitled\ design\ \(10\).png") no-repeat center center fixed;
+ background-size: cover;
+
+}
+
+
+.container {
+ width: 80%;
+ max-width: 900px;
+ margin: 40px auto;
+
+
+ padding: 20px;
+ border-radius: 12px;
+
+}
+
+
+#habitatTable {
+ width: 100%;
+
+
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+
+
+
+
+.btn {
+
+ border: none;
+ padding: 12px 22px;
+ font-size: 16px;
+ border-radius: 8px;
+
+
+ font-weight: bold;
+
+}
+
+.btn:hover {
+
+ transform: scale(1.05);
+}
+
+ */
+
+/* body{
+ background-image: url('../managepage.png');
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: center;
+ background-size: cover;
+ } */
+
+ /* .habitat_table{
+ border-collapse: collapse;
+ width: 75%;
+ margin: auto;
+
+ } */
+
+ /* #habitatTable{
+ width: 100%;
+ border: 1px solid;
+
+ }
+ */ */
+
+ /* --- General body and page styling --- */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f5f5f5;
+ margin: 0;
+ padding: 0;
+}
+
+.managepagemain {
+ max-width: 1000px;
+ margin: 30px auto;
+ padding: 20px;
+ background-color: #ffffff;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ border-radius: 10px;
+}
+
+/* --- Table styling --- */
+.habitat_table table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+a
+/* Table headers */
+.habitat_table th {
+ background-color: #4CAF50;
+ color: white;
+ padding: 12px;
+ text-align: left;
+ font-size: 16px;
+}
+
+/* Table cells */
+.habitat_table td {
+ padding: 10px;
+ border: 1px solid #ddd;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 14px;
+}
+
+/* Alternating row colors for readability */
+.habitat_table tr:nth-child(even) {
+ background-color: #f9f9f9;
+}
+
+/* Hover effect */
+.habitat_table tr:hover {
+ background-color: #e0f7fa;
+}
+
+/* Creature images */
+.habitat_table td img {
+ width: 50px;
+ height: 50px;
+ object-fit: contain;
+ margin-right: 5px;
+ vertical-align: middle;
+ border-radius: 5px;
+}
+
+/* --- Buttons --- */
+.buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.buttons button {
+ padding: 10px 20px;
+ border: none;
+ background-color: #4CAF50;
+ color: white;
+ font-size: 14px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.buttons button:hover {
+ background-color: #45a049;
+}
+
diff --git a/manage_page/static/manage.js b/manage_page/static/manage.js
new file mode 100644
index 0000000..e378151
--- /dev/null
+++ b/manage_page/static/manage.js
@@ -0,0 +1,238 @@
+const player_id = 2;
+let value1 = "";
+let value2 = "";
+
+const table = document.querySelector(".habitat_table");
+const cdiv = document.createElement("div");
+
+let h4 = document.createElement("h4");
+h4.innerText = "";
+
+const edit = document.getElementById("Editbtn");
+edit.addEventListener("click", async () => {
+ console.log("clicked successfully");
+
+ value1, value2 = await edit_btn();
+
+ let value3 = await move_creature(value1, value2);
+ console.log(value3, "this is value 3");
+});
+
+async function edit_btn() {
+ let div = document.querySelector("#manage_btn");
+
+ h4.innerText = "select the image you want to move";
+
+ div.appendChild(h4);
+
+ value1 = await after_click();
+
+ h4.innerText = `You Selected ${value1}`;
+
+ h4.innerText = "select the you destination habitat";
+
+ value2 = await after_click();
+
+ h4.innerText = `You Selected ${value2}`;
+ // console.log(value1,value2)
+ return value1, value2;
+}
+
+function after_click() {
+ return new Promise((resolve) => {
+ function handler(event) {
+ const target = event.target;
+
+ //if an image is selected
+ if (target.tagName === "IMG") {
+ const src = target.src;
+ const fileName = src.substring(src.lastIndexOf("/") + 1);
+ const nameWithoutExt = fileName.split(".")[0];
+
+ console.log("User clicked image:", nameWithoutExt);
+
+ table.removeEventListener("click", handler);
+ resolve(nameWithoutExt);
+ }
+
+ //if habitat row is selectd
+ else if (target.tagName === "TD" && target.cellIndex === 0) {
+ const habitatName = target.innerText.trim();
+ console.log("User clicked habitat:", habitatName);
+
+ table.removeEventListener("click", handler);
+ resolve(habitatName);
+ }
+ }
+
+ table.addEventListener("click", handler);
+ });
+}
+
+const data = document.querySelector(".habitat_table");
+
+async function get_habitat(params) {
+ const url = `http://127.0.0.1:8080//habitats?player_id=${player_id}`;
+ const response = await fetch(url);
+ const result = await response.json();
+ return result;
+}
+
+async function move_habitat_API(creatureID, targetID) {
+ let url = `http://127.0.0.1:8080/move`;
+ try {
+ const response = await fetch(url, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ player_id: player_id,
+ creature_id: creatureID,
+ target_habitat_id: targetID,
+ }),
+ });
+ const result = await response.json();
+ return result;
+ } catch (error) {
+ return JSON.stringify({ status: "fail", message: str(error) });
+ }
+}
+
+async function put_habitat(params) {
+ //create a variable habitatbox that will be the main table
+ const habitatbox = document.querySelector(".habitat_table");
+ habitatbox.innerHTML = "";
+ const table = document.createElement("table");
+
+ table.id = "managetable";
+ const thead = document.createElement("thead");
+ thead.innerHTML = "Welcome to creature catch
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main Page
+ +
+
+
+
+
+
+ Explore
+
+
+
+
+
+
+ Choose companions:
+ +
+
+ Choose the wild creature:
+ + +
+
+
+
+ Manage
+
+
+
+
+
+
+
+ Habitat 1
+ +
+
+ Habitat 2
+ +
+
+ Habitat 3
+ +
+
+ Habitat 4
+ +
+
+ Unplaced
+ +
+
+
+
+
+