Skip to content

N
Neos
Commit d4ce1437 authored by timel's avatar timel
Browse files
Options

refactor: 60%

parent 716d29b8
Show whitespace changes
Inline Side-by-side
Showing with 163 additions and 163 deletions
src/ui/Duel/PlayMat/Bg/index.module.scss
View file @ d4ce1437
......@@ -150,9 +150,9 @@
}
.block.glowing {
--card-shadow-color: #13a1ff;
box-shadow: 0 0 3px 3px var(--card-shadow-color), 0 0 25px 2px #0099ff87;
background: var(--card-shadow-color);
--shadow-color: #13a1ff;
box-shadow: 0 0 3px 3px var(--shadow-color), 0 0 25px 2px #0099ff87;
background: var(--shadow-color);
border-radius: 2px;
.triangle {
display: none;
......
src/ui/Duel/PlayMat/Card/index.module.scss 0 → 100644
View file @ d4ce1437
.mat-card {
position: absolute;
--card-height: 100px;
width: auto !important;
height: var(--card-height);
aspect-ratio: var(--card-ratio);
transform-style: preserve-3d;
.img-wrap {
transform-style: preserve-3d;
position: relative;
margin: auto auto;
top: 2%;
height: 96%;
width: 96%;
transform: translateZ(calc((var(--z) + var(--sub-z)) * 1px + 0.1px))
rotateY(calc(var(--ry) * 1deg));
transition: 0.2s scale;
cursor: pointer;
.cover,
.back {
width: 100% !important;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 2px;
overflow: hidden;
}
.cover {
z-index: 1;
transform: translateZ(0.5px);
}
&.focus .cover {
animation: focus 0.6s ease-in-out;
}
.back {
z-index: 0;
transform: translateZ(0px);
}
}
.shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
// filter: blur(2px);
}
// 卡片被选中后的流光特效
// ref: https://github.com/Mr-majifu/Animated-Profile-Card02/blob/master/style.css
.streamer {
position: absolute;
inset: 0;
background: #000;
overflow: hidden;
}
.streamer::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 400%;
height: 80%;
background: linear-gradient(
transparent,
#45f3ff,
#45f3ff,
#45f3ff,
transparent
);
animation: stream 2s linear infinite;
}
.streamer::after {
content: "";
position: absolute;
/* https://developer.mozilla.org/en-US/docs/Web/CSS/inset */
inset: 3px;
background: #292929;
}
@keyframes stream {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.focus {
position: absolute;
width: calc(100% * var(--focus-scale));
height: calc(100% * var(--focus-scale));
left: calc((var(--focus-scale) - 1) * -50%);
top: calc((var(--focus-scale) - 1) * -50%);
outline: 3px solid #ddd;
filter: blur(calc(2px * 1.3 * var(--focus-scale)));
display: var(--focus-display);
opacity: var(--focus-opacity);
}
}
.mat-card.glowing .shadow {
--shadow-color: #0099ff;
display: block !important;
background: var(--shadow-color) !important;
border-radius: 5px;
box-shadow: 0 0 4px 0 var(--shadow-color), 0 0 25px 2px #0099ff87;
transform: translateZ(calc((var(--z)) * 1px + 0.1px));
}
@keyframes focus {
0% {
filter: brightness(1) contrast(1);
}
50% {
filter: brightness(1.5) contrast(1.1);
}
100% {
filter: brightness(1) contrast(1);
}
}
.dropdown {
.ant-dropdown-menu {
background-color: #333;
}
text-align: center;
}
.dropdown-disabled {
display: none;
}
src/ui/Duel/PlayMat/Card/index.scss deleted 100644 → 0
View file @ 716d29b8
section#mat {
.mat-card {
position: absolute;
--card-height: 100px;
width: auto !important;
height: var(--card-height);
aspect-ratio: var(--card-ratio);
transform-style: preserve-3d;
.card-img-wrap {
transform-style: preserve-3d;
position: relative;
margin: auto auto;
top: 2%;
height: 96%;
width: 96%;
transform: translateZ(calc((var(--z) + var(--sub-z)) * 1px + 0.1px))
rotateY(calc(var(--ry) * 1deg));
transition: 0.2s scale;
cursor: pointer;
&:hover {
}
.card-cover,
.card-back {
width: 100% !important;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 2px;
overflow: hidden;
}
.card-cover {
z-index: 1;
transform: translateZ(0.5px);
}
&.focus .card-cover {
animation: focus 0.6s ease-in-out;
}
.card-back {
z-index: 0;
transform: translateZ(0px);
}
}
.card-shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
// filter: blur(2px);
}
// 卡片被选中后的流光特效
// ref: https://github.com/Mr-majifu/Animated-Profile-Card02/blob/master/style.css
.card-streamer {
position: absolute;
inset: 0;
background: #000;
overflow: hidden;
}
.card-streamer::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 400%;
height: 80%;
background: linear-gradient(
transparent,
#45f3ff,
#45f3ff,
#45f3ff,
transparent
);
animation: stream 2s linear infinite;
}
.card-streamer::after {
content: "";
position: absolute;
/* https://developer.mozilla.org/en-US/docs/Web/CSS/inset */
inset: 3px;
background: #292929;
}
@keyframes stream {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.card-focus {
position: absolute;
width: calc(100% * var(--focus-scale));
height: calc(100% * var(--focus-scale));
left: calc((var(--focus-scale) - 1) * -50%);
top: calc((var(--focus-scale) - 1) * -50%);
outline: 3px solid #ddd;
filter: blur(calc(2px * 1.3 * var(--focus-scale)));
display: var(--focus-display);
opacity: var(--focus-opacity);
}
}
}
.mat-card.glowing .card-shadow {
--card-shadow-color: #0099ff;
display: block !important;
background: var(--card-shadow-color) !important;
border-radius: 5px;
box-shadow: 0 0 4px 0 var(--card-shadow-color), 0 0 25px 2px #0099ff87;
transform: translateZ(calc((var(--z)) * 1px + 0.1px));
}
@keyframes focus {
0% {
filter: brightness(1) contrast(1);
}
50% {
filter: brightness(1.5) contrast(1.1);
}
100% {
filter: brightness(1) contrast(1);
}
}
.card-dropdown {
.ant-dropdown-menu {
background-color: #333;
}
text-align: center;
}
.card-dropdown-disabled {
display: none;
}
src/ui/Duel/PlayMat/Card/index.tsx
View file @ d4ce1437
import "./index.scss";
import styles from "./index.module.scss";
import { animated, to, useSpring } from "@react-spring/web";
import { Dropdown, type MenuProps } from "antd";
......@@ -39,7 +39,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
const card = cardStore.inner[idx];
const snap = useSnapshot(card);
const [styles, api] = useSpring<SpringApiProps>(
const [spring, api] = useSpring<SpringApiProps>(
() =>
({
x: 0,
......@@ -273,47 +273,51 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
return (
<animated.div
className={classnames("mat-card", { glowing })}
className={classnames(styles["mat-card"], { [styles.glowing]: glowing })}
style={
{
transform: to(
[styles.x, styles.y, styles.z, styles.rx, styles.ry, styles.rz],
[spring.x, spring.y, spring.z, spring.rx, spring.ry, spring.rz],
(x, y, z, rx, ry, rz) =>
`translate(${x}px, ${y}px) rotateX(${rx}deg) rotateZ(${rz}deg)`
),
"--z": styles.z,
"--sub-z": styles.subZ.to([0, 50, 100], [0, 200, 0]), // 中间高，两边低
"--ry": styles.ry,
height: styles.height,
zIndex: styles.zIndex,
"--focus-scale": styles.focusScale,
"--focus-display": styles.focusDisplay,
"--focus-opacity": styles.focusOpacity,
opacity: styles.opacity,
"--z": spring.z,
"--sub-z": spring.subZ.to([0, 50, 100], [0, 200, 0]), // 中间高，两边低
"--ry": spring.ry,
height: spring.height,
zIndex: spring.zIndex,
"--focus-scale": spring.focusScale,
"--focus-display": spring.focusDisplay,
"--focus-opacity": spring.focusOpacity,
opacity: spring.opacity,
} as any as CSSProperties
}
onClick={onClick}
>
<div className="card-focus" />
<div className="card-shadow" />
<div className={styles.focus} />
<div className={styles.shadow} />
<Dropdown
menu={dropdownMenu}
placement="top"
overlayClassName={classnames("card-dropdown", {
"card-dropdown-disabled": dropdownMenuDisabled,
overlayClassName={classnames(styles.dropdown, {
[styles["dropdown-disabled"]]: dropdownMenuDisabled,
})}
arrow
trigger={["click"]}
>
<div className={classnames("card-img-wrap", { focus: classFocus })}>
<div
className={classnames(styles["img-wrap"], {
[styles.focus]: classFocus,
})}
>
<YgoCard
className={classnames("card-cover")}
className={styles.cover}
code={snap.code === 0 ? snap.meta.id : snap.code}
/>
<YgoCard className="card-back" isBack />
<YgoCard className={styles.back} isBack />
</div>
</Dropdown>
{snap.selected ? <div className="card-streamer" /> : <></>}
{snap.selected ? <div className={styles.streamer} /> : <></>}
</animated.div>
);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment