I’m trying to display the map of a game using ReactJs.
The map is 100 tiles per 100 tiles so 10,000 in total like so:
Each tile can be colored with a custom color.
I built a store using mobx
that holds the grid and the color of each tile and I’m basically looping through it to display the right color for each tiles.
Map.tsx
:
const Map = observer(() => {
const size = 100 * dashboardStore.zoom;
const marginLeft = size * 0.75 + 2;
const marginTop = size * 0.5 + 2;
return (
<div>
<div className={styles.controls}>
<Controls />
</div>
<div className={styles.map}>
{dashboardStore.arrayY.map((_, yAxis) => (
<div
key={yAxis}
className={styles.row}
style={{
width: `${(size + marginLeft + 2) * 100 + marginLeft}px`,
height: `${size + 1}px`,
marginLeft: yAxis % 2 ? `${marginLeft}px` : 0,
marginTop: yAxis === 0 ? 0 : `-${marginTop}px`,
}}
>
{dashboardStore.arrayX.map((_, xAxis) => {
const index = yAxis * 100 + xAxis;
return <Tile key={xAxis} index={index} color={dashboardStore.getTileColor(index)} />;
})}
</div>
))}
</div>
</div>
);
});
Tile.tsx
:
export type TileProps = {
color?: string;
index: number;
};
const Tile = observer(({ color, index }: TileProps) => {
return (
<div className={styles.container} onClick={() => dashboardStore.colorTile(index, dashboardStore.currentColor)}>
<div className={styles.tileBorder} />
<div className={styles.tile} style={{ backgroundColor: color }}>
{dashboardStore.displayIndices ? index : ""}
</div>
</div>
);
});
Everything works just fine, I’m rendering, the events trigger well, the colors display properly but I definitely have a performance issue. I can run the webpage on my MacBook Pro but it’s almost unusable on phone and and smaller devices (Basically on any devices since my laptop is quite high specs).
How can I optimize this so it can run on any device?
Thanks a lot.