some css + readme

frontend/src/background/constants.ts

@@ -1,11 +1,12 @@
 const ISPROD = window.location.protocol == "https:";
 const JITSI_DOMAIN = "thisisnotajitsi.filefighter.de";
-const WEBSOCKET_URL =
-  "ws" +
-  (ISPROD ? "s" : "") +
-  "://" +
-  (ISPROD ? window.location.host : "localhost:9160") +
-  "/ws";
+const USE_REMOTE_BACKEND = true;
+const getWebsocketUrl = () => {
+  if (ISPROD) return "wss://" + window.location.host + "/ws"
+  if (USE_REMOTE_BACKEND) return "wss://" + "discord.filefighter.de/ws"
+  return "ws://" + "localhost:9160/ws"
+}
+const WEBSOCKET_URL = getWebsocketUrl();
 
 const USER_COOKIE_NAME = "jitsi-rooms-user";
 

frontend/src/background/style/colorednames.ts

@@ -0,0 +1,29 @@
+function getHslColor(i: number) {
+  return "hsl(" + i % 360 + ',' +
+    '70%,' +
+    '72%)'
+}
+function hashCode(str: string) { // java String#hashCode
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+}
+
+// function intToRGB(i: number) {
+//   var c = (i & 0x00FFFFFF)
+//     .toString(16)
+//     .toUpperCase();
+//
+//   return "00000".substring(0, 6 - c.length) + c;
+// }
+
+function getColorForUserName(userName: string) {
+  const hash = hashCode(userName)
+  return getHslColor(hash)
+
+
+}
+
+export { getColorForUserName } 

frontend/src/background/types/roomData.ts

