From 9392c81fa2cbeecdef58f22b6159404e3ecc4153 Mon Sep 17 00:00:00 2001
From: lenovo <lenovo@lenovo.com>
Date: Mon, 12 Dec 2022 11:41:10 +0100
Subject: [PATCH] start all new architecture for chat

---
 docs/transcendence_chat.drawio.html           |  12 ++
 tests_hugo/chat_node/chat_client/chat.html    | 144 +++++++++++-------
 .../chat_client/style/action_board.css        |   2 +-
 .../chat_node/chat_client/style/chat.css      |  90 +++++++----
 .../chat_client/style/chat_buttons.css        |  11 +-
 .../chat_client/style/chat_thread.css         |  20 +--
 .../chat_client/style/layout_close.css        |  27 ++++
 7 files changed, 204 insertions(+), 102 deletions(-)
 create mode 100644 docs/transcendence_chat.drawio.html
 create mode 100644 tests_hugo/chat_node/chat_client/style/layout_close.css
diff --git a/docs/transcendence_chat.drawio.html b/docs/transcendence_chat.drawio.html
new file mode 100644
index 00000000..1d1a281e
--- /dev/null
+++ b/docs/transcendence_chat.drawio.html
@@ -0,0 +1,12 @@
+<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
+<!DOCTYPE html>
+<html>
+<head>
+<title>transcendence_chat.drawio.html</title>
+<meta charset="utf-8"/>
+</head>
+<body>
+<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.net\&quot; modified=\&quot;2022-12-12T08:31:17.808Z\&quot; agent=\&quot;5.0 (X11)\&quot; etag=\&quot;B38SW6Gr9Yw2NnVj5Ka9\&quot; version=\&quot;20.6.2\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;cRfz0ZpLqUd6ABceifb3\&quot; name=\&quot;Page-1\&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;&quot;,&quot;toolbar&quot;:&quot;pages zoom layers lightbox&quot;,&quot;page&quot;:0}"></div>
+<script type="text/javascript" src="https://app.diagrams.net/js/viewer-static.min.js"></script>
+</body>
+</html>
diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index b020d0a2..659f89fe 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -8,70 +8,110 @@
 
 	<body>
 
-		<input type="button"   class="vanish input_outside" id="input_outside">
-		<input type="checkbox" class="vanish" id="chat_input">
-		<input type="button"   class="vanish" id="new_room_form">
+		<br><br><button onclick="layout(this.innerText)">close</button>
+		<br><br><button onclick="layout(this.innerText)">room</button>
+		<br><br><button onclick="layout(this.innerText)">new</button>
+		<br><br><button onclick="layout(this.innerText)">settings</button>
+		<br><br><button onclick="layout(this.innerText)">room_settings</button>
+		<br><br><button onclick="layout(this.innerText)">protected</button>
+		<br><br><button onclick="layout(this.innerText)">create</button>
+		<br><br><button onclick="layout(this.innerText)">user</button>
+		<br><br><button onclick="layout(this.innerText)">mute</button>
 
-		<div class="chat _box">
+		<div class="close" id="chat_box">
 
-			<div class="chat _item controls_area">
-				<!-- MENU
-				<div class="control rooms drop_down">
-					<p class="_title" tabindex=0>rooms</p>
-					<div class="_items" tabindex=0 id="rooms">
+			<button class="chat_item"            id="chat_chat"       onclick="layout('open')"          >chat</button>
+			<button class="chat_item"            id="chat_close"      onclick="layout('close')"         >new</button>
+			<button class="chat_item"            id="chat_new"        onclick="layout('new')"           >new</button>
+			<button class="chat_item"            id="chat_settings"   onclick="layout('settings')"      >settings</button>
+			<button class="chat_item"            id="chat_room_name"  onclick="layout('room_settings')" >placeholder</button>
+			<button class="chat_item"            id="chat_send"       onclick="send_msg()"              >send</button>
+			<p      class="chat_item"            id="chat_create"                                       >create</p>
+			<p      class="chat_item"            id="chat_user_name"                                    >placeholder</p>
+			<div    class="chat_item"            id="chat_msg_thread"                                   ><!-- messages go there --></div>
+			<div    class="chat_item"            id="chat_write"      contenteditable                   ><!-- write message here --></div>
+			<button class="chat_item chat_back"  id="chat_back_home"  onclick="layout('home')"          ></button>
+			<button class="chat_item chat_back"  id="chat_back_room"  onclick="layout('room')"          ></button>
+			<button class="chat_item chat_back"  id="chat_back_new"   onclick="layout('new')"           ></button>
+			<button class="chat_item chat_back"  id="chat_back_user"  onclick="layout('user')"          ></button>
+
+			<!-- --------------------------------
+				PANELS
+			--------------------------------- -->
+			<div    class="chat_item chat_panel" id="chat_panel_home">
+				<div id="chat_room_list" class="_first_child_vanish">
+					<div class="chat_room_name">
+						<p>you don't have any chat yet</p>
 					</div>
