From bd901e9cb3598e2837a617c03223bb1616c596e3 Mon Sep 17 00:00:00 2001
From: Adam Balan <a-kyle@hotmail.com>
Date: Fri, 1 Nov 2024 12:58:26 -0600
Subject: [PATCH] Split up the icons and the monster section into components
 with types and deffintions

---
 .../js/phoniex/components/actions/actions.tsx | 246 +-----------------
 .../attack-buttons-container.tsx              |  12 +
 .../fight-section/attack-messages.tsx         |  47 ++++
 .../attack-message-deffinition.ts             |   6 +
 .../enums/attack-message-type.ts              |   5 +
 .../fight-section/enums/health-bar-type.ts    |   4 +
 .../fight-section/health-bar-container.tsx    |  17 ++
 .../components/fight-section/health-bar.tsx   |  54 ++++
 .../fight-section/monster-top-section.tsx     |  67 +++++
 .../types/attack-buttons-container-props.ts   |   5 +
 .../types/attack-messages-props.ts            |   5 +
 .../types/health-bar-container-props.ts       |   5 +
 .../fight-section/types/health-bar-props.ts   |   8 +
 .../types/monster-top-section-props.ts        |   7 +
 .../components/icon-section/floating-card.tsx |  29 +++
 .../icon-section/icon-container.tsx           |  14 +
 .../icon-section/types/floating-card-props.ts |   7 +
 .../types/icon-container-props.ts             |   5 +
 .../actions/partials/icon-section.tsx         |  57 ++++
 .../actions/partials/monster-section.tsx      | 100 +++++++
 20 files changed, 458 insertions(+), 242 deletions(-)
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/attack-messages.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/deffinitions/attack-message-deffinition.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/enums/attack-message-type.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/enums/health-bar-type.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/health-bar.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/types/attack-buttons-container-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/types/attack-messages-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/types/health-bar-container-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/types/health-bar-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/fight-section/types/monster-top-section-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx
 create mode 100644 resources/js/phoniex/components/actions/components/icon-section/types/floating-card-props.ts
 create mode 100644 resources/js/phoniex/components/actions/components/icon-section/types/icon-container-props.ts
 create mode 100644 resources/js/phoniex/components/actions/partials/icon-section.tsx
 create mode 100644 resources/js/phoniex/components/actions/partials/monster-section.tsx

diff --git a/resources/js/phoniex/components/actions/actions.tsx b/resources/js/phoniex/components/actions/actions.tsx
index ad7e4d696..ca9a0a84f 100644
--- a/resources/js/phoniex/components/actions/actions.tsx
+++ b/resources/js/phoniex/components/actions/actions.tsx
@@ -1,255 +1,17 @@
 import React from "react";
 import Card from "../../ui/cards/card";
