From 88dd93374aab6417d7bc9f1c996d3aec0d9f5c20 Mon Sep 17 00:00:00 2001
From: jak1 <jak1@themanaworld.org>
Date: Fri, 13 Jan 2023 21:24:31 +0100
Subject: added some char animation (still a bit buggy)

---
 client/index.html | 81 ++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 63 insertions(+), 18 deletions(-)

(limited to 'client')

diff --git a/client/index.html b/client/index.html
index 24403e3..de22cc0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -47,9 +47,9 @@
 <!-- Game -->
 <div id="gameDiv" style="display:none;">
   <div id="game">
-    <canvas id="ctx" width="500" height="500" tabindex="1"
+    <canvas id="ctx" width="1000" height="650" tabindex="1"
       style="position:absolute; border:1px solid #000000;"></canvas>
-    <div id="ui" tabindex="2" style="position:absolute; width:502px; height:502px; display:none;">
+    <div id="ui" tabindex="2" style="position:absolute; width:1002px; height:652px; display:none;">
       <div id="ui-statusbar"
         style="position:absolute; border:1px solid #000000; top:50px; left:0px; width:450px; height: 40px;">
         Status Bar
@@ -88,17 +88,17 @@
       </div>
     </div>
   </div>
-  <div id="chat" style="margin-top:520px;">
-    <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
+  <div id="chat" style="margin-top:670px;">
+    <div id="chat-wrapper" style="width:1000px; height:20px; overflow: hidden; white-space: nowrap;">
       <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)">WORLD</div>
       <!-- TODO only show up on permission to use the GM tab. 
           <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> -->
       <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
       <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
     </div>
-    <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
+    <div id="chat-text" style="width:1000px; height:100px; overflow-y:scroll;"></div>
     <form id="chat-form">
-      <input id="chat-input" type="text" style="width:500px;"></input>
+      <input id="chat-input" type="text" style="width:1000px;"></input>
     </form>
   </div>
 </div>
@@ -229,6 +229,8 @@
     self.sit = false;
     self.inInventory = false;
     self.ignorePlayerAttack = initPack.ignorePlayerAttacky;
+    self.current_animation_index = 0;
+    self.isMoving = false;
 
     self.drawPlayer = function ()
     {
@@ -238,20 +240,28 @@
       // 'player'
       var width = 64;
       var height = 64;
+      animated_tiles = 7;
       if (self.sit)
       {
         finalWidth = width * self.dir;
         finalHeight = height * 4;
+        animated = 0;
       } else
       {
         finalWidth = 0;
         finalHeight = height * self.dir;
+        animated = self.current_animation_index;
+        if (self.isMoving)
+          self.current_animation_index += 1;
       }
+      if (self.current_animation_index >= animated_tiles)
+        self.current_animation_index = 0;
       ctx.drawImage(Img.player,
-        finalWidth /* base sprite */, finalHeight,
+        finalWidth + (animated * width) /* base sprite */, finalHeight,
         width, height,
         x - width / 2, y - height / 2,
         width, height);
+
     }
     self.drawPlayerName = function ()
     {
@@ -350,6 +360,8 @@
           p.inInventory = pack.inInventory;
         if (pack.ignorePlayerAttack != undefined)
           p.ignorePlayerAttack = pack.ignorePlayerAttack;
+        if (pack.isMoving !== undefined)
+          p.isMoving = pack.isMoving;
       }
     }
     for (var i = 0; i < data.bullet.length; i++)
@@ -399,7 +411,7 @@
   {
     if (!selfId || errno != 0)
       return;
-    ctx.clearRect(0, 0, 500, 500);
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
     drawMapGround();
     drawGFXGround();
     drawEntities();
@@ -487,18 +499,36 @@
         self.shift = true;
       // inventory (i)
       if (event.keyCode === 73)
+      {
         socket.emit('keyPress', { inputId: 'inInventory', state: !Player.list[selfId].inInventory, shift: self.shift });
+        self.isMoving = false;
+      }
       // movement
-      if (event.keyCode === 68 || event.keyCode === 39) // d
+      if (event.keyCode === 68 || event.keyCode === 39)
+      { // d
         socket.emit('keyPress', { inputId: 'right', state: true, shift: self.shift });
-      else if (event.keyCode === 65 || event.keyCode === 37) // a
+        self.isMoving = true;
+      }
+      else if (event.keyCode === 65 || event.keyCode === 37)
+      { // a
         socket.emit('keyPress', { inputId: 'left', state: true, shift: self.shift });
-      else if (event.keyCode === 83 || event.keyCode === 40) // s
+        self.isMoving = true;
+      }
+      else if (event.keyCode === 83 || event.keyCode === 40)
+      { // s
         socket.emit('keyPress', { inputId: 'down', state: true, shift: self.shift });
-      else if (event.keyCode === 87 || event.keyCode === 38) // w
+        self.isMoving = true;
+      }
+      else if (event.keyCode === 87 || event.keyCode === 38)
+      { // w
         socket.emit('keyPress', { inputId: 'up', state: true, shift: self.shift });
+        self.isMoving = true;
+      }
       else if (event.keyCode === 88)
+      { // x (sit)
         socket.emit('keyPress', { inputId: 'sit', state: !Player.list[selfId].sit, shift: self.shift });
+        self.isMoving = false;
+      }
     }
   }
 
@@ -508,14 +538,26 @@
     if (event.keyCode === 16)
       self.shift = false;
     // movement
-    if (event.keyCode === 68 || event.keyCode === 39) // d
+    if (event.keyCode === 68 || event.keyCode === 39)
+    { // d
       socket.emit('keyPress', { inputId: 'right', state: false, shift: self.shift });
-    else if (event.keyCode === 65 || event.keyCode === 37) // a
+      self.isMoving = false;
+    }
+    else if (event.keyCode === 65 || event.keyCode === 37)
+    { // a
       socket.emit('keyPress', { inputId: 'left', state: false, shift: self.shift });
-    else if (event.keyCode === 83 || event.keyCode === 40) // s
+      self.isMoving = false;
+    }
+    else if (event.keyCode === 83 || event.keyCode === 40)
+    { // s
       socket.emit('keyPress', { inputId: 'down', state: false, shift: self.shift });
-    else if (event.keyCode === 87 || event.keyCode === 38) // w
+      self.isMoving = false;
+    }
+    else if (event.keyCode === 87 || event.keyCode === 38)
+    { // w
       socket.emit('keyPress', { inputId: 'up', state: false, shift: self.shift });
+      self.isMoving = false;
+    }
   }
 
   document.onmousedown = function (event)
@@ -525,20 +567,23 @@
       document.activeElement === document.getElementById('ctx'))
     {
       socket.emit('keyPress', { inputId: 'attack', state: true });
+      self.isMoving = false;
     }
   }
 
   document.onmouseup = function (event)
   {
     socket.emit('keyPress', { inputId: 'attack', state: false });
+    self.isMoving = false;
   }
 
   document.onmousemove = function (event)
   {
-    var x = -250 + event.clientX - 8;
-    var y = -250 + event.clientY - 8;
+    var x = -(WIDTH / 2) + event.clientX - 8;
+    var y = -(HEIGHT / 2) + event.clientY - 8;
     var angle = Math.atan2(y, x) / Math.PI * 180;
     socket.emit('keyPress', { inputId: 'mouseAngle', state: angle });
+    self.isMoving = false;
   }
 
 </script>
-- 
cgit v1.2.3-70-g09d2