Skip to content

Commit 5da9a5e

Browse files
tknkaatknkaa
authored
Migrate to tailwind (#93)
* Refactor: Use Tailwind CSS for GameInterface layout * Refactor: Use Tailwind CSS for ValidTiles styling * Refactor: Use Tailwind CSS for styling and center game interface * Refactor: Replace inline styles with Tailwind CSS classes in Play components * Refactor: Style tutorial pages with Tailwind CSS * feat: Style result page header title
1 parent e1bedd6 commit 5da9a5e

15 files changed

+78
-346
lines changed

‎src/pages/Play/GameInterface.tsx‎

Lines changed: 33 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -209,20 +209,7 @@ const GameInterface = (props: GameInterfaceProps) => {
209209
};
210210

211211
return (
212-
<div
213-
style={{
214-
display: "flex",
215-
flexDirection: "column",
216-
alignItems: "center",
217-
padding: "1rem",
218-
width: "80vw",
219-
height: "80vh",
220-
gap: "1rem",
221-
backgroundColor: "white",
222-
borderRadius: "1rem",
223-
margin: "0 auto",
224-
}}
225-
>
212+
<div className="p-4 w-[80vw] h-[80vh] bg-white rounded-[1rem] overflow-hidden">
226213
<Dialog open={open} onClose={() => setOpen(false)}>
227214
<DialogTitle>
228215
{isAborted
@@ -244,47 +231,30 @@ const GameInterface = (props: GameInterfaceProps) => {
244231
gameState.junme === 19 ? (
245232
<DrawEnd drawEnd={drawEnd} />
246233
) : (
247-
<div>
248-
<Header
249-
kyoku={gameState.kyoku}
250-
junme={gameState.junme}
251-
playerInfo={props.playerInfo}
252-
setPlayerInfo={props.setPlayerInfo}
253-
/>
254-
<div
255-
style={{
256-
display: "grid",
257-
gridTemplateColumns: "50% 50%",
258-
gridTemplateRows: "50% 50%",
259-
width: "70rem",
260-
height: "20rem",
261-
gap: "0.1rem",
262-
}}
263-
>
234+
<div className="flex flex-col size-full">
235+
<div className="h-16">
236+
<Header
237+
kyoku={gameState.kyoku}
238+
junme={gameState.junme}
239+
playerInfo={props.playerInfo}
240+
setPlayerInfo={props.setPlayerInfo}
241+
/>
242+
</div>
243+
<div className="grid grid-cols-2 grid-rows-2 w-[70rem] h-[20rem] gap-[0.1rem] mx-auto">
264244
{gameState.isAgari ? (
265245
<TsumoEnd tsumoEnd={tsumoEnd} />
266246
) : (
267247
<>
268248
{display === "sutehai" ? (
269-
<span
270-
style={{
271-
gridColumn: "1",
272-
gridRow: "1 / 3",
273-
}}
274-
>
249+
<div className="col-1 row-start-1 row-end-3">
275250
<DisplaySwitch
276251
display={display}
277252
setDisplay={setDisplay}
278253
/>
279254
<DiscardArea sutehai={gameState.sutehai} />
280-
</span>
255+
</div>
281256
) : (
282-
<span
283-
style={{
284-
gridColumn: "1",
285-
gridRow: "1 / 3",
286-
}}
287-
>
257+
<div className="col-1 row-start-1 row-end-3">
288258
<DisplaySwitch
289259
display={display}
290260
setDisplay={setDisplay}
@@ -293,14 +263,9 @@ const GameInterface = (props: GameInterfaceProps) => {
293263
tehai={gameState.tehai}
294264
tsumo={gameState.tsumo}
295265
/>
296-
</span>
266+
</div>
297267
)}
298-
<span
299-
style={{
300-
gridColumn: "2",
301-
gridRow: "1",
302-
}}
303-
>
268+
<div className="col-2 row-1">
304269
{isLoading ? (
305270
<>
306271
<HandStatusSkelton />
@@ -311,41 +276,33 @@ const GameInterface = (props: GameInterfaceProps) => {
311276
toitsuSyanten={gameState.toitsuSyanten}
312277
/>
313278
)}
314-
</span>
279+
</div>
315280
{isLoading ? (
316281
<>
317-
<span
318-
style={{
319-
gridColumn: "2",
320-
gridRow: "2",
321-
}}
322-
>
282+
<div className="col-2 row-2">
323283
<WaitingTilesSkeleton />
324-
</span>
284+
</div>
325285
</>
326286
) : (
327-
<span
328-
style={{
329-
gridColumn: "2",
330-
gridRow: "2",
331-
}}
332-
>
287+
<div className="col-2 row-2">
333288
<WaitingTiles tehai={gameState.tehai} />
334-
</span>
289+
</div>
335290
)}
336291
</>
337292
)}
338293
</div>
339-
{isLoading ? (
340-
<HandTileSkelton />
341-
) : (
342-
<HandTiles
343-
tehai={gameState.tehai}
344-
tsumo={gameState.tsumo}
345-
tedashi={tedashi}
346-
tsumogiri={tsumogiri}
347-
/>
348-
)}
294+
<div className="h-24 my-auto">
295+
{isLoading ? (
296+
<HandTileSkelton />
297+
) : (
298+
<HandTiles
299+
tehai={gameState.tehai}
300+
tsumo={gameState.tsumo}
301+
tedashi={tedashi}
302+
tsumogiri={tsumogiri}
303+
/>
304+
)}
305+
</div>
349306
</div>
350307
)
351308
) : (

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,8 @@ function DiscardArea(props: DiscardAreaProps) {
1313
};
1414
});
1515
return (
16-
<div
17-
style={{
18-
height: "90%",
19-
borderRadius: "1rem",
20-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
21-
}}
22-
>
23-
<div
24-
style={{
25-
paddingTop: "1rem",
26-
justifyContent: "center",
27-
display: "grid",
28-
gridTemplateColumns: "repeat(6, 50px)",
29-
listStyle: "none",
30-
}}
31-
>
16+
<div className="h-[90%] rounded-[1rem] shadow-md">
17+
<div className="pt-4 justify-center grid grid-cols-[repeat(6,50px)] list-none">
3218
{sutehaiWithID.map((hai) => (
3319
<li key={hai.id}>
3420
<img

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

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
88
return (
99
<div style={{ height: "10%" }}>
1010
{props.display === "sutehai" ? (
11-
<div
12-
style={{
13-
display: "flex",
14-
justifyContent: "center",
15-
gap: "40px",
16-
}}
17-
>
11+
<div className="flex justify-center gap-10">
1812
<Button
1913
variant="contained"
2014
onClick={() => props.setDisplay("sutehai")}
@@ -29,13 +23,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
2923
</Button>
3024
</div>
3125
) : (
32-
<div
33-
style={{
34-
display: "flex",
35-
justifyContent: "center",
36-
gap: "40px",
37-
}}
38-
>
26+
<div className="flex justify-center gap-10">
3927
<Button
4028
variant="outlined"
4129
onClick={() => props.setDisplay("sutehai")}

‎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 rounded-[1rem] shadow-md">
9+
<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
10+
<div className="font-medium pt-4 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: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,11 @@ export default function ValidTiles(props: ValidTilesProps) {
1111
const shortenedInfo = extractValidTile(validTileInfo);
1212
const keys = [...shortenedInfo.keys()];
1313
return (
14-
<div
15-
style={{
16-
borderRadius: "1rem",
17-
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
18-
height: "90%",
19-
overflow: "hidden",
20-
}}
21-
>
14+
<div className="rounded-[1rem] shadow-md h-[90%]">
2215
{keys.map((key) => (
2316
<div key={key}>
24-
<p
25-
style={{
26-
fontSize: "1.3rem",
27-
fontWeight: "500",
28-
}}
29-
>
30-
{key}{" "}
31-
</p>
32-
<ul
33-
style={{
34-
display: "flex",
35-
listStyleType: "none",
36-
}}
37-
>
17+
<p className="text-xl font-medium pt-4">{key} </p>
18+
<ul className="flex justify-center list-none">
3819
{shortenedInfo.get(key)?.map((hai) => (
3920
<li key={`${hai.kind} - ${hai.value}`}>
4021
<img

0 commit comments

Comments
 (0)