Skip to content

Commit 7cec4a1

Browse files
coder-lcncoder-lcn
committed
first commit
0 parents  commit 7cec4a1

14 files changed

+1098
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "chinese-chess",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"start": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"react": "^18.0.0",
12+
"react-dom": "^18.0.0",
13+
"styled-components": "^5.3.5"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.0.0",
17+
"@types/react-dom": "^18.0.0",
18+
"@types/styled-components": "^5.1.25",
19+
"@vitejs/plugin-react": "^1.3.0",
20+
"typescript": "^4.6.3",
21+
"vite": "^2.9.2"
22+
}
23+
}

‎src/App.styled.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import styled, { css } from "styled-components";
2+
3+
const cell = "60px";
4+
const cellBorder = "1px solid #fff";
5+
6+
export const Container = styled.div`
7+
position: relative;
8+
background-color: #eee;
9+
padding: 50px;
10+
border-radius: 10px;
11+
box-shadow: 10px 10px 10px #ddd;
12+
`;
13+
14+
export const Wrapper = styled.div`
15+
display: grid;
16+
grid-template-columns: repeat(8, ${cell});
17+
grid-template-rows: repeat(9, ${cell});
18+
border-top: ${cellBorder};
19+
border-left: ${cellBorder};
20+
background-color: #ddd;
21+
`;
22+
23+
const renderSoldierRoad = () => css`
24+
content: "";
25+
position: absolute;
26+
top: 0;
27+
width: 200%;
28+
height: 200%;
29+
border: ${cellBorder};
30+
`;
31+
32+
export const Item = styled.div<{ center: boolean; soldier?: string }>`
33+
text-align: center;
34+
line-height: ${cell};
35+
border-right: ${cellBorder};
36+
border-bottom: ${cellBorder};
37+
overflow: hidden;
38+
position: relative;
39+
40+
${({ center }) =>
41+
center &&
42+
css`
43+
border-right: none;
44+
`}
45+
46+
${({ soldier }) => {
47+
switch (soldier) {
48+
case "lt":
49+
return css`
50+
&::after {
51+
left: 0;
52+
transform-origin: left top;
53+
${renderSoldierRoad()}
54+
transform: rotate(45deg) translate(0, -0.5px);
55+
}
56+
`;
57+
case "rt":
58+
return css`
59+
&::after {
60+
right: 0;
61+
transform-origin: right top;
62+
${renderSoldierRoad()}
63+
transform: rotate(45deg) translate(0.5px, 0);
64+
}
65+
`;
66+
}
67+
}}
68+
`;
69+
70+
export const Text = styled.div`
71+
position: absolute;
72+
left: 0;
73+
top: 50%;
74+
transform: translate(0, -50%);
75+
width: 100%;
76+
font-size: 30px;
77+
display: flex;
78+
justify-content: space-around;
79+
color: #7d7d7d;
80+
`;

‎src/App.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Container, Item, Wrapper, Text } from "./App.styled";
2+
3+
function App() {
4+
return (
5+
<Container>
6+
<Wrapper>
7+
{Array(72)
8+
.fill("")
9+
.map((_, i) => {
10+
const center = i > 31 && i < 39;
11+
let soldier;
12+
13+
switch (i) {
14+
case 3:
15+
case 12:
16+
case 59:
17+
case 68:
18+
soldier = "lt";
19+
break;
20+
case 4:
21+
case 11:
22+
case 60:
23+
case 67:
24+
soldier = "rt";
25+
break;
26+
}
27+
28+
return (
29+
<Item center={center} key={i} soldier={soldier}>
30+
{/* {i} */}
31+
</Item>
32+
);
33+
})}
34+
</Wrapper>
35+
<Text>
36+
<span>楚河</span>
37+
<span>汉界</span>
38+
</Text>
39+
</Container>
40+
);
41+
}
42+
43+
export default App;

‎src/favicon.svg

Lines changed: 15 additions & 0 deletions
Loading

‎src/index.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}
12+
13+
code {
14+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
15+
monospace;
16+
}
17+
18+
body,
19+
html {
20+
height: 100%;
21+
}

‎src/logo.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
)

‎src/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)