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