Client: clickmanager, maplebutton, maplestancebutton, mapleframebutton

.gitignore

@@ -4,4 +4,4 @@
 /client/bundle.js
 
 # WebStorm
-/.idea/
+/.idea/

src/client/clickmanager.js

@@ -0,0 +1,137 @@
+import { MapleStanceButton, BUTTON_STANCE } from './maplestancebutton';
+import MapleFrameButton from './mapleframebutton';
+import UICommon from './uicommon'
+import GUIUtil from './guiutil';
+import GameCanvas from './gamecanvas';
+import MapleMap from './maplemap';
+
+const ClickManager = {};
+
+ClickManager.initialize = function() {
+  this.clicked = false;
+  this.lastClickedPosition = {};
+  this.activeButton = null;
+  this.buttons = {
+    stanceButton: [],
+    frameButton: [],
+  }
+};
+
+ClickManager.doUpdate = function(msPerTick, camera) {
+  const mousePoint = { x: GameCanvas.mouseX, y: GameCanvas.mouseY };
+  const clickedOnLastUpdate = this.clicked;
+  const clickedOnThisUpdate = GameCanvas.clicked;
+  const releasedClick = clickedOnLastUpdate && !clickedOnThisUpdate;
+  const lastActiveButton = this.activeButton;
+  const buttons = [...this.buttons.stanceButton, ...this.buttons.frameButton];
+  let currActiveButton = null;
+
+  if (buttons.length === 0) {
+    return;
+  }
+
+  for (let button of buttons) {
+    const buttonRect = button.getRect(camera);
+    const hoverButton = GUIUtil.pointInRectangle(mousePoint, buttonRect);
+    if (hoverButton) {
+      currActiveButton = button;
+      break;
+    }
+  }
+
+  // hover event
+  if (lastActiveButton !== currActiveButton) {
+    this.activeButton = currActiveButton;
+    this.buttons.stanceButton.forEach(button => button.stance = BUTTON_STANCE.NORMAL);
+    for (let button of this.buttons.stanceButton) {
+      if (this.activeButton === button) {
+        if (button.hoverAudio) {
+          UICommon.playMouseHoverAudio();
+        }
+        button.stance = BUTTON_STANCE.MOUSE_OVER;
+        break;
+      }
+    }
+  }
+
+  // click event
+  for (let button of buttons) {
+    if (this.activeButton === button) {
+      const originallyClickedButton = GUIUtil.pointInRectangle(
+        this.lastClickedPosition,
+        button.getRect(camera)
+      );
+      if (clickedOnThisUpdate) {
+        switch (button.constructor) {
+          case MapleStanceButton: {
+            button.stance = !originallyClickedButton ? BUTTON_STANCE.MOUSE_OVER : BUTTON_STANCE.PRESSED;
+            break;
+          }
+          case MapleFrameButton: {
+            break;
+          }
+        }
+      } else {
+        switch (button.constructor) {
+          case MapleStanceButton: {
+            button.stance = BUTTON_STANCE.MOUSE_OVER;
+            const trigger = releasedClick && originallyClickedButton;
+            if (trigger) {
+              if (button.clickAudio) {
+                UICommon.playMouseClickAudio();
+              }
+              button.trigger();
+            }
+            break;
+          }
+          case MapleFrameButton: {
+            const trigger = releasedClick && originallyClickedButton && button.canClick;
+            if (trigger) {
+              button.canClick = false;
+              button.canUpdate = true;
+              if (button.clickAudio) {
+                UICommon.playMouseClickAudio();
+              }
+            }
+            break;
+          }
+        }
+      }
+
+      if (clickedOnThisUpdate) {
+        if (!clickedOnLastUpdate) {
+          this.lastClickedPosition = mousePoint;
+        }
+        this.clicked = true;
+      } else {
+        this.clicked = false;
+      }
+
+      break;
+    }
+  }
+};
+
+ClickManager.addButton = function(button) {
+  switch (button.constructor) {
+    case MapleStanceButton: {
+      this.buttons.stanceButton.push(button);
+      break;
+    }
+    case MapleFrameButton: {
+      this.buttons.frameButton.push(button);
+      break;
+    }
+    default: {
+      throw new Error("Only button is accepted!!");
+    }
+  }
+  MapleMap.objects.push(button);
+};
+
+ClickManager.clearButton = function() {
+  this.buttons.stanceButton = [];
+  this.buttons.frameButton = [];
+};
+
+export default ClickManager;

src/client/main.js

@@ -7,10 +7,12 @@ import Camera from './camera';
 import MySocket from './mysocket';
 import StateManager from './statemanager';
 import LoginState from './loginstate';
