Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
N
Neos
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
love_飞影
Neos
Commits
72f777c1
Commit
72f777c1
authored
Sep 24, 2023
by
Chunchi Che
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'optimize/mobile' into 'main'
初步移动端适配 See merge request
mycard/Neos!322
parents
05ac712e
9d3fe5fd
Changes
33
Hide whitespace changes
Inline
Side-by-side
Showing
33 changed files
with
237 additions
and
192 deletions
+237
-192
src/styles/core.scss
src/styles/core.scss
+21
-3
src/ui/BuildDeck/CardDetail.module.scss
src/ui/BuildDeck/CardDetail.module.scss
+11
-11
src/ui/BuildDeck/CardDetail.tsx
src/ui/BuildDeck/CardDetail.tsx
+0
-1
src/ui/BuildDeck/DeckSelect.module.scss
src/ui/BuildDeck/DeckSelect.module.scss
+8
-8
src/ui/BuildDeck/Filter.module.scss
src/ui/BuildDeck/Filter.module.scss
+11
-11
src/ui/BuildDeck/Filter.tsx
src/ui/BuildDeck/Filter.tsx
+1
-1
src/ui/BuildDeck/index.module.scss
src/ui/BuildDeck/index.module.scss
+14
-14
src/ui/BuildDeck/index.tsx
src/ui/BuildDeck/index.tsx
+2
-2
src/ui/Duel/Message/CardListModal.tsx
src/ui/Duel/Message/CardListModal.tsx
+3
-2
src/ui/Duel/Message/CardModal/Desc.module.scss
src/ui/Duel/Message/CardModal/Desc.module.scss
+3
-3
src/ui/Duel/Message/CardModal/index.module.scss
src/ui/Duel/Message/CardModal/index.module.scss
+9
-9
src/ui/Duel/Message/CardModal/index.tsx
src/ui/Duel/Message/CardModal/index.tsx
+2
-2
src/ui/Duel/Message/EndModal/index.module.scss
src/ui/Duel/Message/EndModal/index.module.scss
+2
-2
src/ui/Duel/Message/OptionModal.tsx
src/ui/Duel/Message/OptionModal.tsx
+4
-3
src/ui/Duel/Message/SelectCardsModal/index.module.scss
src/ui/Duel/Message/SelectCardsModal/index.module.scss
+4
-4
src/ui/Duel/Message/SelectCardsModal/index.tsx
src/ui/Duel/Message/SelectCardsModal/index.tsx
+1
-1
src/ui/Duel/Message/SortCardModal.tsx
src/ui/Duel/Message/SortCardModal.tsx
+1
-1
src/ui/Duel/Message/YesNoModal/index.tsx
src/ui/Duel/Message/YesNoModal/index.tsx
+1
-1
src/ui/Duel/PlayMat/Card/springs/moveToHand.ts
src/ui/Duel/PlayMat/Card/springs/moveToHand.ts
+2
-1
src/ui/Duel/PlayMat/Menu/index.module.scss
src/ui/Duel/PlayMat/Menu/index.module.scss
+6
-6
src/ui/Match/MatchModal.module.scss
src/ui/Match/MatchModal.module.scss
+3
-3
src/ui/Match/index.module.scss
src/ui/Match/index.module.scss
+15
-15
src/ui/Shared/CardEffectText/index.module.scss
src/ui/Shared/CardEffectText/index.module.scss
+3
-3
src/ui/Shared/SpecialButton/index.module.scss
src/ui/Shared/SpecialButton/index.module.scss
+4
-4
src/ui/Shared/YgoCard/index.tsx
src/ui/Shared/YgoCard/index.tsx
+1
-1
src/ui/Shared/css.ts
src/ui/Shared/css.ts
+33
-10
src/ui/Side/TpModal.module.scss
src/ui/Side/TpModal.module.scss
+4
-4
src/ui/Side/index.module.scss
src/ui/Side/index.module.scss
+7
-7
src/ui/Start/index.module.scss
src/ui/Start/index.module.scss
+19
-17
src/ui/WaitRoom/Chat.module.scss
src/ui/WaitRoom/Chat.module.scss
+7
-7
src/ui/WaitRoom/Popover.tsx
src/ui/WaitRoom/Popover.tsx
+1
-1
src/ui/WaitRoom/index.module.scss
src/ui/WaitRoom/index.module.scss
+33
-33
src/ui/WaitRoom/index.tsx
src/ui/WaitRoom/index.tsx
+1
-1
No files found.
src/styles/core.scss
View file @
72f777c1
@charset
"utf-8"
;
@import
url("https://fonts.font.im/css2?family=Electrolize&family=Noto+Serif+SC:wght@700&display=swap")
;
/* 默认字体大小,适用于PC端 */
html
{
font-size
:
16px
;
}
/* 在移动端上设置不同的字体大小 */
/* iPad */
@media
screen
and
(
max-width
:
1280px
)
{
html
{
font-size
:
14px
;
}
}
/* Mobile */
@media
screen
and
(
max-width
:
1000px
)
{
html
{
font-size
:
10px
;
}
}
body
{
color-scheme
:
dark
;
color
:
rgba
(
255
,
255
,
255
,
0
.87
);
background
:
#0f131e
;
font-size
:
14px
;
display
:
flex
;
margin
:
0
;
min-width
:
320px
;
min-width
:
20rem
;
position
:
fixed
;
top
:
0
;
bottom
:
0
;
...
...
@@ -17,7 +35,7 @@ body {
font-family
:
var
(
--
theme-font
);
--theme-font
:
"Electrolize"
,
sans-serif
;
--nato-serif-font
:
"Noto Serif SC"
,
serif
;
--header-height
:
56px
;
--header-height
:
3
.5rem
;
#root
{
height
:
100%
;
margin
:
0
auto
;
...
...
src/ui/BuildDeck/CardDetail.module.scss
View file @
72f777c1
...
...
@@ -7,7 +7,7 @@
top
:
0
;
width
:
100%
;
height
:
100%
;
padding
:
0
10px
20px
10px
;
padding
:
0
0
.625rem
1
.25rem
0
.625rem
;
transition
:
0
.2s
;
}
...
...
@@ -25,41 +25,41 @@
box-shadow
:
-1px
0
0
2px
rgba
(
255
,
255
,
255
,
0
.15
)
,
0
0
30px
0
#ffffff
54
;
backdrop-filter
:
blur
(
20px
);
backdrop-filter
:
blur
(
1
.25rem
);
@include
utils
.
noise-bg
;
padding
:
1
5px
;
padding
:
1
rem
;
display
:
flex
;
flex-direction
:
column
;
position
:
relative
;
border-radius
:
8px
;
border-radius
:
0
.5rem
;
}
.btn-close
{
position
:
absolute
;
right
:
5px
;
top
:
5px
;
right
:
0
.3rem
;
top
:
0
.3rem
;
}
.card
{
--width
:
1
60px
;
--width
:
1
0rem
;
width
:
var
(
--
width
);
height
:
calc
(
var
(
--
width
)
/
var
(
--
card-ratio
));
flex-shrink
:
0
;
border
:
1px
solid
#ffffff
52
;
overflow
:
hidden
;
box-shadow
:
0
0
6px
2px
#ffffff
2b
;
box-shadow
:
0
0
0
.375rem
0
.125rem
#ffffff
2b
;
transition
:
0
.3s
;
cursor
:
pointer
;
&
:hover
{
--width
:
220px
;
--width
:
13
.75rem
;
filter
:
contrast
(
1
.1
);
}
}
.title
{
font-size
:
20px
;
font-size
:
1
.25rem
;
font-family
:
var
(
--
nato-serif-font
);
margin
:
20px
0
15px
;
margin
:
1
.25rem
0
1rem
;
display
:
flex
;
justify-content
:
space-between
;
// color: rgba(255, 255, 255, 0.45);
...
...
src/ui/BuildDeck/CardDetail.tsx
View file @
72f777c1
...
...
@@ -117,7 +117,6 @@ export const CardDetail: React.FC<{
</
a
>
<
div
className=
{
styles
.
title
}
>
<
span
>
{
card
?.
text
.
name
}
</
span
>
{
/* <Avatar size={22}>光</Avatar> */
}
</
div
>
<
ScrollableArea
>
<
Descriptions
layout=
"vertical"
size=
"small"
items=
{
items
}
/>
...
...
src/ui/BuildDeck/DeckSelect.module.scss
View file @
72f777c1
.deck-select
{
display
:
flex
;
flex-direction
:
column
;
gap
:
4px
;
gap
:
0
.25rem
;
.item
{
height
:
40px
;
padding
:
0
20px
;
height
:
2
.5rem
;
padding
:
0
1
.25rem
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
...
...
@@ -17,10 +17,10 @@
height
:
auto
;
top
:
0
;
bottom
:
0
;
--padding-x
:
5px
;
--padding-x
:
0
.3rem
;
left
:
var
(
--
padding-x
);
right
:
var
(
--
padding-x
);
border-radius
:
4px
;
border-radius
:
0
.25rem
;
transition
:
0
.2s
;
}
.hover
{
...
...
@@ -34,7 +34,7 @@
transition
:
0
.2s
;
opacity
:
0
;
display
:
flex
;
gap
:
4px
;
gap
:
0
.25rem
;
}
&
:hover
{
.hover
,
...
...
@@ -47,12 +47,12 @@
.btn-add
{
position
:
absolute
;
bottom
:
40px
;
bottom
:
2
.5rem
;
left
:
0
;
right
:
0
;
margin
:
auto
;
background-color
:
rgba
(
0
,
168
,
202
,
0
.451
);
box-shadow
:
0
0
20px
0
rgba
(
0
,
221
,
255
,
0
.5
);
box-shadow
:
0
0
1
.25rem
0
rgba
(
0
,
221
,
255
,
0
.5
);
&
:hover
{
background-color
:
rgba
(
0
,
168
,
202
,
0
.451
)
!
important
;
transform
:
scale
(
1
.1
);
...
...
src/ui/BuildDeck/Filter.module.scss
View file @
72f777c1
.title
{
text-align
:
center
;
font-size
:
24px
;
font-size
:
1
.5rem
;
font-weight
:
bold
;
margin
:
12px
0
32px
;
margin
:
0
.75rem
0
2rem
;
}
.item
{
...
...
@@ -10,9 +10,9 @@
align-items
:
center
;
.item-name
{
display
:
flex
;
gap
:
4px
;
gap
:
0
.25rem
;
flex
:
1
;
flex-basis
:
80px
;
flex-basis
:
5rem
;
vertical-align
:
middle
;
}
}
...
...
@@ -20,18 +20,18 @@
.form
{
display
:
flex
;
flex-direction
:
column
;
gap
:
20px
;
padding
:
8px
;
gap
:
1
.25rem
;
padding
:
0
.5rem
;
}
.btns
{
display
:
flex
;
flex-direction
:
column
;
gap
:
10px
;
gap
:
0
.625rem
;
align-items
:
center
;
padding
:
30px
0
10px
;
padding
:
1
.875rem
0
0
.625rem
;
&
>
button
{
width
:
220px
;
width
:
13
.75rem
;
border-radius
:
3px
;
}
}
...
...
@@ -44,8 +44,8 @@
}
.divider
{
flex
:
0
;
flex-basis
:
32px
;
flex-basis
:
2rem
;
text-align
:
center
;
line-height
:
30px
;
line-height
:
1
.25rem
;
}
}
src/ui/BuildDeck/Filter.tsx
View file @
72f777c1
...
...
@@ -173,7 +173,7 @@ const Item: React.FC<
{
title
}
{
showTip
&&
(
<
Tooltip
title=
"若要输入 ? 的攻击/守备,请输入 -2"
>
<
InfoCircleFilled
style=
{
{
fontSize
:
10
}
}
/>
<
InfoCircleFilled
style=
{
{
fontSize
:
"
0.625rem
"
}
}
/>
</
Tooltip
>
)
}
</
div
>
...
...
src/ui/BuildDeck/index.module.scss
View file @
72f777c1
...
...
@@ -9,7 +9,7 @@
}
.sider
{
--sider-width
:
300px
;
--sider-width
:
18
.75rem
;
width
:
var
(
--
sider-width
);
flex
:
0
0
var
(
--
sider-width
);
background
:
transparent
!
important
;
...
...
@@ -27,21 +27,21 @@
padding-bottom
:
0
;
padding-right
:
1rem
;
.deck
{
width
:
660px
;
width
:
41
.25rem
;
}
.select
{
flex
:
1
;
.select-btns
{
padding
:
5px
10px
;
padding
:
0
.3rem
0
.625rem
;
display
:
flex
;
gap
:
8px
;
gap
:
0
.5rem
;
}
}
}
.container
{
width
:
-
webkit-fill-available
;
height
:
calc
(
100%
-
20px
);
height
:
calc
(
100%
-
1
.25rem
);
border
:
1px
solid
rgba
(
255
,
255
,
255
,
0
.05
);
display
:
flex
;
flex-direction
:
column
;
...
...
@@ -49,8 +49,8 @@
border-bottom
:
1px
solid
rgba
(
255
,
255
,
255
,
0
.1
);
}
.title
{
height
:
44px
;
flex
:
0
0
44px
;
height
:
2
.75rem
;
flex
:
0
0
2
.75rem
;
justify-content
:
space-between
;
}
.deck-zone
{
...
...
@@ -60,7 +60,7 @@
--card-grid
:
10
;
}
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.05
);
backdrop-filter
:
blur
(
5px
);
backdrop-filter
:
blur
(
0
.3rem
);
}
.deck
.container
{
...
...
@@ -75,20 +75,20 @@
.search-cards-container
{
height
:
100%
;
.search-cards
{
--card-width
:
80px
;
--card-width
:
5rem
;
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fill
,
minmax
(
var
(
--
card-width
)
,
1fr
));
padding
:
0
.75rem
;
gap
:
10px
;
gap
:
0
.625rem
;
}
}
.search-count
{
font-size
:
11px
;
font-size
:
0
.7rem
;
}
.empty
{
gap
:
20px
;
gap
:
1
.25rem
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
...
...
@@ -103,8 +103,8 @@
bottom
:
0
;
background-color
:
#212332
;
color
:
hsla
(
0
,
0%
,
100%
,
0
.3
);
font-size
:
12px
;
padding
:
2px
6px
;
font-size
:
0
.75rem
;
padding
:
0
.125rem
0
.375rem
;
font-family
:
var
(
--
theme-font
);
user-select
:
none
;
}
src/ui/BuildDeck/index.tsx
View file @
72f777c1
...
...
@@ -237,11 +237,11 @@ export const DeckEditor: React.FC<{
placeholder=
"请输入卡组名字"
bordered=
{
false
}
prefix=
{
<
EditOutlined
/>
}
style=
{
{
width
:
240
}
}
style=
{
{
width
:
"
8.8rem
"
}
}
onChange=
{
(
e
)
=>
setDeckName
(
e
.
target
.
value
)
}
value=
{
deckName
}
/>
<
Space
style=
{
{
marginRight
:
6
}
}
>
<
Space
style=
{
{
marginRight
:
"
0.4rem
"
}
}
size=
{
5
}
>
<
Button
type=
"text"
size=
"small"
...
...
src/ui/Duel/Message/CardListModal.tsx
View file @
72f777c1
...
...
@@ -8,7 +8,8 @@ import { YgoCard } from "@/ui/Shared";
import
{
showCardModal
}
from
"
./CardModal
"
;
const
CARD_WIDTH
=
100
;
const
CARD_WIDTH
=
"
6.25rem
"
;
const
DRAWER_WIDTH
=
"
10rem
"
;
// TODO: 显示的位置还需要细细斟酌
...
...
@@ -46,7 +47,7 @@ export const CardListModal = () => {
open=
{
isOpen
}
onClose=
{
handleOkOrCancel
}
// headerStyle={{ display: "none" }}
width=
{
CARD_WIDTH
+
66
}
width=
{
DRAWER_WIDTH
}
style=
{
{
maxHeight
:
"
100%
"
}
}
mask=
{
false
}
>
...
...
src/ui/Duel/Message/CardModal/Desc.module.scss
View file @
72f777c1
.desc
{
line-height
:
1
.6
;
font-size
:
14px
;
max-height
:
calc
(
100%
-
237px
);
font-size
:
0
.875rem
;
max-height
:
calc
(
100%
-
14
.8rem
);
.maro-item
{
display
:
flex
;
gap
:
8px
;
gap
:
0
.5rem
;
}
}
src/ui/Duel/Message/CardModal/index.module.scss
View file @
72f777c1
...
...
@@ -5,19 +5,19 @@
}
.drawer
{
width
:
90%
!
important
;
width
:
20vw
!
important
;
left
:
10%
;
--height
:
640px
;
--height
:
40rem
;
top
:
calc
((
100%
-
var
(
--
height
))
/
2
);
height
:
var
(
--
height
)
!
important
;
position
:
relative
;
border-radius
:
6px
;
border-radius
:
0
.375rem
;
background
:
#242424
;
:global
(
.ant-drawer-header
)
{
padding
:
1
5px
0
;
padding
:
1
rem
0
;
:global
(
.ant-drawer-header-title
)
{
flex-direction
:
row-reverse
;
padding-left
:
24px
;
padding-left
:
1
.5rem
;
}
}
}
...
...
@@ -34,19 +34,19 @@
font-family
:
var
(
--
theme-font
);
}
.number
{
font-size
:
30px
;
line-height
:
36px
;
font-size
:
1
.875rem
;
line-height
:
2
.25rem
;
}
}
.attline
{
display
:
flex
;
flex-wrap
:
wrap
;
row-gap
:
10px
;
row-gap
:
0
.625rem
;
}
.info
{
justify-content
:
space-between
;
position
:
relative
;
height
:
230px
;
// TODO - fix this
height
:
15rem
;
// TODO - fix this
}
src/ui/Duel/Message/CardModal/index.tsx
View file @
72f777c1
...
...
@@ -16,7 +16,7 @@ import {
import
{
Desc
}
from
"
./Desc
"
;
import
styles
from
"
./index.module.scss
"
;
const
CARD_WIDTH
=
140
;
const
CARD_WIDTH
=
"
8.75rem
"
;
const
defaultStore
=
{
isOpen
:
false
,
...
...
@@ -86,7 +86,7 @@ export const CardModal = () => {
{
/* TODO: 展示星级/LINK数 */
}
</
Space
>
</
Space
>
<
Divider
style=
{
{
margin
:
"
14px
0
"
}
}
></
Divider
>
<
Divider
style=
{
{
margin
:
"
0.875rem
0
"
}
}
></
Divider
>
<
Desc
desc=
{
desc
}
/>
</
div
>
</
Drawer
>
...
...
src/ui/Duel/Message/EndModal/index.module.scss
View file @
72f777c1
...
...
@@ -3,13 +3,13 @@
text-align
:
center
;
.result
{
font-size
:
30px
;
font-size
:
1
.875rem
;
font-family
:
var
(
--
theme-font
);
color
:
var
(
--
text-color
);
}
.reason
{
font-size
:
20px
;
font-size
:
1
.25rem
;
font-family
:
var
(
--
theme-font
);
}
}
src/ui/Duel/Message/OptionModal.tsx
View file @
72f777c1
...
...
@@ -72,7 +72,7 @@ export const OptionModal = () => {
style=
{
{
display
:
"
grid
"
,
gridTemplateColumns
:
"
repeat(2, 1fr)
"
,
gap
:
"
10px
"
,
gap
:
"
0.625rem
"
,
}
}
onChange=
{
(
values
:
any
)
=>
{
const
v
=
selecteds
.
map
((
x
,
i
)
=>
(
i
===
page
?
values
:
x
));
...
...
@@ -83,7 +83,8 @@ export const OptionModal = () => {
<
CheckCard
key=
{
idx
}
style=
{
{
width
:
"
200px
"
,
width
:
"
12.5rem
"
,
fontSize
:
"
1rem
"
,
marginInlineEnd
:
0
,
marginBlockEnd
:
0
,
}
}
...
...
@@ -108,7 +109,7 @@ const Selector: React.FC<{
<
Segmented
block
options=
{
Array
.
from
({
length
:
maxPage
}).
map
((
_
,
idx
)
=>
idx
)
}
style=
{
{
margin
:
"
10px
0
"
}
}
style=
{
{
margin
:
"
0.625rem
0
"
}
}
value=
{
page
}
onChange=
{
onChange
as
any
}
></
Segmented
>
...
...
src/ui/Duel/Message/SelectCardsModal/index.module.scss
View file @
72f777c1
...
...
@@ -5,7 +5,7 @@
top
:
50%
;
display
:
flex
;
justify-content
:
space-between
;
padding
:
0
10px
;
padding
:
0
0
.625rem
;
box-sizing
:
border-box
;
height
:
0
;
button
{
...
...
@@ -13,7 +13,7 @@
}
}
:global
(
.ant-pro-checkcard
)
{
border-radius
:
4px
;
border-radius
:
0
.25rem
;
overflow
:
hidden
;
}
// 多选卡片的样式
...
...
@@ -36,11 +36,11 @@
.check-group
{
display
:
grid
;
grid-template-columns
:
repeat
(
5
,
1fr
);
gap
:
10px
;
gap
:
0
.625rem
;
}
.check-card
{
width
:
100px
;
width
:
6
.25rem
;
aspect-ratio
:
var
(
--
card-ratio
);
margin-inline-end
:
0
;
margin-block-end
:
0
;
...
...
src/ui/Duel/Message/SelectCardsModal/index.tsx
View file @
72f777c1
...
...
@@ -110,7 +110,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
<
span
>
{
single
?
"
每次选择一张
"
:
""
}
</
span
>
</>
}
// TODO: 这里可以再细化一些
width=
{
600
}
width=
{
"
37.5rem
"
}
okButtonProps=
{
{
disabled
:
!
submitable
,
}
}
...
...
src/ui/Duel/Message/SortCardModal.tsx
View file @
72f777c1
...
...
@@ -114,7 +114,7 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
return
(
<
div
ref=
{
setNodeRef
}
style=
{
style
}
{
...
attributes
}
{
...
listeners
}
>
<
Card
style=
{
{
width
:
100
}
}
style=
{
{
width
:
"
6.25rem
"
}
}
cover=
{
<
img
alt=
{
props
.
meta
.
id
.
toString
()
}
...
...
src/ui/Duel/Message/YesNoModal/index.tsx
View file @
72f777c1
...
...
@@ -25,7 +25,7 @@ export const YesNoModal: React.FC = () => {
<
NeosModal
title=
{
`${preHintMsg} ${msg}`
}
open=
{
isOpen
}
width=
{
400
}
width=
{
"
25rem
"
}
afterClose=
{
()
=>
(
matStore
.
hint
.
esHint
=
undefined
)
}
footer=
{
<>
...
...
src/ui/Duel/PlayMat/Card/springs/moveToHand.ts
View file @
72f777c1
...
...
@@ -13,6 +13,7 @@ const {
HAND_MARGIN_TOP
,
HAND_CARD_HEIGHT
,
HAND_CIRCLE_CENTER_OFFSET_Y
,
HAND_MAT_OFFSET_Y
,
}
=
matConfig
;
const
{
HAND
}
=
ygopro
.
CardZone
;
...
...
@@ -41,7 +42,7 @@ export const moveToHand: MoveFunc = async (props) => {
const
negativeX
=
Math
.
sin
(
angle
)
*
r
;
const
negativeY
=
Math
.
cos
(
angle
)
*
r
+
HAND_CARD_HEIGHT
/
2
;
const
x
=
hand_circle_center_x
+
negativeX
*
(
isMe
(
controller
)
?
1
:
-
1
);
const
y
=
hand_circle_center_y
-
negativeY
+
140
;
// FIXME: 常量 是手动调的 这里肯定有问题 有空来修
const
y
=
hand_circle_center_y
-
negativeY
+
HAND_MAT_OFFSET_Y
;
const
_rz
=
(
angle
*
180
)
/
Math
.
PI
;
...
...
src/ui/Duel/PlayMat/Menu/index.module.scss
View file @
72f777c1
...
...
@@ -2,16 +2,16 @@
position
:
fixed
;
display
:
flex
;
// flex-direction: column;
gap
:
6px
;
bottom
:
20px
;
right
:
35px
;
gap
:
0
.375rem
;
bottom
:
1
.25rem
;
right
:
2
.2rem
;
z-index
:
999
;
background-color
:
#323232
;
padding
:
8px
;
border-radius
:
6px
;
padding
:
0
.5rem
;
border-radius
:
0
.375rem
;
overflow
:
hidden
;
}
:global
(
.ant-dropdown-menu-item
)
{
gap
:
8px
;
gap
:
0
.5rem
;
}
src/ui/Match/MatchModal.module.scss
View file @
72f777c1
...
...
@@ -5,10 +5,10 @@
justify-content
:
center
;
.input
{
font-size
:
1
8px
;
font-size
:
1
.2rem
;
font-family
:
var
(
--
theme-font
);
color
:
#2885ff
f2
;
height
:
50px
;
margin
:
4px
;
height
:
3rem
;
margin
:
0
.25rem
;
}
}
src/ui/Match/index.module.scss
View file @
72f777c1
...
...
@@ -10,7 +10,7 @@
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
gap
:
60px
;
gap
:
3
.75rem
;
}
}
...
...
@@ -18,19 +18,19 @@
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1fr
);
grid-template-rows
:
repeat
(
2
,
1fr
);
/* 自动调整行高 */
width
:
800px
;
height
:
530px
;
gap
:
1
6px
;
width
:
55rem
;
// height: 33rem
;
gap
:
1
rem
;
.mode
{
height
:
100%
;
background
:
hsla
(
0
,
0%
,
100%
,
0
.1
);
backdrop-filter
:
blur
(
10px
);
padding
:
32px
;
border-radius
:
12px
;
padding
:
2rem
;
border-radius
:
0
.75rem
;
transition
:
0
.2s
;
cursor
:
pointer
;
&
:hover
{
box-shadow
:
0
0
0
4px
#226170
;
box-shadow
:
0
0
0
0
.25rem
#226170
;
// background: hsla(0, 0%, 100%, 0.07);
filter
:
brightness
(
1
.2
);
}
...
...
@@ -38,26 +38,26 @@
background
:
linear-gradient
(
#514f57
80
,
#2a2832
77
);
overflow
:
hidden
;
position
:
relative
;
--length
:
48px
;
--length
:
3rem
;
width
:
var
(
--
length
);
height
:
var
(
--
length
);
border-radius
:
12px
;
border-radius
:
0
.75rem
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-size
:
20px
;
font-size
:
1
.25rem
;
color
:
white
;
transition
:
0
.2s
;
filter
:
brightness
(
1
.5
);
}
.title
{
margin-top
:
24px
;
margin-bottom
:
12px
;
font-size
:
1
6px
;
margin-top
:
1
.5rem
;
margin-bottom
:
0
.75rem
;
font-size
:
1
rem
;
}
.desc
{
font-size
:
14px
;
line-height
:
24px
;
font-size
:
0
.875rem
;
line-height
:
1
.5rem
;
color
:
hsla
(
0
,
0%
,
100%
,
0
.6
);
white-space
:
pre-wrap
;
}
...
...
src/ui/Shared/CardEffectText/index.module.scss
View file @
72f777c1
.desc
{
line-height
:
1
.8
;
font-size
:
14px
;
max-height
:
calc
(
100%
-
237px
);
font-size
:
0
.875rem
;
max-height
:
calc
(
100%
-
15rem
);
font-family
:
var
(
--
theme-font
);
white-space
:
pre-wrap
;
.maro-item
{
display
:
flex
;
gap
:
8px
;
gap
:
0
.5rem
;
}
}
src/ui/Shared/SpecialButton/index.module.scss
View file @
72f777c1
.special-btn
{
cursor
:
pointer
;
width
:
200px
;
width
:
12
.5rem
;
position
:
relative
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
10px
;
padding
:
12px
0
;
gap
:
0
.625rem
;
padding
:
0
.75rem
0
;
border
:
3px
solid
hsla
(
0
,
0%
,
100%
,
0
.3
);
border-radius
:
8px
;
background-clip
:
padding-box
;
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.9
);
color
:
#0d0d0d
;
font-size
:
14px
;
font-size
:
0
.875rem
;
font-weight
:
500
;
letter-spacing
:
0
.2px
;
transition
:
0
.3s
;
...
...
src/ui/Shared/YgoCard/index.tsx
View file @
72f777c1
...
...
@@ -11,7 +11,7 @@ interface Props {
code
?:
number
;
// cardName?: string;
style
?:
CSSProperties
;
width
?:
number
;
width
?:
number
|
string
;
onClick
?:
()
=>
void
;
onLoad
?:
()
=>
void
;
}
...
...
src/ui/Shared/css.ts
View file @
72f777c1
// 此文件目的是在js和CSS之间共享一些变量,并且这些变量是0运行时的。
interface
CSSConfig
{
readonly
[
key
:
string
]:
[
number
,
UNIT
];
}
type
CSSConfig
=
[
string
,
[
number
,
UNIT
]][];
// 以1280长度的viewpoint为基准进行缩放
const
VIEW_POINT_WIDTH_BASE_IPAD
=
1280
;
const
VIEW_POINT_WIDTH_BASE_MOBILE
=
1000
;
const
ZOOM_RATE_IPAD
=
0.7
;
const
ZOOM_RATE_MOBILE
=
0.5
;
/** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
const
toCssProperties
=
(
config
:
CSSConfig
)
=>
Object
.
entries
(
config
)
config
.
map
(
([
k
,
v
])
=>
[
...
...
@@ -18,13 +23,26 @@ const toCssProperties = (config: CSSConfig) =>
)
.
reduce
((
acc
,
cur
)
=>
[...
acc
,
cur
],
[]
as
[
string
,
string
][]);
const
pxTransform
=
(
value
:
number
,
unit
:
UNIT
)
=>
{
if
(
unit
===
UNIT
.
PX
&&
window
.
innerWidth
<
VIEW_POINT_WIDTH_BASE_MOBILE
)
{
return
[
value
*
ZOOM_RATE_MOBILE
,
unit
];
}
else
if
(
unit
===
UNIT
.
PX
&&
window
.
innerWidth
<
VIEW_POINT_WIDTH_BASE_IPAD
)
{
return
[
value
*
ZOOM_RATE_IPAD
,
unit
];
}
else
{
return
[
value
,
unit
];
}
};
enum
UNIT
{
PX
=
"
px
"
,
DEG
=
"
deg
"
,
NONE
=
""
,
}
const
matConfigWithUnit
=
{
const
_matConfigWithUnit
:
Record
<
string
,
[
number
,
UNIT
]
>
=
{
PERSPECTIVE
:
[
1500
,
UNIT
.
PX
],
PLANE_ROTATE_X
:
[
0
,
UNIT
.
DEG
],
BLOCK_WIDTH
:
[
120
,
UNIT
.
PX
],
...
...
@@ -36,21 +54,26 @@ const matConfigWithUnit = {
HAND_MARGIN_TOP
:
[
0
,
UNIT
.
PX
],
HAND_CIRCLE_CENTER_OFFSET_Y
:
[
2000
,
UNIT
.
PX
],
HAND_CARD_HEIGHT
:
[
130
,
UNIT
.
PX
],
HAND_MAT_OFFSET_Y
:
[
140
,
UNIT
.
PX
],
// 手卡离场地的偏移
DECK_OFFSET_X
:
[
140
,
UNIT
.
PX
],
DECK_OFFSET_Y
:
[
80
,
UNIT
.
PX
],
DECK_ROTATE_Z
:
[
30
,
UNIT
.
DEG
],
DECK_CARD_HEIGHT
:
[
120
,
UNIT
.
PX
],
CARD_HEIGHT_O
:
[
100
,
UNIT
.
PX
],
// 场地魔法/墓地/除外的卡片高度
BLOCK_OUTSIDE_OFFSET_X
:
[
15
,
UNIT
.
PX
],
}
satisfies
CSSConfig
;
};
const
matConfigWithUnit
=
Object
.
entries
(
_matConfigWithUnit
).
map
(
([
k
,
[
value
,
unit
]])
=>
[
k
,
pxTransform
(
value
,
unit
)
as
[
number
,
UNIT
]],
)
satisfies
CSSConfig
;
export
const
matConfig
=
Object
.
keys
(
matConfigWithUnit
)
.
reduce
(
(
prev
,
key
)
=>
({
export
const
matConfig
=
matConfigWithUnit
.
reduce
(
(
prev
,
[
key
,
value
]
)
=>
({
...
prev
,
// @ts-ignore
[
key
]:
matConfigWithUnit
[
key
]
[
0
],
[
key
]:
value
[
0
],
}),
{}
as
Record
<
keyof
typeof
matConfigWithUnit
,
number
>
,
{}
as
Record
<
keyof
typeof
_
matConfigWithUnit
,
number
>
,
);
toCssProperties
(
matConfigWithUnit
).
forEach
(([
k
,
v
])
=>
{
...
...
src/ui/Side/TpModal.module.scss
View file @
72f777c1
...
...
@@ -3,10 +3,10 @@
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
row
;
gap
:
80px
;
gap
:
5rem
;
button
{
width
:
100px
;
height
:
50px
;
font-size
:
1
6px
;
width
:
6
.25rem
;
height
:
3rem
;
font-size
:
1
rem
;
}
}
src/ui/Side/index.module.scss
View file @
72f777c1
...
...
@@ -17,25 +17,25 @@
flex
:
1
;
padding-bottom
:
0
;
padding
:
1rem
;
width
:
660px
;
width
:
41
.25rem
;
}
.deck-container
{
width
:
-
webkit-fill-available
;
height
:
calc
(
100%
-
20px
);
border
:
1px
solid
rgba
(
255
,
255
,
255
,
0
.05
);
border-radius
:
10px
;
border-radius
:
0
.625rem
;
display
:
flex
;
flex-direction
:
column
;
&
>
*
:not
(
:last-of-type
)
{
border-bottom
:
1px
solid
rgba
(
255
,
255
,
255
,
0
.1
);
}
.title
{
height
:
44px
;
flex
:
0
0
44px
;
height
:
2
.75rem
;
flex
:
0
0
2
.75rem
;
justify-content
:
space-between
;
padding
:
1em
2em
;
font-size
:
1
6px
;
font-size
:
1
rem
;
}
.deck-zone
{
display
:
flex
;
...
...
@@ -44,11 +44,11 @@
--card-grid
:
15
;
}
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.05
);
backdrop-filter
:
blur
(
5px
);
backdrop-filter
:
blur
(
0
.3rem
);
}
.detail-container
{
--detail-width
:
300px
;
--detail-width
:
18
.75rem
;
width
:
var
(
--
detail-width
);
flex
:
0
0
var
(
--
detail-width
);
position
:
relative
;
...
...
src/ui/Start/index.module.scss
View file @
72f777c1
...
...
@@ -5,66 +5,68 @@
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
center
;
gap
:
50px
;
gap
:
3rem
;
}
.main
{
height
:
453px
;
width
:
1000px
;
height
:
50vh
;
width
:
60vw
;
max-height
:
100%
;
position
:
relative
;
display
:
flex
;
justify-content
:
space-between
;
.left
{
height
:
100%
;
width
:
40%
;
display
:
flex
;
flex-direction
:
column
;
gap
:
6px
;
gap
:
0
.4rem
;
.neos-logo
{
width
:
143px
;
height
:
34px
;
width
:
9rem
;
height
:
2rem
;
}
.title
{
font-size
:
36px
;
font-size
:
2rem
;
font-weight
:
500
;
color
:
rgba
(
255
,
255
,
255
,
0
.86
);
}
.keywords
{
font-size
:
24px
;
font-size
:
1
.5rem
;
font-weight
:
500
;
color
:
rgba
(
235
,
245
,
235
,
0
.8
);
}
.details
{
margin-top
:
31px
;
width
:
450px
;
font-size
:
14px
;
margin-top
:
2rem
;
width
:
28rem
;
max-width
:
100%
;
font-size
:
1rem
;
font-weight
:
500
;
line-height
:
28px
;
line-height
:
1
.75rem
;
color
:
rgba
(
235
,
245
,
235
,
0
.5
);
}
}
.right
{
width
:
360px
;
height
:
100%
;
width
:
40%
;
position
:
relative
;
overflow
:
hidden
;
border-bottom-right-radius
:
1
80px
;
border-bottom-left-radius
:
1
80px
;
border-bottom-right-radius
:
1
1
.25rem
;
border-bottom-left-radius
:
1
1
.25rem
;
.neos-main-bg
{
position
:
absolute
;
bottom
:
0
;
width
:
fit-content
;
height
:
360px
;
height
:
fit-content
;
border-radius
:
50%
;
filter
:
brightness
(
0
.7
);
}
.neos-main
{
position
:
absolute
;
bottom
:
0
;
width
:
80%
;
border-bottom-right-radius
:
50%
;
transform
:
scale
(
1
.25
);
transform-origin
:
50%
100%
;
width
:
max-content
;
filter
:
drop-shadow
(
0px
8px
8px
rgba
(
255
,
255
,
255
,
0
.3
))
drop-shadow
(
0px
0px
4px
rgba
(
255
,
255
,
255
,
0
.8
));
transition
:
0
.2s
;
...
...
src/ui/WaitRoom/Chat.module.scss
View file @
72f777c1
...
...
@@ -11,17 +11,17 @@
width
:
100%
;
margin-top
:
auto
;
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.07
);
padding
:
8px
;
padding
:
0
.5rem
;
display
:
flex
;
}
.dialogs
{
position
:
absolute
;
padding
:
8px
0
;
padding
:
0
.5rem
0
;
width
:
100%
;
display
:
flex
;
flex-direction
:
column
;
gap
:
4px
;
gap
:
0
.25rem
;
.item
{
vertical-align
:
baseline
;
.name
{
...
...
@@ -31,16 +31,16 @@
.time
{
font-size
:
11px
;
opacity
:
0
.8
;
margin-left
:
8px
;
margin-left
:
0
.5rem
;
}
.content
{
font-size
:
13px
;
color
:
#ccc
;
margin-top
:
2px
;
}
padding
:
8px
8px
;
margin
:
0
10px
;
border-radius
:
8px
;
padding
:
0
.5rem
0
.5rem
;
margin
:
0
0
.625rem
;
border-radius
:
0
.5rem
;
transition
:
0
.2s
;
&
:hover
{
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.07
);
...
...
src/ui/WaitRoom/Popover.tsx
View file @
72f777c1
...
...
@@ -94,7 +94,7 @@ export const TpPopover: React.FC<
return
(
<
Popover
overlayStyle=
{
{
backdropFilter
:
"
blur(
10px
)
"
}
}
overlayStyle=
{
{
backdropFilter
:
"
blur(
0.625rem
)
"
}
}
content=
{
<
Space
>
{
[
Tp
.
First
,
Tp
.
Second
].
map
((
item
)
=>
(
...
...
src/ui/WaitRoom/index.module.scss
View file @
72f777c1
...
...
@@ -2,9 +2,9 @@
height
:
100%
;
display
:
flex
;
align-items
:
center
;
--side-box-width
:
500px
;
--border-radius
:
10px
;
--sider-width
:
300px
;
--side-box-width
:
30rem
;
--border-radius
:
0
.625rem
;
--sider-width
:
18
.75rem
;
.content
{
height
:
100%
;
position
:
relative
;
...
...
@@ -15,7 +15,7 @@
justify-content
:
center
;
transition
:
transform
0
.3s
;
.wrap
{
height
:
500px
;
// TODO: 修正这里的高度,或者说修正全局的高度设置。高度不应该超过100%
height
:
30rem
;
// TODO: 修正这里的高度,或者说修正全局的高度设置。高度不应该超过100%
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
...
...
@@ -25,11 +25,11 @@
.sider
{
position
:
relative
;
width
:
var
(
--
sider-width
);
flex
:
0
0
300px
;
flex
:
0
0
18
.75rem
;
height
:
100%
;
background-color
:
hsla
(
0
,
0%
,
100%
,
0
.05
);
transition
:
transform
0
.3s
;
backdrop-filter
:
blur
(
5px
);
backdrop-filter
:
blur
(
0
.3rem
);
z-index
:
1
;
}
}
...
...
@@ -37,48 +37,48 @@
.both-side-container
{
display
:
flex
;
flex-direction
:
column
;
gap
:
30px
;
gap
:
1
.8rem
;
align-items
:
center
;
margin-top
:
80px
;
margin-top
:
5rem
;
.side-box
{
height
:
100px
;
height
:
6
.25rem
;
width
:
var
(
--
side-box-width
);
border-radius
:
var
(
--
border-radius
);
background
:
hsla
(
0
,
0%
,
100%
,
0
.1
);
backdrop-filter
:
blur
(
10px
);
backdrop-filter
:
blur
(
0
.625rem
);
overflow
:
hidden
;
padding
:
0
32px
;
padding
:
0
2rem
;
display
:
flex
;
align-items
:
center
;
gap
:
1
6px
;
gap
:
1
rem
;
.inner
{
position
:
absolute
;
left
:
0
;
width
:
150px
;
height
:
70px
;
filter
:
blur
(
120px
);
width
:
9
.4rem
;
height
:
4
.375rem
;
filter
:
blur
(
7
.5rem
);
transition
:
0
.3s
;
}
&
.ready
.inner
{
width
:
250px
;
height
:
100px
;
filter
:
blur
(
100px
)
brightness
(
1
.2
)
saturate
(
1
.2
);
width
:
15
.6rem
;
height
:
6
.25rem
;
filter
:
blur
(
6
.25rem
)
brightness
(
1
.2
)
saturate
(
1
.2
);
}
&
.me
{
box-shadow
:
-
5px
0
20px
0
rgba
(
0
,
115
,
255
,
0
.15
);
box-shadow
:
-
0
.3rem
0
1
.25rem
0
rgba
(
0
,
115
,
255
,
0
.15
);
.inner
{
background
:
linear-gradient
(
to
right
,
blue
,
rgb
(
0
,
149
,
255
));
}
z-index
:
1
;
}
&
.op
{
box-shadow
:
5px
0
20px
0
rgba
(
255
,
0
,
81
,
0
.1
);
box-shadow
:
0
.3rem
0
1
.25rem
0
rgba
(
255
,
0
,
81
,
0
.1
);
.inner
{
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
106
)
,
rgb
(
255
,
0
,
0
));
}
}
.name
{
font-size
:
1
8px
;
font-size
:
1
.2rem
;
color
:
white
;
z-index
:
1
;
}
...
...
@@ -108,22 +108,22 @@
}
.avatars-watch
{
padding-left
:
8px
;
padding-left
:
0
.5rem
;
}
.btns-side
{
position
:
absolute
;
left
:
10px
;
top
:
10px
;
left
:
0
.625rem
;
top
:
0
.625rem
;
display
:
flex
;
flex-direction
:
column
;
gap
:
10px
;
gap
:
0
.625rem
;
transition
:
0
.3s
;
.btn
{
width
:
32px
;
width
:
2rem
;
background
:
hsla
(
0
,
0%
,
100%
,
0
.1
);
justify-content
:
start
;
padding
:
0
8px
;
padding
:
0
0
.5rem
;
overflow
:
hidden
;
.btn-icon
{
display
:
flex
;
...
...
@@ -135,7 +135,7 @@
}
}
&
:hover
{
width
:
100px
;
width
:
6
.25rem
;
}
}
}
...
...
@@ -153,14 +153,14 @@
}
.fake-btn-large
{
min-width
:
88px
;
height
:
40px
;
min-width
:
5
.5rem
;
height
:
2
.5rem
;
background
:
hsla
(
0
,
0%
,
100%
,
0
.1
);
border-radius
:
6px
;
border-radius
:
0
.375rem
;
display
:
flex
;
align-items
:
center
;
padding
:
0
1
6px
0
16px
;
gap
:
8px
;
padding
:
0
1
rem
0
1rem
;
gap
:
0
.5rem
;
cursor
:
not
-
allowed
;
transition
:
0
.2s
;
position
:
relative
;
...
...
src/ui/WaitRoom/index.tsx
View file @
72f777c1
...
...
@@ -249,7 +249,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
<
Select
title=
"卡组"
showSearch
style=
{
{
width
:
250
}
}
style=
{
{
width
:
"
15.6rem
"
}
}
defaultValue=
{
snapDeck
.
decks
[
0
].
deckName
}
options=
{
snapDeck
.
decks
.
map
((
deck
)
=>
({
value
:
deck
.
deckName
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment