diff --git a/package.json b/package.json
index 584c20c..d6cdc78 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/Message.js b/src/components/Message.js
deleted file mode 100644
index d01d15c..0000000
--- a/src/components/Message.js
+++ /dev/null
@@ -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 (
-
-
- {message.nickname}
- {/* {timeFormatted} */}
-
- {message.text}
-
- );
-}
-
-export default Message;
diff --git a/src/components/Party.js b/src/components/Party.js
index e350512..8dcf335 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -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 (
+
+
+ Party
+
+
+
+ {Object.entries(nicknames).map(([id, nickname]) => (
+
+ {nickname} {id === peerId ? "(you)" : ""}
+
+ ))}
+
-
- {Object.values(messages)
- .sort((a, b) => a.time - b.time)
- .map(message => (
-
- ))}
-
- setMessageText(event.target.value)}
- p={1}
- disabled={!peerId}
- />
-
-
- {nickname}
-
-
);
}
diff --git a/src/routes/Game.js b/src/routes/Game.js
index ef67c01..39b01e1 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -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%" }}
>