Pre alpha fixes3

deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Message.js

@@ -163,7 +163,13 @@ const Message = ({
     <div className={classNames}>
       {actor ? (
         <div className="agent">
-          <span style={{ fontFamily: "fantasy" }}>
+          <span
+            style={{
+              fontFamily: "fantasy",
+              fontSize: "1em",
+              marginRight: "50px",
+            }}
+          >
             {actor ? actor.toUpperCase() : null}
           </span>
           {isSelf ? (
@@ -182,9 +188,11 @@ const Message = ({
                         fontFamily: "fantasy",
                         backgroundColor: "white",
                         color: "gold",
+                        position: "relative",
+                        paddingLeft: "40px",
                       }}
                     >
-                      <p style={{ display: "inline" }}>{xp}</p>
+                      <p id="message-star__number">{xp}</p>
                       <i className="fa fa-star message-star" />
                     </span>
                   </Tooltip>
@@ -193,7 +201,7 @@ const Message = ({
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <span style={{ backgroundColor: "white" }}>
+              <span style={{ backgroundColor: "white", position: "inline" }}>
                 <Tooltip
                   title={
                     playerGiftXp > 0
@@ -202,14 +210,29 @@ const Message = ({
                   }
                   position="top"
                 >
-                  {isLiked ? (
-                    <i className="fa fa-star message-star" />
-                  ) : (
-                    <i className="fa fa-star-o" onClick={likeHandler} />
-                  )}
+                  <div style={{ position: "relative", marginRight: "150%" }}>
+                    {isLiked ? (
+                      <i className="fa fa-star message-star" />
+                    ) : (
+                      <i
+                        className="fa fa-star-o"
+                        style={{
+                          position: "absolute",
+                          top: "5%",
+                          right: "1%",
+                          fontSize: "2em",
+                        }}
+                        onClick={likeHandler}
+                      />
+                    )}
+                  </div>
                 </Tooltip>{" "}
                 <Tooltip title={`tell ${actor}...`} position="top">
-                  <i className="fa fa-reply" onClick={() => onReply(actor)} />
+                  <i
+                    style={{ fontSize: "2em" }}
+                    className="fa fa-reply"
+                    onClick={() => onReply(actor)}
+                  />
                 </Tooltip>{" "}
                 {/* <Tooltip
                   title={`Do you think something else should have been said instead? Provide feedback via an edit...`}
@@ -225,6 +248,7 @@ const Message = ({
                   position="top"
                 >
                   <i
+                    style={{ fontSize: "2em" }}
                     className="fa fa-flag "
                     onClick={() => setReportMode(true)}
                   />

deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/SoulSpawnEventMessage.js

@@ -30,23 +30,13 @@ const SoulSpawnEventMessage = ({
     <div id="soulspawn" className="soulspawn-container message type-setting">
       <p className="soulspawn-text soulspawn-star">{StarShine1}</p>
       <p className="soulspawn-header">Let there be LIGHT</p>
+      <h5 className="soulspawn-subheader">YOUR CHARACTER</h5>
       <p className="soulspawn-text">{Character}</p>
       <p></p>
       <p className="soulspawn-text" style={{ padding: "0 3em 0 3em" }}>
         {Description}
       </p>
-      <h5
-        className="soulspawn-text"
-        style={{
-          textDecoration: "underline",
-          marginBottom: "0",
-          fontFamily: "fantasy",
-          fontWeight: "900",
-          fontSize: "18px",
-        }}
-      >
-        YOUR MISSION
-      </h5>
+      <h5 className="soulspawn-subheader">YOUR MISSION</h5>
       <p className="soulspawn-text">{MissionDesc}</p>
       <p className="soulspawn-text soulspawn-star">{StarShine1}</p>
     </div>

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;

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} ""`;

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);

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];
+};