Finalise launcher code

2025-12-12 23:14:36 +01:00 · 2022-04-24 15:05:41 +10:00
parent 4baed27d18
commit 08a9bc495e
5 changed files with 146 additions and 112 deletions
--- a/Erupe/www/erupe/css/main.css
+++ b/Erupe/www/erupe/css/main.css
@@ -111,7 +111,6 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #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; z-index:1000; cursor:pointer;float:left;}

-
 #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;}
@@ -139,21 +138,21 @@ body{background:#092314; font-family:sans-serif; color:#d1c0a5; font-size:14px;
 #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 .btn_box{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_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:white; 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_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);}
+#launcher_menu .btn.manual{background-image:url(../img/manual.png);}
+#launcher_menu .btn.pastebin{background-image: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;}
--- a/Erupe/www/erupe/img/manual.png
+++ b/Erupe/www/erupe/img/manual.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
@@ -15,8 +15,8 @@
    <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 class="unselectable button_min" onclick="soundOk(); window.external.minimizeWindow()" onmouseover="soundSel()">__</div>
+      <div class="unselectable button_close" onclick="soundOk(); window.external.closeWindow()" onmouseover="soundSel()">✕</div>
    </div>
    <div id="header">
      <div class="grabbable"></div>
@@ -33,67 +33,52 @@
      <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()">
+          <input type="text" id="username" placeholder="Username" onkeypress="soundSel()" onmouseover="soundSel()" onclick="soundOk()">
          <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="password" id="password" placeholder="Password" onkeypress="soundSel()" onmouseover="soundSel()" onclick="soundOk()">
+          <label for="server" class="unselectable label_server">Server</label>
+          <input class="unselectable" 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="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 class="unselectable login_button" onmouseenter="soundSel()" onclick="doLogin()"><span class="unselectable">Log In</span></div>
+      <div class="unselectable login_save">
+		<input class="unselectable" 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 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="unselectable" id="button_config" onclick="soundOk();window.external.openMhlConfig()" onmouseover="soundSel()"></div>
+    <div id="launcher_info_list" class="unselectable">
      <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>
+            <div class="date">2022-04-24</div>
+            <div class="body">
+				<a
+					href="javascript:toggleModal('openLink',&quot;https://discord.com/channels/368424389416583169/929509970624532511/964339905364918272&quot;);"
+					onclick="soundOk()">Launcher Patch v1.0 Released!
+				</a>
+			</div>
          </li>
        </ul>
      </div>
@@ -103,22 +88,30 @@
        </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>
+            <div class="date">2022-04-24</div>
+            <div class="body">
+				<a
+					href="javascript:toggleModal('openLink',&quot;https://discord.gg/CFnzbhQ&quot;);"
+					onclick="soundOk()">Join the community discord for updates!
+				</a>
+			</div>
          </li>
        </ul>
      </div>
    </div>
-    <div id="launcher_modal">
-      <div class="modal" onclick="return false;" unselectable="on" onselectstart="return false;"></div>
+    <div id="launcher_menu" class="unselectable">
+      <div class="manual btn" onmouseenter="soundSel()" onclick="soundOk(); toggleModal('openLink', 'https://mhfz.capcom.com.tw/manuals/')"></div>
+      <div class="pastebin btn" onmouseenter="soundSel()" onclick="soundOk(); toggleModal('openLink', 'https://pastebin.com/QqAwZSTC')"></div>
+    </div>
+    <div id="footer">
+      <div class="link unselectable" onclick="toggleModal('openLink', 'https://github.com/xl3lackout/Erupe')"><img src="img/icons/github.png"></div>
+      <div class="link unselectable" onclick="toggleModal('openLink', 'https://discord.gg/CFnzbhQ')"><img src="img/icons/discord.png"></div>
+    </div>
+    <div class="grabbable" id="launcher_modal">
+      <div class="modal"></div>
      <div class="dialog">
-        <p unselectable="on" onselectstart="return false;"></p>
-        <div class="btnBox">
-          <div class="btns"></div>
-        </div>
+        <p></p>
+        <div class="btn_box"><div class="btns unselectable"></div></div>
      </div>
    </div>
    <div class="unselectable" id="dev">
@@ -130,5 +123,4 @@
  </div>
  <script src="js/script.js"></script>
 </body>
-
 </html>
--- a/Erupe/www/erupe/js/script.js
+++ b/Erupe/www/erupe/js/script.js
@@ -83,25 +83,25 @@ function saveAccount() {

 function createCharItem(name, uid, weapon, hr, gr, date, sex) {
  var icon;
-	const dateObject = new Date(date * 1000);
-	date = dateObject.toLocaleDateString('en-US');
-	let dateString = '';
-	for (var i = 0; i < date.length; i++) {
-		if (date[i] != '‎') { // invisible LTR char
-			dateString += date[i];
-		}
-	}
+  const dateObject = new Date(date * 1000);
+  date = dateObject.toLocaleDateString('en-US');
+  let dateString = '';
+  for (var i = 0; i < date.length; i++) {
+    if (date[i] != '‎') { // invisible LTR char
+      dateString += date[i];
+    }
+  }
  if (sex == 'M') {
    sex = "♂";
  } else {
    sex = "♀";
  }
  if (hr > 999) {
-		hr = 999;
-	}
-	if (gr > 999) {
-		gr = 999;
-	}
+	hr = 999;
+  }
+  if (gr > 999) {
+	gr = 999;
+  }
  switch (weapon) {
    case '片手剣':
      weapon = 'Sword & Shield';
@@ -268,11 +268,12 @@ function doLogin(option) {
    soundPreLogin();
    addLog('Authenticating...', 'normal');
    try {
-      if(option){
+      if (option) {
        addLog('Creating new character...', 'normal');
-        window.external.loginCog(username+"+", password, password);
-      }else{
-      window.external.loginCog(username, password, password);}
+        window.external.loginCog(username+'+', password, password);
+      } else {
+        window.external.loginCog(username, password, password);
+	  }
    } catch (e) {
      addLog('Error on loginCog: '+e, 'error');
    }
@@ -356,51 +357,93 @@ 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
-  
+function toggleModal(preset, url) {
+  let modal = document.getElementById('launcher_modal');
  modalState = !modalState;
  if (modalState) {
-    setModalContent(preset,url)
-    modal.style.display = 'block'
+    setModalContent(preset, url);
+    modal.style.display = 'block';
  } else {
-    modal.style.display = 'none'
+    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 setModalContent(preset, url) {
+  let modal = document.getElementById('launcher_modal');
+	switch (preset) {
+		case 'openLink':
+			modal.querySelector('.dialog p').innerHTML = ' \
+				Are you sure you want to open this URL? \
+				<br> \
+				<span class="uid">'+url+'</span> \
+				<br> \
+				<div class="sp"></div> \
+				<span class="attention">This will open in a browser</span> \
+			';
+			modal.querySelector('.dialog .btns').innerHTML = ' \
+				<ul> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundOk(); window.external.openBrowser(\''+url+'\'); toggleModal(0)">Open</div> \
+					</li> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundOk(); toggleModal(0)">Cancel</div> \
+					</li> \
+				</ul> \
+			';
+			break;
+		case 'confirmCharDelete':
+			modal.querySelector('.dialog p').innerHTML = ' \
+				Are you sure you want to delete your character? \
+				<br>NAME \
+				<span class="uid"> (ID: 000000)</span> \
+				<br> \
+				<div class="sp"></div> \
+				<span class="attention">You will not be able to recover this character, \
+					<br>it will be gone forever. \
+				</span> \
+			';
+			modal.querySelector('.dialog .btns').innerHTML = ' \
+				<ul> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundOk(); addLog(\'Not yet implemented.\', \'error\'); toggleModal(0)">Yes</div> \
+					</li> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundOk(); toggleModal(0)">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 = ' \
+				Are you sure you want to add a new character? \
+				<br> \
+				<div class="sp"></div> \
+				<span class="attention">Press [Add Character] to add a new slot.</span> \
+			';
+			modal.querySelector('.dialog .btns').innerHTML = ' \
+				<ul> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundNiku(); doLogin(1); switchPrompt(); toggleModal(0)">Add Character</div> \
+					</li> \
+					<li> \
+						<div onmouseover="soundSel()" onclick="soundOk(); toggleModal(0)">Cancel</div> \
+					</li> \
+				</ul> \
+			';
+			break;
+		default:
+			return;
+	}
 }

 function charselAdd() {
-  toggleModal('addCharNew')
+  toggleModal('addCharNew');
 }

 function charselDel() {
-  toggleModal('confirmCharDelete')
+  toggleModal('confirmCharDelete');
 }

 function charselLog() {