Added nickname editing
This commit is contained in:
Mitchell McCaffrey
parent
ac9189c606
commit
bd5cfbbd4b
@ -6,7 +6,7 @@ import {
|
||||
Image as UIImage,
|
||||
Flex,
|
||||
Label,
|
||||
Input
|
||||
Input,
|
||||
} from "theme-ui";
|
||||
|
||||
import Modal from "./Modal";
|
||||
@ -38,13 +38,13 @@ function AddMapButton({ onMapChanged }) {
|
||||
const file = event.target.files[0];
|
||||
const url = URL.createObjectURL(file);
|
||||
let image = new Image();
|
||||
image.onload = function() {
|
||||
image.onload = function () {
|
||||
mapDataRef.current = {
|
||||
file,
|
||||
rows,
|
||||
columns,
|
||||
width: image.width,
|
||||
height: image.height
|
||||
height: image.height,
|
||||
};
|
||||
setImageLoaded(true);
|
||||
};
|
||||
@ -85,7 +85,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={e => {
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleDone();
|
||||
}}
|
||||
@ -106,7 +106,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
minHeight: "200px",
|
||||
maxHeight: "500px",
|
||||
objectFit: "contain",
|
||||
borderRadius: "4px"
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
src={mapSource}
|
||||
onClick={openImageDialog}
|
||||
@ -119,7 +119,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
type="number"
|
||||
name="rows"
|
||||
value={rows}
|
||||
onChange={e => setRows(e.target.value)}
|
||||
onChange={(e) => setRows(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
|
||||
@ -128,7 +128,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
type="number"
|
||||
name="columns"
|
||||
value={columns}
|
||||
onChange={e => setColumns(e.target.value)}
|
||||
onChange={(e) => setColumns(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
@ -139,7 +139,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
) : (
|
||||
<Button
|
||||
varient="primary"
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
openImageDialog();
|
||||
}}
|
||||
|
||||
93
src/components/Nickname.js
Normal file
93
src/components/Nickname.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { useState } from "react";
|
||||
import { Text, Box, Input, Button, Label, IconButton } from "theme-ui";
|
||||
|
||||
import Modal from "./Modal";
|
||||
|
||||
function Nickname({ nickname, allowChanging, onChange }) {
|
||||
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);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text
|
||||
my={1}
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontSize: 10,
|
||||
cursor: allowChanging ? "pointer" : "default",
|
||||
":hover": allowChanging && {
|
||||
color: "primary",
|
||||
},
|
||||
":active": allowChanging && {
|
||||
color: "secondary",
|
||||
},
|
||||
position: "relative",
|
||||
}}
|
||||
onClick={() => allowChanging && openModal()}
|
||||
>
|
||||
{nickname}
|
||||
{allowChanging && (
|
||||
<IconButton
|
||||
sx={{
|
||||
width: "10px",
|
||||
height: "10px",
|
||||
padding: 0,
|
||||
margin: "2px",
|
||||
position: "absolute",
|
||||
bottom: "-2px",
|
||||
}}
|
||||
>
|
||||
<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 htmlFor="nicknameChange">Change your nickname</Label>
|
||||
<Input
|
||||
id="nicknameChange"
|
||||
value={changedNickname}
|
||||
onChange={handleChange}
|
||||
mt={1}
|
||||
mb={3}
|
||||
/>
|
||||
<Button disabled={!changedNickname}>Change</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Nickname.defaultProps = {
|
||||
allowChanging: false,
|
||||
onChange: () => {},
|
||||
};
|
||||
|
||||
export default Nickname;
|
||||
@ -2,6 +2,7 @@ import React from "react";
|
||||
import { Flex, Box, Text } from "theme-ui";
|
||||
|
||||
import AddPartyMemberButton from "./AddPartyMemberButton";
|
||||
import Nickname from "./Nickname";
|
||||
|
||||
function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
|
||||
return (
|
||||
@ -31,13 +32,13 @@ function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Text my={1} variant="caption" sx={{ fontSize: 10 }}>
|
||||
{nickname || ""} (you)
|
||||
</Text>
|
||||
<Nickname
|
||||
nickname={nickname || ""}
|
||||
allowChanging
|
||||
onChange={onNicknameChange}
|
||||
/>
|
||||
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
|
||||
<Text my={1} variant="caption" sx={{ fontSize: 10 }} key={id}>
|
||||
{partyNickname}
|
||||
</Text>
|
||||
<Nickname nickname={partyNickname} key={id} />
|
||||
))}
|
||||
</Box>
|
||||
<Box>
|
||||
|
||||
112
src/theme.js
112
src/theme.js
@ -7,7 +7,7 @@ export default {
|
||||
highlight: "hsl(260, 20%, 40%)",
|
||||
purple: "hsl(290, 100%, 80%)",
|
||||
muted: "hsla(230, 20%, 0%, 20%)",
|
||||
gray: "hsl(0, 0%, 70%)"
|
||||
gray: "hsl(0, 0%, 70%)",
|
||||
},
|
||||
fonts: {
|
||||
body: "'Bree Serif', serif",
|
||||
@ -15,83 +15,83 @@ export default {
|
||||
"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
|
||||
heading: "'Bree Serif', serif",
|
||||
monospace: "Menlo, monospace",
|
||||
display: "'Pacifico', cursive"
|
||||
display: "'Pacifico', cursive",
|
||||
},
|
||||
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
|
||||
fontWeights: {
|
||||
caption: 200,
|
||||
body: 300,
|
||||
heading: 400,
|
||||
display: 400
|
||||
display: 400,
|
||||
},
|
||||
lineHeights: {
|
||||
body: 1.1,
|
||||
heading: 1.25
|
||||
heading: 1.25,
|
||||
},
|
||||
text: {
|
||||
heading: {
|
||||
fontFamily: "heading",
|
||||
fontWeight: "heading",
|
||||
lineHeight: "heading",
|
||||
fontSize: 1
|
||||
fontSize: 1,
|
||||
},
|
||||
display: {
|
||||
variant: "textStyles.heading",
|
||||
fontFamily: "display",
|
||||
fontSize: [5, 6],
|
||||
fontWeight: "display",
|
||||
mt: 3
|
||||
mt: 3,
|
||||
},
|
||||
caption: {
|
||||
fontFamily: "body2",
|
||||
fontWeight: "caption",
|
||||
fontSize: 10,
|
||||
color: "gray"
|
||||
color: "gray",
|
||||
},
|
||||
body2: {
|
||||
fontFamily: "body2",
|
||||
fontSize: 1,
|
||||
fontWeight: "body"
|
||||
}
|
||||
fontWeight: "body",
|
||||
},
|
||||
},
|
||||
styles: {
|
||||
Container: {
|
||||
p: 3,
|
||||
maxWidth: 1024
|
||||
maxWidth: 1024,
|
||||
},
|
||||
root: {
|
||||
fontFamily: "body",
|
||||
lineHeight: "body",
|
||||
fontWeight: "body"
|
||||
fontWeight: "body",
|
||||
},
|
||||
h1: {
|
||||
variant: "textStyles.display"
|
||||
variant: "textStyles.display",
|
||||
},
|
||||
h2: {
|
||||
variant: "textStyles.heading",
|
||||
fontSize: 5
|
||||
fontSize: 5,
|
||||
},
|
||||
h3: {
|
||||
variant: "textStyles.heading",
|
||||
fontSize: 4
|
||||
fontSize: 4,
|
||||
},
|
||||
h4: {
|
||||
variant: "textStyles.heading",
|
||||
fontSize: 3
|
||||
fontSize: 3,
|
||||
},
|
||||
h5: {
|
||||
variant: "textStyles.heading",
|
||||
fontSize: 2
|
||||
fontSize: 2,
|
||||
},
|
||||
h6: {
|
||||
variant: "textStyles.heading",
|
||||
fontSize: 1
|
||||
fontSize: 1,
|
||||
},
|
||||
a: {
|
||||
color: "primary",
|
||||
"&:hover": {
|
||||
color: "secondary"
|
||||
}
|
||||
color: "secondary",
|
||||
},
|
||||
},
|
||||
pre: {
|
||||
variant: "prism",
|
||||
@ -102,18 +102,18 @@ export default {
|
||||
bg: "muted",
|
||||
overflow: "auto",
|
||||
code: {
|
||||
color: "inherit"
|
||||
}
|
||||
color: "inherit",
|
||||
},
|
||||
},
|
||||
code: {
|
||||
fontFamily: "monospace",
|
||||
color: "secondary",
|
||||
fontSize: 1
|
||||
fontSize: 1,
|
||||
},
|
||||
inlineCode: {
|
||||
fontFamily: "monospace",
|
||||
color: "secondary",
|
||||
bg: "muted"
|
||||
bg: "muted",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
@ -126,52 +126,52 @@ export default {
|
||||
pr: "4px",
|
||||
pl: 0,
|
||||
borderColor: "muted",
|
||||
borderBottomStyle: "solid"
|
||||
}
|
||||
borderBottomStyle: "solid",
|
||||
},
|
||||
},
|
||||
th: {
|
||||
verticalAlign: "bottom",
|
||||
borderBottomWidth: "2px"
|
||||
borderBottomWidth: "2px",
|
||||
},
|
||||
td: {
|
||||
verticalAlign: "top",
|
||||
borderBottomWidth: "1px"
|
||||
borderBottomWidth: "1px",
|
||||
},
|
||||
hr: {
|
||||
border: 0,
|
||||
borderBottom: "1px solid",
|
||||
borderColor: "muted"
|
||||
borderColor: "muted",
|
||||
},
|
||||
img: {
|
||||
maxWidth: "100%"
|
||||
}
|
||||
maxWidth: "100%",
|
||||
},
|
||||
},
|
||||
prism: {
|
||||
".comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url": {
|
||||
color: "gray"
|
||||
color: "gray",
|
||||
},
|
||||
".comment": {
|
||||
fontStyle: "italic"
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable": {
|
||||
color: "purple"
|
||||
color: "purple",
|
||||
},
|
||||
".atrule,.attr-value,.keyword": {
|
||||
color: "primary"
|
||||
color: "primary",
|
||||
},
|
||||
".selector,.attr-name,.string,.char,.bultin,.inserted": {
|
||||
color: "secondary"
|
||||
}
|
||||
color: "secondary",
|
||||
},
|
||||
},
|
||||
forms: {
|
||||
label: {
|
||||
fontWeight: 400
|
||||
fontWeight: 400,
|
||||
},
|
||||
input: {
|
||||
"&:focus": {
|
||||
outlineColor: "primary"
|
||||
}
|
||||
}
|
||||
outlineColor: "primary",
|
||||
},
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
primary: {
|
||||
@ -182,15 +182,15 @@ export default {
|
||||
borderColor: "text",
|
||||
"&:hover": {
|
||||
borderColor: "highlight",
|
||||
cursor: "pointer"
|
||||
cursor: "pointer",
|
||||
},
|
||||
fontFamily: "body",
|
||||
"&:focus": {
|
||||
outline: "none"
|
||||
outline: "none",
|
||||
},
|
||||
"&:active": {
|
||||
borderColor: "primary"
|
||||
}
|
||||
borderColor: "primary",
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
color: "secondary",
|
||||
@ -198,29 +198,31 @@ export default {
|
||||
borderStyle: "solid",
|
||||
borderWidth: "1px",
|
||||
borderColor: "text",
|
||||
fontFamily: "body"
|
||||
fontFamily: "body",
|
||||
},
|
||||
icon: {
|
||||
"&:hover": {
|
||||
cursor: "pointer"
|
||||
cursor: "pointer",
|
||||
color: "primary",
|
||||
},
|
||||
"&:focus": {
|
||||
outline: "none"
|
||||
outline: "none",
|
||||
},
|
||||
"&:active": {
|
||||
color: "primary"
|
||||
}
|
||||
color: "secondary",
|
||||
},
|
||||
},
|
||||
close: {
|
||||
"&:hover": {
|
||||
cursor: "pointer"
|
||||
cursor: "pointer",
|
||||
color: "primary",
|
||||
},
|
||||
"&:focus": {
|
||||
outline: "none"
|
||||
outline: "none",
|
||||
},
|
||||
"&:active": {
|
||||
color: "primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
color: "secondary",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user