-import LinkButton from "../../ui/buttons/link-button";
-import { ButtonVariant } from "../../ui/buttons/enums/button-variant-enum";
-import Button from "../../ui/buttons/button";
-import GradientButton from "../../ui/buttons/gradient-button";
-import { ButtonGradientVarient } from "../../ui/buttons/enums/button-gradient-variant";
-import Seperator from "../../ui/seperatror/seperator";
-import IconButton from "../../ui/buttons/icon-button";
+import IconSection from "./partials/icon-section";
+import MonsterSection from "./partials/monster-section";
 
 export default class Actions extends React.Component {
     render() {
         return (
             <Card>
                 <div className="w-full flex flex-col lg:flex-row">
-                    {/* Icon Container */}
-                    <div className="flex lg:flex-col items-center mx-auto w-2/3 lg:w-10 justify-between lg:items-start lg:mr-4 lg:justify-start lg:mt-3 mt-4 space-y-0 lg:space-y-2">
-                        <div className="flex lg:flex-col w-full lg:w-auto lg:space-y-2 space-x-2 lg:space-x-0 ">
-                            <IconButton
-                                label="Character"
-                                icon={
-                                    <i
-                                        className="fas fa-heart text-sm"
-                                        aria-hidden="true"
-                                    ></i>
-                                }
-                                variant={ButtonVariant.PRIMARY}
-                                on_click={() => {}}
-                                additional_css="w-full lg:w-auto"
-                            />
-                            <IconButton
-                                label="Map"
-                                icon={
-                                    <i
-                                        className="fas fa-shield-alt text-sm"
-                                        aria-hidden="true"
-                                    ></i>
-                                }
-                                variant={ButtonVariant.PRIMARY}
-                                on_click={() => {}}
-                                additional_css="w-full lg:w-auto"
-                            />
-                            <IconButton
-                                label="Craft"
-                                icon={
-                                    <i
-                                        className="fas fa-magic text-sm"
-                                        aria-hidden="true"
-                                    ></i>
-                                }
-                                variant={ButtonVariant.PRIMARY}
-                                on_click={() => {}}
-                                additional_css="w-full lg:w-auto"
-                            />
+                    <IconSection />
 
-                            <div className="hidden lg:block absolute top-8 left-36 ml-4 shadow-lg rounded-sm border border-gray-500 dark:border-gray-700 w-[28rem] z-10 max-w-none text-black dark:text-gray-300">
-                                <div className="bg-gray-400 dark:bg-gray-700 border-b-2 border-b-gray-500 dark:border-b-gray-600 px-4 py-3 flex items-center justify-between">
-                                    <h3 className="text-lg font-semibold mb-0">
-                                        Basic Card
-                                    </h3>
-                                    <button
-                                        className="p-0 bg-transparent border-none cursor-pointer"
-                                        onClick={() => {
-                                            console.log("Close button clicked");
-                                        }}
-                                        aria-label="Close"
-                                    >
-                                        <i
-                                            className="fas fa-times-circle text-rose-600 dark:text-rose-500 rounded-full text-lg p-1"
-                                            aria-hidden="true"
-                                        ></i>
-                                    </button>
-                                </div>
-                                <div className="p-4 bg-gray-200 dark:bg-gray-600">
-                                    <p>
-                                        This is a simple card content area. It
-                                        will grow as needed.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Content Area */}
                     <div className="flex flex-col items-center lg:items-start w-full">
-                        <img
-                            src="https://placecats.com/250/250"
-                            alt="A cute cat"
-                            className="
-                                mx-auto mt-4 rounded-md drop-shadow-md
-                                sm:w-64 lg:w-72 lg:w-80 xl:w-96
-                                transition-all duration-300 ease-in-out transform hover:scale-105
-                                dark:drop-shadow-lg dark:border dark:border-gray-700 dark:bg-gray-800
-                                focus:outline-none focus:ring-2 focus:ring-danube-500 focus:ring-offset-2 focus:ring-offset-white
-                            "
-                        />
-                        <div
-                            className="
-                                mx-auto mt-4 flex items-center justify-center
-                                w-full lg:w-1/3 gap-x-3 text-lg leading-none
-                            "
-                        >
-                            <i
-                                className="fas fa-chevron-circle-left text-xl"
-                                aria-hidden="true"
-                            ></i>
-                            <span className="font-semibold">Monster Name</span>
-                            <i
-                                className="fas fa-chevron-circle-right text-xl"
-                                aria-hidden="true"
-                            ></i>
-                        </div>
-                        <div
-                            className="
-                                mx-auto mt-4 flex items-center justify-center
-                                w-full lg:w-1/3 gap-x-3 text-lg leading-none
-                            "
-                        >
-                            <LinkButton
-                                label="View Stats"
-                                variant={ButtonVariant.PRIMARY}
-                                on_click={() => {}}
-                            />
-                        </div>
-                        <div
-                            className="
-                                w-full lg:w-2/3 mx-auto mt-4 flex items-center justify-center
-                                gap-x-3 text-lg leading-none
-                            "
-                        >
-                            <div className="w-full lg:w-1/3">
-                                <div className="space-y-2 mb-4">
-                                    <div className="flex justify-between text-sm font-medium text-gray-800 dark:text-gray-200">
-                                        <span
-                                            id="character-name"
-                                            className="sr-only"
-                                        >
-                                            Monster Name
-                                        </span>
-                                        <span>Monster Name</span>
-                                        <span
-                                            aria-labelledby="character-name"
-                                            aria-live="polite"
-                                        >
-                                            100/100
-                                        </span>
-                                    </div>
-                                    <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2">
-                                        <div
-                                            className="bg-rose-600 dark:bg-rose-500 rounded-full h-full"
-                                            style={{ width: "100%" }}
-                                            role="progressbar"
-                                            aria-valuenow={100}
-                                            aria-valuemin={0}
-                                            aria-valuemax={100}
-                                        ></div>
-                                    </div>
-                                </div>
-                                <div className="space-y-2 mb-4">
-                                    <div className="flex justify-between text-sm font-medium text-gray-800 dark:text-gray-200">
-                                        <span
-                                            id="character-name"
-                                            className="sr-only"
-                                        >
-                                            Character Name
-                                        </span>
-                                        <span>Character Name</span>
-                                        <span
-                                            aria-labelledby="character-name"
-                                            aria-live="polite"
-                                        >
-                                            100/100
-                                        </span>
-                                    </div>
-                                    <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2">
-                                        <div
-                                            className="bg-emerald-600 dark:bg-emerald-500 rounded-full h-full"
-                                            style={{ width: "100%" }}
-                                            role="progressbar"
-                                            aria-valuenow={100}
-                                            aria-valuemin={0}
-                                            aria-valuemax={100}
-                                        ></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
-                            <Button
-                                label="Attack"
-                                variant={ButtonVariant.PRIMARY}
-                                additional_css="w-full lg:w-1/3"
-                                on_click={() => {}}
-                            />
-                            <Button
-                                label="Cast"
-                                variant={ButtonVariant.PRIMARY}
-                                additional_css="w-full lg:w-1/3"
-                                on_click={() => {}}
-                            />
-                        </div>
-
-                        <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
-                            <GradientButton
-                                label="Atk & Cast"
-                                gradient={
-                                    ButtonGradientVarient.DANGER_TO_PRIMARY
-                                }
-                                additional_css="w-full lg:w-1/3"
-                                on_click={() => {}}
-                            />
-                            <GradientButton
-                                label="Cast & Atk"
-                                gradient={
-                                    ButtonGradientVarient.PRIMARY_TO_DANGER
-                                }
-                                additional_css="w-full lg:w-1/3"
-                                on_click={() => {}}
-                            />
-                        </div>
-
-                        <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
-                            <Button
-                                label="Defend"
-                                variant={ButtonVariant.PRIMARY}
-                                additional_css="w-full lg:w-1/3"
-                                on_click={() => {}}
-                            />
-                        </div>
-
-                        <Seperator additional_css="w-full lg:w-1/5 mx-auto my-6" />
-                        <div
-                            className="
-                                mx-auto mt-4 flex items-center justify-center
-                                w-full lg:w-2/3 gap-x-3 text-lg leading-none
-                            "
-                        >
-                            <div className="w-full lg:w-1/2 text-center italic space-y-2">
-                                <div className="text-emerald-700 dark:text-emerald-500">
-                                    You hit for 5,000 Damage!
-                                </div>
-                                <div className="text-danube-700 dark:text-danube-500">
-                                    Your enchantments glow with rage!
-                                </div>
-                                <div className="text-emerald-700 dark:text-emerald-500">
-                                    You hit for 5,000 Enchanted Damage!
-                                </div>
-                                <div className="text-rose-700 dark:text-rose-500">
-                                    Your enemy hits you for 50,000 Damage!
-                                </div>
-                            </div>
-                        </div>
+                        <MonsterSection />
                     </div>
                 </div>
             </Card>
diff --git a/resources/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx b/resources/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx
new file mode 100644
index 000000000..2b6774cad
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import AttackButtonsContainerProps from "./types/attack-buttons-container-props";
+
+export default class AttackButtonsContainer extends React.Component<AttackButtonsContainerProps> {
+    render() {
+        return (
+            <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
+                {this.props.children}
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/attack-messages.tsx b/resources/js/phoniex/components/actions/components/fight-section/attack-messages.tsx
new file mode 100644
index 000000000..b14831410
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/attack-messages.tsx
@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+import AttackMessagesProps from "./types/attack-messages-props";
+import AttackMessageDeffintion from "./deffinitions/attack-message-deffinition";
+import { AttackMessageType } from "./enums/attack-message-type";
+import { match } from "ts-pattern";
+
+export default class AttackMessages extends React.Component<AttackMessagesProps> {
+    renderMessages(): ReactNode[] | [] {
+        return this.props.messages.map((message: AttackMessageDeffintion) => {
+            const messageColor = this.fetchColorForType(message.type);
+
+            return <div className={messageColor}>{message.message}</div>;
+        });
+    }
+
+    fetchColorForType(type: AttackMessageType): string {
+        return match(type)
+            .with(
+                AttackMessageType.ENEMY_ATTACK,
+                () => "text-rose-700 dark:text-rose-500",
+            )
+            .with(
+                AttackMessageType.PLAYER_ATTACK,
+                () => "text-emerald-700 dark:text-emerald-500",
+            )
+            .with(
+                AttackMessageType.REGULAR,
+                () => "text-danube-700 dark:text-danube-500",
+            )
+            .otherwise(() => "");
+    }
+
+    render() {
+        return (
+            <div
+                className="
+                    mx-auto mt-4 flex items-center justify-center
+                    w-full lg:w-2/3 gap-x-3 text-lg leading-none
+                "
+            >
+                <div className="w-full lg:w-1/2 text-center italic space-y-2">
+                    {this.renderMessages()}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/deffinitions/attack-message-deffinition.ts b/resources/js/phoniex/components/actions/components/fight-section/deffinitions/attack-message-deffinition.ts
new file mode 100644
index 000000000..72e8770d3
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/deffinitions/attack-message-deffinition.ts
@@ -0,0 +1,6 @@
+import { AttackMessageType } from "../enums/attack-message-type";
+
+export default interface AttackMessageDeffintion {
+    message: string;
+    type: AttackMessageType;
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/enums/attack-message-type.ts b/resources/js/phoniex/components/actions/components/fight-section/enums/attack-message-type.ts
new file mode 100644
index 000000000..d93e6fbc9
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/enums/attack-message-type.ts
@@ -0,0 +1,5 @@
+export enum AttackMessageType {
+    PLAYER_ATTACK = "player-attack",
+    ENEMY_ATTACK = "enemy-attack",
+    REGULAR = "regular",
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/enums/health-bar-type.ts b/resources/js/phoniex/components/actions/components/fight-section/enums/health-bar-type.ts
new file mode 100644
index 000000000..f7ca77388
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/enums/health-bar-type.ts
@@ -0,0 +1,4 @@
+export enum HealthBarType {
+    ENEMY,
+    PLAYER,
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx b/resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx
new file mode 100644
index 000000000..58a152d10
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import HealthBarContainerProps from "./types/health-bar-container-props";
+
+export default class HealthBarContainer extends React.Component<HealthBarContainerProps> {
+    render() {
+        return (
+            <div
+                className="
+                    w-full lg:w-2/3 mx-auto mt-4 flex items-center justify-center
+                    gap-x-3 text-lg leading-none
+                "
+            >
+                <div className="w-full lg:w-1/3">{this.props.children}</div>
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/health-bar.tsx b/resources/js/phoniex/components/actions/components/fight-section/health-bar.tsx
new file mode 100644
index 000000000..3ccad2d57
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/health-bar.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import HealthBarProps from "./types/health-bar-props";
+import { match } from "ts-pattern";
+import { HealthBarType } from "./enums/health-bar-type";
+import clsx from "clsx";
+
+export default class HealthBar extends React.Component<HealthBarProps> {
+    healthBarPercentage() {
+        return (
+            (this.props.current_health / this.props.max_health) *
+            100
+        ).toFixed(0);
+    }
+
+    fetchColor(): string {
+        console.log(this.props.health_bar_type);
+        return match(this.props.health_bar_type)
+            .with(HealthBarType.ENEMY, () => "bg-rose-600 dark:bg-rose-500")
+            .with(
+                HealthBarType.PLAYER,
+                () => "bg-emerald-600 dark:bg-emerald-500",
+            )
+            .otherwise(() => "");
+    }
+
+    render() {
+        return (
+            <div className="space-y-2 mb-4">
+                <div className="flex justify-between text-sm font-medium text-gray-800 dark:text-gray-200">
+                    <span id="character-name" className="sr-only">
+                        {this.props.name}
+                    </span>
+                    <span>{this.props.name}</span>
+                    <span aria-labelledby="character-name" aria-live="polite">
+                        {this.props.current_health}/{this.props.max_health}
+                    </span>
+                </div>
+                <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2">
+                    <div
+                        className={clsx(
+                            this.fetchColor(),
+                            "rounded-full h-full",
+                        )}
+                        style={{ width: this.healthBarPercentage() + "%" }}
+                        role="progressbar"
+                        aria-valuenow={this.props.current_health}
+                        aria-valuemin={0}
+                        aria-valuemax={this.props.max_health}
+                    ></div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx b/resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx
new file mode 100644
index 000000000..9d7cd5373
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import LinkButton from "../../../../ui/buttons/link-button";
+import { ButtonVariant } from "../../../../ui/buttons/enums/button-variant-enum";
+import MonsterTopSectionProps from "./types/monster-top-section-props";
+
+export default class MonsterTopSection extends React.Component<MonsterTopSectionProps> {
+    render() {
+        return (
+            <>
+                <img
+                    src={this.props.img_src}
+                    alt="A cute cat"
+                    className="
+                        mx-auto mt-4 rounded-md drop-shadow-md
+                        sm:w-64 md:w-72 lg:w-80 xl:w-96
+                        transition-all duration-300 ease-in-out transform hover:scale-105
+                        dark:drop-shadow-lg dark:border dark:border-gray-700 dark:bg-gray-800
+                        focus:outline-none focus:ring-2 focus:ring-danube-500 focus:ring-offset-2 focus:ring-offset-white
+                    "
+                />
+                <div
+                    className="
+                        mx-auto mt-4 flex items-center justify-center
+                        w-full lg:w-1/3 gap-x-3 text-lg leading-none
+                    "
+                >
+                    <button
+                        className="text-xl"
+                        aria-label="Previous"
+                        onClick={() => this.props.next_action(1)}
+                    >
+                        <i
+                            className="fas fa-chevron-circle-left"
+                            aria-hidden="true"
+                        ></i>
+                    </button>
+                    <span className="font-semibold">
+                        {this.props.monster_name}
+                    </span>
+                    <button
+                        className="text-xl"
+                        aria-label="Next"
+                        onClick={() => this.props.prev_action(1)}
+                    >
+                        <i
+                            className="fas fa-chevron-circle-right"
+                            aria-hidden="true"
+                        ></i>
+                    </button>
+                </div>
+
+                <div
+                    className="
+                        mx-auto mt-4 flex items-center justify-center
+                        w-full lg:w-1/3 gap-x-3 text-lg leading-none
+                    "
+                >
+                    <LinkButton
+                        label="View Stats"
+                        variant={ButtonVariant.PRIMARY}
+                        on_click={() => this.props.view_stats_action(1)}
+                    />
+                </div>
+            </>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/types/attack-buttons-container-props.ts b/resources/js/phoniex/components/actions/components/fight-section/types/attack-buttons-container-props.ts
new file mode 100644
index 000000000..a59156f3c
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/types/attack-buttons-container-props.ts
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default interface AttackButtonsContainerProps {
+    children: ReactNode | ReactNode[];
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/types/attack-messages-props.ts b/resources/js/phoniex/components/actions/components/fight-section/types/attack-messages-props.ts
new file mode 100644
index 000000000..3d2227893
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/types/attack-messages-props.ts
@@ -0,0 +1,5 @@
+import AttackMessageDeffintion from "../deffinitions/attack-message-deffinition";
+
+export default interface AttackMessagesProps {
+    messages: AttackMessageDeffintion[] | [];
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-container-props.ts b/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-container-props.ts
new file mode 100644
index 000000000..7f613c026
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-container-props.ts
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default interface HealthBarContainerProps {
+    children: ReactNode[] | [];
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-props.ts b/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-props.ts
new file mode 100644
index 000000000..c04c66543
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/types/health-bar-props.ts
@@ -0,0 +1,8 @@
+import { HealthBarType } from "../enums/health-bar-type";
+
+export default interface HealthBarProps {
+    name: string;
+    current_health: number;
+    max_health: number;
+    health_bar_type: HealthBarType;
+}
diff --git a/resources/js/phoniex/components/actions/components/fight-section/types/monster-top-section-props.ts b/resources/js/phoniex/components/actions/components/fight-section/types/monster-top-section-props.ts
new file mode 100644
index 000000000..eccd36d4f
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/fight-section/types/monster-top-section-props.ts
@@ -0,0 +1,7 @@
+export default interface MonsterTopSectionProps {
+    img_src: string;
+    monster_name: string;
+    next_action: (currentIndex: number) => {};
+    prev_action: (currentIndex: number) => {};
+    view_stats_action: (monsterId: number) => {};
+}
diff --git a/resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx b/resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx
new file mode 100644
index 000000000..d7ae55f67
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import FloatingCardProps from "./types/floating-card-props";
+
+export default class FloatingCard extends React.Component<FloatingCardProps> {
+    render() {
+        return (
+            <div className="hidden lg:block absolute top-8 left-36 ml-4 shadow-lg rounded-sm border border-gray-500 dark:border-gray-700 w-[28rem] z-10 max-w-none text-black dark:text-gray-300">
+                <div className="bg-gray-400 dark:bg-gray-700 border-b-2 border-b-gray-500 dark:border-b-gray-600 px-4 py-3 flex items-center justify-between">
+                    <h3 className="text-lg font-semibold mb-0">
+                        {this.props.title}
+                    </h3>
+                    <button
+                        className="p-0 bg-transparent border-none cursor-pointer"
+                        onClick={this.props.close_action}
+                        aria-label="Close"
+                    >
+                        <i
+                            className="fas fa-times-circle text-rose-600 dark:text-rose-500 rounded-full text-lg p-1"
+                            aria-hidden="true"
+                        ></i>
+                    </button>
+                </div>
+                <div className="p-4 bg-gray-200 dark:bg-gray-600">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx b/resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx
new file mode 100644
index 000000000..04f358fde
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import IconContainerProps from "./types/icon-container-props";
+
+export default class IconContainer extends React.Component<IconContainerProps> {
+    render() {
+        return (
+            <div className="flex lg:flex-col items-center mx-auto w-2/3 lg:w-10 justify-between lg:items-start lg:mr-4 lg:justify-start lg:mt-3 mt-4 space-y-0 lg:space-y-2">
+                <div className="flex lg:flex-col w-full lg:w-auto lg:space-y-2 space-x-2 lg:space-x-0 ">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/components/icon-section/types/floating-card-props.ts b/resources/js/phoniex/components/actions/components/icon-section/types/floating-card-props.ts
new file mode 100644
index 000000000..8e680ab57
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/icon-section/types/floating-card-props.ts
@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+export default interface FloatingCardProps {
+    title: string;
+    close_action: () => void;
+    children: ReactNode | ReactNode[];
+}
diff --git a/resources/js/phoniex/components/actions/components/icon-section/types/icon-container-props.ts b/resources/js/phoniex/components/actions/components/icon-section/types/icon-container-props.ts
new file mode 100644
index 000000000..f7d6b91f0
--- /dev/null
+++ b/resources/js/phoniex/components/actions/components/icon-section/types/icon-container-props.ts
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default interface IconContainerProps {
+    children: ReactNode | ReactNode[];
+}
diff --git a/resources/js/phoniex/components/actions/partials/icon-section.tsx b/resources/js/phoniex/components/actions/partials/icon-section.tsx
new file mode 100644
index 000000000..0b0f3750f
--- /dev/null
+++ b/resources/js/phoniex/components/actions/partials/icon-section.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import IconContainer from "../components/icon-section/icon-container";
+import IconButton from "../../../ui/buttons/icon-button";
+import { ButtonVariant } from "../../../ui/buttons/enums/button-variant-enum";
+import FloatingCard from "../components/icon-section/floating-card";
+
+export default class IconSection extends React.Component {
+    render() {
+        return (
+            <IconContainer>
+                <IconButton
+                    label="Character"
+                    icon={
+                        <i
+                            className="fas fa-heart text-sm"
+                            aria-hidden="true"
+                        ></i>
+                    }
+                    variant={ButtonVariant.PRIMARY}
+                    on_click={() => {}}
+                    additional_css="w-full lg:w-auto"
+                />
+                <IconButton
+                    label="Map"
+                    icon={
+                        <i
+                            className="fas fa-shield-alt text-sm"
+                            aria-hidden="true"
+                        ></i>
+                    }
+                    variant={ButtonVariant.PRIMARY}
+                    on_click={() => {}}
+                    additional_css="w-full lg:w-auto"
+                />
+                <IconButton
+                    label="Craft"
+                    icon={
+                        <i
+                            className="fas fa-magic text-sm"
+                            aria-hidden="true"
+                        ></i>
+                    }
+                    variant={ButtonVariant.PRIMARY}
+                    on_click={() => {}}
+                    additional_css="w-full lg:w-auto"
+                />
+
+                <FloatingCard title="Floating Card" close_action={() => {}}>
+                    <p>
+                        This is a simple card content area. It will grow as
+                        needed.
+                    </p>
+                </FloatingCard>
+            </IconContainer>
+        );
+    }
+}
diff --git a/resources/js/phoniex/components/actions/partials/monster-section.tsx b/resources/js/phoniex/components/actions/partials/monster-section.tsx
new file mode 100644
index 000000000..5374b6075
--- /dev/null
+++ b/resources/js/phoniex/components/actions/partials/monster-section.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import MonsterTopSection from "../components/fight-section/monster-top-section";
+import AttackButtonsContainer from "../components/fight-section/attack-buttons-container";
+import HealthBarContainer from "../components/fight-section/health-bar-container";
+import HealthBar from "../components/fight-section/health-bar";
+import { HealthBarType } from "../components/fight-section/enums/health-bar-type";
+import Button from "../../../ui/buttons/button";
+import { ButtonVariant } from "../../../ui/buttons/enums/button-variant-enum";
+import GradientButton from "../../../ui/buttons/gradient-button";
+import { ButtonGradientVarient } from "../../../ui/buttons/enums/button-gradient-variant";
+import Seperator from "../../../ui/seperatror/seperator";
+import AttackMessages from "../components/fight-section/attack-messages";
+import AttackMessageDeffintion from "../components/fight-section/deffinitions/attack-message-deffinition";
+import { AttackMessageType } from "../components/fight-section/enums/attack-message-type";
+
+export default class MonsterSection extends React.Component {
+    messages(): AttackMessageDeffintion[] {
+        return [
+            {
+                message: "You Attack for 150,000 Damage!",
+                type: AttackMessageType.PLAYER_ATTACK,
+            },
+            {
+                message: "Your spells charge and magic crackles in the air!",
+                type: AttackMessageType.REGULAR,
+            },
+            {
+                message:
+                    "The enemy stops your spells and attack you for 125,000 Damage",
+                type: AttackMessageType.ENEMY_ATTACK,
+            },
+        ];
+    }
+
+    render() {
+        return (
+            <>
+                <MonsterTopSection
+                    img_src="https://placecats.com/250/250"
+                    next_action={() => (currentIndex: number) => {}}
+                    prev_action={() => (currentIndex: number) => {}}
+                    view_stats_action={() => (monsterId: number) => {}}
+                    monster_name="Sewer Rat"
+                />
+                <HealthBarContainer>
+                    <HealthBar
+                        current_health={100}
+                        max_health={100}
+                        name="Sewer Rat"
+                        health_bar_type={HealthBarType.ENEMY}
+                    />
+                    <HealthBar
+                        current_health={100}
+                        max_health={100}
+                        name="Credence"
+                        health_bar_type={HealthBarType.PLAYER}
+                    />
+                </HealthBarContainer>
+                <AttackButtonsContainer>
+                    <Button
+                        label="Attack"
+                        variant={ButtonVariant.PRIMARY}
+                        additional_css="w-full lg:w-1/3"
+                        on_click={() => {}}
+                    />
+                    <Button
+                        label="Cast"
+                        variant={ButtonVariant.PRIMARY}
+                        additional_css="w-full lg:w-1/3"
+                        on_click={() => {}}
+                    />
+                </AttackButtonsContainer>
+                <AttackButtonsContainer>
+                    <GradientButton
+                        label="Atk & Cast"
+                        gradient={ButtonGradientVarient.DANGER_TO_PRIMARY}
+                        additional_css="w-full lg:w-1/3"
+                        on_click={() => {}}
+                    />
+                    <GradientButton
+                        label="Cast & Atk"
+                        gradient={ButtonGradientVarient.PRIMARY_TO_DANGER}
+                        additional_css="w-full lg:w-1/3"
+                        on_click={() => {}}
+                    />
+                </AttackButtonsContainer>
+                <AttackButtonsContainer>
+                    <Button
+                        label="Defend"
+                        variant={ButtonVariant.PRIMARY}
+                        additional_css="w-full lg:w-1/3"
+                        on_click={() => {}}
+                    />
+                </AttackButtonsContainer>
+                <Seperator additional_css="w-full lg:w-1/5 mx-auto my-6" />
+                <AttackMessages messages={this.messages()} />
+            </>
+        );
+    }
+}