+import ClickManager from './clickmanager';
 
 async function startGame() {
   DRAW_RECT({ x: 0, y: 0, width: 800, height: 600, color: '#000000', });
   StateManager.initialize();
+  ClickManager.initialize();
   GameCanvas.initialize();
   WZManager.initialize();
   Camera.initialize();

src/client/maplebutton.js

@@ -0,0 +1,37 @@
+class MapleButton {
+  constructor(opts) {
+    this.x = opts.x || 0;
+    this.y = opts.y || 0;
+    this.img = opts.img || {};
+    this.layer = opts.layer || 2;
+    this.hoverAudio = !(opts.hoverAudio === false);
+    this.clickAudio = !(opts.clickAudio === false);
+    this.onClick = opts.onClick || function(self) {};
+    this.onDraw = function(camera, lag, msPerTick, tdelta, self) {};
+    this.onUpdate = function(msPerTick, self) {};
+    this.opts = opts;
+  }
+
+  update(msPerTick) {
+    this.onUpdate(msPerTick, this);
+  }
+
+  draw(camera, lag, msPerTick, tdelta) {
+    this.onDraw(camera, lag, msPerTick, tdelta, this);
+  }
+
+  trigger() {
+    this.onClick(this);
+  }
+
+  getRect(camera) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+}
+
+export default MapleButton;

src/client/mapleframebutton.js

@@ -0,0 +1,54 @@
+import DRAW_IMAGE from './drawimage';
+import MapleButton from './maplebutton'
+
+class MapleFrameButton extends MapleButton {
+  constructor(opts) {
+    super(opts);
+    this.canClick = true;
+    this.canUpdate = false;
+    this.frame = opts.frame || 0;
+    this.delay = opts.delay || 100;
+    this.endFrame = opts.endFrame || this.img.length;
+    this.onEndFrame = opts.onEndFrame || function (self) {};
+    this.onDraw = opts.onDraw || function(camera, lag, msPerTick, tdelta, self) {
+      const currentFrame = this.img[this.frame];
+      const currentImage = currentFrame.nGetImage();
+      DRAW_IMAGE({
+        img: currentImage,
+        dx: this.x - camera.x - currentFrame.origin.nX,
+        dy: this.y - camera.y - currentFrame.origin.nY,
+      });
+    };
+    const delay = this.delay;
+    this.onUpdate = opts.onUpdate || function(msPerTick, self) {
+      if(this.canUpdate) {
+        this.delay -= msPerTick;
+        if (this.delay <= 0) {
+          this.frame += 1;
+          this.delay = delay - this.delay;
+        }
+        const isDone = this.frame === this.endFrame;
+        if (isDone) {
+          this.frame = 0;
+          this.delay = delay;
+          this.canUpdate = false;
+          this.canClick = true;
+          this.onEndFrame(this);
+        }
+      }
+    };
+  }
+
+  getRect(camera) {
+    const frame = this.img[0];
+    const image = frame.nGetImage();
+    return {
+      x: this.x - camera.x - frame.origin.nX,
+      y: this.y - camera.y - frame.origin.nY,
+      width: image.width,
+      height: image.height,
+    };
+  }
+}
+
+export default MapleFrameButton;

src/client/maplestancebutton.js

@@ -0,0 +1,39 @@
+import DRAW_IMAGE from './drawimage';
+import MapleButton from './maplebutton';
+
+const BUTTON_STANCE = {
+  NORMAL: 'normal',
+  MOUSE_OVER: 'mouseOver',
+  PRESSED: 'pressed',
+};
+
+class MapleStanceButton extends MapleButton {
+  constructor(opts) {
+    super(opts);
+    this.stance = opts.stance || BUTTON_STANCE.NORMAL;
+    this.stances = this.img.reduce((stances, stance) => {
+      stances[stance.nName] = stance.nChildren[0];
+      return stances;
+    }, {});
+    this.onUpdate = opts.onUpdate || function(msPerTick, self) {};
+    this.onDraw = opts.onDraw || function(camera, lag, msPerTick, tdelta, self) {
+      const currentFrame = this.stances[this.stance];
+      const currentImage = currentFrame.nGetImage();
+      DRAW_IMAGE({
+        img: currentImage,
+        dx: this.x - camera.x,
+        dy: this.y - camera.y,
+      });
+    };
+  }
+
+  update(msPerTick) {
+    this.onUpdate(msPerTick, this);
+  }
+
+  draw(camera, lag, msPerTick, tdelta) {
+    this.onDraw(camera, lag, msPerTick, tdelta, this);
+  }
+}
+
+export { MapleStanceButton, BUTTON_STANCE };

src/client/statemanager.js

@@ -1,3 +1,5 @@
+import ClickManager from './clickmanager';
+
 const StateManager = {};
 
 StateManager.initialize = function() {
@@ -7,6 +9,7 @@ StateManager.initialize = function() {
 
 StateManager.setState = async function(state) {
   this.transitioning = true;
+  ClickManager.clearButton();
   await state.initialize();
   this.currentState = state;
   this.transitioning = false;
@@ -15,6 +18,7 @@ StateManager.setState = async function(state) {
 StateManager.doUpdate = function(msPerTick, camera) {
   if (!this.transitioning) {
     this.currentState.doUpdate(msPerTick, camera);
+    ClickManager.doUpdate(msPerTick, camera);
   }
 };