Skip to content

Commit 0ff0d63

Browse files
shiftpshshiftpsh
authored
Merge pull request #9 from wzrabbit/add-chip-docs
docs: 알쏭달쏭 스트릭 그래프 염색 컬러칩 문서 추가
2 parents d3b3a7a + c1edf24 commit 0ff0d63

6 files changed

Lines changed: 254 additions & 0 deletions

File tree

‎components/content/streakColorChip/StreakColorChipTable.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
Cell,
3+
Row,
4+
Table,
5+
TableBody,
6+
TableContainer,
7+
TableHead,
8+
} from "@solved-ac/ui-react";
9+
import { I18n } from "@/types/I18n";
10+
import useLanguage from "../../../hooks/useLanguage";
11+
import StreakPreview from "../../mdx/StreakPreview";
12+
import streakColorChipData from "./data";
13+
14+
const headers: Record<string, I18n> = {
15+
grade: { ko: "등급", en: "Grade" },
16+
probability: { ko: "확률", en: "Probability" },
17+
color: { ko: "색상", en: "Color" },
18+
streak: { ko: "스트릭 색상", en: "Streak Color" },
19+
};
20+
21+
const StreakColorChipTable = () => {
22+
const lang = useLanguage();
23+
24+
return (
25+
<TableContainer>
26+
<Table>
27+
<TableHead>
28+
<Row>
29+
<Cell>{headers.grade[lang]}</Cell>
30+
<Cell>{headers.probability[lang]}</Cell>
31+
<Cell>{headers.color[lang]}</Cell>
32+
<Cell>{headers.streak[lang]}</Cell>
33+
</Row>
34+
</TableHead>
35+
<TableBody>
36+
{streakColorChipData.map((group) =>
37+
group.colors.map((color, i) => (
38+
<Row key={color.name}>
39+
{i === 0 && (
40+
<>
41+
<Cell
42+
rowSpan={group.colors.length}
43+
style={{ verticalAlign: "middle" }}
44+
>
45+
{group.label[lang]}
46+
</Cell>
47+
<Cell
48+
rowSpan={group.colors.length}
49+
style={{ verticalAlign: "middle" }}
50+
>
51+
{group.probability}
52+
</Cell>
53+
</>
54+
)}
55+
<Cell style={{ verticalAlign: "middle" }}>{color.name}</Cell>
56+
<Cell style={{ verticalAlign: "middle" }}>
57+
<StreakPreview colors={color.values} />
58+
</Cell>
59+
</Row>
60+
)),
61+
)}
62+
</TableBody>
63+
</Table>
64+
</TableContainer>
65+
);
66+
};
67+
68+
export default StreakColorChipTable;

‎components/content/streakColorChip/data.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { Language } from "@/types/I18n";
2+
3+
interface StreakColorGroup {
4+
label: Record<Language, string>;
5+
probability: string;
6+
colors: StreakColor[];
7+
}
8+
9+
interface StreakColor {
10+
name: string;
11+
values: string[];
12+
}
13+
14+
const streakColorChipData: StreakColorGroup[] = [
15+
{
16+
label: { ko: "레어", en: "Rare" },
17+
probability: "90%",
18+
colors: [
19+
{
20+
name: "red",
21+
values: ["#dddfe0", "#FBB4B4", "#EA8686", "#DA5858", "#C92A2A"],
22+
},
23+
{
24+
name: "orange",
25+
values: ["#dddfe0", "#FBC694", "#F09C68", "#E4723B", "#D9480F"],
26+
},
27+
{
28+
name: "yellow",
29+
values: ["#dddfe0", "#F9DF8C", "#F3BC5D", "#EC9A2F", "#E67700"],
30+
},
31+
{
32+
name: "lime",
33+
values: ["#dddfe0", "#C7E996", "#A3CD68", "#80B03B", "#5C940D"],
34+
},
35+
{
36+
name: "green",
37+
values: ["#dddfe0", "#A6E4B1", "#7DC68B", "#54A864", "#2B8A3E"],
38+
},
39+
{
40+
name: "teal",
41+
values: ["#dddfe0", "#8EE1CA", "#61C0A5", "#35A080", "#087F5B"],
42+
},
43+
{
44+
name: "cyan",
45+
values: ["#dddfe0", "#8FD9E5", "#63B7C5", "#3794A5", "#0B7285"],
46+
},
47+
{
48+
name: "blue",
49+
values: ["#dddfe0", "#97CAF5", "#6DA8DC", "#4286C4", "#1864AB"],
50+
},
51+
{
52+
name: "indigo",
53+
values: ["#dddfe0", "#ACBBFA", "#8597E9", "#5D73D8", "#364FC7"],
54+
},
55+
{
56+
name: "violet",
57+
values: ["#dddfe0", "#BFADF8", "#9F88E7", "#7F62D5", "#5F3DC4"],
58+
},
59+
{
60+
name: "purple",
61+
values: ["#dddfe0", "#E2ADF1", "#C383D5", "#A558B8", "#862E9C"],
62+
},
63+
{
64+
name: "wine",
65+
values: ["#dddfe0", "#F4B0C8", "#DA7F9F", "#C04F76", "#A61E4D"],
66+
},
67+
],
68+
},
69+
{
70+
label: { ko: "에픽", en: "Epic" },
71+
probability: "9%",
72+
colors: [
73+
{
74+
name: "bronze",
75+
values: ["#dddfe0", "#DDBEA0", "#CD9B6B", "#BD7935", "#AD5600"],
76+
},
77+
{
78+
name: "silver",
79+
values: ["#dddfe0", "#B6C1CB", "#90A0B0", "#698095", "#435F7A"],
80+
},
81+
{
82+
name: "gold",
83+
values: ["#dddfe0", "#F3D6A0", "#F1C26B", "#EEAE35", "#D38200"],
84+
},
85+
{
86+
name: "platinum",
87+
values: ["#dddfe0", "#ACF0DA", "#80EBC8", "#52DBA9", "#23C188"],
88+
},
89+
{
90+
name: "diamond",
91+
values: ["#dddfe0", "#9EDFFA", "#69D1FB", "#35C1ED", "#00A5D8"],
92+
},
93+
{
94+
name: "ruby",
95+
values: ["#dddfe0", "#FA9FC2", "#FC6AA2", "#FD3582", "#DB0059"],
96+
},
97+
{
98+
name: "solvedac",
99+
values: ["#dddfe0", "#A7E9B4", "#77E08B", "#46CC5C", "#15AF2F"],
100+
},
101+
{
102+
name: "baekjoon",
103+
values: ["#dddfe0", "#8CD2EA", "#5FB4DE", "#3197D3", "#0479C7"],
104+
},
105+
],
106+
},
107+
{
108+
label: { ko: "레전더리", en: "Legendary" },
109+
probability: "1%",
110+
colors: [
111+
{
112+
name: "master",
113+
values: ["#dddfe0", "#7DF7FF", "#95CAFF", "#C38DEE", "#FD7DAB"],
114+
},
115+
{
116+
name: "hanbyeol",
117+
values: ["#dddfe0", "#FFD459", "#FFAA69", "#FF7C79", "#FF5F84"],
118+
},
119+
],
120+
},
121+
];
122+
123+
export default streakColorChipData;

