Removed message and put in nicknames
This commit is contained in:
Mitchell McCaffrey
parent
54c7100c2c
commit
b062f93966
@ -16,8 +16,7 @@
|
||||
"react-modal": "^3.11.2",
|
||||
"react-scripts": "3.4.0",
|
||||
"shortid": "^2.2.15",
|
||||
"theme-ui": "^0.3.1",
|
||||
"uuid": "^7.0.2"
|
||||
"theme-ui": "^0.3.1"
|
||||
},
|
||||
"scripts": {
|
||||
"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 { Flex, Box, Input, Text } from "theme-ui";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import React from "react";
|
||||
import { Flex, Box, Text } from "theme-ui";
|
||||
|
||||
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 (
|
||||
<Flex
|
||||
p={3}
|
||||
bg="background"
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
width: "256px",
|
||||
minWidth: "256px",
|
||||
width: "96px",
|
||||
minWidth: "96px",
|
||||
overflowY: "auto",
|
||||
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>
|
||||
<AddPartyMemberButton peerId={peerId} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ import { omit } from "../helpers/shared";
|
||||
|
||||
import GameContext from "../contexts/GameContext";
|
||||
import useSession from "../helpers/useSession";
|
||||
import { getRandomMonster } from "../helpers/monsters";
|
||||
|
||||
import Party from "../components/Party";
|
||||
import Tokens from "../components/Tokens";
|
||||
@ -45,6 +46,9 @@ function Game() {
|
||||
const [mapTokens, setMapTokens] = useState({});
|
||||
|
||||
function handleEditMapToken(token) {
|
||||
if (!mapSource) {
|
||||
return;
|
||||
}
|
||||
setMapTokens(prevMapTokens => ({
|
||||
...prevMapTokens,
|
||||
[token.id]: token
|
||||
@ -66,17 +70,28 @@ function Game() {
|
||||
}
|
||||
}
|
||||
|
||||
const [messages, setMessages] = useState({});
|
||||
function handleMessageSend(message) {
|
||||
setMessages(prevMessages => ({
|
||||
...prevMessages,
|
||||
[message.id]: message
|
||||
const currentNicknameRef = useRef(getRandomMonster());
|
||||
const [nicknames, setNicknames] = useState({});
|
||||
function handleNicknameChange(nickname) {
|
||||
currentNicknameRef.current = nickname;
|
||||
setNicknames(prevNicknames => ({
|
||||
...prevNicknames,
|
||||
[peerId]: nickname
|
||||
}));
|
||||
for (let connection of Object.values(connections)) {
|
||||
const data = { [message.id]: message };
|
||||
connection.send({ id: "message", data });
|
||||
const data = { [peerId]: nickname };
|
||||
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) {
|
||||
connection.on("data", data => {
|
||||
@ -96,13 +111,17 @@ function Game() {
|
||||
omit(prevMapTokens, Object.keys(data.data))
|
||||
);
|
||||
}
|
||||
if (data.id === "message") {
|
||||
setMessages(prevMessages => ({
|
||||
...prevMessages,
|
||||
if (data.id === "nickname") {
|
||||
setNicknames(prevNicknames => ({
|
||||
...prevNicknames,
|
||||
...data.data
|
||||
}));
|
||||
}
|
||||
});
|
||||
connection.send({
|
||||
id: "nickname",
|
||||
data: { [peerId]: currentNicknameRef.current }
|
||||
});
|
||||
}
|
||||
|
||||
function handleConnectionSync(connection) {
|
||||
@ -110,7 +129,7 @@ function Game() {
|
||||
connection.send({ id: "map", data: mapDataRef.current });
|
||||
}
|
||||
connection.send({ id: "tokenEdit", data: mapTokens });
|
||||
connection.send({ id: "message", data: messages });
|
||||
connection.send({ id: "nickname", data: nicknames });
|
||||
}
|
||||
|
||||
return (
|
||||
@ -119,9 +138,9 @@ function Game() {
|
||||
sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
|
||||
>
|
||||
<Party
|
||||
nicknames={nicknames}
|
||||
peerId={peerId}
|
||||
messages={messages}
|
||||
onMessageSend={handleMessageSend}
|
||||
onNicknameChange={handleNicknameChange}
|
||||
/>
|
||||
<Map
|
||||
mapSource={mapSource}
|
||||
|
||||
@ -11,7 +11,7 @@ export default {
|
||||
},
|
||||
fonts: {
|
||||
body: "'Bree Serif', serif",
|
||||
message:
|
||||
body2:
|
||||
"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
|
||||
heading: "'Bree Serif', serif",
|
||||
monospace: "Menlo, monospace",
|
||||
@ -43,13 +43,13 @@ export default {
|
||||
mt: 3
|
||||
},
|
||||
caption: {
|
||||
fontFamily: "message",
|
||||
fontFamily: "body2",
|
||||
fontWeight: "caption",
|
||||
fontSize: 10,
|
||||
color: "gray"
|
||||
},
|
||||
message: {
|
||||
fontFamily: "message",
|
||||
body2: {
|
||||
fontFamily: "body2",
|
||||
fontSize: 1,
|
||||
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"
|
||||
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:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user