polishing onboarding tutorials

ui/src/app/components/interlude/Hints.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { ItemsTutorial } from "../tutorial/ItemsTutorial";
 import { UpgradeTutorial } from "../tutorial/UpgradeTutorial";
-import { EfficacyHint } from "../tutorial/EfficaciesTutorial";
-import { UnlocksTutorial } from "../tutorial/UnlocksTutorial";
+import { EfficacyHint } from "../tutorial/ElementalTutorial";
+import { UnlocksTutorial } from "../tutorial/ItemSpecialsTutorial";
 import { ExploreTutorial } from "../tutorial/ExploreTutorial";
 import { StrategyTutorial } from "../tutorial/StrategyTutorial";
 import RowLoader from "../animations/RowLoader";

ui/src/app/components/tutorial/EfficaciesTutorial.tsx → ui/src/app/components/tutorial/ElementalTutorial.tsx

@@ -3,11 +3,10 @@ import { efficacyData } from "@/app/lib/constants";
 export const EfficacyHint = () => {
   return (
     <div className="flex flex-col gap-2 uppercase items-center text-center h-full">
-      <h3 className="mt-0 uppercase">Efficacies</h3>
+      <h3 className="mt-0 uppercase">Elemental</h3>
       <div className="flex flex-col gap-5">
         <p className="sm:text-2xl">
-          Understanding the efficacy chart is vital for surviving through
-          combat!
+          Understanding weapon and armor elemental is vital to survival
         </p>
         <table className="uppercase whitespace-nowrap border border-terminal-green text-sm">
           <thead>

ui/src/app/components/tutorial/ExploreTutorial.tsx

@@ -1,21 +1,18 @@
 export const ExploreTutorial = () => {
   return (
     <div className="flex flex-col gap-5 uppercase items-center text-center h-full">
-      <h3 className="mt-0">Explore</h3>
-      <p className="text-sm sm:text-lg mb-2">
-        During your exploration, you will discovery many things. They include:
-      </p>
+      <h3 className="mt-0">Exploration</h3>
+
       <ul className="text-sm sm:text-lg">
         <li>
-          Beasts - 75 different beasts with various levels and health will lock
-          you in a battle. Fight or Flee to survive!
+          Beasts: There are 75 beasts, each with a fixed tier and elemental type. The level and health of the beasts will vary based on the Adventurer&apos;s level. Defeating a beast provides gold and xp.
         </li>
         <li>
-          Obstacles - 75 different obstacles that will give damage unless they
-          are avoided!
+          Obstacles: There are 75 obstacles, each with a fixed tier and elemental type. The level of the obstacles will vary based on the adventurer&apos;s level. You either dodge the obstacle or take damage.
+        </li>
+        <li>
+          In addition to Beasts and Obstacles, you can find Gold and Health during your explorations.
         </li>
-        <li>Gold - A random amount of gold will be added to your balance</li>
-        <li>Health Potions - Instant injection of a random amount</li>
       </ul>
     </div>
   );

ui/src/app/components/tutorial/ItemSpecialsTutorial.tsx

@@ -0,0 +1,23 @@
+export const UnlocksTutorial = () => {
+  return (
+    <div className="flex flex-col gap-2 uppercase items-center text-center h-full">
+      <h3 className="mt-0">Item Specials</h3>
+
+      <p className="sm:text-lg">
+        Loot items receive special abilities upon reaching greatness level 15, 19, and 20.
+      </p>
+
+      <p className="sm:text-lg">
+        G15: Special suffix such as &quot;Of Power&quot;. There are sixteen unique suffixes, with each providing a unique set of stat boosts.
+      </p>
+
+      <p className="sm:text-lg">
+        G19: Two part prefix such as &quot;Agony Bane&quot; that can provide significant damage bonus when used properly.
+      </p>
+
+      <p className="sm:text-lg">
+        G20: Adventurer receives a permenant stat upgrade equvialent to leveling up.
+      </p>
+    </div>
+  );
+};

ui/src/app/components/tutorial/ItemsTutorial.tsx

@@ -3,10 +3,10 @@ import LootIcon from "../icons/LootIcon";
 export const ItemsTutorial = () => {
   return (
     <div className="flex flex-col gap-5 uppercase items-center text-center h-full">
-      <h3 className="mt-0">Loot Items</h3>
+      <h3 className="mt-0">Items</h3>
 
       <p className="sm:text-lg">
-        There are 101 of the original Loot Items to choose when upgrading!
+        Loot Survivor uses the 101 Loot items
       </p>
 
       <div className="flex flex-row gap-2">
@@ -21,12 +21,7 @@ export const ItemsTutorial = () => {
       </div>
 
       <p className="sm:text-xl sm:text-lg">
-        They are ranked from Tier 1 (strongest) - 5 (weakest).
-      </p>
-
-      <p className="sm:text-lg">
-        Be wise when choosing the strength of your gear, the higher tier items
-        are costly! Charisma will reduce the amount you pay during upgrading!
+        Items are ranked from Tier 1 (strongest) to Tier 5 (weakest)
       </p>
     </div>
   );

ui/src/app/components/tutorial/StrategyTutorial.tsx

@@ -1,18 +1,15 @@
 export const StrategyTutorial = () => {
   return (
     <div className="flex flex-col gap-5 uppercase items-center text-center h-full">
-      <h3 className="mt-0">Strategies</h3>
+      <h3 className="mt-0">Basic Strategy</h3>
       <p className="sm:text-lg">
-        You can carry up to 19 items, dropping and swapping is key to a good
-        score. You will be able to do this in the adventurer card or inventory.
+        If you are attacked in a location without armor, the damage will be substantial. Consider getting armor early, even if it means using lower tier armor.
       </p>
       <p className="sm:text-lg">
-        You will spawn with 9 random stats, then it is up to you to decide your
-        build! Each stat has an importance to survival, there is no rule book.
+        Elemental significantly impacts damage. Consider purchasing differnt types of weapons and armor to maximize damage and minimize damage taken.
       </p>
       <p className="sm:text-lg">
-        Think but be quick, there isn&apos;t much time before the idle death
-        penalty will get you!
+        Without dexterity, you cannot flee beasts. Without intelligence, you will take damage from every obstacle. Without wisdom, beasts will always ambush and attack before you are prepared.
       </p>
     </div>
   );

ui/src/app/components/tutorial/UpgradeTutorial.tsx

@@ -1,29 +1,27 @@
 export const UpgradeTutorial = () => {
   return (
     <div className="flex flex-col uppercase items-center text-center h-full">
-      <h3 className="mt-0">Upgrades</h3>
+      <h3 className="mt-0">Adventurer Upgrades</h3>
       <p className="sm:text-lg">
-        Whenever your adventurer levels up they will be able to upgrade and
-        boost their power!
+        At the start of each level, you get the option to ugprade stats and purchase items
       </p>
       <div className="flex flex-col gap-2">
         <div className="flex flex-col">
-          <p className="text-lg sm:text-2xl">Upgrade Stats</p>
+          <p className="text-lg sm:text-2xl">Stats</p>
           <p className="sm:text-lg">
-            Adventurer can choose to upgrade 6 different stats.
+            Adventurer&apos;s receive one stat upgrade each time they level up or get an item to greatness 20.
           </p>
         </div>
         <div className="flex flex-col">
-          <p className="text-lg sm:text-2xl">Health Potions</p>
+          <p className="text-lg sm:text-2xl">Health</p>
           <p className="text-sm sm:text-lg">
-            Health potions give 10hp. Potion cost will rise as your journey
-            continues.
+            Use potions to replenish your health. The cost of potions increases each level, invest in Charisma to keep the cost down.
           </p>
         </div>
         <div className="flex flex-col">
-          <p className="text-lg sm:text-2xl">Loot Fountain</p>
+          <p className="text-lg sm:text-2xl">Items</p>
           <p className="sm:text-lg">
-            20 Loot Items will be available for each level.
+            Adventurer&apos;s have access to a random selection of items each level. Similar to potions, Charisma provides a discount on items.
           </p>
         </div>
       </div>