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
18baf14b
Commit
18baf14b
authored
May 20, 2023
by
Chunchi Che
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'feat/ui/chain' into 'main'
Feat/ui/chain See merge request
mycard/Neos!200
parents
6fc21e22
df976f6b
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
130 additions
and
1 deletion
+130
-1
src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/penetrate.json
src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/penetrate.json
+8
-0
src/service/duel/chainSolved.ts
src/service/duel/chainSolved.ts
+8
-0
src/service/duel/move.ts
src/service/duel/move.ts
+5
-0
src/styles/chain.css
src/styles/chain.css
+35
-0
src/ui/Duel/PlayMat/Card.tsx
src/ui/Duel/PlayMat/Card.tsx
+7
-1
src/ui/Duel/PlayMat/Chain.tsx
src/ui/Duel/PlayMat/Chain.tsx
+66
-0
src/ui/Duel/PlayMat/Mat.tsx
src/ui/Duel/PlayMat/Mat.tsx
+1
-0
No files found.
src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/penetrate.json
View file @
18baf14b
...
...
@@ -113,5 +113,13 @@
"73"
:
{
"protoType"
:
"chain_solved"
,
"fields"
:
[{
"fieldName"
:
"solved_index"
,
"fieldType"
:
"uint8"
}]
},
"75"
:
{
"protoType"
:
"chain_solved"
,
"fields"
:
[{
"fieldName"
:
"solved_index"
,
"fieldType"
:
"uint8"
}]
},
"76"
:
{
"protoType"
:
"chain_solved"
,
"fields"
:
[{
"fieldName"
:
"solved_index"
,
"fieldType"
:
"uint8"
}]
}
}
src/service/duel/chainSolved.ts
View file @
18baf14b
import
{
ygopro
}
from
"
@/api
"
;
import
{
matStore
}
from
"
@/stores
"
;
// FIXME: 处理连锁会存在三种结果:
// 1. Solved - 已处理;
// 2. NEGATED - 被无效;
// 3. DISABLED - 被禁用。
//
// 对于这三种情况`service`层的逻辑是一致的,但是UI展示应该有区别,
// 因为现在还没实现连锁处理的动画,因此暂时先都一致处理,
// 体现在 `penetrage.json`文件中三个一样的配置。
export
default
(
chainSolved
:
ygopro
.
StocGameMessage
.
MsgChainSolved
)
=>
{
const
location
=
matStore
.
chains
.
splice
(
chainSolved
.
solved_index
-
1
,
1
)
...
...
src/service/duel/move.ts
View file @
18baf14b
...
...
@@ -63,6 +63,11 @@ export default async (move: MsgMove) => {
}
}
if
(
chainIndex
)
{
// 如果`chainIndex`不为空,则连锁位置变了,需要更新连锁栈的状态
matStore
.
chains
[
chainIndex
-
1
]
=
to
;
}
switch
(
to
.
location
)
{
// @ts-ignore
case
ygopro
.
CardZone
.
MZONE
:
{
...
...
src/styles/chain.css
0 → 100644
View file @
18baf14b
.circles
{
position
:
relative
;
margin
:
50%
auto
;
width
:
var
(
--R
);
height
:
var
(
--R
);
font-size
:
50px
;
}
.circle
{
position
:
absolute
;
width
:
8px
;
height
:
8px
;
left
:
var
(
--x
);
bottom
:
var
(
--y
);
border-radius
:
50%
;
background-color
:
#ffff00
;
animation
:
flade
1s
ease
var
(
--ease
)
alternate
infinite
;
}
.font
{
position
:
absolute
;
margin
:
25%
30%
;
font-size
:
50px
;
font-style
:
oblique
;
}
@keyframes
flade
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
}
}
src/ui/Duel/PlayMat/Card.tsx
View file @
18baf14b
...
...
@@ -5,6 +5,8 @@ import React, { type CSSProperties, MouseEventHandler } from "react";
import
{
useConfig
}
from
"
@/config
"
;
import
{
Chain
}
from
"
./Chain
"
;
const
NeosConfig
=
useConfig
();
const
ASSETS_BASE
=
...
...
@@ -27,6 +29,7 @@ export const Card: React.FC<{
highlight
?:
boolean
;
focus
?:
boolean
;
fly
?:
boolean
;
chainIdx
?:
number
;
transTime
?:
number
;
onClick
?:
MouseEventHandler
<
{}
>
;
style
?:
CSSProperties
;
...
...
@@ -42,6 +45,7 @@ export const Card: React.FC<{
highlight
=
false
,
focus
=
false
,
fly
=
false
,
chainIdx
,
transTime
=
0.3
,
onClick
,
style
=
{},
...
...
@@ -71,5 +75,7 @@ export const Card: React.FC<{
}
as
any
}
onClick=
{
onClick
}
></
div
>
>
{
chainIdx
?
<
Chain
chainIdx=
{
chainIdx
}
/>
:
<></>
}
</
div
>
);
src/ui/Duel/PlayMat/Chain.tsx
0 → 100644
View file @
18baf14b
import
"
@/styles/chain.css
"
;
import
React
from
"
react
"
;
const
CIRCLES_COUNT
=
8
;
const
EASE
=
0.2
;
const
R
=
60
;
export
const
Chain
:
React
.
FC
<
{
chainIdx
:
number
}
>
=
(
props
:
{
chainIdx
:
number
;
})
=>
(
<
div
className=
"circles"
style=
{
{
"
--R
"
:
R
+
"
px
"
,
}
as
any
}
>
{
calcXYs
(
30
,
CIRCLES_COUNT
).
map
((
item
,
idx
)
=>
(
<
div
className=
"circle"
key=
{
idx
}
style=
{
{
"
--x
"
:
item
.
X
+
"
px
"
,
"
--y
"
:
item
.
Y
+
"
px
"
,
"
--ease
"
:
(
idx
*
EASE
).
toString
()
+
"
s
"
,
}
as
any
}
></
div
>
))
}
<
div
className=
"font"
>
{
props
.
chainIdx
}
</
div
>
</
div
>
);
// Ref: https://zhuanlan.zhihu.com/p/104226591
/**
* R:大圆半径,2*R = 外部正方形的边长
* counts: 圆的数量
* 返回值:
* [
* [x1,y1],
* [x2,y2],
* ...
* ]
*/
function
calcXYs
(
R
:
number
,
counts
:
number
)
{
// 当前度数
let
deg
=
0
;
// 单位度数
let
pDeg
=
360
/
counts
;
return
Array
(
counts
)
.
fill
(
0
)
.
map
((
_
,
i
)
=>
{
// 度数以单位度数递增
deg
=
pDeg
*
i
;
// Math.sin接收的参数以 π 为单位,需要根据360度 = 2π进行转化
const
proportion
=
Math
.
PI
/
180
;
// 以外部DIV左下角为原点,计算小圆圆心的横纵坐标
const
Y
=
R
+
R
*
Math
.
sin
(
proportion
*
deg
);
const
X
=
R
+
R
*
Math
.
cos
(
proportion
*
deg
);
return
{
X
,
Y
,
deg
};
});
}
src/ui/Duel/PlayMat/Mat.tsx
View file @
18baf14b
...
...
@@ -113,6 +113,7 @@ export const Mat = () => {
card
.
directAttack
}
opponent=
{
card
.
opponent
}
chainIdx=
{
card
.
chainIndex
}
onClick=
{
card
.
location
.
zone
==
YgoZone
.
SZONE
||
card
.
location
.
zone
==
YgoZone
.
MZONE
||
...
...
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