chg: dev: massive refactor on front-end - and remove unnecessary deps #4

assets/js/mine-seeker/components/user/User.jsx

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+
+const SRC = '/images/';
+
+const User = memo(function User({
+  color, webPlayer,
+  name, desc, active, mines, haveBomb, enabledBomb,
+  onClickBombSelector,
+}) {
+  const buzzClass = 'bomb-container'
+    + (active && color === webPlayer && haveBomb && enabledBomb ? ' buzz' : '');
+
+  const bombImg = haveBomb
+    ? SRC + (enabledBomb && active ? 'bg-bomb-outbg.png' : 'bg-bomb-disabled-outbg.png')
+    : SRC + 'bg-bomb-exploded-outbg.png';
+
+  return (
+    <div className={`user-container user-${color}`}>
+      <div className="user-header">
+        <div className="user-color">{color}</div>
+        {active && <img src={`${SRC}bg-cursor-${color}-outbg.png`} alt="" className="user-cursor" />}
+        <img src={`${SRC}bg-figure-${color}-outbg.png`} alt="" />
+      </div>
+      <div className="user-name"> {name} </div>
+      <div className="user-caret"><i className="fa fa-caret-down" /></div>
+      <div className="user-desc"> {desc} </div>
+      <div className="user-control">
+        <img src={`${SRC}bg-flag-${color}-outbg.png`} alt="" />
+        <div className="user-control-mines">{mines}</div>
+        <div className={buzzClass} onClick={onClickBombSelector}>
+          <div className="bomb"><img src={bombImg} alt="" /></div>
+        </div>
+        <div className="clear" />
+      </div>
+    </div>
+  );
+});
+
+export default User;

assets/js/mine-seeker/components/user/UserControl.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import User from './User';
+
+const UserControl = ({ webPlayer, activePlayer, mines, foundMines, red, blue, onBombToggle, resign }) => {
+  const activeColor = activePlayer ? 'blue' : 'red';
+  const resignClass = 'resign' + (activeColor !== webPlayer ? ' disabled' : '');
+  const minesClass = 'active-mines' + (foundMines ? ' found-mine' : '');
+
+  const handleBombClick = (color, player) => {
+    const p = 'red' === color ? red : blue;
+    if (p.haveBomb && p.enabledBomb && activePlayer === player) {
+      onBombToggle();
+    }
+  };
+
+  return (
+    <div className="users">
+      <User
+        color="blue" webPlayer={webPlayer} {...blue}
+        onClickBombSelector={() => handleBombClick('blue', 1)}
+      />
+      <div className="active-mines-container">
+        <i className="fa fa-star" />
+        <div className={minesClass}>
+          <div className="active-mines-nbr">{mines}</div>
+          <div className="active-mines-shine" />
+        </div>
+        <i className="fa fa-star" />
+      </div>
+      <div className="clear" />
+      <User
+        color="red" webPlayer={webPlayer} {...red}
+        onClickBombSelector={() => handleBombClick('red', 0)}
+      />
+      <button className={resignClass} onClick={resign}>
+        <div className="resign-shine" />
+        Resign
+      </button>
+    </div>
+  );
+}
+
+export default UserControl;