2022-04-13 06:27:43 +02:00
|
|
|
import { TableBody, TableRow } from "@mui/material";
|
2022-04-13 02:23:03 +02:00
|
|
|
import * as React from "react";
|
|
|
|
import { ActiveFragment } from "../ActiveFragment";
|
2022-05-22 00:57:30 +02:00
|
|
|
import { calculateGrid } from "../Helper";
|
2022-04-13 02:23:03 +02:00
|
|
|
import { IStaneksGift } from "../IStaneksGift";
|
|
|
|
import { Cell } from "./Cell";
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
width: number;
|
|
|
|
height: number;
|
|
|
|
ghostGrid: number[][];
|
|
|
|
gift: IStaneksGift;
|
|
|
|
enter(i: number, j: number): void;
|
|
|
|
click(i: number, j: number): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
function randomColor(fragment: ActiveFragment): string {
|
|
|
|
// Can't set Math.random seed so copy casino. TODO refactor both RNG later.
|
|
|
|
let s1 = Math.pow((fragment.x + 1) * (fragment.y + 1), 10);
|
|
|
|
let s2 = s1;
|
|
|
|
let s3 = s1;
|
|
|
|
|
|
|
|
const colors = [];
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
|
|
s1 = (171 * s1) % 30269;
|
|
|
|
s2 = (172 * s2) % 30307;
|
|
|
|
s3 = (170 * s3) % 30323;
|
|
|
|
colors.push((s1 / 30269.0 + s2 / 30307.0 + s3 / 30323.0) % 1.0);
|
|
|
|
}
|
|
|
|
|
|
|
|
return `rgb(${colors[0] * 256}, ${colors[1] * 256}, ${colors[2] * 256})`;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Grid(props: IProps): React.ReactElement {
|
2022-05-22 01:08:53 +02:00
|
|
|
const activeGrid = calculateGrid(props.gift);
|
2022-05-22 00:57:30 +02:00
|
|
|
|
2022-04-13 02:23:03 +02:00
|
|
|
function color(worldX: number, worldY: number): string {
|
2022-05-22 00:57:30 +02:00
|
|
|
if (props.ghostGrid[worldX][worldY] && activeGrid[worldX][worldY]) return "red";
|
2022-04-13 02:23:03 +02:00
|
|
|
if (props.ghostGrid[worldX][worldY]) return "white";
|
|
|
|
|
2022-05-22 00:57:30 +02:00
|
|
|
if (activeGrid[worldX][worldY]) {
|
2022-04-13 02:23:03 +02:00
|
|
|
const fragment = props.gift.fragmentAt(worldX, worldY);
|
|
|
|
if (!fragment) throw new Error("ActiveFragment should not be null");
|
|
|
|
return randomColor(fragment);
|
|
|
|
}
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
|
|
|
|
// switch the width/length to make axis consistent.
|
|
|
|
const elems = [];
|
|
|
|
for (let j = 0; j < props.height; j++) {
|
|
|
|
const cells = [];
|
|
|
|
for (let i = 0; i < props.width; i++) {
|
|
|
|
cells.push(
|
|
|
|
<Cell key={i} onMouseEnter={() => props.enter(i, j)} onClick={() => props.click(i, j)} color={color(i, j)} />,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
elems.push(<TableRow key={j}>{cells}</TableRow>);
|
|
|
|
}
|
|
|
|
|
|
|
|
return <TableBody>{elems}</TableBody>;
|
|
|
|
}
|