diff --git a/deploy/web/gameapp/src/components/GlowingButton/index.js b/deploy/web/gameapp/src/components/GlowingButton/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Entry.js b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Entry.js index 580e56c15..082ab008d 100644 --- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Entry.js +++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/Entry.js @@ -7,6 +7,7 @@ import MissionCompleteMessage from "./MissionCompleteMessage"; import HelpMessage from "./HelpMessage"; import SettingMessage from "./SettingMessage"; import SoulSpawnEventMessage from "./SoulSpawnEventMessage"; +import StatusMessage from "./StatusMessage"; function get_msg_actor(msg) { if (msg.actors === undefined) { @@ -36,11 +37,15 @@ const Entry = ({ "ErrorEvent", "HelpEvent", "text", + "HealthEvent", ].includes(msg.caller) || msg.caller === null ) { if (msg.caller == "HelpEvent") { return ; + } + if (msg.caller == "HealthEvent") { + return ; } else { return ; } diff --git a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/StatusMessage.js b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/StatusMessage.js new file mode 100644 index 000000000..020ef1624 --- /dev/null +++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/StatusMessage.js @@ -0,0 +1,50 @@ +import React, { useState } from "react"; + +import { FaHeart, FaStar } from "react-icons/fa"; +import { Tooltip } from "react-tippy"; + +const StatusMessage = ({ text }) => { + let statusArr = text.split("\n"); + console.log("STATUS ARR", statusArr); + let expStats = parseInt(statusArr[0].split(":")[1]); + let rewardStats = parseInt(statusArr[1].split(":")[1]); + let strengthStats = statusArr[2]; + let sizeStats = statusArr[3]; + let toughnessStats = statusArr[4]; + let dexterityStats = statusArr[45]; + return ( +
+
+ + +
+

+ EXPERIENCE POINTS: {expStats} + + + +

+

+ REWARDS LEFT TO GIVE: {rewardStats} + + + +

+

+ {strengthStats} +

+

+ {sizeStats} +

+

+ {toughnessStats} +

+

+ {dexterityStats} +

+
+
+
+ ); +}; +export default StatusMessage; 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 a7d234e21..56ff5d8fe 100644 --- a/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css +++ b/deploy/web/gameapp/src/pages/GamePage/ChatDisplay/ChatMessages/styles.css @@ -270,3 +270,51 @@ .helpmessage-text { margin: 0 0 3px 1em; } + +/*Status Message*/ +.status-container { + display: flex; + justify-content: center; + width: 100%; + height: 20em; + z-index: 1; +} + +.status-heart__container { + position: relative; + width: 20em; + z-index: 3; +} + +.status-heart { + position: absolute; + z-index: 1; + opacity: 0.8; + left: 0.7em; +} + +.status-content { + position: absolute; + z-index: 4; + padding-top: 2.5em; + margin: 0; + width: 100%; + height: 16em; + border-color: red; + border-width: 0.2em; + border-style: solid; + background-color: #efefef; + opacity: 0.9; + border-radius: 15px; + overflow-y: hidden; + box-shadow: 4px 4px 6px black; +} + +.status-content__entry { + color: black; + z-index: 6; + text-align: center; + font-size: 14px; + font-weight: bolder; + padding-top: 1em; +} diff --git a/deploy/web/landingapp/src/pages/TutorialPage/index.js b/deploy/web/landingapp/src/pages/TutorialPage/index.js index 9766b29a0..281997c61 100644 --- a/deploy/web/landingapp/src/pages/TutorialPage/index.js +++ b/deploy/web/landingapp/src/pages/TutorialPage/index.js @@ -25,6 +25,13 @@ const TutorialPage = (props) => { + ); diff --git a/deploy/web/landingapp/src/pages/TutorialPage/styles.css b/deploy/web/landingapp/src/pages/TutorialPage/styles.css index 6908ba7f4..286e56f12 100644 --- a/deploy/web/landingapp/src/pages/TutorialPage/styles.css +++ b/deploy/web/landingapp/src/pages/TutorialPage/styles.css @@ -64,3 +64,37 @@ .tutorial-text { font-size: 1.25em; } + +@keyframes pulse { + from { + text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eef079, 0 0 20px #eef079, + 0 0 25px #eef079, 0 0 30px #eef079, 0 0 35px #eef079; + } + to { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #eef079, + 0 0 40px #eef079, 0 0 50px #eef079, 0 0 60px #eef079, 0 0 70px #eef079; + } +} + +.tutorial-button { + color: white; + font-size: 1em; + background-color: gold; + width: 5em; + text-align: center; + padding: 0.5em; + border-radius: 15px; + border-style: double; + border-color: white; + box-shadow: 1px 1px 4px black; + cursor: pointer; +} + +.tutorial-button:hover { + animation: pulse 1s infinite; +} + +.tutorial-button:active { + animation: pulse 1s infinite; + box-shadow: 0px 0px 0px black; +}