Moved nickname and stream button
This commit is contained in:
parent
842f6b8bd6
commit
81c3e69932
@ -14,20 +14,18 @@ function AddPartyMemberButton({ gameId }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Flex sx={{ justifyContent: "center" }}>
|
<IconButton m={1} aria-label="Add Party Member" onClick={openModal}>
|
||||||
<IconButton aria-label="Add Party Member" onClick={openModal}>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
height="24"
|
||||||
height="24"
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
width="24"
|
||||||
width="24"
|
fill="currentcolor"
|
||||||
fill="currentcolor"
|
>
|
||||||
>
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
|
</svg>
|
||||||
</svg>
|
</IconButton>
|
||||||
</IconButton>
|
|
||||||
</Flex>
|
|
||||||
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||||
<Box>
|
<Box>
|
||||||
<Label p={2}>Other people can join using your ID</Label>
|
<Label p={2}>Other people can join using your ID</Label>
|
||||||
|
60
src/components/ChangeNicknameButton.js
Normal file
60
src/components/ChangeNicknameButton.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
|
||||||
|
|
||||||
|
import Modal from "./Modal";
|
||||||
|
|
||||||
|
function ChangeNicknameButton({ nickname, onChange }) {
|
||||||
|
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
|
||||||
|
function openModal() {
|
||||||
|
setIsChangeModalOpen(true);
|
||||||
|
}
|
||||||
|
function closeModal() {
|
||||||
|
setIsChangeModalOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [changedNickname, setChangedNickname] = useState(nickname);
|
||||||
|
function handleChangeSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
onChange(changedNickname);
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange(event) {
|
||||||
|
setChangedNickname(event.target.value);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<IconButton m={1} aria-label="Change Nickname" onClick={openModal}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
fill="currentcolor"
|
||||||
|
>
|
||||||
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||||
|
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||||
|
</svg>
|
||||||
|
</IconButton>
|
||||||
|
<Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
|
||||||
|
<Box as="form" onSubmit={handleChangeSubmit}>
|
||||||
|
<Label p={2} htmlFor="nicknameChange">
|
||||||
|
Change your nickname
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="nicknameChange"
|
||||||
|
value={changedNickname}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<Flex py={2}>
|
||||||
|
<Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
|
||||||
|
Change
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChangeNicknameButton;
|
@ -1,117 +1,19 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Text, Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
|
import { Text } from "theme-ui";
|
||||||
|
|
||||||
import Modal from "./Modal";
|
|
||||||
|
|
||||||
function Nickname({ nickname, allowChanging, onChange, onStream }) {
|
|
||||||
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
|
|
||||||
function openModal() {
|
|
||||||
setIsChangeModalOpen(true);
|
|
||||||
}
|
|
||||||
function closeModal() {
|
|
||||||
setIsChangeModalOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
const [changedNickname, setChangedNickname] = useState(nickname);
|
|
||||||
function handleChangeSubmit(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
if (allowChanging) {
|
|
||||||
onChange(changedNickname);
|
|
||||||
closeModal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleChange(event) {
|
|
||||||
setChangedNickname(event.target.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
function Nickname({ nickname }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<Text
|
||||||
<Text
|
my={1}
|
||||||
my={1}
|
variant="caption"
|
||||||
variant="caption"
|
sx={{
|
||||||
sx={{
|
fontSize: 10,
|
||||||
fontSize: 10,
|
position: "relative",
|
||||||
position: "relative",
|
}}
|
||||||
}}
|
>
|
||||||
>
|
{nickname}
|
||||||
{nickname}
|
</Text>
|
||||||
{allowChanging && (
|
|
||||||
<IconButton
|
|
||||||
sx={{
|
|
||||||
width: "10px",
|
|
||||||
height: "10px",
|
|
||||||
padding: 0,
|
|
||||||
margin: "2px",
|
|
||||||
position: "absolute",
|
|
||||||
bottom: "-2px",
|
|
||||||
}}
|
|
||||||
aria-label="Start Radio Stream"
|
|
||||||
onClick={() => allowChanging && onStream()}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="10"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="10"
|
|
||||||
fill="currentcolor"
|
|
||||||
>
|
|
||||||
<path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
|
|
||||||
</svg>
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
{allowChanging && (
|
|
||||||
<IconButton
|
|
||||||
sx={{
|
|
||||||
width: "10px",
|
|
||||||
height: "10px",
|
|
||||||
padding: 0,
|
|
||||||
margin: "2px",
|
|
||||||
position: "absolute",
|
|
||||||
bottom: "-2px",
|
|
||||||
transform: "translateX(12px)",
|
|
||||||
}}
|
|
||||||
aria-label="Change Nickname"
|
|
||||||
onClick={() => allowChanging && openModal()}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="10"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="10"
|
|
||||||
fill="currentcolor"
|
|
||||||
>
|
|
||||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
||||||
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
|
||||||
</svg>
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
<Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
|
|
||||||
<Box as="form" onSubmit={handleChangeSubmit}>
|
|
||||||
<Label p={2} htmlFor="nicknameChange">
|
|
||||||
Change your nickname
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="nicknameChange"
|
|
||||||
value={changedNickname}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<Flex py={2}>
|
|
||||||
<Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
|
|
||||||
Change
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Nickname.defaultProps = {
|
|
||||||
allowChanging: false,
|
|
||||||
onChange: () => {},
|
|
||||||
onStream: () => {},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Nickname;
|
export default Nickname;
|
||||||
|
@ -4,6 +4,8 @@ import { Flex, Box, Text } from "theme-ui";
|
|||||||
import AddPartyMemberButton from "./AddPartyMemberButton";
|
import AddPartyMemberButton from "./AddPartyMemberButton";
|
||||||
import Nickname from "./Nickname";
|
import Nickname from "./Nickname";
|
||||||
import Stream from "./Stream";
|
import Stream from "./Stream";
|
||||||
|
import ChangeNicknameButton from "./ChangeNicknameButton";
|
||||||
|
import StartStreamButton from "./StartStreamButton";
|
||||||
|
|
||||||
function Party({
|
function Party({
|
||||||
nickname,
|
nickname,
|
||||||
@ -41,12 +43,7 @@ function Party({
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Nickname
|
<Nickname nickname={nickname || ""} />
|
||||||
nickname={nickname || ""}
|
|
||||||
allowChanging
|
|
||||||
onChange={onNicknameChange}
|
|
||||||
onStream={onStreamStart}
|
|
||||||
/>
|
|
||||||
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
|
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
|
||||||
<Nickname nickname={partyNickname} key={id} />
|
<Nickname nickname={partyNickname} key={id} />
|
||||||
))}
|
))}
|
||||||
@ -59,9 +56,11 @@ function Party({
|
|||||||
<Stream stream={partyStream} key={id} />
|
<Stream stream={partyStream} key={id} />
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
<Flex sx={{ flexDirection: "column" }}>
|
||||||
|
<ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
|
||||||
|
<StartStreamButton onStream={onStreamStart} />
|
||||||
<AddPartyMemberButton gameId={gameId} />
|
<AddPartyMemberButton gameId={gameId} />
|
||||||
</Box>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
20
src/components/StartStreamButton.js
Normal file
20
src/components/StartStreamButton.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { IconButton } from "theme-ui";
|
||||||
|
|
||||||
|
function StartStreamButton({ onStream }) {
|
||||||
|
return (
|
||||||
|
<IconButton m={1} aria-label="Start Radio Stream" onClick={onStream}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
fill="currentcolor"
|
||||||
|
>
|
||||||
|
<path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
|
||||||
|
</svg>
|
||||||
|
</IconButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StartStreamButton;
|
Loading…
Reference in New Issue
Block a user