feat: react-CI commit and upload the related dependencies. #8
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # .github/workflows/react-ci.yaml
yi-luan
changed the title
ping-yee
changed the title
ping-yee
changed the title
|
因為 前端 的奇怪特性 沒有編譯 所以我們會先 做 lint check 最後才 build |
|
可以考慮在專案中使用 alias import 的方式 以你的 page/game/map.tsx 來舉例 原本你的 import 長這樣 import Card from "../../components/items/card";
import { LineUpCardsState } from "../../states/lineUpCardStates";
import { useRecoilState } from "recoil";
import lineUpCardBack from "../../assets/images/backOfLineUpCard.jpg";
import functionalCardBack from "../../assets/images/backOfFunctionCard.jpg";使用 alias 後會變成以下 import Card from "@/components/items/card";
import { LineUpCardsState } from "@/states/lineUpCardStates";
import { useRecoilState } from "recoil";
import lineUpCardBack from "@/assets/images/backOfLineUpCard.jpg";
import functionalCardBack from "@/assets/images/backOfFunctionCard.jpg";而這個 具體的設定你可以這樣嘗試看看
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
....
},
....
}
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import path from "path";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
}) |
WeiYun0912
reviewed
Sep 22, 2023
There was a problem hiding this comment.
15 行 cardBackUrl 的條件式可以拉出來判斷
const [ lineUpCards ] = useRecoilState(LineUpCardsState);
const {CardInformation,cardKind} = lineUpCards;
const isLineUp = cardKind === "LineUp";
const cardBackUrl = isLineUp ? lineUpCardBack : functionalCardBack;
CardInformation.map((card) => (
<Card ... cardBackUrl={cardBackUrl} />
))
WeiYun0912
reviewed
Sep 22, 2023
| <div className="h-full w-full" style={{position:'relative'}}> | ||
| { | ||
| lineUpCards.CardInformation.map((card) => ( | ||
| <Card key={card.cardName} cardName={card.cardName} cardFrontUrl={card.cardUrl} canBeTurn={card.canBeTurn} cardState={card.cardState} cardCoordinate={card.cardCoordinate} cardBackUrl={(lineUpCards.cardKind == "LineUp") ? lineUpCardBack : functionalCardBack } /> |
There was a problem hiding this comment.
props 要是太多要傳遞的話 可以考慮用 spread syntax
例如：
<Card key={card.cardName} {...card} cardFrontUrl={card.cardUrl} cardBackUrl={cardBackUrl} />- 優點：Component 程式碼看起來不會那麼長
- 缺點：要是想看你傳遞了哪些 props 到 Child Component 就還要 console 看一下，但你的 Child Component 有 type guard 應該還好。
WeiYun0912
reviewed
Sep 22, 2023
|
|
||
| const Card:React.FC<CardProps> = ( { cardFrontUrl, cardBackUrl, cardState, canBeTurn, cardCoordinate } ) => { | ||
|
|
||
| const cardPositionStyle = { |
There was a problem hiding this comment.
可以先用解構的方式取出你的 X,Y 比較易讀
const { currentCoordinateX, currentCoordinateY } = cardCoordinate;
const cardPositionStyle = {
top:`calc(50% + ${currentCoordinateX}px)`,
left:`calc(50% + ${currentCoordinateY}px)`,
...
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description