Status entry

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 <HelpMessage text={msg.text} />;
+    }
+    if (msg.caller == "HealthEvent") {
+      return <StatusMessage text={msg.text} />;
     } else {
       return <SettingMessage text={msg.text} />;
     }

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 (
+    <div className=" status-container">
+      <div className="status-heart__container">
+        <FaHeart className="status-heart" color="red" size="19em" />
+
+        <div className="status-content">
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            EXPERIENCE POINTS: {expStats}
+            <span>
+              <FaStar color="yellow" />
+            </span>
+          </p>
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            REWARDS LEFT TO GIVE: {rewardStats}
+            <span>
+              <FaStar color="yellow" />
+            </span>
+          </p>
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            {strengthStats}
+          </p>
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            {sizeStats}
+          </p>
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            {toughnessStats}
+          </p>
+          <p className="status-content__entry" style={{ marginTop: "1px" }}>
+            {dexterityStats}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default StatusMessage;

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

deploy/web/landingapp/src/pages/TutorialPage/index.js

@@ -25,6 +25,13 @@ const TutorialPage = (props) => {
         <CharacterBasics />
         <InteractingWithTheWorld />
         <Actions />
+        <div
+          style={{ width: "100%", display: "flex", justifyContent: "center" }}
+        >
+          <a style={{ textDecoration: "none" }} href="/play/">
+            <div className="tutorial-button ">PLAY LIGHT</div>
+          </a>
+        </div>
       </div>
     </div>
   );

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