Commit e99b3214 authored by timel's avatar timel

refactor: 40%

parent 88119219
.card-modal-desc {
.desc {
line-height: 1.6;
font-size: 14px;
font-family: var(--theme-font);
......
import "./Desc.scss";
import styles from "./Desc.module.scss";
import { Fragment } from "react";
export const Desc: React.FC<{ desc?: string }> = ({ desc = "" }) => {
if (!desc) return <></>;
return (
<div className="card-modal-desc">
{/* https://125naroom.com/web/2877 */}
{/* 牛逼的丸文字css教程 */}
<div className={styles.desc}>
<RegexWrapper
text={addSpaces(desc)}
re={/(①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩):.+?(?=((①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩):|$))/gs}
......@@ -43,7 +41,7 @@ const RegexWrapper: React.FC<{
const MaroListItem: React.FC<{ children: string }> = ({ children }) => {
return (
<div className="maro-item">
<div className={styles["maro-item"]}>
<span>{children[0]}</span>
<span>
<RegexWrapper
......@@ -58,7 +56,7 @@ const MaroListItem: React.FC<{ children: string }> = ({ children }) => {
const CircleListItem: React.FC<{ children: string }> = ({ children }) => {
return children ? (
<div className="maro-item">
<div className={styles["maro-item"]}>
<span>{children[0]}</span>
<span>{children.slice(1)}</span>
</div>
......
.card-modal-root {
.root {
.ant-drawer-content-wrapper {
box-shadow: none;
}
.card-modal-drawer {
}
.drawer {
width: 90%;
left: 10%;
--height: 640px;
......@@ -18,15 +20,10 @@
padding-left: 24px;
}
}
}
.card-modal-container {
}
.container {
position: relative;
height: 100%;
}
}
.card-modal-name {
font-weight: bold;
font-size: 1.2rem;
}
.atkLine {
......
import "./index.scss";
import styles from "./index.module.scss";
import { LeftOutlined } from "@ant-design/icons";
import { Divider, Drawer, Space, Tag } from "antd";
......@@ -57,14 +57,14 @@ export const CardModal = () => {
open={isOpen}
placement="left"
onClose={() => (store.isOpen = false)}
rootClassName="card-modal-root"
className="card-modal-drawer"
rootClassName={styles.root}
className={styles.drawer}
mask={false}
title={name}
closeIcon={<LeftOutlined />}
width={350}
>
<div className="card-modal-container">
<div className={styles.container}>
<Space
align="start"
size={18}
......
.neos-message .ant-message-notice-content {
.message .ant-message-notice-content {
background-color: #333;
}
import "./index.scss";
import styles from "./index.module.scss";
import { message, notification } from "antd";
import React, { useEffect } from "react";
......@@ -103,7 +103,7 @@ export const showWaiting = (open: boolean) => {
type: "loading",
content: fetchStrings("!system", 1390),
key: waitingKey,
className: "neos-message",
className: styles["message"],
duration: 0,
});
clearTimeout(destoryTimer);
......
.neos-modal {
.modal {
position: fixed;
left: 0;
right: 0;
......@@ -10,7 +10,7 @@
transition: 0.3s;
}
.neos-modal-mini {
.mini {
top: 100% !important;
bottom: 0 !important;
transform: translateY(calc(50% - 66px));
......@@ -19,7 +19,7 @@
}
}
.neos-modal-wrap {
.wrap {
pointer-events: none;
}
......
import "./index.scss";
import styles from "./index.module.scss";
import { MinusOutlined, UpOutlined } from "@ant-design/icons";
import { Modal, type ModalProps } from "antd";
......@@ -20,14 +20,14 @@ export const NeosModal: React.FC<Props> = (props) => {
return (
<Modal
className={classNames("neos-modal", { "neos-modal-mini": mini })}
className={classNames(styles.modal, { [styles["mini"]]: mini })}
centered
maskClosable={true}
onCancel={() => setMini(!mini)}
closeIcon={mini ? <UpOutlined /> : <MinusOutlined />}
bodyStyle={{ padding: "10px 0" }}
mask={!mini}
wrapClassName={classNames({ "neos-modal-wrap": mini })}
wrapClassName={classNames({ [styles.wrap]: mini })}
closable={canBeMinimized}
{...props}
open={realOpen}
......
import "./index.scss";
import { INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
import { sendSelectMultiResponse, sendSelectSingleResponse } from "@/api";
......
.checkcard-container {
.container {
position: relative;
.btns {
width: 100%;
......
......@@ -136,7 +136,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
{grouped.map(
(options, i) =>
options[0] === selectedZone && (
<div className={styles["checkcard-container"]} key={i}>
<div className={styles["container"]} key={i}>
<CheckCard.Group
onChange={(res) => {
setResult((isMultiple ? res : [res]) as any);
......
.mat-bg {
display: flex;
flex-direction: column;
row-gap: var(--row-gap);
justify-content: center;
align-items: center;
background-color: transparent;
.bg-row {
display: flex;
column-gap: var(--col-gap);
&.opponent {
flex-direction: row-reverse;
}
}
}
.block {
height: var(--block-height-m);
width: var(--block-width);
background: radial-gradient(#1d1d1d, #222);
position: relative;
&.extra {
margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
}
&.szone {
height: var(--block-height-s);
}
&.highlight {
background: #102639;
cursor: pointer;
// animation: blink 1s linear infinite alternate;
.triangle {
--color: #006eff;
transform: scale(1.5);
}
&:hover {
opacity: 0.7;
.triangle {
transform: scale(1.2);
}
}
}
.triangle {
width: 0;
height: 0;
--color: #333;
border-width: 4px;
border-style: solid;
position: absolute;
transition: 0.3s;
&:nth-of-type(1) {
border-color: var(--color) transparent transparent var(--color);
}
&:nth-of-type(2) {
border-color: var(--color) var(--color) transparent transparent;
right: 0;
}
&:nth-of-type(3) {
border-color: transparent var(--color) var(--color) transparent;
right: 0;
bottom: 0;
}
&:nth-of-type(4) {
border-color: transparent transparent var(--color) var(--color);
bottom: 0;
}
}
}
// 被禁用的样式
.disabled-cross {
width: 100%;
height: 100%;
cursor: not-allowed;
background: linear-gradient(
to top right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
),
linear-gradient(
to bottom right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
);
display: none;
}
.block.disabled {
.disabled-cross {
display: block;
}
}
section#mat {
.mat-bg {
display: flex;
flex-direction: column;
row-gap: var(--row-gap);
justify-content: center;
align-items: center;
background-color: transparent;
.bg-row {
display: flex;
column-gap: var(--col-gap);
&.opponent {
flex-direction: row-reverse;
}
}
}
.block {
height: var(--block-height-m);
width: var(--block-width);
background: radial-gradient(#1d1d1d, #222);
position: relative;
&.extra {
margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
}
&.szone {
height: var(--block-height-s);
}
&.highlight {
background: #102639;
cursor: pointer;
// animation: blink 1s linear infinite alternate;
.triangle {
--color: #006eff;
transform: scale(1.5);
}
&:hover {
opacity: 0.7;
.triangle {
transform: scale(1.2);
}
}
}
.triangle {
width: 0;
height: 0;
--color: #333;
border-width: 4px;
border-style: solid;
position: absolute;
transition: 0.3s;
&:nth-of-type(1) {
border-color: var(--color) transparent transparent var(--color);
}
&:nth-of-type(2) {
border-color: var(--color) var(--color) transparent transparent;
right: 0;
}
&:nth-of-type(3) {
border-color: transparent var(--color) var(--color) transparent;
right: 0;
bottom: 0;
}
&:nth-of-type(4) {
border-color: transparent transparent var(--color) var(--color);
bottom: 0;
}
}
}
// 下面应该和moveToOutside、moveToGround对应
.bg-other-blocks {
&.op {
transform: rotate(180deg);
}
position: absolute;
--height: var(--card-height-o);
--width: calc(var(--height) * var(--card-ratio));
--left: calc(
var(--col-gap) * 2 + var(--block-width) * 2.5 +
var(--block-outside-offset-x) + var(--width) / 2
);
--top: calc(
var(--row-gap) + var(--block-height-m) +
(var(--block-height-m) - var(--height)) / 2
);
.block {
position: absolute;
transform: translate(-50%, -50%);
height: var(--height);
width: var(--width);
top: var(--top);
left: var(--left);
}
.field {
left: calc(-1 * var(--left));
}
.banish {
top: calc(var(--top) - var(--row-gap) - var(--height));
}
.deck {
--left: calc(
var(--deck-offset-x) + 2 * (var(--block-width) + var(--col-gap))
);
left: var(--left);
top: calc(
var(--deck-offset-y) + 2 * var(--block-height-m) + 2 * var(--row-gap)
);
transform: translate(-50%, -50%) rotate(calc(-1 * var(--deck-rotate-z)));
height: var(--deck-card-height);
width: calc(var(--deck-card-height) * var(--card-ratio));
&.extra-deck {
left: calc(-1 * var(--left));
transform: translate(-50%, -50%) rotate(var(--deck-rotate-z));
}
}
}
}
// 被禁用的样式
.disabled-cross {
width: 100%;
height: 100%;
cursor: not-allowed;
background: linear-gradient(
to top right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
),
linear-gradient(
to bottom right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
red 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
);
display: none;
}
.disabled-cross.show {
display: block;
}
section#mat {
.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);
border-radius: 2px;
.triangle {
display: none;
}
}
}
import "./index.scss";
import styles from "./index.module.scss";
import classnames from "classnames";
import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
......
import "./index.scss";
import styles from "./index.module.scss";
import classNames from "classnames";
import { CSSProperties, useMemo } from "react";
......@@ -26,7 +26,7 @@ export const YgoCard: React.FC<Props> = (props) => {
return useMemo(
() => (
<img
className={classNames("ygo-card", className)}
className={classNames(styles["ygo-card"], className)}
src={getCardImgUrl(code, isBack)}
style={{ width, ...style }}
onClick={onClick}
......
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