<div id="root"></div>
<a class='anck' href='https://twitter.com/anoChick' target="_blank" rel="noopener noreferrer">
  <svg width="43" height="16" viewBox="0 0 43 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.74602 7.15069C5.81489 7.15069 7.49204 5.54995 7.49204 3.57534C7.49204 1.60074 5.81489 0 3.74602 0C1.67715 0 0 1.60074 0 3.57534C0 5.54995 1.67715 7.15069 3.74602 7.15069Z" fill="white" />
    <path d="M39.254 7.15069C41.3228 7.15069 43 5.54995 43 3.57534C43 1.60074 41.3228 0 39.254 0C37.1851 0 35.5079 1.60074 35.5079 3.57534C35.5079 5.54995 37.1851 7.15069 39.254 7.15069Z" fill="white" />
    <path d="M28.9685 11.8598C28.9685 9.35259 25.6243 7.32004 21.5 7.32004C17.3757 7.32004 14.0316 9.35259 14.0316 11.8598C14.0316 14.367 17.3757 15.0148 21.5 15.0148C25.6243 15.0148 28.9685 14.367 28.9685 11.8598Z" fill="white" />
  </svg>
</a>
.cards {
  display: flex;
}
.card-wrap {
  padding: 8px;
}
.card-base {
  position: relative;
  width: 100px;
  height: 140px;
}
.card-checkbox {
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.card-checkbox::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.card-front,
.card-back {
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 500ms;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: 4px 4px 8px rgb(255, 255, 255, 0.05);
}

.card-back {
  transform: rotateY(0deg);
  padding: 4px;
  box-sizing: border-box;
  background: white;
}
.card-back-inner {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-front {
  transform: rotateY(-180deg);
  background: white;
  display: flex;
  flex-direction: column;
}
.card-front-label-top {
  padding: 4px;
}
.card-front-label-middle {
  flex: 1;
  text-align: center;
  font-size: 48px;
}
.card-front-label-bottom {
  padding: 4px;
  backface-visibility: hidden;
  transform: rotateZ(180deg);
}

input.card-checkbox:checked ~ .card-back {
  transform: rotateY(180deg);
}
input.card-checkbox:checked ~ .card-front {
  transform: rotateY(0deg);
}



html,
body {
  margin: 0;
  background-color: #0a0c0d;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 0.1em,
      transparent 0.1em
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0.1em, transparent 0.1em);
  background-size: 3em 3em;
  color: #fff;
}

.anck {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  line-height: 98px;
  text-align: center;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  background-color: rgba(255, 255, 255, 0);
}
.anck:hover {
  opacity: 0.5;
  background-color: rgba(255, 255, 255, 0.1);
}

.anck svg {
  width: 50%;
}
View Compiled
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import React from "https://esm.sh/react@18.2.0";
const randRange = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);

function Main() {
  const [cards, setCards] = React.useState([]);
  const [dealersCount, setDealersCount] = React.useState(randRange(2, 21));
  const [playersCount, setPlayersCount] = React.useState(0);

  const formRef = React.useRef(null);

  const resetCards = () => {
    setCards(
      [...Array(5)].map(() => {
        return {
          suit: ["♣", "♠", "♥", "♦️"][randRange(0, 3)],
          number: randRange(1, 13)
        };
      })
    );
  };
  const reset = () => {
    const formElem = formRef.current;
    if (formElem) {
      formElem.reset();
    }

    resetCards();
    setDealersCount(randRange(2, 21))
    setPlayersCount(0);
  };

  React.useEffect(() => {
    resetCards();
  }, []);

  return (
    <form ref={formRef}>
      <div className="cards">
        {cards.map((card, i) => {
          return (
            <div
              className="card-wrap"
              style={{
                color: ["♣", "♠"].includes(card.suit) ? "black" : "red"
              }}
            >
              <div className="card-base">
                <input
                  className={`card-checkbox card-checkbox-${i}`}
                  type="checkbox"
                  name="card"
                />
                <div className="card-back">
                  <div className="card-back-inner" />
                </div>
                <div className="card-front">
                  <div className="card-front-label-top">
                    {card.suit}
                    {card.number}
                  </div>
                  <div className="card-front-label-middle">{card.suit}</div>
                  <div className="card-front-label-bottom">
                    {card.suit}
                    {card.number}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <button
        onClick={(e) => {
          reset();
          e.preventDefault();
        }}
      >
        Reset
      </button>
      <div>ディーラーの手: {dealersCount}</div>
      <div>自分の手: {playersCount}</div>
      <div>勝敗: プレイヤーの勝ち</div>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Main />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.