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