chg: usr: add timers to each player - renew the whole migration #4

assets/js/mine-seeker/components/grid/GridField.jsx

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { IMAGES } from '@mine-utils';
 
 const bombSrc = area => {
@@ -25,26 +25,47 @@ const GridField = memo(function GridField({ cell, onClick, onMouseEnter }) {
     + (active ? ' active' : '')
     + (active && 'm' === currentObj ? ' mine' : '')
     + ' color-' + currentObj;
-
-  const inner = isNaN(currentImage)
-    ? (
-      <div className="flag-mine"><img src={currentImage} alt="" />
-        <div className="flag-mine-base" />
-      </div>
-    )
-    : currentImage ? <div className="flag-number">{currentImage}</div> : null;
-
-  const bSrc = bombSrc(bombTargetArea);
-  const showLast = lastClickedRed || lastClickedBlue;
-  const lastClass = 'field-' + (lastClickedRed ? 'red' : 'blue') + '-last last-clicked';
+  const bombSourceString = useMemo(() => bombSrc(bombTargetArea), [bombTargetArea]);
 
   return (
-    <div className="field-wrapper" onClick={onClick} onMouseEnter={onMouseEnter}>
-      <img className="field-target" src={IMAGES.target} alt="" />
-      {bSrc && <img className="field-bomb-target" src={bSrc} alt="" />}
-      {showLast && <img className={lastClass} src={IMAGES.last(lastClickedRed ? 'red' : 'blue')} alt="" />}
+    <div
+      className="field-wrapper"
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+    >
+      <img
+        className="field-target"
+        src={IMAGES.target}
+        alt="Field of target"
+      />
+      {bombSourceString && (
+        <img
+          className="field-bomb-target"
+          src={bombSourceString}
+          alt="Field of bomb target"
+        />
+      )}
+      {(lastClickedRed || lastClickedBlue) && (
+        <img
+          className={`field-${lastClickedRed ? 'red' : 'blue'}-last last-clicked`}
+          src={IMAGES.last(lastClickedRed ? 'red' : 'blue')}
+          alt="Last clicked area"
+        />
+      )}
       <div className={fieldClass}>
-        <div className="field-corner">{inner}</div>
+        <div className="field-corner">
+          {isNaN(currentImage) && (
+            <div className="flag-mine">
+              <img src={currentImage} alt="" />
+              <div className="flag-mine-base" />
+            </div>
+          )}
+          {!isNaN(currentImage) && 0 !== currentImage && (
+            <div className="flag-number">
+              {currentImage}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );