Removed message and put in nicknames
This commit is contained in:
parent
54c7100c2c
commit
b062f93966
@ -16,8 +16,7 @@
|
|||||||
"react-modal": "^3.11.2",
|
"react-modal": "^3.11.2",
|
||||||
"react-scripts": "3.4.0",
|
"react-scripts": "3.4.0",
|
||||||
"shortid": "^2.2.15",
|
"shortid": "^2.2.15",
|
||||||
"theme-ui": "^0.3.1",
|
"theme-ui": "^0.3.1"
|
||||||
"uuid": "^7.0.2"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"predeploy": "yarn build",
|
"predeploy": "yarn build",
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Box, Text, Flex } from "theme-ui";
|
|
||||||
|
|
||||||
function Message({ message }) {
|
|
||||||
const timeFormatted = new Date(message.time).toLocaleTimeString("en-US");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ width: "100%" }} my={1}>
|
|
||||||
<Flex>
|
|
||||||
<Text variant="heading">{message.nickname}</Text>
|
|
||||||
{/* <Text variant="caption">{timeFormatted}</Text> */}
|
|
||||||
</Flex>
|
|
||||||
<Text variant="message">{message.text}</Text>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Message;
|
|
@ -1,78 +1,45 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Flex, Box, Input, Text } from "theme-ui";
|
import { Flex, Box, Text } from "theme-ui";
|
||||||
import { v4 as uuid } from "uuid";
|
|
||||||
|
|
||||||
import AddPartyMemberButton from "./AddPartyMemberButton";
|
import AddPartyMemberButton from "./AddPartyMemberButton";
|
||||||
import Message from "./Message";
|
|
||||||
|
|
||||||
import { getRandomMonster } from "../helpers/monsters";
|
|
||||||
|
|
||||||
function Party({ peerId, messages, onMessageSend }) {
|
|
||||||
const [messageText, setMessageText] = useState("");
|
|
||||||
const [nickname, setNickname] = useState(getRandomMonster());
|
|
||||||
|
|
||||||
function handleMessageSubmit(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
if (!messageText || !peerId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const id = uuid();
|
|
||||||
const time = Date.now();
|
|
||||||
const message = {
|
|
||||||
nickname,
|
|
||||||
id,
|
|
||||||
text: messageText,
|
|
||||||
time
|
|
||||||
};
|
|
||||||
onMessageSend(message);
|
|
||||||
setMessageText("");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
function Party({ nicknames, peerId, onNicknameChange }) {
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
p={3}
|
p={3}
|
||||||
bg="background"
|
bg="background"
|
||||||
sx={{
|
sx={{
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
width: "256px",
|
width: "96px",
|
||||||
minWidth: "256px",
|
minWidth: "96px",
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
alignItems: "center"
|
alignItems: "center"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text mb={1} variant="heading">
|
||||||
|
Party
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
width: "100%"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Object.entries(nicknames).map(([id, nickname]) => (
|
||||||
|
<Text my={1} variant="caption" sx={{ fontSize: 10 }} key={id}>
|
||||||
|
{nickname} {id === peerId ? "(you)" : ""}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
<Box>
|
<Box>
|
||||||
<AddPartyMemberButton peerId={peerId} />
|
<AddPartyMemberButton peerId={peerId} />
|
||||||
</Box>
|
</Box>
|
||||||
<Flex
|
|
||||||
p={2}
|
|
||||||
sx={{ width: "100%" }}
|
|
||||||
bg="muted"
|
|
||||||
sx={{
|
|
||||||
flexGrow: 1,
|
|
||||||
width: "100%",
|
|
||||||
borderRadius: "4px",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "flex-end"
|
|
||||||
}}
|
|
||||||
my={2}
|
|
||||||
>
|
|
||||||
{Object.values(messages)
|
|
||||||
.sort((a, b) => a.time - b.time)
|
|
||||||
.map(message => (
|
|
||||||
<Message key={message.id} message={message} />
|
|
||||||
))}
|
|
||||||
<Box as="form" onSubmit={handleMessageSubmit} sx={{ width: "100%" }}>
|
|
||||||
<Input
|
|
||||||
value={messageText}
|
|
||||||
onChange={event => setMessageText(event.target.value)}
|
|
||||||
p={1}
|
|
||||||
disabled={!peerId}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Text my={1} variant="caption">
|
|
||||||
{nickname}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@ import { omit } from "../helpers/shared";
|
|||||||
|
|
||||||
import GameContext from "../contexts/GameContext";
|
import GameContext from "../contexts/GameContext";
|
||||||
import useSession from "../helpers/useSession";
|
import useSession from "../helpers/useSession";
|
||||||
|
import { getRandomMonster } from "../helpers/monsters";
|
||||||
|
|
||||||
import Party from "../components/Party";
|
import Party from "../components/Party";
|
||||||
import Tokens from "../components/Tokens";
|
import Tokens from "../components/Tokens";
|
||||||
@ -45,6 +46,9 @@ function Game() {
|
|||||||
const [mapTokens, setMapTokens] = useState({});
|
const [mapTokens, setMapTokens] = useState({});
|
||||||
|
|
||||||
function handleEditMapToken(token) {
|
function handleEditMapToken(token) {
|
||||||
|
if (!mapSource) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
setMapTokens(prevMapTokens => ({
|
setMapTokens(prevMapTokens => ({
|
||||||
...prevMapTokens,
|
...prevMapTokens,
|
||||||
[token.id]: token
|
[token.id]: token
|
||||||
@ -66,17 +70,28 @@ function Game() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const [messages, setMessages] = useState({});
|
const currentNicknameRef = useRef(getRandomMonster());
|
||||||
function handleMessageSend(message) {
|
const [nicknames, setNicknames] = useState({});
|
||||||
setMessages(prevMessages => ({
|
function handleNicknameChange(nickname) {
|
||||||
...prevMessages,
|
currentNicknameRef.current = nickname;
|
||||||
[message.id]: message
|
setNicknames(prevNicknames => ({
|
||||||
|
...prevNicknames,
|
||||||
|
[peerId]: nickname
|
||||||
}));
|
}));
|
||||||
for (let connection of Object.values(connections)) {
|
for (let connection of Object.values(connections)) {
|
||||||
const data = { [message.id]: message };
|
const data = { [peerId]: nickname };
|
||||||
connection.send({ id: "message", data });
|
connection.send({ id: "nickname", data });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
// If we don't have a nickname generate one when we have a peer
|
||||||
|
if (peerId !== null && !(peerId in nicknames)) {
|
||||||
|
setNicknames(prevNicknames => ({
|
||||||
|
...prevNicknames,
|
||||||
|
[peerId]: currentNicknameRef.current
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}, [peerId, nicknames, currentNicknameRef]);
|
||||||
|
|
||||||
function handleConnectionOpen(connection) {
|
function handleConnectionOpen(connection) {
|
||||||
connection.on("data", data => {
|
connection.on("data", data => {
|
||||||
@ -96,13 +111,17 @@ function Game() {
|
|||||||
omit(prevMapTokens, Object.keys(data.data))
|
omit(prevMapTokens, Object.keys(data.data))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (data.id === "message") {
|
if (data.id === "nickname") {
|
||||||
setMessages(prevMessages => ({
|
setNicknames(prevNicknames => ({
|
||||||
...prevMessages,
|
...prevNicknames,
|
||||||
...data.data
|
...data.data
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
connection.send({
|
||||||
|
id: "nickname",
|
||||||
|
data: { [peerId]: currentNicknameRef.current }
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleConnectionSync(connection) {
|
function handleConnectionSync(connection) {
|
||||||
@ -110,7 +129,7 @@ function Game() {
|
|||||||
connection.send({ id: "map", data: mapDataRef.current });
|
connection.send({ id: "map", data: mapDataRef.current });
|
||||||
}
|
}
|
||||||
connection.send({ id: "tokenEdit", data: mapTokens });
|
connection.send({ id: "tokenEdit", data: mapTokens });
|
||||||
connection.send({ id: "message", data: messages });
|
connection.send({ id: "nickname", data: nicknames });
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -119,9 +138,9 @@ function Game() {
|
|||||||
sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
|
sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
|
||||||
>
|
>
|
||||||
<Party
|
<Party
|
||||||
|
nicknames={nicknames}
|
||||||
peerId={peerId}
|
peerId={peerId}
|
||||||
messages={messages}
|
onNicknameChange={handleNicknameChange}
|
||||||
onMessageSend={handleMessageSend}
|
|
||||||
/>
|
/>
|
||||||
<Map
|
<Map
|
||||||
mapSource={mapSource}
|
mapSource={mapSource}
|
||||||
|
@ -11,7 +11,7 @@ export default {
|
|||||||
},
|
},
|
||||||
fonts: {
|
fonts: {
|
||||||
body: "'Bree Serif', serif",
|
body: "'Bree Serif', serif",
|
||||||
message:
|
body2:
|
||||||
"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
|
"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
|
||||||
heading: "'Bree Serif', serif",
|
heading: "'Bree Serif', serif",
|
||||||
monospace: "Menlo, monospace",
|
monospace: "Menlo, monospace",
|
||||||
@ -43,13 +43,13 @@ export default {
|
|||||||
mt: 3
|
mt: 3
|
||||||
},
|
},
|
||||||
caption: {
|
caption: {
|
||||||
fontFamily: "message",
|
fontFamily: "body2",
|
||||||
fontWeight: "caption",
|
fontWeight: "caption",
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
color: "gray"
|
color: "gray"
|
||||||
},
|
},
|
||||||
message: {
|
body2: {
|
||||||
fontFamily: "message",
|
fontFamily: "body2",
|
||||||
fontSize: 1,
|
fontSize: 1,
|
||||||
fontWeight: "body"
|
fontWeight: "body"
|
||||||
}
|
}
|
||||||
|
@ -10824,11 +10824,6 @@ uuid@^3.0.1, uuid@^3.3.2:
|
|||||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
|
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
|
||||||
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
|
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
|
||||||
|
|
||||||
uuid@^7.0.2:
|
|
||||||
version "7.0.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.2.tgz#7ff5c203467e91f5e0d85cfcbaaf7d2ebbca9be6"
|
|
||||||
integrity sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==
|
|
||||||
|
|
||||||
v8-compile-cache@^2.0.3:
|
v8-compile-cache@^2.0.3:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
|
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
|
||||||
|
Loading…
Reference in New Issue
Block a user