Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved nickname and stream button

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-08 17:00:56 +10:00
parent 842f6b8bd6
commit 81c3e69932
5 changed files with 112 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AddPartyMemberButton.js
View File

@ -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
View 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;

124
src/components/Nickname.js
View File

@ -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;

15
src/components/Party.js
View File

@ -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
View 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;