JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pasjans 2D</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        canvas {
            border: 2px solid black;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Klasa reprezentująca kartę
        class Card {
            constructor(x, y, width, height, value) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.value = value; // np. 'A', '2', 'K'
                this.dragging = false;
                this.offsetX = 0;
                this.offsetY = 0;
            }

            // Rysowanie karty
            draw() {
                ctx.fillStyle = 'white';
                ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.strokeStyle = 'black';
                ctx.strokeRect(this.x, this.y, this.width, this.height);
                ctx.fillStyle = 'black';
                ctx.font = '20px Arial';
                ctx.fillText(this.value, this.x + 15, this.y + 30);
            }

            // Sprawdzanie, czy karta została kliknięta
            isClicked(mouseX, mouseY) {
                return mouseX >= this.x && mouseX <= this.x + this.width &&
                    mouseY >= this.y && mouseY <= this.y + this.height;
            }
        }

        // Tworzymy kilka kart
        let cards = [
            new Card(100, 100, 70, 100, 'A'),
       ...