oscarg/echo-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Huge update.

Browse Source
This commit is contained in:
oscarg
2025-06-11 03:31:59 +12:00
parent 699b829696
commit d1390bd770
14 changed files with 429 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resource/template/base.html
View File

@@ -5,9 +5,11 @@
<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>
<script src="{{ url_for('static', filename='js/base.js') }}"></script>
{% include 'navbar.html' %}
<div class="container">

52
resource/template/home.html
View File

@@ -1,63 +1,27 @@
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block title %}Echo | Home{% endblock %}
{% block content %}
<h1>Hello, hello, hello...</h1>
<p>Yeah, it's early.</p>
<h3>Firstly, name:</h3>
<div class="room-join-box">
<input type="text" id="username-input" class="room-input" placeholder="Your name">
</div>
<h3>Join an Existing Room?</h3>
<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>
<h3>Create a New Room?</h3>
<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 %}
<script src="{{ url_for('static', filename='js/home.js') }}"></script>
{% endblock %}

1
resource/template/navbar.html
View File

@@ -1,5 +1,6 @@
<div class="navbar">
<a class="navname">Echo</a>
<a href="/">Home</a>
<a href="/settings">Settings</a>
</div>

0
resource/template/options.html
View File

61
resource/template/room.html
View File

@@ -1,5 +1,5 @@
{% extends 'room_base.html' %}
{% block title %}Room {{ room_code }}{% endblock %}
{% block title %}Echo | Room {{ room_code }}{% endblock %}
{% block content %}
<h1>Room {{ room_code }}</h1>
<div class="chat-container">
@@ -11,63 +11,8 @@
</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 on button click
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 = '';
}
};
// Send message on Enter key press
document.getElementById('chat-input').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
document.getElementById('send-button').click();
}
});
</script>
<script src="{{ url_for('static', filename='js/room.js') }}"></script>
{% endblock %}

5
resource/template/room_base.html
View File

@@ -6,15 +6,20 @@
<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>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<script src="{{ url_for('static', filename='js/base.js') }}"></script>
{% include 'navbar.html' %}
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>

23
resource/template/settings.html Normal file
View File

@@ -0,0 +1,23 @@
{% extends 'base.html' %}
{% block title %}Echo | Settings{% endblock %}
{% block content %}
<h1>Settings</h1>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="dark-mode-toggle" class="setting-toggle">
<span><strong>(EXPERIMENTAL)</strong> Enable Dark Mode</span>
</label>
</div>
<div class="setting-item">
<label for="notification-setting" class="setting-label">Enable Notifications:</label>
<select id="notification-setting" class="setting-select">
<option value="off">Off</option>
<option value="system">System Notifications</option>
<option value="tab">Tab Indicator</option>
</select>
</div>
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}