-				</div>
-				-------------- -->
-				<select class="control rooms">
-					<option class="_title">rooms</option>
-				</select>
-				<!-- MENU -------------- -->
-				<div class="control new">
-					<label for="new_room_form"><p>new</p></label>
-				</div>
-				<!-- MENU -------------- -->
-				<div class="control settings">
-					<p onclick="">settings</p>
-				</div>
-			</div>
-
-			<label class="chat _item open_close button" for="chat_input">
-				<p>chat</p>
-			</label>
-
-			<div class="chat _item main_window">
-				<!-- THREAD ------------ -->
-				<div class="msg_box" id="msg_thread">
-					<!-- messages go there -->
-				</div>
-				<p id="msg_box_room_name">room name</p>
-				<!-- ACTION BOARD ------ -->
-				<div class="action_board" id="action_board">
-					<!-- CREATE ------------ -->
-					<div class="action_pannel _create" id="create" tabindex=0>
-						<p class="_title">new room</p>
-						<input class="_search" type="text" onkeyup="search_room()" placeholder="type the name of a room">
-						<div class="_list">
-							<p>create a new group</p>
-						</div>
-						<label for="input_outside" class="close_croice"></label>
+					<!-- placeholders -->
+					<div class="chat_room_name">
+						<p>placeholder</p>
 					</div>
+					<div class="chat_room_name">
+						<p>placeholder</p>
+					</div>
+					<div class="chat_room_name">
+						<p>placeholder</p>
+					</div>
+					<!-- END placeholders -->
 				</div>
 			</div>
-
-			<div class="chat _item msg_write">
-				<div class="text_area" id="msg_write" contenteditable>
-				<!-- write message here -->
-				</div>
+			<div    class="chat_item chat_panel" id="chat_panel_room">
+				<!-- content -->
+				panel room
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_new">
+				<!-- content -->
+				panel new
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_settings">
+				<!-- content -->
+				panel settings
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_room_settings">
+				<!-- content -->
+				panel room settings
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_protected">
+				<!-- content -->
+				panel protected
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_create">
+				<!-- content -->
+				panel create
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_user">
+				<!-- content -->
+				panel user
+			</div>
+			<div    class="chat_item chat_panel" id="chat_panel_mute">
+				<!-- content -->
+				panel mute
 			</div>
 
-			<button class="chat _item msg_send button" onclick="send_msg()">
-				<p>send</p>
-			</button>
+			<!-- --------------------------------
+				MODELS
+			<div    class="chat_model" id="chat_model_myroom_name">
+			</div>
+			<div    class="chat_model" id="chat_model_msg">
+			</div>
+			<div    class="chat_model" id="chat_model_room_name">
+			</div>
+			<div    class="chat_model" id="chat_model_blocked_user">
+			</div>
+			<div    class="chat_model" id="chat_model_room_user">
+			</div>
+			--------------------------------- -->
 
 		</div>
 
 
+		<script>
+			function layout(layout_class) {
+				document.getElementById('chat_box').className = layout_class;
+			};
+		</script>
+
 		<!-- https://socket.io/docs/v4/client-installation/ -->
 		<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
 		<script>
diff --git a/tests_hugo/chat_node/chat_client/style/action_board.css b/tests_hugo/chat_node/chat_client/style/action_board.css
index b9bcf55c..5afc8801 100644
--- a/tests_hugo/chat_node/chat_client/style/action_board.css
+++ b/tests_hugo/chat_node/chat_client/style/action_board.css
@@ -50,7 +50,7 @@ label.close_croice::after {
 */
 
 /* show action board and _create */
-input#new_room_form:focus ~ .chat._box #action_board ._create,
+input#new_room_form:focus ~ #chat_box #action_board ._create,
 #action_board ._create:focus-within {
 	/*
 	display: flex;
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 0c8d26af..48f55774 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -1,90 +1,115 @@
 
-@import 'chat_buttons.css';
+/*
 @import 'chat_thread.css';
 @import 'chat_write.css';
 @import 'chat_controls.css';
 @import 'action_board.css';
+*/
+
+@import 'chat_buttons.css';
+@import 'layout_close.css';
 
 
-/* vanish elements wihtout display:none; */
+/* vanish elements wihtout display:none;
 input.vanish {
 	opacity: 0;
 	position: absolute;
 	pointer-events: none;
 }
+*/
 
-/* Hide scrollbar */
-.chat._box * {
+/* Hide scrollbar
+*/
+#chat_box * {
 	-ms-overflow-style: none;  /* IE and Edge */
 	scrollbar-width: none;  /* Firefox */
 }
-.chat._box *::-webkit-scrollbar {
+#chat_box *::-webkit-scrollbar {
 	display: none;  /* Chrome, Safari and Opera */
 }
 
 
 /*
- * GRID
+/* GRID
  */
 
-.chat._box * {
+#chat_box * {
 	display: flex;
 	flex-direction: column;
   position: relative;
 	box-sizing: border-box;
+	padding: 0px;
+	margin: auto;
+}
+#chat_box .chat_item                {
+	display: none;
+	/*
+	border: 1px solid black;
+	*/
 }
-.chat._item.controls_area  { grid-area: controls;}
-.chat._item.open_close     { grid-area: open_close;}
-.chat._item.main_window    { grid-area: main_window;}
-.chat._item.msg_write      { grid-area: msg_write;}
-.chat._item.msg_send       { grid-area: msg_send;}
 
-.chat._box {
+.chat_item#chat_chat                { grid-area: chat;}
+.chat_item#chat_close               { grid-area: close;}
+.chat_item#chat_new                 { grid-area: new;}
+.chat_item#chat_settings            { grid-area: settings;}
+.chat_item#chat_room_name           { grid-area: room_name;}
+.chat_item#chat_send                { grid-area: send;}
+.chat_item#chat_create              { grid-area: create;}
+.chat_item#chat_user_name           { grid-area: user_name;}
+.chat_item#chat_msg_thread          { grid-area: msg_thread;}
+.chat_item#chat_write               { grid-area: write;}
+.chat_item#chat_back_home           { grid-area: back_home;}
+.chat_item#chat_back_room           { grid-area: back_room;}
+.chat_item#chat_back_new            { grid-area: back_new;}
+.chat_item#chat_back_user           { grid-area: back_user;}
+.chat_item#chat_panel_home          { grid-area: panel_home;}
+.chat_item#chat_panel_room          { grid-area: panel_room;}
+.chat_item#chat_panel_new           { grid-area: panel_new;}
+.chat_item#chat_panel_settings      { grid-area: panel_settings;}
+.chat_item#chat_panel_room_settings { grid-area: panel_room_settings;}
+.chat_item#chat_panel_protected     { grid-area: panel_protected;}
+.chat_item#chat_panel_create        { grid-area: panel_create;}
+.chat_item#chat_panel_user          { grid-area: panel_user;}
+.chat_item#chat_panel_mute          { grid-area: panel_mute;}
+
+#chat_box {
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: grid;
-  grid:
-    ' controls    open_close  ' auto
-    ' main_window main_window ' 1fr
-    ' msg_write   msg_send    ' auto
-    / 1fr         auto;
-  gap: 0px;
-  padding: 0px;
-  width: auto;
-  height: auto;
 
-  border: 1px solid green;
-}
-.chat._item > * {
-	display: flex;
+  gap: 5px;
+  padding: 5px;
+  width: 300px;
+  height: 400px;
+
+  border: 1px solid black;
 }
 
 
 /*
  * COLLAPSE
- */
 
 .chat._item:not(.open_close) {
   display: none;
 }
 #chat_input:checked ~
-.chat._box {
+#chat_box {
   gap: 5px;
   padding: 5px;
   width: 300px;
   height: 400px;
 }
 #chat_input:checked ~
-.chat._box .chat._item {
+#chat_box .chat._item {
   display: flex;
 }
 #chat_input:checked ~
-.chat._box .chat._item.open_close p {
+#chat_box .chat._item.open_close p {
   display: none;
 }
 #chat_input:checked ~
