Skip to content

Commit fb47bfe

Browse files
chelprocchelproc
committed
ウィンドウがドラッグで移動できる (#66)
1 parent 3adffe5 commit fb47bfe

4 files changed

Lines changed: 290 additions & 313 deletions

File tree

‎packages/web/package-lock.json‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"pixi.js": "^6.5.4",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
25+
"react-draggable": "^4.4.5",
2526
"react-icons": "^4.6.0",
2627
"react-router-dom": "^6.4.3",
2728
"react-use": "^17.4.0"

‎packages/web/src/component/Arena.tsx‎

Lines changed: 106 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { useState } from "react";
1+
import { useRef, useState } from "react";
22
import Blockly from "blockly";
33
import {
44
Accordion,
55
AccordionDetails,
66
AccordionSummary,
7+
accordionSummaryClasses,
78
Box,
89
Button,
910
Card,
@@ -18,6 +19,7 @@ import { FileUpload, Person } from "@mui/icons-material";
1819
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
1920
import { grey } from "@mui/material/colors";
2021
import { FaFortAwesome } from "react-icons/fa";
22+
import Draggable from "react-draggable";
2123
import type { User } from "./game";
2224
import { getUser, changeUserName, uploadProgram } from "../fetchAPI";
2325

@@ -141,101 +143,111 @@ export default function Arena(props: ArenaProps) {
141143
setOpen(true);
142144
};
143145

146+
const accordionRef = useRef<HTMLDivElement>(null);
147+
144148
return (
145-
<div>
146-
<Accordion
147-
onChange={handleChange}
148-
sx={{ position: "absolute", top: 48, right: 640, width: 600 }}
149+
<>
150+
<Draggable
151+
nodeRef={accordionRef}
152+
handle={`.${accordionSummaryClasses.root}`}
149153
>
150-
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
151-
闘技場
152-
</AccordionSummary>
153-
<AccordionDetails>
154-
<Box
155-
sx={{
156-
position: "relative",
157-
display: "flex",
158-
gap: 1,
159-
}}
160-
>
161-
<Card sx={{ width: 1 / 2, height: 170 }} variant="outlined">
162-
{loaded && (
163-
<>
164-
<Box sx={{ position: "absolute", ml: 2, mt: 7 }}>
165-
<FaFortAwesome size="25%" />
166-
</Box>
167-
<Typography sx={{ position: "absolute", ml: 2, mt: 1.5 }}>
168-
{currentUser.name}
169-
</Typography>
170-
<Typography
171-
sx={{
172-
position: "absolute",
173-
ml: 11,
174-
mt: 3.5,
175-
fontSize: 60,
176-
fontWeight: "bold",
177-
textAlign: "center",
178-
width: 1 / 5,
179-
}}
180-
>
181-
{currentUser.rank ? currentUser.rank : "-"}
182-
</Typography>
183-
<Typography
184-
color="text.secondary"
185-
sx={{
186-
position: "absolute",
187-
ml: 23,
188-
mt: 12,
189-
fontSize: 35,
190-
textAlign: "center",
191-
width: 1 / 8,
192-
}}
193-
>
194-
{numberOfUsers}
195-
</Typography>
196-
<Box
197-
sx={{
198-
position: "absolute",
199-
ml: 13,
200-
mt: 13,
201-
borderTop: "grey solid",
202-
width: 150,
203-
transform: "rotate(-25deg)",
204-
}}
205-
/>
206-
</>
207-
)}
208-
</Card>
209-
<Box sx={{ width: 1 / 2 }}>
210-
<Button
211-
onClick={handleUpload}
212-
sx={{
213-
color: grey[900],
214-
borderColor: grey[300],
215-
}}
216-
fullWidth
217-
variant="outlined"
218-
startIcon={<FileUpload />}
219-
>
220-
プログラムのアップロード
221-
</Button>
222-
<Button
223-
onClick={handleClickOpen}
224-
sx={{
225-
color: grey[900],
226-
borderColor: grey[300],
227-
mt: 1,
228-
}}
229-
fullWidth
230-
variant="outlined"
231-
startIcon={<Person />}
232-
>
233-
ニックネームの変更…
234-
</Button>
154+
<Accordion
155+
onChange={handleChange}
156+
sx={{ position: "absolute", top: 60, right: 680, width: 600 }}
157+
elevation={4}
158+
disableGutters
159+
ref={accordionRef}
160+
>
161+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
162+
闘技場
163+
</AccordionSummary>
164+
<AccordionDetails>
165+
<Box
166+
sx={{
167+
position: "relative",
168+
display: "flex",
169+
gap: 1,
170+
}}
171+
>
172+
<Card sx={{ width: 1 / 2, height: 170 }} variant="outlined">
173+
{loaded && (
174+
<>
175+
<Box sx={{ position: "absolute", ml: 2, mt: 7 }}>
176+
<FaFortAwesome size="25%" />
177+
</Box>
178+
<Typography sx={{ position: "absolute", ml: 2, mt: 1.5 }}>
179+
{currentUser.name}
180+
</Typography>
181+
<Typography
182+
sx={{
183+
position: "absolute",
184+
ml: 11,
185+
mt: 3.5,
186+
fontSize: 60,
187+
fontWeight: "bold",
188+
textAlign: "center",
189+
width: 1 / 5,
190+
}}
191+
>
192+
{currentUser.rank ? currentUser.rank : "-"}
193+
</Typography>
194+
<Typography
195+
color="text.secondary"
196+
sx={{
197+
position: "absolute",
198+
ml: 23,
199+
mt: 12,
200+
fontSize: 35,
201+
textAlign: "center",
202+
width: 1 / 8,
203+
}}
204+
>
205+
{numberOfUsers}
206+
</Typography>
207+
<Box
208+
sx={{
209+
position: "absolute",
210+
ml: 13,
211+
mt: 13,
212+
borderTop: "grey solid",
213+
width: 150,
214+
transform: "rotate(-25deg)",
215+
}}
216+
/>
217+
</>
218+
)}
219+
</Card>
220+
<Box sx={{ width: 1 / 2 }}>
221+
<Button
222+
onClick={handleUpload}
223+
sx={{
224+
color: grey[900],
225+
borderColor: grey[300],
226+
}}
227+
fullWidth
228+
variant="outlined"
229+
startIcon={<FileUpload />}
230+
>
231+
プログラムのアップロード
232+
</Button>
233+
<Button
234+
onClick={handleClickOpen}
235+
sx={{
236+
color: grey[900],
237+
borderColor: grey[300],
238+
mt: 1,
239+
}}
240+
fullWidth
241+
variant="outlined"
242+
startIcon={<Person />}
243+
>
244+
ニックネームの変更…
245+
</Button>
246+
</Box>
235247
</Box>
236-
</Box>
237-
</AccordionDetails>
238-
</Accordion>
248+
</AccordionDetails>
249+
</Accordion>
250+
</Draggable>
239251
<ChangeNameDialog
240252
currentUser={currentUser}
241253
setCurrentUser={setCurrentUser}
@@ -246,6 +258,6 @@ export default function Arena(props: ArenaProps) {
246258
name={name}
247259
setName={setName}
248260
/>
249-
</div>
261+
</>
250262
);
251263
}

0 commit comments

Comments
 (0)