<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.