@@ -13,7 +13,6 @@ export interface Participant {
 export interface User {
   uuid: string,
   name: string
-
 }
 
 export interface UsersData {

frontend/src/components/chat/Chat.css

@@ -1,12 +1,38 @@
 .chat-input{
-max-width: 50%;
+ min-width: 0;
+}
+
+.chat{
+ background-color: #181c25;
+ border-radius: 8px;
+ padding: 0.5em 0;
+ width: 100%;
+ margin: 0 -3px;
+}
+
+.chat-sender{
+ font-size: 0.9em;
+ /* color: #213547; */
+}
+
+.chat-input-form{
+ display: flex;
 }
 
 
+.chat-messages{
+ max-height: 220px;
+ overflow-y: scroll;
+  display: flex;
+  flex-direction: column-reverse;
+}
 .chat-bubble{
- background-color: #3d3d5c;
+ background-color: #2b2a33;
  overflow-wrap: break-word;
  margin-bottom: 7px;
+ border-radius: 8px;
+ padding: 3px 4px ;
+
  
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */

frontend/src/components/chat/Chat.tsx

@@ -2,17 +2,15 @@ import { useState } from "react";
 import { FormEventHandler } from "react";
 import useAllChat from "../../hooks/useAllChat";
 import "./Chat.css"
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaperPlane } from "@fortawesome/free-regular-svg-icons";
+import { getColorForUserName } from "../../background/style/colorednames";
 interface Props {
   sendMessage: Function
 }
 
-
-
 function Chat({ sendMessage }: Props) {
-
   const [chatInput, setChatInput] = useState("")
-
   const { chatMesages } = useAllChat()
 
   const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -27,13 +25,22 @@ function Chat({ sendMessage }: Props) {
   }
 
   return (
-    <div className="">
-      {chatMesages.map(message => (
-        <div className="chat-bubble"> <span>{message.sender.name}: </span> {message.content} </div>
-      ))
-
-      }
-      <form onSubmit={onSubmit}>
+    <div className="chat">
+      <div className="chat-messages">
+        {chatMesages
+          .slice()
+          .reverse() // reverse because of css, don't aks me
+          .map(message => {
+            const nameStyle = {
+              color: getColorForUserName(message.sender.name)
+            }
+            return (
+              <div className="chat-bubble" key={message.uuid}> <span className="chat-sender" style={nameStyle}>{message.sender.name} <br /> </span> {message.content} </div>
+            );
+          })
+        }
+      </div>
+      <form className="chat-input-form" onSubmit={onSubmit}>
         <input
           className="chat-input"
           placeholder="Say something funny :D"
@@ -41,13 +48,10 @@ function Chat({ sendMessage }: Props) {
           value={chatInput}
           onChange={onInput}
         />
-        <button type="submit">Send</button>
+        <button type="submit"><FontAwesomeIcon icon={faPaperPlane} /></button>
       </form>
     </div>
   );
-
-
 }
 
-
 export default Chat

frontend/src/components/sidebar/Sidebar.css

@@ -4,6 +4,9 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 5px;
+  padding-right: 5px;
+  background-color: #121115;
 }
 
 .sidebar h3 {
@@ -22,11 +25,12 @@
 }
 
 .sidebar-full {
-  max-width: 220px;
+  width: 220px;
 }
 
 .sidebar-hidden {
   width: 0;
+  padding: 0;
 }
 
 .sidebar-hidden > .sidebar-footer > .sidebar-toggle {

frontend/src/components/sidebar/Sidebar.tsx

@@ -20,7 +20,7 @@ function Sidebar(props: Props) {
   return (
     <div className={`sidebar sidebar-${sidebarVisibility}`}>
       <SidebarHeader sidebarVisibility={sidebarVisibility} />
-      <div>
+      <div className="sidebar-body">
         {props.usersData.roomsData.map((roomData) => {
           return (
             <>
@@ -46,7 +46,7 @@ function Sidebar(props: Props) {
         ))}
       </div>
       <div className="sidebar-footer">
-        <Chat sendMessage={props.sendMessage} />
+        {sidebarVisibility === "full" && <Chat sendMessage={props.sendMessage} />}
         <button className="sidebar-toggle" onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
       </div>
     </div>

frontend/src/components/sidebar/SidebarHeader.tsx

@@ -6,9 +6,9 @@ interface props {
 
 function SidebarHeader({ sidebarVisibility }: props) {
   if (sidebarVisibility == "full") {
-    return <h1>hi there</h1>;
+    return <h2>hi there</h2>;
   } else if (sidebarVisibility == "small") {
-    return <h1>hi</h1>;
+    return <h2>hi</h2>;
   }
   return <></>;
 }

frontend/src/hooks/useAllChat.tsx

@@ -5,23 +5,17 @@ import { User } from "../background/types/roomData";
 interface ChatMessage {
   content: string
   sender: User
-
+  uuid: string
+  timestamp: number
 }
 
 export const allChatMessagesAtom = atomWithReducer([], (list: ChatMessage[], item: ChatMessage) => list.concat(item))
 
-
 const useAllChat = () => {
   const [chatMessages, addChatMessage] = useAtom(allChatMessagesAtom)
-
-
   return { chatMesages: chatMessages, addChatMessage }
-
-
-
 }
 
-
 export default useAllChat
 
 

frontend/src/hooks/useLocalUser.ts

@@ -21,7 +21,7 @@ function getUserInfoFromCookie(): UserInfo {
   console.log("[Rooms] getUserNameFromCookie", cookie);
   if (cookie) return JSON.parse(cookie);
   return {
-    displayName: "unknown traveller",
+    displayName: "Unknown traveller",
     email: "",
   };
 }

frontend/src/index.css

@@ -6,7 +6,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #181c25;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -77,3 +77,20 @@ button:focus-visible {
   height: 100%;
   width: 100%;
 }
+
+
+input {
+  font-size: 1em;
+  margin: 0.3em;
+  border: 0;
+  height: 2.3em;
+  padding-left: 0.4em;
+  box-shadow: none;
+  box-sizing: border-box;
+  font-size: 17px;
+  font-family: "Oxygen", sans-serif;
+  transition: top 0.1s ease-in-out;
+  background-color: #2b2a33;
+  border-color: #646cff;
+  border-radius: 8px;
+}