rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Re-orga Chat Box

Browse source
This commit is contained in:
NigeParis 2025-11-27 21:03:25 +01:00 • committed by apetitco
parent c41b32184b
commit 09ff8eb5a1
3 changed files with 80 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

53
frontend/src/pages/chat/chat.html
View file

@ -1,18 +1,37 @@
<div class="displaybox">
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<h1 class="text-3xl font-bold text-gray-800">
Chat Box <span id="t-username"></span>
</h1><br>
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
<div id="t-chatbox" class="chatbox-style"></div>
</br>
<div class="flex gap-2">
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
<button id="b-send" class="send-btn-style">Send</button>
</div>
</br>
<p class="text-gray-400">From this Chat Box you can send messages to other players</p>
</div>
</div>
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<h1 class="text-3xl font-bold text-gray-800">
ChatterBoxes 😀😀😀<span id="t-username"></span>
</h1><br>
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
<!-- Center wrapper for chat + vertical box -->
<div class="flex justify-center mt-2">
<!-- Groupe Chat + vertical box container -->
<div id = "g-boxes" class="flex gap-1">
<!-- Text Chat box panel + send -->
<div id = "g-textBoxes" class="flex flex-col">
<div id="t-chatbox" class="chatbox-style"></div>
<div id = "t-input-send" class="flex gap-1 mt-2">
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
<button id="b-send" class="send-btn-style">Send</button>
</div>
</div>
<!-- Vertical Ping box panel-->
<div id="ping-box" class="w-[150px] ml-2 bg-gray-300 rounded-2xl p-2 shadow-md flex flex-col gap-1 h-[350px]">
<p id="ping-title" class="text-sm font-semibold text-gray-700">Ping Buddies</p>
<div id="ping-list" class="flex-1 overflow-y-auto">
<p>Alice</p>
<p>Bob</p>
<p>Charlie</p>
</div>
</div>
</div>
</div>
<p class="text-gray-400 mt-2">From this Chat Box you can send messages to other players</p>
</div>
</div>

2
frontend/src/pages/chat/chat.ts
View file

@ -14,7 +14,7 @@ const color = {
};
// get the name of the machine useed to connect
// get the name of the machine used to connect
const machineHostName = window.location.hostname;
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);