2020-01-22 14:34:46 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @flow
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2021-01-29 22:48:12 +00:00
|
|
|
import { t } from 'ttag';
|
2020-01-22 14:34:46 +00:00
|
|
|
|
|
|
|
import { THREE_CANVAS_HEIGHT } from '../core/constants';
|
|
|
|
|
|
|
|
|
2022-01-04 10:31:10 +00:00
|
|
|
const CanvasItem = ({
|
|
|
|
canvasId, canvas, selCanvas, online,
|
|
|
|
}) => (
|
2020-01-22 14:34:46 +00:00
|
|
|
<div
|
2021-04-30 22:51:08 +00:00
|
|
|
className="cvbtn"
|
|
|
|
onClick={() => selCanvas(canvasId)}
|
2020-01-22 14:34:46 +00:00
|
|
|
role="button"
|
|
|
|
tabIndex={0}
|
|
|
|
>
|
2020-01-25 03:11:36 +00:00
|
|
|
<img
|
2021-04-30 22:51:08 +00:00
|
|
|
className="cvimg"
|
2020-01-25 03:11:36 +00:00
|
|
|
alt="preview"
|
|
|
|
src={`/preview${canvasId}.png`}
|
|
|
|
/>
|
2020-05-10 08:43:43 +00:00
|
|
|
<p className="modalcvtext">
|
|
|
|
<span className="modaltitle">{canvas.title}</span><br />
|
2022-01-04 10:31:10 +00:00
|
|
|
{(online) && (
|
|
|
|
<>
|
|
|
|
{t`Online Users`}:
|
|
|
|
<span className="modalinfo">{online}</span><br />
|
|
|
|
</>
|
|
|
|
)}
|
2020-05-10 08:43:43 +00:00
|
|
|
<span className="modalinfo">{canvas.desc}</span><br />
|
2021-01-29 22:48:12 +00:00
|
|
|
{t`Cooldown`}:
|
2020-05-10 08:43:43 +00:00
|
|
|
<span className="modalinfo">
|
2022-01-05 19:40:09 +00:00
|
|
|
{(canvas.pcd && canvas.bcd !== canvas.pcd)
|
2020-01-22 14:34:46 +00:00
|
|
|
? <span> {canvas.bcd / 1000}s / {canvas.pcd / 1000}s</span>
|
|
|
|
: <span> {canvas.bcd / 1000}s</span>}
|
|
|
|
</span><br />
|
2021-01-29 22:48:12 +00:00
|
|
|
{t`Stacking till`}:
|
2020-05-10 08:43:43 +00:00
|
|
|
<span className="modalinfo"> {canvas.cds / 1000}s</span><br />
|
2021-01-29 22:48:12 +00:00
|
|
|
{t`Ranked`}:
|
2022-01-04 20:09:35 +00:00
|
|
|
<span className="modalinfo">{
|
|
|
|
(canvas.ranked) ? t`Yes` : t`No`
|
|
|
|
}
|
|
|
|
</span><br />
|
2022-01-05 19:40:09 +00:00
|
|
|
{(canvas.req !== undefined) && (
|
|
|
|
<>
|
|
|
|
<span>
|
|
|
|
{t`Requirements`}:<br />
|
|
|
|
<span className="modalinfo">
|
|
|
|
{(typeof canvas.req === 'number')
|
|
|
|
? <span>{t`User Account`} </span> : null}
|
|
|
|
{(canvas.req > 0)
|
|
|
|
? <span> {t`and ${canvas.req} Pixels set`} </span>
|
|
|
|
: null}
|
|
|
|
{(canvas.req === 'top')
|
|
|
|
&& <span>{t`Top 10 Daily Ranking`}</span>}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<br />
|
|
|
|
</>
|
|
|
|
)}
|
2021-01-29 22:48:12 +00:00
|
|
|
{t`Dimensions`}:
|
2020-05-10 08:43:43 +00:00
|
|
|
<span className="modalinfo"> {canvas.size} x {canvas.size}
|
2020-01-22 14:34:46 +00:00
|
|
|
{(canvas.v)
|
|
|
|
? <span> x {THREE_CANVAS_HEIGHT} Voxels</span>
|
|
|
|
: <span> Pixels</span>}
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
2021-04-30 22:51:08 +00:00
|
|
|
export default React.memo(CanvasItem);
|