75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
/**
|
|
* This file is part of the SplendidBear Websites' projects.
|
|
*
|
|
* Copyright (c) 2026 @ www.splendidbear.org
|
|
*
|
|
* For the full copyright and license information, please view the LICENSE
|
|
* file that was distributed with this source code.
|
|
*/
|
|
|
|
import React, { memo, useMemo } from 'react';
|
|
import { IMAGES } from '@mine-utils';
|
|
|
|
const bombSrc = area => {
|
|
if (null === area) return null;
|
|
const vert = ['left', 'center', 'right'][area[0]] ?? null;
|
|
const hor = ['top', 'middle', 'bottom'][area[1]] ?? null;
|
|
if (null === vert || null === hor) return IMAGES.bombEmpty;
|
|
return IMAGES.bombPos(hor, vert);
|
|
};
|
|
|
|
const GridField = memo(function GridField({ cell, onClick, onMouseEnter }) {
|
|
const { currentImage, currentObj, active, lastClickedRed, lastClickedBlue, bombTargetArea } = cell;
|
|
|
|
const fieldClass = 'field'
|
|
+ (active ? ' active' : '')
|
|
+ (active && 'm' === currentObj ? ' mine' : '')
|
|
+ ' color-' + currentObj;
|
|
const bombSourceString = useMemo(() => bombSrc(bombTargetArea), [bombTargetArea]);
|
|
|
|
return (
|
|
<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">
|
|
{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>
|
|
);
|
|
});
|
|
|
|
export default GridField;
|