-.chat._box .chat._item.open_close {
+#chat_box .chat._item.open_close {
   width: 30px;
   height: 20px;
   padding: 0px;
@@ -93,7 +118,7 @@ input.vanish {
   border: none;
 }
 #chat_input:checked ~
-.chat._box .chat._item.open_close::before {
+#chat_box .chat._item.open_close::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -103,4 +128,5 @@ input.vanish {
   width: 15px;
   background-color: black;
 }
+ */
 
diff --git a/tests_hugo/chat_node/chat_client/style/chat_buttons.css b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
index e1cd7927..c027f778 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_buttons.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
@@ -3,7 +3,7 @@
  * BUTTONS
  */
 
-.chat._box .button {
+#chat_box button {
   display: flex;
   width: auto;
   padding: 10px;
@@ -12,14 +12,11 @@
 	border: none;
   background-color: rgb(220, 220, 220);
 }
-.chat._box .button p {
-  margin: auto;
-}
-.chat._box .button:focus,
-.chat._box .button:hover {
+#chat_box button:focus,
+#chat_box button:hover {
   background-color: rgb(200, 200, 200);
 }
-.chat_box .button:active {
+.chat_box button:active {
   background-color: rgb(220, 220, 220);
 }
 
diff --git a/tests_hugo/chat_node/chat_client/style/chat_thread.css b/tests_hugo/chat_node/chat_client/style/chat_thread.css
index 7ac96d39..ab4f70ec 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_thread.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_thread.css
@@ -9,7 +9,7 @@
 	width: 100%;
 	padding: 5px;
 }
-.chat._box #msg_thread div {
+#chat_box #msg_thread div {
 	white-space: pre-wrap;
 	margin: 5px auto;
 	padding: 5px;
@@ -21,7 +21,7 @@
 	ROOM NAME
 */
 
-.chat._box #msg_box_room_name {
+#chat_box #msg_box_room_name {
 	position: absolute;
 	top: 0px;
 	left: 0px;
@@ -38,17 +38,17 @@
 	ALL MSG
 */
 
-.chat._box #msg_thread div {
+#chat_box #msg_thread div {
 	margin-left: 0px;
 	background-color: rgb(210, 210, 210);
 	max-width: 80%;
 }
-.chat._box #msg_thread div p.name {
+#chat_box #msg_thread div p.name {
 	margin: 0px;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
 }
-.chat._box #msg_thread div p.msg {
+#chat_box #msg_thread div p.msg {
 	margin: 5px 0px;
 }
 
@@ -57,12 +57,12 @@
 	MSG PERSO
 */
 
-.chat._box #msg_thread div.me {
+#chat_box #msg_thread div.me {
 	margin-right: 0px;
 	margin-left: auto;
 	background-color: rgb(210, 110, 10);
 }
-.chat._box #msg_thread div.me p.name {
+#chat_box #msg_thread div.me p.name {
 	display: none;
 }
 
@@ -71,14 +71,14 @@
 	MSG SERVER
 */
 
-.chat._box #msg_thread div.SERVER {
+#chat_box #msg_thread div.SERVER {
 	margin-left: auto;
 	background-color: transparent;
 }
-.chat._box #msg_thread div.SERVER p.name {
+#chat_box #msg_thread div.SERVER p.name {
 	display: none;
 }
-.chat._box #msg_thread div.SERVER p.msg {
+#chat_box #msg_thread div.SERVER p.msg {
 	margin: 0px auto;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
diff --git a/tests_hugo/chat_node/chat_client/style/layout_close.css b/tests_hugo/chat_node/chat_client/style/layout_close.css
new file mode 100644
index 00000000..fa77c769
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/style/layout_close.css
@@ -0,0 +1,27 @@
+
+/*
+  grid:
+    ' controls    close       ' auto
+    ' main_window main_window ' 1fr
+    ' msg_write   msg_send    ' auto
+    / 1fr         auto;
+
+#chat_box.close {
+  grid:
+    ' close ' auto
+    / auto;
+}
+*/
+#chat_box.close {
+  gap: 0px;
+  padding: 0px;
+  width: auto;
+  height: auto;
+  grid:
+    ' chat ' auto
+    / auto;
+}
+#chat_box.close .chat_item#chat_chat {
+	display: flex;
+}
+
