diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Message.js b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Message.js
index 46c58d279..192324945 100644
--- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Message.js
+++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Message.js
@@ -163,7 +163,13 @@ const Message = ({
{actor ? (
-
+
{actor ? actor.toUpperCase() : null}
{isSelf ? (
@@ -182,9 +188,11 @@ const Message = ({
fontFamily: "fantasy",
backgroundColor: "white",
color: "gold",
+ position: "relative",
+ paddingLeft: "40px",
}}
>
- {xp}
+ {xp}
@@ -193,7 +201,7 @@ const Message = ({
) : (
-
+
0
@@ -202,14 +210,29 @@ const Message = ({
}
position="top"
>
- {isLiked ? (
-
- ) : (
-
- )}
+
+ {isLiked ? (
+
+ ) : (
+
+ )}
+
{" "}
- onReply(actor)} />
+ onReply(actor)}
+ />
{" "}
{/*
setReportMode(true)}
/>
diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/SoulSpawnEventMessage.js b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/SoulSpawnEventMessage.js
index 2fa17d1ee..139f669a7 100644
--- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/SoulSpawnEventMessage.js
+++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/SoulSpawnEventMessage.js
@@ -30,23 +30,13 @@ const SoulSpawnEventMessage = ({
{StarShine1}
Let there be LIGHT
+
YOUR CHARACTER
{Character}
{Description}
-
- YOUR MISSION
-
+
YOUR MISSION
{MissionDesc}
{StarShine1}
diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css
index d4f5c6323..acda8ed49 100644
--- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css
+++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css
@@ -82,9 +82,42 @@
}
.message-star {
- margin-left: 5px;
- animation: shine infinite 2s;
+ position: absolute;
+ animation: shrink 1s normal;
color: #ffe205;
+ top: 3%;
+ right: 5%;
+ font-size: 2em;
+}
+
+#message-star__number {
+ margin-right: 2em;
+ display: inline;
+ font-size: 1.25em;
+ animation: 4s slide normal;
+}
+
+@keyframes shrink {
+ 0% {
+ color: #ffe205;
+ font-size: 10em;
+ z-index: 100;
+ }
+ 100% {
+ color: #ffe205;
+ text-shadow: 0 0 3px #ffe205, 0 0 7px #ffe205, 0 0 20px #edd205;
+ font-size: 2em;
+ z-index: 100;
+ }
+}
+
+@keyframes slide {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
@keyframes shine {
@@ -126,6 +159,16 @@
font-weight: bolder;
}
+.soulspawn-subheader {
+ text-decoration: underline;
+ margin-bottom: 0;
+ font-family: fantasy;
+ font-weight: 900;
+ font-size: 18px;
+ color: #fff;
+ text-align: center;
+}
+
.soulspawn-text {
color: #fff;
text-align: center;
diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/index.js b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/index.js
index 5de8a8428..5843bfb71 100644
--- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/index.js
+++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/index.js
@@ -2,10 +2,8 @@ import React from "react";
import "./styles.css";
import "react-tippy/dist/tippy.css";
-import "emoji-mart/css/emoji-mart.css";
import { Tooltip } from "react-tippy";
-import { Picker, emojiIndex } from "emoji-mart";
import cx from "classnames";
import onClickOutside from "react-onclickoutside";
@@ -61,37 +59,13 @@ const ChatDisplay = ({
scrollToBottom();
}, [scrollToBottom, messages]);
- const defaultEmoji = "❓";
const { presentAgents } = getLocationState(messages);
- const [showEmojiPicker, setShowEmojiPicker] = React.useState(false);
- const [selectedEmoji, setSelectedEmoji] = React.useState(defaultEmoji);
const chatInputRef = React.useRef();
React.useLayoutEffect(() => {
chatInputRef.current.focus();
}, []);
- React.useEffect(() => {
- if (persona === null || persona.name === null) return;
- const skipWords = ["a", "the", "an", "of", "with", "holding"];
- const tryPickEmojis = !persona
- ? []
- : persona.name
- .split(" ")
- .filter((token) => !!token)
- .map((token) => token.replace(/\.$/, ""))
- .filter((word) => skipWords.indexOf(word.toLowerCase()) === -1)
- .flatMap((term) =>
- emojiIndex.search(term).map((o) => {
- return o.native;
- })
- );
-
- const autopickedEmoji =
- tryPickEmojis.length > 0 ? tryPickEmojis[0] : defaultEmoji;
- setSelectedEmoji(autopickedEmoji);
- }, [persona, setSelectedEmoji]);
-
const setTextTellAgent = React.useCallback(
(agent) => {
const message = `tell ${agent} ""`;
diff --git a/deploy/web/gameapp/src/pages/GamePage/index.js b/deploy/web/gameapp/src/pages/GamePage/index.js
index f7cd8e4c1..916b43713 100644
--- a/deploy/web/gameapp/src/pages/GamePage/index.js
+++ b/deploy/web/gameapp/src/pages/GamePage/index.js
@@ -5,6 +5,8 @@ import "./styles.css";
import "react-tippy/dist/tippy.css";
import "emoji-mart/css/emoji-mart.css";
+import { DefaultEmojiMapper } from "../../utils";
+
import { Picker, emojiIndex } from "emoji-mart";
import onClickOutside from "react-onclickoutside";
@@ -145,26 +147,45 @@ function Chat({
scrollToBottom();
}, [scrollToBottom, messages]);
+ // Previous Emoji Mapper
+ // const defaultEmoji = "❓";
+ // const { presentAgents } = getLocationState(messages);
+ // const [selectedEmoji, setSelectedEmoji] = React.useState(defaultEmoji);
+
+ // React.useEffect(() => {
+ // if (persona === null || persona.name === null) return;
+ // const skipWords = ["a", "the", "an", "of", "with", "holding"];
+ // const tryPickEmojis = !persona
+ // ? []
+ // : persona.name
+ // .split(" ")
+ // .filter((token) => !!token)
+ // .map((token) => token.replace(/\.$/, ""))
+ // .filter((word) => skipWords.indexOf(word.toLowerCase()) === -1)
+ // .flatMap((term) =>
+ // emojiIndex.search(term).map((o) => {
+ // return o.native;
+ // })
+ // );
+
+ // const autopickedEmoji =
+ // tryPickEmojis.length > 0 ? tryPickEmojis[0] : defaultEmoji;
+ // setSelectedEmoji(autopickedEmoji);
+ // }, [persona, setSelectedEmoji]);
+
const defaultEmoji = "❓";
const { presentAgents } = getLocationState(messages);
const [selectedEmoji, setSelectedEmoji] = React.useState(defaultEmoji);
React.useEffect(() => {
+ let characterEmoji = DefaultEmojiMapper(persona.name);
if (persona === null || persona.name === null) return;
const skipWords = ["a", "the", "an", "of", "with", "holding"];
const tryPickEmojis = !persona
? []
- : persona.name
- .split(" ")
- .filter((token) => !!token)
- .map((token) => token.replace(/\.$/, ""))
- .filter((word) => skipWords.indexOf(word.toLowerCase()) === -1)
- .flatMap((term) =>
- emojiIndex.search(term).map((o) => {
- return o.native;
- })
- );
-
+ : emojiIndex.search(characterEmoji).map((o) => {
+ return o.native;
+ });
const autopickedEmoji =
tryPickEmojis.length > 0 ? tryPickEmojis[0] : defaultEmoji;
setSelectedEmoji(autopickedEmoji);
diff --git a/deploy/web/gameapp/src/utils.js b/deploy/web/gameapp/src/utils.js
index ce4f07e07..f8f1eea79 100644
--- a/deploy/web/gameapp/src/utils.js
+++ b/deploy/web/gameapp/src/utils.js
@@ -17,3 +17,41 @@ export function setCaretPosition(elem, caretPos) {
}
}
}
+
+export const DefaultEmojiMapper = (name) => {
+ let characterName = name;
+ characterName = characterName.replace(/-/g, "_");
+ characterName = characterName.replace(/ /g, "_");
+ characterName = characterName.toLowerCase();
+ const EmojiMap = {
+ assassin: "dagger_knife",
+ assistant_chef: "hocho",
+ bandit: "crossed_swords",
+ battle_master: "trident",
+ big_sheep_like_brown_dog: "dog2",
+ bighorn_sheep: "ram",
+ butler: "bellhop_bell",
+ drunk_reeling_out_of_the_saloon: "beer",
+ fox: "fox_face",
+ goblin: "smiling_imp",
+ graveyard_keeper: "coffin",
+ groundskeeper: "seedling",
+ half_wild_cat: "tiger",
+ jailer: "old_key",
+ lady_of_the_house: "princess",
+ lord: "crown",
+ master_at_arms: "shield",
+ milk_man: "glass_of_milk",
+ monkey_friend: "monkey",
+ pig: "pig",
+ priest: "church",
+ rat: "rat",
+ serving_boy: "boy",
+ skeleton_assistant: "skull",
+ small_aggressive_looking_dog: "dog",
+ smith: "hammer",
+ town_doctor: "syringe",
+ };
+
+ return EmojiMap[characterName];
+};