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
716d29b8
Commit
716d29b8
authored
Jul 20, 2023
by
timel
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: bg css
parent
e99b3214
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
93 additions
and
23 deletions
+93
-23
src/ui/Duel/PlayMat/Bg/index.module.scss
src/ui/Duel/PlayMat/Bg/index.module.scss
+68
-5
src/ui/Duel/PlayMat/Bg/index.tsx
src/ui/Duel/PlayMat/Bg/index.tsx
+25
-18
No files found.
src/ui/Duel/PlayMat/Bg/index.module.scss
View file @
716d29b8
...
...
@@ -5,7 +5,7 @@
justify-content
:
center
;
align-items
:
center
;
background-color
:
transparent
;
.
bg-
row
{
.row
{
display
:
flex
;
column-gap
:
var
(
--
col-gap
);
&
.opponent
{
...
...
@@ -28,7 +28,6 @@
&
.highlight
{
background
:
#102639
;
cursor
:
pointer
;
// animation: blink 1s linear infinite alternate;
.triangle
{
--color
:
#006eff
;
transform
:
scale
(
1
.5
);
...
...
@@ -67,6 +66,61 @@
}
}
// 下面应该和moveToOutside、moveToGround对应
.other-blocks
{
width
:
0
;
height
:
0
;
&
.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
);
.banish
,
.field
,
.graveyard
,
.deck
,
.extra-deck
{
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%
;
...
...
@@ -90,8 +144,17 @@
);
display
:
none
;
}
.block.disabled
{
.disabled-cross
{
display
:
block
;
.disabled-cross.show
{
display
:
block
;
}
.block.glowing
{
--card-shadow-color
:
#13a1ff
;
box-shadow
:
0
0
3px
3px
var
(
--
card-shadow-color
)
,
0
0
25px
2px
#0099ff
87
;
background
:
var
(
--
card-shadow-color
);
border-radius
:
2px
;
.triangle
{
display
:
none
;
}
}
src/ui/Duel/PlayMat/Bg/index.tsx
View file @
716d29b8
...
...
@@ -27,9 +27,9 @@ const BgBlock: React.FC<
})
=>
(
<
div
{
...
rest
}
className=
{
classnames
(
"
block
"
,
className
,
{
highlight
,
glowing
,
className=
{
classnames
(
styles
.
block
,
className
,
{
[
styles
.
highlight
]:
highlight
,
[
styles
.
glowing
]:
glowing
,
})
}
>
{
<
DecoTriangles
/>
}
...
...
@@ -42,11 +42,11 @@ const BgExtraRow: React.FC<{
opSnap
:
Snapshot
<
BlockState
[]
>
;
}
>
=
({
meSnap
,
opSnap
})
=>
{
return
(
<
div
className=
{
classnames
(
"
bg-row
"
)
}
>
<
div
className=
{
classnames
(
styles
.
row
)
}
>
{
Array
.
from
({
length
:
2
}).
map
((
_
,
i
)
=>
(
<
BgBlock
key=
{
i
}
className=
"extra"
className=
{
styles
.
extra
}
onClick=
{
()
=>
{
onBlockClick
(
meSnap
[
i
].
interactivity
);
onBlockClick
(
opSnap
[
i
].
interactivity
);
...
...
@@ -64,11 +64,11 @@ const BgRow: React.FC<{
opponent
?:
boolean
;
snap
:
Snapshot
<
BlockState
[]
>
;
}
>
=
({
szone
=
false
,
opponent
=
false
,
snap
})
=>
(
<
div
className=
{
classnames
(
"
bg-row
"
,
{
opponent
})
}
>
<
div
className=
{
classnames
(
styles
.
row
,
{
[
styles
.
opponent
]:
opponent
})
}
>
{
Array
.
from
({
length
:
5
}).
map
((
_
,
i
)
=>
(
<
BgBlock
key=
{
i
}
className=
{
classnames
({
szone
})
}
className=
{
classnames
({
[
styles
.
szone
]:
szone
})
}
onClick=
{
()
=>
onBlockClick
(
snap
[
i
].
interactivity
)
}
disabled=
{
snap
[
i
].
disabled
}
highlight=
{
!!
snap
[
i
].
interactivity
}
...
...
@@ -77,7 +77,7 @@ const BgRow: React.FC<{
</
div
>
);
const
BgOtherBlocks
:
React
.
FC
<
{
me
?:
boolean
}
>
=
({
me
})
=>
{
const
BgOtherBlocks
:
React
.
FC
<
{
op
?:
boolean
}
>
=
({
op
})
=>
{
useSnapshot
(
cardStore
);
const
meController
=
isMe
(
0
)
?
0
:
1
;
const
judgeGlowing
=
(
zone
:
ygopro
.
CardZone
)
=>
...
...
@@ -88,12 +88,15 @@ const BgOtherBlocks: React.FC<{ me?: boolean }> = ({ me }) => {
const
glowingGraveyard
=
judgeGlowing
(
ygopro
.
CardZone
.
GRAVE
);
const
glowingBanish
=
judgeGlowing
(
ygopro
.
CardZone
.
REMOVED
);
return
(
<
div
className=
{
classnames
(
"
bg-other-blocks
"
,
{
me
,
op
:
!
me
})
}
>
<
BgBlock
className=
"banish"
glowing=
{
me
&&
glowingBanish
}
/>
<
BgBlock
className=
"graveyard"
glowing=
{
me
&&
glowingGraveyard
}
/>
<
BgBlock
className=
"field"
/>
<
BgBlock
className=
"deck"
/>
<
BgBlock
className=
"deck extra-deck"
glowing=
{
me
&&
glowingExtra
}
/>
<
div
className=
{
classnames
(
styles
[
"
other-blocks
"
],
{
[
styles
.
op
]:
op
})
}
>
<
BgBlock
className=
{
styles
.
banish
}
glowing=
{
!
op
&&
glowingBanish
}
/>
<
BgBlock
className=
{
styles
.
graveyard
}
glowing=
{
!
op
&&
glowingGraveyard
}
/>
<
BgBlock
className=
{
styles
.
field
}
/>
<
BgBlock
className=
{
styles
.
deck
}
/>
<
BgBlock
className=
{
classnames
(
styles
.
deck
,
styles
[
"
extra-deck
"
])
}
glowing=
{
!
op
&&
glowingExtra
}
/>
</
div
>
);
};
...
...
@@ -101,7 +104,7 @@ const BgOtherBlocks: React.FC<{ me?: boolean }> = ({ me }) => {
export
const
Bg
:
React
.
FC
=
()
=>
{
const
snap
=
useSnapshot
(
placeStore
.
inner
);
return
(
<
div
className=
"mat-bg"
>
<
div
className=
{
styles
[
"
mat-bg
"
]
}
>
<
BgRow
snap=
{
snap
[
ygopro
.
CardZone
.
SZONE
].
op
}
szone
opponent
/>
<
BgRow
snap=
{
snap
[
ygopro
.
CardZone
.
MZONE
].
op
}
opponent
/>
<
BgExtraRow
...
...
@@ -110,8 +113,8 @@ export const Bg: React.FC = () => {
/>
<
BgRow
snap=
{
snap
[
ygopro
.
CardZone
.
MZONE
].
me
}
/>
<
BgRow
snap=
{
snap
[
ygopro
.
CardZone
.
SZONE
].
me
}
szone
/>
<
BgOtherBlocks
me
/>
<
BgOtherBlocks
/>
<
BgOtherBlocks
op
/>
</
div
>
);
};
...
...
@@ -127,11 +130,15 @@ const onBlockClick = (placeInteractivity: PlaceInteractivity) => {
const
DecoTriangles
:
React
.
FC
=
()
=>
(
<>
{
Array
.
from
({
length
:
4
}).
map
((
_
,
i
)
=>
(
<
div
className=
"triangle"
key=
{
i
}
/>
<
div
className=
{
styles
.
triangle
}
key=
{
i
}
/>
))
}
</>
);
const
DisabledCross
:
React
.
FC
<
{
disabled
:
boolean
}
>
=
({
disabled
})
=>
(
<
div
className=
{
classnames
(
"
disabled-cross
"
,
{
show
:
disabled
})
}
></
div
>
<
div
className=
{
classnames
(
styles
[
"
disabled-cross
"
],
{
[
styles
.
show
]:
disabled
,
})
}
></
div
>
);
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