diff options
| -rw-r--r-- | webAO/client.css | 18 | ||||
| -rw-r--r-- | webAO/client.html | 21 | ||||
| -rw-r--r-- | webAO/client.js | 77 |
3 files changed, 45 insertions, 71 deletions
diff --git a/webAO/client.css b/webAO/client.css index c22c0f9..8b19f1b 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -79,6 +79,19 @@ img { width: 100%; } +@keyframes shake { + 0%,100% {left: 0; } + 20% {left: -10%; } + 40% {left: +10%; } + 60% {left: -10%; } + 80% {left: +10%; } +} + +@keyframes flash { + 0%,100% {background-color: transparent; } + 50% {background-color: white; } +} + #client_charselect { position: fixed; top: 0; @@ -176,7 +189,6 @@ img { } #client_fg { - display: none; position: absolute; height: 100%; width: 100%; @@ -192,6 +204,8 @@ img { height: 0%; width: auto; top: 1.5em; + transition: 0.25s linear; + transition-property: height, opacity; } #client_shout { @@ -426,6 +440,8 @@ img { bottom: 0; position: relative; display: inline-block; + transition: 1s linear; + transition-property: width; } .client_button { diff --git a/webAO/client.html b/webAO/client.html index 9a54cb9..be402b7 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -7,14 +7,10 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="client.css?v=1.0.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> - <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> - <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> - <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" /> <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" /> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> - <script src="lib/jquery.ui.touch-punch.min.js"></script> <script src="lib/jdataview.min.js"></script> <script src="lib/gify.min.js"></script> <script src="ui.b.js"></script> @@ -30,7 +26,7 @@ <img id="client_pair_char" alt="Paired character" style="display: none;" onerror="charError(this);"> <img id="client_char" alt="Character" onerror="charError(this);"> <img id="client_bench"> - <img id="client_fg" alt="Various overlay" onerror="imgError(this);"> + <img id="client_fg" alt="Various overlay" src="misc/placeholder.gif" onerror="imgError(this);"> <img id="client_evi" src="misc/evidence_selector.png" alt="Character Evidence" onerror="imgError(this);"> <img id="client_shout" alt="Shout overlay" src="misc/placeholder.gif" onerror="imgError(this);"> @@ -95,12 +91,12 @@ </span> <br> <span style="display:inline-block; vertical-align: middle;"> - <span id="menu_ahpd" onclick="addHPD()" class="menu_icon"> - <i class="material-icons em1-5">add_circle</i> - </span> - <span style="font-size: 1.25em">Defense</span> <span id="menu_rhpd" onclick="redHPD()" class="menu_icon"> <i class="material-icons em1-5">remove_circle</i> + </span> + <span style="font-size: 1.25em">Defense</span> + <span id="menu_ahpd" onclick="addHPD()" class="menu_icon"> + <i class="material-icons em1-5">add_circle</i> </span> </span> <span style="display:inline-block; vertical-align: middle;"> @@ -338,13 +334,6 @@ </select> </template> -<div id="callmod_dialog" title="Call Mod"> - <p> - <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span> - Are you sure you want to call a moderator? - </p> -</div> - <body> <span id="sound"></span> <div id="here"></div> diff --git a/webAO/client.js b/webAO/client.js index b66f9cc..f9cdc52 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -844,19 +844,17 @@ class Client extends EventEmitter { */ handleHP(args) { const percent_hp = args[2] * 10; - if (args[1] === 1) { + let healthbox; + if (args[1] === "1") { // Def hp this.hp[0] = args[2]; - $("#client_defense_hp > .health-bar").animate({ - "width": percent_hp + "%" - }, 500); + healthbox = document.getElementById("client_defense_hp"); } else { // Pro hp this.hp[1] = args[2]; - $("#client_prosecutor_hp > .health-bar").animate({ - "width": percent_hp + "%" - }, 500); + healthbox = document.getElementById("client_prosecutor_hp"); } + healthbox.getElementsByClassName("health-bar")[0].style.width = percent_hp + "%"; } /** @@ -1176,6 +1174,11 @@ class Viewport { this.sfxplayed = 0; this.textTimer = 0; this._animating = true; + + // Reset CSS animation + document.getElementById("client_fg").style.animation = ""; + document.getElementById("client_gamewindow").style.animation = ""; + clearTimeout(this.updater); // If preanim existed then determine the length if (chatmsg.preanim !== "-") { @@ -1409,17 +1412,14 @@ class Viewport { this.sfxplayed = 1; this.sfxaudio.src = AO_HOST + "sounds/general/sfx-stab.wav"; this.sfxaudio.play(); - $("#client_gamewindow").effect("shake", { - "direction": "up" - }); + document.getElementById("client_gamewindow").style.animation = "shake 0.2s 1"; } else if (this.chatmsg.flash === "1") { // Flash screen - background.style.backgroundColor = "white"; this.sfxaudio.pause(); this.sfxplayed = 1; this.sfxaudio.src = AO_HOST + "sounds/general/sfx-realization.wav"; this.sfxaudio.play(); - $("#client_gamewindow").effect("pulsate", { times: 1 }, 200); + document.getElementById("client_fg").style.animation = "flash 0.4s 1"; } // Pre-animation stuff @@ -1458,17 +1458,13 @@ class Viewport { // Only def show evidence on right eviBox.style.right = "1.5em"; eviBox.style.left = "initial"; - $("#client_evi").animate({ - height: "30%", - opacity: 1 - }, 250); + eviBox.style.height = "30%"; + eviBox.style.opacity = 1; } else { eviBox.style.right = "initial"; eviBox.style.left = "1.5em"; - $("#client_evi").animate({ - height: "30%", - opacity: 1 - }, 250); + eviBox.style.height = "30%"; + eviBox.style.opacity = 1; } } @@ -1932,7 +1928,6 @@ async function changeBackground(position) { }; const { bg, desk, speedLines } = positions[position]; - document.getElementById("client_fg").style.display = "none"; if (viewport.chatmsg.type === "5") { document.getElementById("client_court").src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`; @@ -2250,7 +2245,12 @@ window.randomCharacterOOC = randomCharacterOOC; * Call mod. */ export function callMod() { - $("#callmod_dialog").dialog("open"); + let modcall = prompt("Please enter the reason for the modcall",""); + if (modcall == null || modcall === "") { + // cancel + } else { + client.sendZZ(modcall); + } } window.callMod = callMod; @@ -2488,35 +2488,4 @@ function decodeChat(estring) { // let client = new Client(serverIP); -let viewport = new Viewport(); - -// Create dialog and link to button -$(function () { - $("#callmod_dialog").dialog({ - autoOpen: false, - resizable: false, - show: { - effect: "drop", - direction: "down", - duration: 500 - }, - hide: { - effect: "drop", - direction: "down", - duration: 500 - }, - height: "auto", - width: 400, - modal: true, - buttons: { - Sure: function () { - const reason = prompt("Please enter the reason", ""); - client.sendZZ(reason); - $(this).dialog("close"); - }, - Cancel: function () { - $(this).dialog("close"); - } - } - }); -}); +let viewport = new Viewport();
\ No newline at end of file |