I'm currently in the process of developing a board game where I need to track players and their positions on specific squares. My goal is to display a small colored dot on the square where each player is positioned.
Here's a snippet of my template code:
<div className="board">
{board.map((val, idx) => {
return (
<div className="row" key={idx}>
{val.map((block) => {
return (
<div className="block" key={block!.index}>
{block!.index}
<div className="player-dots">
{players.map((player: PlayerType) => {
if (player.currentSquare === block!.index) {
let colorClass: string = `bg-player${player.id}color`;
return (
<div
className={`h-3 w-3 rounded-full ${colorClass}`}
key={player.id}
></div>
);
}
})}
</div>
</div>
);
})}
</div>
);
})}
</div>;
Below is the tailwind configuration:
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
colors: {
midnight: "#121063",
primary: "#3A0CA3",
secondary: "#4361EE",
tertiary: "#4CC9F0",
rose: "#F72585",
grape: "#7209B7",
white: "#ffffff",
player1color: "#FF0000",
player2color: "#0FA3B1",
player3color: "#E072A4",
player4color: "#3D3B8E",
},
},
plugins: [require("@tailwindcss/forms")],
};
export default config;
It seems that the class is being added to the DOM, but the styles are not being applied as intended. Here is a screenshot for reference: https://i.sstatic.net/ekQqE5vI.png
I attempted to generate the class names dynamically within the className attribute, however, this approach did not yield the desired result.