‎components/mdx/MDXComponents.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Typo,
1616
} from "@solved-ac/ui-react";
1717
import DifficultyComparison from "../content/difficultyComparison/DifficultyComparison";
18+
import StreakColorChipTable from "../content/streakColorChip/StreakColorChipTable";
1819
import CLISSchedule2024 from "../content/updates/240824/CLISSchedule2024";
1920
import ClassIcon from "./ClassIcon";
2021
import ContentHeading1 from "./ContentHeading1";
@@ -84,6 +85,7 @@ const MDXComponents = {
8485

8586
// Content-specific components
8687
DifficultyComparison: () => <DifficultyComparison />,
88+
StreakColorChipTable: () => <StreakColorChipTable />,
8789
CLISSchedule2024: () => <CLISSchedule2024 />,
8890
} as const;
8991

‎components/mdx/StreakPreview.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from "@emotion/styled";
2+
3+
const Container = styled.div`
4+
display: flex;
5+
gap: 2px;
6+
`;
7+
8+
const Cell = styled.div<{ color: string }>`
9+
width: 18px;
10+
height: 18px;
11+
border-radius: 5px;
12+
background-color: ${({ color }) => color};
13+
`;
14+
15+
interface StreakPreviewProps {
16+
colors: string[];
17+
}
18+
19+
const StreakPreview = ({ colors }: StreakPreviewProps) => {
20+
return (
21+
<Container>
22+
{colors.map((color) => (
23+
<Cell key={color} color={color} />
24+
))}
25+
</Container>
26+
);
27+
};
28+
29+
export default StreakPreview;

‎posts/en/items/random-streak-color-chip.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Random Streak Color Chip
3+
index: 10
4+
---
5+
6+
**Random Streak Color Chip** is an item that can be used to change the color of the streak graph on your profile to a random color. Using the color chip permanently changes the streak graph color, and the previous color is lost.
7+
8+
## Drop Rates
9+
10+
Using the color chip gives you a color theme from one of the three grades below. The probability of obtaining each color within a category is equal.
11+
12+
Tier-based colors can only be obtained if you have reached the corresponding tier or above. If the requirements are not met, the probability is evenly redistributed among the other available colors.
13+
14+
- Tier-based colors: bronze, silver, gold, platinum, diamond, ruby, master
15+
16+
<StreakColorChipTable />

‎posts/ko/items/random-streak-color-chip.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: 알쏭달쏭 스트릭 그래프 염색 컬러칩
3+
index: 10
4+
---
5+
6+
**알쏭달쏭 스트릭 그래프 염색 컬러칩**은 프로필의 스트릭 그래프 색상을 임의의 색상으로 변경하는 데에 사용할 수 있는 아이템입니다. 컬러칩을 사용하면 스트릭 그래프 색상이 영구적으로 변경되며, 이전 색상은 사라집니다.
7+
8+
## 등장 확률
9+
10+
컬러칩을 사용하면 아래 세 등급 중 하나의 색상 테마를 획득합니다. 각 카테고리 내에서 획득할 수 있는 색상의 확률은 동일합니다.
11+
12+
티어 색상의 경우 해당 티어 이상을 달성한 경우에만 획득이 가능하며, 획득 조건을 만족하지 못하는 경우 획득 가능한 다른 색상을 획득할 확률이 균등하게 늘어납니다.
13+
14+
- 티어 색상: bronze, silver, gold, platinum, diamond, ruby, master
15+
16+
<StreakColorChipTable />

0 commit comments

Comments
 (0)