42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved testing inputs to js file

Browse Source 
+ added room name in user if from room settings
This commit is contained in:
hugogogo
2022-12-17 09:35:55 +01:00
parent 93c9927422
commit 639f83045e
6 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -4,28 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style/chat.css" type="text/css" rel="stylesheet">
<script src="./chat_test_layouts.js" defer></script>
</head>
<body>
<form>
<br><br><button onclick="chat_layout(this.innerText)">close</button>
<br><br><button onclick="chat_layout(this.innerText)">home</button>
<br><br><button onclick="chat_layout(this.innerText)">room</button>
<br><br><button onclick="chat_layout(this.innerText)">new</button>
<br><br><button onclick="chat_layout(this.innerText)">settings</button>
<br><br><button onclick="chat_layout(this.innerText)">room_set</button>
<br><br><button onclick="chat_layout(this.innerText)">protected</button>
<br><br><button onclick="chat_layout(this.innerText)">create</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">user</button>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_blocked</span></label>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_admin</span></label>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_muted</span></label>
<br><br><label><input onchange="chat_layout_replace('_settings', '_room_set')" type="radio" name="form_from"><span>_room_set</span></label>
<br><br><label><input onchange="chat_layout_replace('_room_set', '_settings')" type="radio" name="form_from"><span>_settings</span></label>
<br><br><button onclick="chat_layout(this.innerText)">mute</button>
</form>
<div class="close" id="chat_box">
<!--
classes:
@@ -286,15 +269,6 @@
function chat_layout(layout_class) {
document.getElementById('chat_box').className = layout_class;
};
// TEMP
function chat_layout_toggle(layout_class) {
document.getElementById('chat_box').classList.toggle(layout_class);
};
function chat_layout_replace(_old, _new) {
let chat = document.getElementById('chat_box');
chat.classList.remove(_old);
chat.classList.add(_new);
};
</script>
<!-- https://socket.io/docs/v4/client-installation/ -->

32
tests_hugo/chat_node/chat_client/chat_test_layouts.js Normal file
View File

@@ -0,0 +1,32 @@
/*
*/
let test = document.createElement('form');
test.innerHTML = `
<br><br><button onclick="chat_layout(this.innerText)" type="reset">close</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">home</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">room</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">new</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">settings</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">room_set</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">protected</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">create</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">user</button>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_blocked</span></label>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_admin</span></label>
<br><br><label><input onchange="chat_layout_toggle(this.nextElementSibling.innerText)" type="checkbox"><span>_muted</span></label>
<br><br><label><input onchange="chat_layout_replace('_settings', '_room_set')" type="radio" name="form_from"><span>_room_set</span></label>
<br><br><label><input onchange="chat_layout_replace('_room_set', '_settings')" type="radio" name="form_from"><span>_settings</span></label>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">mute</button>
`;
document.body.prepend(test);
function chat_layout_toggle(layout_class) {
document.getElementById('chat_box').classList.toggle(layout_class);
};
function chat_layout_replace(_old, _new) {
let chat = document.getElementById('chat_box');
chat.classList.remove(_old);
chat.classList.add(_new);
};

11
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -16,6 +16,7 @@ cxv
@import 'layout_user.css';
@import 'layout_mute.css';
@import 'chat_panels.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@@ -38,16 +39,6 @@ input.vanish {
}
*/
/* Hide scrollbar
*/
#chat_box * {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#chat_box *::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/*
/* GRID

11
tests_hugo/chat_node/chat_client/style/chat__global.css
View File

@@ -1,5 +1,16 @@
/* Hide scrollbar
*/
#chat_box * {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#chat_box *::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* p in chat_box
*/
#chat_box p {

3
tests_hugo/chat_node/chat_client/style/chat_panels.css Normal file
View File

@@ -0,0 +1,3 @@
#chat_box .chat_panel {
overflow-y: scroll;
}

33
tests_hugo/chat_node/chat_client/style/layout_user.css
View File

@@ -2,6 +2,7 @@
#chat_box.user {
grid:
' back user close ' auto
' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
@@ -20,6 +21,14 @@
}
/* room_name appearance
*/
#chat_box.user button.chat_item#chat_room_name {
background-color: transparent;
border-top: 1px solid black;
}
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_home {display: flex;}
@@ -47,18 +56,18 @@
/* toggle buttons according to chat_box class
*/
/* block/unblock */
#chat_box.user #chat_user_unblock {display: none;}
#chat_box.user._blocked #chat_user_block {display: none;}
#chat_box.user._blocked #chat_user_unblock {display: flex;}
/* admin */
#chat_box.user #chat_user_admin {display: none;}
#chat_box.user._admin #chat_user_admin {display: flex;}
/* mute if from room */
#chat_box.user #chat_mute_btn {display: none;}
#chat_box.user._room_set #chat_mute_btn {display: flex;}
#chat_box.user #chat_user_unblock {display: none;}
#chat_box.user._blocked #chat_user_block {display: none;}
#chat_box.user._blocked #chat_user_unblock {display: flex;}
/* admin if from room */
#chat_box.user #chat_user_admin {display: none;}
#chat_box.user._room_set._admin #chat_user_admin {display: flex;}
/* room_name if from room */
#chat_box.user #chat_room_name {display: none;}
#chat_box.user._room_set #chat_room_name {display: flex;}
/* mute/unmute */
#chat_box.user #chat_user_unmute {display: none;}
#chat_box.user._muted #chat_user_mute {display: none;}
#chat_box.user._muted #chat_user_unmute {display: flex;}
#chat_box.user #chat_user_unmute {display: none;}
#chat_box.user._muted #chat_user_mute {display: none;}
#chat_box.user._muted #chat_user_unmute {display: flex;}