dekun
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import clsx from "clsx";
|
|
import Image from "next/image";
|
|
|
|
const rotationDuration = 3800;
|
|
const bezier = "cubic-bezier(0.645,0.045,0.355,1)";
|
|
|
|
function Coin(props: {
|
|
frontList: boolean[];
|
|
rotation: boolean;
|
|
onTransitionEnd: any;
|
|
}) {
|
|
const [lastFront, setLastFront] = useState(props.frontList);
|
|
|
|
useEffect(function () {
|
|
if (!props.rotation) {
|
|
return;
|
|
}
|
|
|
|
let id = setTimeout(function () {
|
|
setLastFront(props.frontList);
|
|
props.onTransitionEnd();
|
|
}, rotationDuration);
|
|
return () => clearTimeout(id);
|
|
});
|
|
|
|
return (
|
|
<div className="flex w-full max-w-md justify-around rounded-md border bg-secondary p-4 shadow dark:border-0 dark:shadow-none sm:p-6">
|
|
{props.frontList.map((value, index) => (
|
|
<CoinItem
|
|
key={index}
|
|
front={value}
|
|
lastFront={lastFront[index]}
|
|
rotation={props.rotation}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CoinItem(props: {
|
|
front: boolean;
|
|
lastFront: boolean;
|
|
rotation: boolean;
|
|
onTransitionEnd?: any;
|
|
}) {
|
|
let animate = "";
|
|
if (props.rotation) {
|
|
// animate-[coin-front-front_3.8s_cubic-bezier(0.645,0.045,0.355,1)]
|
|
// animate-[coin-front-back_3.8s_cubic-bezier(0.645,0.045,0.355,1)]
|
|
// animate-[coin-back-front_3.8s_cubic-bezier(0.645,0.045,0.355,1)]
|
|
// animate-[coin-back-back_3.8s_cubic-bezier(0.645,0.045,0.355,1)]
|
|
animate = `animate-[coin-${getFront(props.lastFront)}-${getFront(
|
|
props.front,
|
|
)}_${rotationDuration / 1000}s_${bezier}]`;
|
|
}
|
|
return (
|
|
<div
|
|
style={{
|
|
transform: `rotateY(${props.front ? 0 : 180}deg)`,
|
|
transformStyle: "preserve-3d",
|
|
transformOrigin: "50% 50% -0.5px",
|
|
}}
|
|
className={clsx("h-16 w-16 sm:h-20 sm:w-20", animate)}
|
|
>
|
|
<Image
|
|
width={0}
|
|
height={0}
|
|
sizes="100vw"
|
|
draggable={false}
|
|
className="absolute w-full"
|
|
src="/img/head.webp"
|
|
alt="coin"
|
|
/>
|
|
<Image
|
|
width={0}
|
|
height={0}
|
|
sizes="100vw"
|
|
draggable={false}
|
|
className="absolute h-full w-full"
|
|
style={{ transform: "translateZ(-1px)" }}
|
|
src="/img/tail.webp"
|
|
alt="coin"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getFront(front: boolean): string {
|
|
return front ? "front" : "back";
|
|
}
|
|
|
|
export default Coin;
|