Initial commit

2025-06-05 20:15:38 +12:00
commit fa1cc5035e
16 changed files with 581 additions and 0 deletions
--- a/resource/template/base.html
+++ b/resource/template/base.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" href="data:,">
+    <title>{% block title %}{% endblock %}</title>
+</head>
+<body>
+    {% include 'navbar.html' %}
+
+    <div class="container">
+        {% block content %}
+        {% endblock %}
+    </div>
+</body>
+</html>
--- a/resource/template/home.html
+++ b/resource/template/home.html
@@ -0,0 +1,63 @@
+{% extends 'base.html' %}
+{% block title %}Home{% endblock %}
+{% block content %}
+    <h1>Hello, hello, hello...</h1>
+    <p>Yeah, it's early.</p>
+    <div class="room-join-box">
+        <input type="text" id="username-input" class="room-input" placeholder="Your name">
+    </div>
+
+    <div class="room-join-box">
+        <input type="text" id="room-code-input" class="room-input" placeholder="Enter Room Code" maxlength="10">
+        <button class="room-button" id="join-button">Join</button>
+    </div>
+
+    <div class="room-join-box">
+        <button class="room-button" id="create-button">Create New Room</button>
+    </div>
+
+
+    <script>
+function getUsername() {
+    const username = document.getElementById('username-input').value.trim();
+    if (!username) {
+        alert("Please enter your name.");
+        throw new Error("Username required");
+    }
+    localStorage.setItem('username', username);
+    return username;
+}
+
+document.getElementById('join-button').addEventListener('click', () => {
+    try {
+        getUsername();
+        const code = document.getElementById('room-code-input').value.trim();
+        if (code) {
+            window.location.href = `/room/${code}`;
+        } else {
+            alert("Enter a room code.");
+        }
+    } catch (_) {}
+});
+
+document.getElementById('create-button').addEventListener('click', async () => {
+    try {
+        getUsername();
+        const res = await fetch('/api/room', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({})
+        });
+        const data = await res.json();
+        if (data.code) {
+            window.location.href = `/room/${data.code}`;
+        } else {
+            alert("Failed to create room.");
+        }
+    } catch (_) {}
+});
+</script>
+
+
+    </script>
+{% endblock %}
--- a/resource/template/navbar.html
+++ b/resource/template/navbar.html
@@ -0,0 +1,5 @@
+<div class="navbar">
+    <a class="navname">Echo</a>
+    <a href="/">Home</a>
+</div>
+  
--- a/resource/template/options.html
+++ b/resource/template/options.html
--- a/resource/template/room.html
+++ b/resource/template/room.html
@@ -0,0 +1,66 @@
+{% extends 'room_base.html' %}
+{% block title %}Room {{ room_code }}{% endblock %}
+{% block content %}
+    <h1>Room {{ room_code }}</h1>
+    <div id="chat-box"></div>
+
+    <div class="chat-input-container">
+    <input type="text" id="chat-input" placeholder="Say something..." />
+    <button id="send-button">Send</button>
+    </div>
+
+    <script>
+        const socket = io();
+        const room = "{{ room_code }}";
+
+        const name = localStorage.getItem('username') || 'Anonymous';
+        socket.emit('join', { room, sender: name });
+
+
+        // Fetch message history
+        fetch(`/api/room/${room}/messages`)
+            .then(res => res.json())
+            .then(data => {
+                const chatBox = document.getElementById('chat-box');
+                if (data && Array.isArray(data)) {
+                    data.forEach(msg => {
+                        const msgElem = document.createElement('p');
+                        msgElem.textContent = `${msg.sender}: ${msg.text}`;
+                        chatBox.appendChild(msgElem);
+                    });
+                    chatBox.scrollTop = chatBox.scrollHeight;
+                }
+            });
+
+        // Message listener
+        socket.on('message', (data) => {
+            const chatBox = document.getElementById('chat-box');
+            const msgElem = document.createElement('p');
+
+            msgElem.textContent = `${data.sender}: ${data.text}`;
+            if (data.sender === 'System') {
+                msgElem.style.fontStyle = 'italic';
+                msgElem.style.color = 'gray';
+            }
+
+            chatBox.appendChild(msgElem);
+            chatBox.scrollTop = chatBox.scrollHeight;
+        });
+
+
+        // Send message
+        document.getElementById('send-button').onclick = () => {
+            const text = document.getElementById('chat-input').value;
+            const sender = localStorage.getItem('username') || 'Anonymous';
+
+            if (text.trim()) {
+                socket.emit('message', {
+                    room,
+                    text,
+                    sender
+                });
+                document.getElementById('chat-input').value = '';
+            }
+        };
+    </script>
+{% endblock %}
--- a/resource/template/room_base.html
+++ b/resource/template/room_base.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" href="data:,">
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+
+    <title>{% block title %}{% endblock %}</title>
+</head>
+<body>
+    {% include 'navbar.html' %}
+
+    <div class="container">
+        {% block content %}
+        {% endblock %}
+    </div>
+</body>
+</html>