Added modal,news,menu,safety links,auto char add

2025-12-12 23:14:36 +01:00 · 2022-04-24 02:34:02 +01:00
parent d7423ee46c
commit 4baed27d18
7 changed files with 218 additions and 108 deletions
--- a/Erupe/www/erupe/css/main.css
+++ b/Erupe/www/erupe/css/main.css
@@ -109,24 +109,13 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #dev input{width:100%; height:20px; font-size: 16px;}

 #footer{width:100%; height:39px; position:absolute; left:0; bottom:0; background-color:rgba(0,0,0,0.6); overflow:hidden;}
-#footer .link{padding:4px; display:block; position:absolute; z-index:1000; cursor:pointer;}
+#footer .link{padding:4px; display:block; z-index:1000; cursor:pointer;float:left;}

-/* UNUSED
-#launcher_bnr{width:533px; height:129px; position:absolute; right:38px; top:30px;}
-#launcher_bnr .bnr{width:523px; height:129px; position:absolute; left:0; top:0; background:no-repeat 0px 0px; overflow:hidden;}
-#launcher_bnr .bnr img{margin-left:1px;}
-#launcher_bnr .bnr .frame{width:523px; height:129px; position:absolute; left:0; top:0; background:no-repeat 0px 0px; cursor:pointer;}
-#launcher_bnr .dots{width:10px; position:absolute; right:0; top:0; max-height:129px;}
-#launcher_bnr .dots ul{position:relative; width:10px; padding-top:6px;}
-#launcher_bnr .dots li{display:block; width:10px; height:10px; padding:6px 0; position:relative;}
-#launcher_bnr .dots li .dot{width:10px; height:10px; background:no-repeat 0px 0px; cursor:pointer;}
-#launcher_bnr .dots li .dot.crr,
-#launcher_bnr .dots li .dot:hover{background-position:0px -10px;}
-#launcher_bnr .dots li .dot img{display:none;}
-#launcher_info_list{width:535px; height:288px; position:absolute; right:38px; top:163px; overflow:hidden; overflow-y:auto;}
+
+#launcher_info_list{width:535px; height:240px; position:absolute; right:38px; padding:5px; top:135px; overflow:hidden; overflow-y:auto; background-color:rgba(0,0,0,0.5); border-radius:3px 3px 3px 3px; border: 1px solid #a6a08a;}
 #launcher_info_list .important_info, #launcher_info_list .normal_info{margin-bottom:5px;}
 #launcher_info_list .head{width:513px; height:23px; position:relative;}
-#launcher_info_list .head .lbl{position:absolute; left:0; top:0; width:513px; height:23px; background:no-repeat 0px 0px;}
+#launcher_info_list .head .lbl{position:absolute; left:0; top:0; width:513px; height:23px;}
 #launcher_info_list .head a{position:absolute; right:10px; top:6px; display:block; width:35px; height:13px; background:no-repeat 0px 0px;}
 #launcher_info_list .head a:hover{background-position:0px -13px;}
 #launcher_info_list ul.article{margin-left:18px; width:517px; position:relative;}
@@ -140,6 +129,44 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #launcher_info_list .important_info ul.article li .body a:hover{color:#F8DD81;}
 #launcher_info_list ul.article li .icon{width:30px; height:14px; background:no-repeat center center;}
 #launcher_info_list a{cursor:pointer;}
+
+#launcher_modal{width:100%; height:100%; position:fixed; left:0; top:0;z-index:1000; display:none; }
+#launcher_modal .modal{width:100%; height:100%; position:absolute; left:0; top:0;}
+#launcher_modal .dialog{position:absolute; left:282px; top:140px; width:560px; height:320px; background:url(../img/modelbg.jpeg) round;}
+#launcher_modal .dialog p{color:#d1c0a5; font-size:18px; line-height:36px; width:100%; position:relative; text-align:center; padding-top:60px;}
+#launcher_modal .dialog p.alert{line-height:26px; padding-top:90px; font-size:20px;}
+#launcher_modal .dialog p span.uid{font-size:12px;}
+#launcher_modal .dialog p span.attention{color:#f4de22;}
+#launcher_modal .dialog p span.notes{color:#eb3535; font-size:16px; line-height:20px;}
+#launcher_modal .dialog p div.sp{width:100%; height:10px;}
+#launcher_modal .dialog .btnBox{width:100%; height:44px; position:absolute; left:0; top:252px;}
+#launcher_modal .dialog .btns{text-align:center; margin:0 auto; position:relative; overflow:hidden}
+#launcher_modal .dialog .btns ul{position:relative; left:50%; float:left; list-style:none}
+#launcher_modal .dialog .btns ul li{position:relative; left:-50%; float:left; margin-left:33px;}
+#launcher_modal .dialog .btns ul li:first-child{margin-left:5px;}
+#launcher_modal .dialog .btns ul li div{display:block; width:130px; height:35px; padding-top:9px; position:relative; background:url(../img/button_option.png) no-repeat 0px 0px; text-decoration:none; color:#d1c0a5; font-weight:bold; font-size:18px; line-height:18px; text-align:center; cursor:pointer;}
+#launcher_modal .dialog .btns ul li div:hover,#launcher_modal .dialog .btns ul li div.hover{background:url(../img/button_option_hover.png) no-repeat 0px 0px;}
+#launcher_modal .dialog .btns ul li div.wait:hover,#launcher_modal .dialog .btns ul li div.wait.hover{background-position:0px 0px; cursor:default;}
+
+#launcher_menu{height:86px; position:absolute; left:535px; top:416px; overflow:hidden;}
+#launcher_menu .btn{width:82px; height:86px; background:no-repeat 0px 0px; float:left; margin:0 2px; cursor:pointer;}
+#launcher_menu .btn:hover{background-position:0px -86px;}
+#launcher_menu .btn.hangameb,#launcher_menu .btn.hancoin{display:none;}
+#launcher_menu .btn.manual{background:url(../img/manual.png);}
+#launcher_menu .btn.pastebin{background:url(../img/pastebin.png);}
+/* UNUSED
+#launcher_bnr{width:533px; height:129px; position:absolute; right:38px; top:30px;}
+#launcher_bnr .bnr{width:523px; height:129px; position:absolute; left:0; top:0; background:no-repeat 0px 0px; overflow:hidden;}
+#launcher_bnr .bnr img{margin-left:1px;}
+#launcher_bnr .bnr .frame{width:523px; height:129px; position:absolute; left:0; top:0; background:no-repeat 0px 0px; cursor:pointer;}
+#launcher_bnr .dots{width:10px; position:absolute; right:0; top:0; max-height:129px;}
+#launcher_bnr .dots ul{position:relative; width:10px; padding-top:6px;}
+#launcher_bnr .dots li{display:block; width:10px; height:10px; padding:6px 0; position:relative;}
+#launcher_bnr .dots li .dot{width:10px; height:10px; background:no-repeat 0px 0px; cursor:pointer;}
+#launcher_bnr .dots li .dot.crr,
+#launcher_bnr .dots li .dot:hover{background-position:0px -10px;}
+#launcher_bnr .dots li .dot img{display:none;}
+
 #launcher_info_detail{width:532px; height:423px; position:absolute; right:38px; top:30px; background:no-repeat 0px 0px;}
 #launcher_info_detail .article_frame{width:532px; height:423px; position:absolute; left:0; top:0; overflow:hidden; overflow-y:auto;}
 #launcher_info_detail .article_frame .article{width:498px; min-height:394px; position:relative; margin:10px 0 10px 13px; padding-top:9px; background-color:#fef5e6; font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:14px; line-height:18px; color:#333333;}
@@ -150,11 +177,6 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #launcher_info_detail .btn_back:hover{background-position:0px -18px;}
 #launcher_info_detail a{cursor:pointer;}

-#launcher_menu{height:86px; position:absolute; right:14px; top:467px; overflow:hidden;}
-#launcher_menu .btn{width:82px; height:86px; background:no-repeat 0px 0px; float:right; margin:0 2px; cursor:pointer;}
-#launcher_menu .btn:hover{background-position:0px -86px;}
-#launcher_menu .btn.hangameb,#launcher_menu .btn.hancoin{display:none;}
-
 #launcher_footer{width:100%; height:39px; position:absolute; left:0; bottom:0; overflow:hidden;}
 #launcher_footer .btn{display:block; position:absolute; z-index:1000; cursor:pointer;}
 #launcher_footer .btn.capcom{width:101px; height:26px; background:no-repeat 0px 0px; left:31px; top:6px;}
@@ -168,24 +190,6 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #launcher_footer .share .btn.fb{width:28px; height:27px; background-position:-28px 0px;}
 #launcher_footer .share .btn.yt{width:50px; height:21px; margin-top:3px; background-position:-56px -3px;}

-#launcher_modal{width:100%; height:100%; position:fixed; left:0; top:0; display:none; z-index:1000;}
-#launcher_modal .modal{width:100%; height:100%; position:absolute; left:0; top:0;}
-#launcher_modal .dialog{position:absolute; left:282px; top:140px; width:560px; height:320px; background:url(images/dialog/bg.jpg) no-repeat 0px 0px;}
-#launcher_modal .dialog p{color:#d1c0a5; font-size:18px; line-height:36px; width:100%; position:relative; text-align:center; padding-top:105px;}
-#launcher_modal .dialog p.alert{line-height:26px; padding-top:90px; font-size:20px;}
-#launcher_modal .dialog p span.uid{font-size:12px;}
-#launcher_modal .dialog p span.attention{color:#f4de22;}
-#launcher_modal .dialog p span.notes{color:#eb3535; font-size:16px; line-height:20px;}
-#launcher_modal .dialog p div.sp{width:100%; height:10px;}
-#launcher_modal .dialog .btnBox{width:100%; height:44px; position:absolute; left:0; top:252px;}
-#launcher_modal .dialog .btns{text-align:center; margin:0 auto; position:relative; overflow:hidden}
-#launcher_modal .dialog .btns ul{position:relative; left:50%; float:left; list-style:none}
-#launcher_modal .dialog .btns ul li{position:relative; left:-50%; float:left; margin-left:33px;}
-#launcher_modal .dialog .btns ul li:first-child{margin-left:5px;}
-#launcher_modal .dialog .btns ul li div{display:block; width:200px; height:35px; padding-top:9px; position:relative; background:no-repeat 0px 0px; text-decoration:none; color:#d1c0a5; font-weight:bold; font-size:18px; line-height:18px; text-align:center; cursor:pointer;}
-#launcher_modal .dialog .btns ul li div:hover,#launcher_modal .dialog .btns ul li div.hover{background-position:0px -44px;}
-#launcher_modal .dialog .btns ul li div.wait:hover,#launcher_modal .dialog .btns ul li div.wait.hover{background-position:0px 0px; cursor:default;}
-
 .scroll_bar_box{width:10px; position:absolute;}
 .scroll_bar_box_base{width:10px; height:100%; position:absolute; right:0; top:0; border-radius:5px; background:#000; opacity:0.4; -moz-opacity:0.4; filter: alpha(opacity=40); -ms-filter:"alpha(opacity=40)";}
 .scroll_bar_box_body{width:6px; position:absolute; right:2px; border-radius:3px; background:#535353; transition:background-color 0.2s linear 0; cursor:pointer; opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80); -ms-filter:"alpha(opacity=80)";}
--- a/Erupe/www/erupe/img/manual.png
+++ b/Erupe/www/erupe/img/manual.png
--- a/Erupe/www/erupe/img/modelbg.jpeg
+++ b/Erupe/www/erupe/img/modelbg.jpeg
--- a/Erupe/www/erupe/img/moreinfo.png
+++ b/Erupe/www/erupe/img/moreinfo.png
--- a/Erupe/www/erupe/img/pastebin.png
+++ b/Erupe/www/erupe/img/pastebin.png
--- a/Erupe/www/erupe/index.html
+++ b/Erupe/www/erupe/index.html
@@ -1,73 +1,134 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-	<meta http-equiv="cache-control" content="max-age=604800, stale-while-revalidate=604800">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Monster Hunter Frontier Z Launcher</title>
-    <link rel="stylesheet" href="css/main.css">
-  </head>
-  <body>
-    <div id="main">
-      <div class="grabbable" unselectable="on" onselectstart="window.external.beginDrag(true); return false;"></div>
-      <div id="game_starting"></div>
-      <div id="window_controls"><div class="grabbable"></div>
-        <div class="unselectable button_min" onclick="window.external.minimizeWindow()" onmouseover="soundSel()">__</div>
-        <div class="unselectable button_close" onclick="window.external.closeWindow()" onmouseover="soundSel()">✕</div>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="cache-control" content="max-age=604800, stale-while-revalidate=604800">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Monster Hunter Frontier Z Launcher</title>
+  <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+  <div id="main">
+    <div class="grabbable" unselectable="on" onselectstart="window.external.beginDrag(true); return false;"></div>
+    <div id="game_starting"></div>
+    <div id="window_controls">
+      <div class="grabbable"></div>
+      <div class="unselectable button_min" onclick="window.external.minimizeWindow()" onmouseover="soundSel()">__</div>
+      <div class="unselectable button_close" onclick="window.external.closeWindow()" onmouseover="soundSel()">✕</div>
+    </div>
+    <div id="header">
+      <div class="grabbable"></div>
+      <p class="background"></p>
+      <p class="title1">Monster Hunter</p>
+      <p class="title2">Frontier Z Launcher</p>
+      <p class="ver">release ver. 2.017 (Erupe)</p>
+      <img src="img/logo.png" width="303" height="114">
+    </div>
+    <div id="login">
+      <div id="processing">
+        <p>Authenticating...</p>
      </div>
-      <div id="header"><div class="grabbable"></div>
-        <p class="background"></p>
-        <p class="title1">Monster Hunter</p>
-        <p class="title2">Frontier Z Launcher</p>
-        <p class="ver">release ver. 2.017 (Erupe)</p>
-        <img src="img/logo.png" width="303" height="114">
-      </div>
-      <div id="login">
-        <div id="processing"><p>Authenticating...</p></div>
-        <div class="login_form">
-          <form id="login_form" onsubmit="event.preventDefault();doLogin()">
-            <label for="username" class="unselectable label_username">Erupe ID</label>
-            <input type="text" id="username" placeholder="Username" onkeyup="soundSel()" onmouseover="soundSel()">
-            <label for="password" class="unselectable label_password">Password</label>
-            <input type="password" id="password" placeholder="Password" onkeyup="soundSel()" onmouseover="soundSel()">
-            <label for="server" class="label_server">Server</label>
-            <input type="text" id="server" value="Erupe" readonly>
-            <input type="submit">
-          </form>
-        </div>
-        <div class="unselectable login_button" onmouseenter="soundSel()" onclick="doLogin()"><span class="unselectable">Log In</span></div>
-        <div class="unselectable login_save"><input type="checkbox" id="login_save"><span id="login_save_text"> Remember Login</span></div>
-      </div>
-      <div id="char_select">
-        <div id="units"></div>
-        <div class="weapon_text">Current Weapon</div>
-        <div class="scroll up" onmouseover="soundSel()" onclick="soundOk();charselScrollUp()"></div>
-        <div class="scroll down" onmouseover="soundSel()" onclick="soundOk();charselScrollDown()"></div>
-        <div class="auto_login" onclick="autoWarning()"><input type="checkbox" id="auto_box"><span id="auto_text"> Auto-Login</span></div>
-        <div class="button_add" onmouseenter="soundSel()" onclick="soundOk();charselAdd()"><span class="unselectable">Add Character</span></div>
-        <div class="button_del" onmouseenter="soundSel()" onclick="soundOk();charselDel()"><span class="unselectable">Delete Character</span></div>
-        <div class="button_log" onmouseenter="soundSel()" onclick="soundOk();charselLog()"><span class="unselectable">Log Out</span></div>
-        <div class="button_start" onmouseenter="soundSel()" onclick="soundLogin();launch()"><span class="unselectable">Launch</span></div>
-      </div>
-      <div class="unselectable" id="log_outer">
-        <div class="log_inner">
-          <p id="log_p"></p>
-        </div>
-      </div>
-      <div class="unselectable" id="button_config" onclick="soundOk();window.external.openMhlConfig()" onmouseover="soundSel()"></div>
-      <div id="footer">
-        <!--
-			Example button
-			<div class="link" onclick="window.external.openBrowser('https://github.com/sekaiwish/Erupe')"><img src="img/icons/github.png"></div>
-		-->
-      </div>
-      <div class="unselectable" id="dev">
-        <form action="javascript:void(0);">
-          <input type="text" id="console">
-          <input type="submit" value="eval()" onclick="doEval()">
+      <div class="login_form">
+        <form id="login_form" onsubmit="event.preventDefault();doLogin()">
+          <label for="username" class="unselectable label_username">Erupe ID</label>
+          <input type="text" id="username" placeholder="Username" onkeyup="soundSel()" onmouseover="soundSel()">
+          <label for="password" class="unselectable label_password">Password</label>
+          <input type="password" id="password" placeholder="Password" onkeyup="soundSel()" onmouseover="soundSel()">
+          <label for="server" class="label_server">Server</label>
+          <input type="text" id="server" value="Erupe" readonly>
+          <input type="submit">
        </form>
      </div>
+      <div class="unselectable login_button" onmouseenter="soundSel()" onclick="doLogin()"><span
+          class="unselectable">Log In</span></div>
+      <div class="unselectable login_save"><input type="checkbox" id="login_save"><span id="login_save_text"> Remember
+          Login</span></div>
    </div>
-    <script src="js/script.js"></script>
-  </body>
+    <div id="launcher_menu" class="unselectable" unselectable="on" onselectstart="return false;">
+      <div class="manual btn" onclick="toggleModal('openLink','http://mhfz.capcom.com.tw/manuals/')"
+        unselectable="on" onselectstart="return false;"></div>
+      <div class="pastebin btn" onclick="toggleModal('openLink','https://pastebin.com/QqAwZSTC')" unselectable="on"
+        onselectstart="return false;"></div>
+    </div>
+    <div id="char_select">
+      <div id="units"></div>
+      <div class="weapon_text">Current Weapon</div>
+      <div class="scroll up" onmouseover="soundSel()" onclick="soundOk();charselScrollUp()"></div>
+      <div class="scroll down" onmouseover="soundSel()" onclick="soundOk();charselScrollDown()"></div>
+      <div class="auto_login" onclick="autoWarning()"><input type="checkbox" id="auto_box"><span id="auto_text">
+          Auto-Login</span></div>
+      <div class="button_add" onmouseenter="soundSel()" onclick="soundOk();charselAdd()"><span class="unselectable">Add
+          Character</span></div>
+      <div class="button_del" onmouseenter="soundSel()" onclick="soundOk();charselDel()"><span
+          class="unselectable">Delete Character</span></div>
+      <div class="button_log" onmouseenter="soundSel()" onclick="soundOk();charselLog()"><span class="unselectable">Log
+          Out</span></div>
+      <div class="button_start" onmouseenter="soundSel()" onclick="soundLogin();launch()"><span
+          class="unselectable">Launch</span></div>
+    </div>
+    <div class="unselectable" id="log_outer">
+      <div class="log_inner">
+        <p id="log_p"></p>
+      </div>
+    </div>
+    <div class="unselectable" id="button_config" onclick="soundOk();window.external.openMhlConfig()"
+      onmouseover="soundSel()"></div>
+    <div id="footer">
+      <div class="link" onclick="toggleModal('openLink','https://github.com/sekaiwish/Erupe')"><img
+          src="img/icons/github.png"></div>
+      <div class="link" onclick="toggleModal('openLink','https://discord.gg/r4eYU2StK6')"><img
+          src="img/icons/discord.png"></div>
+    </div>
+    <div id="launcher_info_list" class="unselectable" style="display:block;">
+      <div class="important_info">
+        <div class="head">
+          <p class="lbl">Important Updates</p>
+        </div>
+        <ul class="article">
+
+          <li>
+            <div class="date">2020-04-01</div>
+            <div class="body"><a
+                href="javascript:toggleModal('openLink',&quot;https://discord.com/channels/368424389416583169/929509970624532511/964339905364918272&quot;);"
+                onclick="soundOk();" unselectable="on" onselectstart="return false;">English PATCH v2.0
+                RELEASED</a></div>
+          </li>
+        </ul>
+      </div>
+      <div class="normal_info">
+        <div class="head">
+          <div class="info lbl">Normal Updates</div>
+        </div>
+        <ul class="article">
+          <li>
+            <div class="date">2020-04-01</div>
+            <div class="body"><a
+                href="javascript:toggleModal('openLink',&quot;https://discord.com/channels/368424389416583169/929509970624532511/964339905364918272&quot;);"
+                onclick="soundOk();" unselectable="on" onselectstart="return false;">Join discord for a community and
+                updates!</a></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div id="launcher_modal">
+      <div class="modal" onclick="return false;" unselectable="on" onselectstart="return false;"></div>
+      <div class="dialog">
+        <p unselectable="on" onselectstart="return false;"></p>
+        <div class="btnBox">
+          <div class="btns"></div>
+        </div>
+      </div>
+    </div>
+    <div class="unselectable" id="dev">
+      <form action="javascript:void(0);">
+        <input type="text" id="console">
+        <input type="submit" value="eval()" onclick="doEval()">
+      </form>
+    </div>
+  </div>
+  <script src="js/script.js"></script>
+</body>
+
 </html>
--- a/Erupe/www/erupe/js/script.js
+++ b/Erupe/www/erupe/js/script.js
@@ -4,6 +4,8 @@ var doingAuto = false;
 var uids;
 var selectedUid;
 var firstChar;
+var modalState = false;
+

 function soundSel() {
 	window.external.playSound('IDR_WAV_SEL');
@@ -254,7 +256,7 @@ function switchPrompt() {
  }
 }

-function doLogin() {
+function doLogin(option) {
  let username = document.getElementById('username').value;
  let password = document.getElementById('password').value;
  if (username == '') {
@@ -266,7 +268,11 @@ function doLogin() {
    soundPreLogin();
    addLog('Authenticating...', 'normal');
    try {
-      window.external.loginCog(username, password, password);
+      if(option){
+        addLog('Creating new character...', 'normal');
+        window.external.loginCog(username+"+", password, password);
+      }else{
+      window.external.loginCog(username, password, password);}
    } catch (e) {
      addLog('Error on loginCog: '+e, 'error');
    }
@@ -350,12 +356,51 @@ function setUidIndex(index) {
  document.getElementById(selectedUid).classList.add('active');
 }

+function toggleModal(preset,url) {
+  // just pass 0 for hiding
+  // probably call toggleModal(0) when the user clicks any button?
+  // besides when chaining modals (i.e confirm delete 1 -> confirm delete 2)
+  
+  let modal = document.getElementById("launcher_modal") // get modal id
+  
+  modalState = !modalState;
+  if (modalState) {
+    setModalContent(preset,url)
+    modal.style.display = 'block'
+  } else {
+    modal.style.display = 'none'
+  }
+}
+
+function setModalContent(preset,url) {
+  let modal = document.getElementById("launcher_modal"); 
+  switch (preset) {
+    case 'openLink':
+     
+      modal.querySelector(".dialog p").innerHTML = "You have clicked a link, are you sure you want to open it?<br><span class=\"uid\"> (URL:"+url+")</span><br><div class=\"sp\"></div><span class=\"attention\">This will open a web browser</span>";
+      modal.querySelector(".dialog .btns").innerHTML = "<ul><li><div unselectable=\"on\" onselectstart=\"return false;\" onmouseover=\"soundSel();\" onclick=\"soundOk(); window.external.openBrowser('"+url+"');  toggleModal(0);\" style=\"opacity: 1;\">Open</div></li><li><div onmouseover=\"soundSel();\" onclick=\"soundOk(); toggleModal(0);\" unselectable=\"on\" onselectstart=\"return false;\" class=\"\">Cancel</div></li></ul>";
+      break;
+    case 'confirmCharDelete':
+      modal.querySelector(".dialog p").innerHTML = "Are you sure you want to delete your character?<br>INSERT NAME<span class=\"uid\"> (ID:INSER NAME)</span>?<br><div+class=\"sp\"></div><span class=\"attention\">You wont be able to recover this character<br>It will be gone forever.</span>";
+      modal.querySelector(".dialog .btns").innerHTML = "<ul><li><div unselectable=\"on\" onselectstart=\"return false;\" onmouseover=\"soundSel();\" onclick=\"soundOk(); addLog('Not yet implemented.', 'error');  toggleModal(0);\" style=\"opacity: 1;\">Yes</div></li><li><div onmouseover=\"soundSel();\" onclick=\"soundOk(); toggleModal(0);\" unselectable=\"on\" onselectstart=\"return false;\" class=\"\">Cancel</div></li></ul>";
+      //Uses the launcher delete 
+      //modal.querySelector(".dialog .btns").innerHTML = "<ul><li><div unselectable=\"on\" onselectstart=\"return false;\" onmouseover=\"soundSel();\" onclick=\"soundOk(); window.external.deleteCharacter('"+selectedUid+"');  toggleModal(0);\" style=\"opacity: 1;\">Yes</div></li><li><div onmouseover=\"soundSel();\" onclick=\"soundOk(); toggleModal(0);\" unselectable=\"on\" onselectstart=\"return false;\" class=\"\">Cancel</div></li></ul>";
+      break;
+      case 'addCharNew':
+        modal.querySelector(".dialog p").innerHTML = "Historically the game required you to buy character slots. <br><div+class=\"sp\"></div><span class=\"attention\">Click the 'Add Character' Button to add a new slot.</span>";
+        modal.querySelector(".dialog .btns").innerHTML = "<ul><li><div unselectable=\"on\" onselectstart=\"return false;\" onmouseover=\"soundSel();\" onclick=\"soundOk(); soundNiku(); doLogin(1); switchPrompt(); toggleModal(0);\" style=\"opacity: 1;\">Add Character</div></li><li><div onmouseover=\"soundSel();\" onclick=\"soundOk(); toggleModal(0);\" unselectable=\"on\" onselectstart=\"return false;\" class=\"\">Cancel</div></li></ul>";
+        break;
+    default:
+      return;
+  }
+}
+
 function charselAdd() {
-  addLog("Press [Log Out], then add a '+' to the end of your username to create a new character.", 'normal');
+  toggleModal('addCharNew')
 }

 function charselDel() {
-  addLog('Not yet implemented.', 'error');
+  toggleModal('confirmCharDelete')
 }

 function charselLog() {