Refine message box infra

console.html

@@ -21,18 +21,8 @@
         <iframe id="content" src="pages/cheat.html"></iframe>
       </div>
     </div>
-    <div id="message" class="hide" onclick="dismissMessage()">
-      <div id="messageBox" onclick="">
-        <div class="messageBoxTitle">
-          Server Response
-        </div>
-        <div id="messageContent">
-          Message!
-        </div>
-        <div>
-          <button style="margin-bottom: 1em;" onclick="dismissMessage()"> Dismiss </button>
-        </div>
-      </div>
+    <div id="message">
+
     </div>
   </body>
 </html>

scripts/console.js

@@ -1,4 +1,4 @@
-async function sendCommand(payload, method="invoke", background=false){
+async function sendCommand(payload, method="invoke", background=false, persistent="auto") {
   let key = new window.URLSearchParams(window.location.search).get("k");
   let url = '/mojoplus/api';
   let data = JSON.stringify({ "k": key, "request": method, "payload": payload });
@@ -13,9 +13,15 @@ async function sendCommand(payload, method="invoke", background=false){
 
   let json = await response.json();
   if (method == 'invoke' && !background) {
-    document.getElementById("messageContent").innerText = json.payload;
-  document.getElementById("message").style.opacity = 1;
-  document.getElementById("message").classList.remove("hide");
+    var m = json.payload.trim().replace(/\r/g, "").replace(/\n\n/g, "\n");
+    console.log(json);
+    console.log(m);
+    if(persistent == "auto") {
+      var m2 = m.replace(/\n/g, "");
+      persistent = (m.length - m2.length) > 3; // true more than 3 lines
+    }
+    console.log(persistent);
+    message(`${m}`, null, persistent);
   }
   return json
 }
@@ -32,3 +38,33 @@ function switchPage(page) {
   const iframe = document.getElementById("content");
   iframe.src = `pages/${page}.html`;
 }
+
+function message(message, className, persistent=false) {
+  var m = document.createElement("div");
+  m.classList.add("messageBox");
+  m.classList.add("initial");
+  if (className) m.classList.add(className);
+  var mc = document.createElement("div");
+  var dismissButton = document.createElement("button");
+  mc.classList.add("messageContent");
+  mc.innerText = message;
+  dismissButton.innerText = "Dissmiss";
+  m.appendChild(mc);
+  m.appendChild(dismissButton);
+  document.getElementById("message").appendChild(m);
+  dismissButton.onclick = (e) => {
+    dismissMessageInternal(e.target.parentNode);
+  }
+  // m.classList.remove("initial");
+  setTimeout(function() {
+    m.classList.remove("initial");
+  }, 100);
+  if (!persistent) setTimeout(() => dismissMessageInternal(m), 4000);
+}
+
+function dismissMessageInternal(target) {
+  if (target){
+      target.classList.add("finish");
+      setTimeout(()=>{target.remove();}, 400);
+  }
+}

styles/console.css

@@ -122,40 +122,52 @@ button:hover {
 
 #message {
   position: absolute;
-  background-color: #0000005b;
-  width: 100vw;
-  height: 100vh;
+  background-color: #00000000;
+  left: 50vw;
+  transform: translateX(-50%);
+  height: fit-content;
   z-index: 100;
   top: 0px;
-  transition: all ease-in 0.5s;
   opacity: 1;
-}
-
-#messageBox {
-  width: 300px;
-  height: 200px;
-  position: absolute;
-  top:50%;
-  left:50%;
-  background-color: #f2f3c6;
-  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+
+.messageBox {
+  margin-top: 1em;
+  width: 400px;
+  /* min-height: 60px; */
+  background-color: #f2f3c6;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: space-between;
-  border-radius: 25px;
+  border-radius: 10px;
   overflow: hidden;
   -webkit-box-shadow: 0px 0px 26px -9px rgba(0,0,0,0.83); 
   box-shadow: 0px 0px 26px -9px rgba(0,0,0,0.83);
+  padding: 1em 1em;
+  transition: all ease-in-out 0.3s;
+  height: fit-content;
 }
 
-#messageContent {
-  margin-top: 0.2em;
+.messageBox.initial {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.messageBox.finish {
+  transform: translateY(-100%);
+  opacity: 0;
+  min-height: 0px;
+  height: 0px;
+  margin: -15px;
+}
+
+.messageContent {
   overflow-wrap: break-word;
   overflow-y: auto;
-  margin-bottom: 0.2em;
-  margin-left: 1em;
-  margin-right: 1em;
 }
 
 .hide {