atridad/atri.dad
1
0
Fork 0
Code Projects Releases Packages 1 Activity Actions

Mobile fixes
All checks were successful
Docker Deploy / build-and-push (push) Successful in 5m12s
Details

Browse source
This commit is contained in:
Atridad Lahiji 2025-04-28 03:44:24 -06:00
parent 5a9a02b772
commit df3fcd669d
Signed by: atridad
SSH key fingerprint: SHA256:LGomp8Opq0jz+7kbwNcdfTcuaLRb5Nh0k5AchDDb438
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
islands/Chat.tsx
View file

@ -17,10 +17,12 @@ export default function Chat() {
useEffect(() => { useEffect(() => {
if (!username) { if (!username) {
const randomNum = Math.floor(Math.random() * 10000); const randomNum = Math.floor(Math.random() * 10000);
setUsername(`User${randomNum}`); setUsername(`HumanGuest${randomNum}`);
} }
const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:"; const wsProtocol = globalThis.location.protocol === "https:"
? "wss:"
: "ws:";
const ws = new WebSocket( const ws = new WebSocket(
`${wsProtocol}//${globalThis.location.host}/api/chat`, `${wsProtocol}//${globalThis.location.host}/api/chat`,
); );
@ -77,7 +79,7 @@ export default function Chat() {
}; };
return ( return (
<div class="w-full max-w-4xl mx-auto bg-[#1E2127] rounded-lg shadow-lg overflow-hidden border border-gray-800 flex flex-col h-[calc(100vh-180px)] md:h-[600px]"> <div class="w-full max-w-4xl mx-auto bg-[#1E2127] rounded-lg shadow-lg overflow-hidden border border-gray-800 flex flex-col h-[70vh]">
{/* Header */} {/* Header */}
<div class="p-4 bg-secondary text-white"> <div class="p-4 bg-secondary text-white">
<h2 class="text-2xl font-bold">Live Chat</h2> <h2 class="text-2xl font-bold">Live Chat</h2>
@ -88,7 +90,6 @@ export default function Chat() {
</p> </p>
</div> </div>
{/* Chat messages area */}
<div <div
id="chat-messages" id="chat-messages"
class="flex-grow overflow-y-auto bg-[#1E2127] text-gray-300 p-4" class="flex-grow overflow-y-auto bg-[#1E2127] text-gray-300 p-4"
@ -96,7 +97,7 @@ export default function Chat() {
{messages.length === 0 {messages.length === 0
? ( ? (
<p class="text-center text-gray-500 py-8"> <p class="text-center text-gray-500 py-8">
No messages yet. Be the first to chat! No messages yet.
</p> </p>
) )
: ( : (
@ -132,7 +133,6 @@ export default function Chat() {
)} )}
</div> </div>
{/* Input area */}
<div class="p-3 border-t border-gray-800 pb-6 md:pb-3"> <div class="p-3 border-t border-gray-800 pb-6 md:pb-3">
<form onSubmit={sendMessage} class="relative"> <form onSubmit={sendMessage} class="relative">
<input <input
@ -152,7 +152,7 @@ export default function Chat() {
</button> </button>
</form> </form>
<p class="mt-2 text-xs text-gray-500"> <p class="mt-2 text-xs text-gray-500">
You are chatting as{" "} You are connected as{" "}
<span class="font-medium text-gray-400">{username}</span> <span class="font-medium text-gray-400">{username}</span>
</p> </p>
</div> </div>

2
routes/chat.tsx
View file

@ -14,7 +14,7 @@ export default function ChatPage() {
<Chat /> <Chat />
</div> </div>
<div class="mt-4 text-center text-xs text-gray-500 mb-20"> <div class="mt-4 text-center text-xs text-gray-500">
<p> <p>
This is an ephemeral chat room. Messages are only visible to users This is an ephemeral chat room. Messages are only visible to users
currently online and aren't stored after you leave. currently online and aren't stored after you leave.