Skip to content

Commit ae4164f

Browse files
tknkaatknkaa
committed
Refactor: Use Tailwind CSS for styling and center game interface
1 parent 00f059a commit ae4164f

File tree

8 files changed

+19
-152
lines changed

8 files changed

+19
-152
lines changed

‎src/pages/Play/GameInterface.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ const GameInterface = (props: GameInterfaceProps) => {
240240
setPlayerInfo={props.setPlayerInfo}
241241
/>
242242
</div>
243-
<div className="grid grid-cols-2 grid-rows-2 w-[70rem] h-[20rem] gap-[0.1rem]">
243+
<div className="grid grid-cols-2 grid-rows-2 w-[70rem] h-[20rem] gap-[0.1rem] mx-auto">
244244
{gameState.isAgari ? (
245245
<TsumoEnd tsumoEnd={tsumoEnd} />
246246
) : (

‎src/pages/Play/components/HandStatus.tsx‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,9 @@ type HandStatusProps = {
55

66
function HandStatus(props: HandStatusProps) {
77
return (
8-
<div
9-
style={{
10-
height: "100%",
11-
display: "flex",
12-
gap: "1rem",
13-
flexDirection: "column",
14-
borderRadius: "1rem",
15-
backgroundColor: "white",
16-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
17-
}}
18-
>
19-
<div
20-
style={{
21-
paddingTop: "1rem",
22-
fontWeight: "500",
23-
paddingLeft: "1rem",
24-
fontSize: "1.5rem",
25-
textAlign: "left",
26-
}}
27-
>
28-
向聴数
29-
</div>
30-
<div
31-
style={{
32-
fontWeight: "500",
33-
paddingLeft: "1.5rem",
34-
textAlign: "left",
35-
fontSize: "1.3rem",
36-
lineHeight: "1.5",
37-
}}
38-
>
8+
<div className="h-full flex flex-col gap-4 rounded-[1rem] shadow-md">
9+
<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
10+
<div className="font-medium pl-6 text-left text-xl leading-normal">
3911
{props.mentsuSyanten === 0 ? (
4012
<>メンツ手: テンパイ</>
4113
) : (

‎src/pages/Play/components/HandStatusSkeleton.tsx‎

Lines changed: 3 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,9 @@ import { Skeleton } from "@mui/material";
33
export default function HandStatusSkelton() {
44
return (
55
<>
6-
<div
7-
style={{
8-
height: "100%",
9-
display: "flex",
10-
gap: "1rem",
11-
flexDirection: "column",
12-
borderRadius: "1rem",
13-
backgroundColor: "white",
14-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
15-
}}
16-
>
17-
<div
18-
style={{
19-
paddingTop: "1rem",
20-
fontWeight: "500",
21-
paddingLeft: "1rem",
22-
fontSize: "1.5rem",
23-
textAlign: "left",
24-
}}
25-
>
26-
向聴数
27-
</div>
28-
<div
29-
style={{
30-
fontWeight: "500",
31-
paddingLeft: "1.5rem",
32-
textAlign: "left",
33-
fontSize: "1.3rem",
34-
lineHeight: "1.5",
35-
width: "80%",
36-
}}
37-
>
6+
<div className="h-full flex flex-col gap-4 rounded-[1rem] shadow-md">
7+
<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
8+
<div className="font-medium pl-6 text-left text-xl leading-normal w-[80%]">
389
<Skeleton variant="text" />
3910
<Skeleton variant="text" />
4011
</div>

‎src/pages/Play/components/HandTileSkeleton.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,7 @@ export default function HandTileSkelton() {
77

88
return (
99
<div>
10-
<ul
11-
style={{
12-
padding: "0",
13-
display: "flex",
14-
listStyleType: "none",
15-
justifyContent: "center",
16-
}}
17-
>
10+
<ul className="p-0 flex list-none justify-center">
1811
{arr.map((value) => (
1912
<li key={value}>
2013
<Skeleton variant="rectangular" width={50} height={70} />

‎src/pages/Play/components/HandTiles.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,8 @@ function HandTiles(props: HandTilesProps) {
1616
});
1717
return (
1818
<>
19-
<div
20-
style={{
21-
display: "flex",
22-
flexDirection: "row",
23-
justifyContent: "center",
24-
}}
25-
>
26-
<ul
27-
style={{
28-
display: "flex",
29-
listStyleType: "none",
30-
}}
31-
>
19+
<div className="flex justify-center">
20+
<ul className="flex list-none">
3221
{tehaiWithID.map((hai) => (
3322
<li key={hai.id}>
3423
<img

‎src/pages/Play/components/ValidTiles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ export default function ValidTiles(props: ValidTilesProps) {
1111
const shortenedInfo = extractValidTile(validTileInfo);
1212
const keys = [...shortenedInfo.keys()];
1313
return (
14-
<div className="rounded-[1rem] shadow-sm h-[90%] overflow-hidden">
14+
<div className="rounded-[1rem] shadow-md h-[90%] overflow-hidden">
1515
{keys.map((key) => (
1616
<div key={key}>
17-
<p className="text-2xl font-medium pt-4">{key} </p>
17+
<p className="text-xl font-medium pt-4">{key} </p>
1818
<ul className="flex list-none">
1919
{shortenedInfo.get(key)?.map((hai) => (
2020
<li key={`${hai.kind} - ${hai.value}`}>

‎src/pages/Play/components/WaitingTiles.tsx‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,43 +15,12 @@ function WaitingTiles(props: WaitingTilesProps) {
1515
};
1616
});
1717
return (
18-
<div
19-
style={{
20-
height: "100%",
21-
borderRadius: "1rem",
22-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
23-
}}
24-
>
25-
<div
26-
style={{
27-
paddingTop: "0.5rem",
28-
paddingLeft: "1rem",
29-
fontSize: "1.5rem",
30-
textAlign: "left",
31-
fontWeight: "500",
32-
}}
33-
>
34-
待ち
35-
</div>
18+
<div className="h-full rounded-[1rem] shadow-md">
19+
<div className="pt-2 pl-4 text-2xl text-left font-medium">待ち</div>
3620
{machihai.length === 0 ? (
37-
<div
38-
style={{
39-
paddingLeft: "1.5rem",
40-
fontSize: "1.3rem",
41-
fontWeight: "500",
42-
}}
43-
>
44-
なし
45-
</div>
21+
<div className="pl-6 text-xl font-medium">なし</div>
4622
) : (
47-
<div
48-
style={{
49-
listStyleType: "none",
50-
display: "flex",
51-
paddingLeft: "1.3rem",
52-
paddingTop: "0.5rem",
53-
}}
54-
>
23+
<div className="list-none flex pl-5 pt-2">
5524
{machihaiWithId.map((hai) => (
5625
<li key={hai.id}>
5726
<img

‎src/pages/Play/components/WaitingTilesSkeleton.tsx‎

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,10 @@
1-
import { Height } from "@mui/icons-material";
21
import { Skeleton } from "@mui/material";
32

43
export default function WaitingTilesSkeleton() {
54
return (
6-
<div
7-
style={{
8-
height: "100%",
9-
borderRadius: "1rem",
10-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
11-
}}
12-
>
13-
<div
14-
style={{
15-
paddingTop: "0.5rem",
16-
paddingLeft: "1rem",
17-
fontSize: "1.5rem",
18-
textAlign: "left",
19-
fontWeight: "500",
20-
}}
21-
>
22-
待ち
23-
</div>
24-
<div
25-
style={{
26-
paddingTop: "1rem",
27-
fontWeight: "500",
28-
paddingLeft: "1.5rem",
29-
textAlign: "left",
30-
fontSize: "1.3rem",
31-
lineHeight: "1.5",
32-
width: "80%",
33-
}}
34-
>
5+
<div className="h-full rounded-[1rem] shadow-md">
6+
<div className="pt-2 pl-4 text-2xl text-left font-medium">待ち</div>
7+
<div className="pt-4 font-medium pl-6 text-left text-xl leading-normal w-[80%]">
358
<Skeleton variant="text" />
369
</div>
3710
</div>

0 commit comments

Comments
 (0)