Skip to content

Migrate to tailwind #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tknkaa merged 6 commits into from
May 23, 2025
Merged

Migrate to tailwind #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f77bd9e
Refactor: Use Tailwind CSS for GameInterface layout
tknkaa May 23, 2025
00f059a
Refactor: Use Tailwind CSS for ValidTiles styling
tknkaa May 23, 2025
ae4164f
Refactor: Use Tailwind CSS for styling and center game interface
tknkaa May 23, 2025
6a0d032
Refactor: Replace inline styles with Tailwind CSS classes in Play com…
tknkaa May 23, 2025
87ba967
Refactor: Style tutorial pages with Tailwind CSS
tknkaa May 23, 2025
f99d95a
feat: Style result page header title
tknkaa May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 33 additions & 76 deletions src/pages/Play/GameInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,20 +209,7 @@ const GameInterface = (props: GameInterfaceProps) => {
};

return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "1rem",
width: "80vw",
height: "80vh",
gap: "1rem",
backgroundColor: "white",
borderRadius: "1rem",
margin: "0 auto",
}}
>
<div className="p-4 w-[80vw] h-[80vh] bg-white rounded-[1rem] overflow-hidden">
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>
{isAborted
Expand All @@ -244,47 +231,30 @@ const GameInterface = (props: GameInterfaceProps) => {
gameState.junme === 19 ? (
<DrawEnd drawEnd={drawEnd} />
) : (
<div>
<Header
kyoku={gameState.kyoku}
junme={gameState.junme}
playerInfo={props.playerInfo}
setPlayerInfo={props.setPlayerInfo}
/>
<div
style={{
display: "grid",
gridTemplateColumns: "50% 50%",
gridTemplateRows: "50% 50%",
width: "70rem",
height: "20rem",
gap: "0.1rem",
}}
>
<div className="flex flex-col size-full">
<div className="h-16">
<Header
kyoku={gameState.kyoku}
junme={gameState.junme}
playerInfo={props.playerInfo}
setPlayerInfo={props.setPlayerInfo}
/>
</div>
<div className="grid grid-cols-2 grid-rows-2 w-[70rem] h-[20rem] gap-[0.1rem] mx-auto">
{gameState.isAgari ? (
<TsumoEnd tsumoEnd={tsumoEnd} />
) : (
<>
{display === "sutehai" ? (
<span
style={{
gridColumn: "1",
gridRow: "1 / 3",
}}
>
<div className="col-1 row-start-1 row-end-3">
<DisplaySwitch
display={display}
setDisplay={setDisplay}
/>
<DiscardArea sutehai={gameState.sutehai} />
</span>
</div>
) : (
<span
style={{
gridColumn: "1",
gridRow: "1 / 3",
}}
>
<div className="col-1 row-start-1 row-end-3">
<DisplaySwitch
display={display}
setDisplay={setDisplay}
Expand All @@ -293,14 +263,9 @@ const GameInterface = (props: GameInterfaceProps) => {
tehai={gameState.tehai}
tsumo={gameState.tsumo}
/>
</span>
</div>
)}
<span
style={{
gridColumn: "2",
gridRow: "1",
}}
>
<div className="col-2 row-1">
{isLoading ? (
<>
<HandStatusSkelton />
Expand All @@ -311,41 +276,33 @@ const GameInterface = (props: GameInterfaceProps) => {
toitsuSyanten={gameState.toitsuSyanten}
/>
)}
</span>
</div>
{isLoading ? (
<>
<span
style={{
gridColumn: "2",
gridRow: "2",
}}
>
<div className="col-2 row-2">
<WaitingTilesSkeleton />
</span>
</div>
</>
) : (
<span
style={{
gridColumn: "2",
gridRow: "2",
}}
>
<div className="col-2 row-2">
<WaitingTiles tehai={gameState.tehai} />
</span>
</div>
)}
</>
)}
</div>
{isLoading ? (
<HandTileSkelton />
) : (
<HandTiles
tehai={gameState.tehai}
tsumo={gameState.tsumo}
tedashi={tedashi}
tsumogiri={tsumogiri}
/>
)}
<div className="h-24 my-auto">
{isLoading ? (
<HandTileSkelton />
) : (
<HandTiles
tehai={gameState.tehai}
tsumo={gameState.tsumo}
tedashi={tedashi}
tsumogiri={tsumogiri}
/>
)}
</div>
</div>
)
) : (
Expand Down
18 changes: 2 additions & 16 deletions src/pages/Play/components/DiscardArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,8 @@ function DiscardArea(props: DiscardAreaProps) {
};
});
return (
<div
style={{
height: "90%",
borderRadius: "1rem",
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
}}
>
<div
style={{
paddingTop: "1rem",
justifyContent: "center",
display: "grid",
gridTemplateColumns: "repeat(6, 50px)",
listStyle: "none",
}}
>
<div className="h-[90%] rounded-[1rem] shadow-md">
<div className="pt-4 justify-center grid grid-cols-[repeat(6,50px)] list-none">
{sutehaiWithID.map((hai) => (
<li key={hai.id}>
<img
Expand Down
16 changes: 2 additions & 14 deletions src/pages/Play/components/DisplaySwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
return (
<div style={{ height: "10%" }}>
{props.display === "sutehai" ? (
<div
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<div className="flex justify-center gap-10">
<Button
variant="contained"
onClick={() => props.setDisplay("sutehai")}
Expand All @@ -29,13 +23,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
</Button>
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<div className="flex justify-center gap-10">
<Button
variant="outlined"
onClick={() => props.setDisplay("sutehai")}
Expand Down
34 changes: 3 additions & 31 deletions src/pages/Play/components/HandStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,9 @@ type HandStatusProps = {

function HandStatus(props: HandStatusProps) {
return (
<div
style={{
height: "100%",
display: "flex",
gap: "1rem",
flexDirection: "column",
borderRadius: "1rem",
backgroundColor: "white",
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
}}
>
<div
style={{
paddingTop: "1rem",
fontWeight: "500",
paddingLeft: "1rem",
fontSize: "1.5rem",
textAlign: "left",
}}
>
向聴数
</div>
<div
style={{
fontWeight: "500",
paddingLeft: "1.5rem",
textAlign: "left",
fontSize: "1.3rem",
lineHeight: "1.5",
}}
>
<div className="h-full flex flex-col rounded-[1rem] shadow-md">
<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
<div className="font-medium pt-4 pl-6 text-left text-xl leading-normal">
{props.mentsuSyanten === 0 ? (
<>メンツ手: テンパイ</>
) : (
Expand Down
35 changes: 3 additions & 32 deletions src/pages/Play/components/HandStatusSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,9 @@ import { Skeleton } from "@mui/material";
export default function HandStatusSkelton() {
return (
<>
<div
style={{
height: "100%",
display: "flex",
gap: "1rem",
flexDirection: "column",
borderRadius: "1rem",
backgroundColor: "white",
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
}}
>
<div
style={{
paddingTop: "1rem",
fontWeight: "500",
paddingLeft: "1rem",
fontSize: "1.5rem",
textAlign: "left",
}}
>
向聴数
</div>
<div
style={{
fontWeight: "500",
paddingLeft: "1.5rem",
textAlign: "left",
fontSize: "1.3rem",
lineHeight: "1.5",
width: "80%",
}}
>
<div className="h-full flex flex-col gap-4 rounded-[1rem] shadow-md">
<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
<div className="font-medium pl-6 text-left text-xl leading-normal w-[80%]">
<Skeleton variant="text" />
<Skeleton variant="text" />
</div>
Expand Down
9 changes: 1 addition & 8 deletions src/pages/Play/components/HandTileSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,7 @@ export default function HandTileSkelton() {

return (
<div>
<ul
style={{
padding: "0",
display: "flex",
listStyleType: "none",
justifyContent: "center",
}}
>
<ul className="p-0 flex list-none justify-center">
{arr.map((value) => (
<li key={value}>
<Skeleton variant="rectangular" width={50} height={70} />
Expand Down
15 changes: 2 additions & 13 deletions src/pages/Play/components/HandTiles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,8 @@ function HandTiles(props: HandTilesProps) {
});
return (
<>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<ul
style={{
display: "flex",
listStyleType: "none",
}}
>
<div className="flex justify-center">
<ul className="flex list-none">
{tehaiWithID.map((hai) => (
<li key={hai.id}>
<img
Expand Down
25 changes: 3 additions & 22 deletions src/pages/Play/components/ValidTiles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,11 @@ export default function ValidTiles(props: ValidTilesProps) {
const shortenedInfo = extractValidTile(validTileInfo);
const keys = [...shortenedInfo.keys()];
return (
<div
style={{
borderRadius: "1rem",
boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
height: "90%",
overflow: "hidden",
}}
>
<div className="rounded-[1rem] shadow-md h-[90%]">
{keys.map((key) => (
<div key={key}>
<p
style={{
fontSize: "1.3rem",
fontWeight: "500",
}}
>
{key}{" "}
</p>
<ul
style={{
display: "flex",
listStyleType: "none",
}}
>
<p className="text-xl font-medium pt-4">{key} </p>
<ul className="flex justify-center list-none">
{shortenedInfo.get(key)?.map((hai) => (
<li key={`${hai.kind} - ${hai.value}`}>
<img
Expand Down
Loading