style fixes

resources/js/game/sections/game-actions-section/actions.tsx

@@ -362,7 +362,7 @@ export default class Actions extends React.Component<
                             <PrimaryOutlineButton
                                 button_label={"Try new UI"}
                                 on_click={this.props.manage_show_new_ui}
-                                additional_css={'w-full'}
+                                additional_css={"w-full"}
                             />
                         </div>
 

resources/js/phoniex/components/character-sheet/character-sheet.tsx

@@ -8,8 +8,6 @@ export default class CharacterSheet extends React.Component<CharacterSheetProps>
     }
 
     render() {
-        return (
-            'Character Sheet Content ...'
-        )
+        return "Character Sheet Content ...";
     }
 }

resources/js/phoniex/components/fighting/components/attack-buttons.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import AttackButtonsProps from "./types/attack-buttons-props";
 export default class AttackButtons extends React.Component<AttackButtonsProps> {
-
     constructor(props: AttackButtonsProps) {
         super(props);
     }
@@ -15,35 +14,45 @@ export default class AttackButtons extends React.Component<AttackButtonsProps> {
                         aria-label="Attack"
                     >
                         <i className="ra ra-sword text-opacity-90 text-white font-semibold" />
-                        <span className="text-opacity-90 text-white font-semibold">Atk</span>
+                        <span className="text-opacity-90 text-white font-semibold">
+                            Atk
+                        </span>
                     </button>
                     <button
                         className="flex items-center justify-center space-x-2 bg-gradient-to-b from-rose-500 to-regent-st-blue-300 rounded-full p-4 text-white text-lg shadow-md focus:outline-none focus:ring-2 focus:ring-regent-st-blue-300 dark:focus:ring-regent-st-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 hover:opacity-90 dark:hover:opacity-100"
                         aria-label="Cast"
                     >
                         <i className="ra ra-burning-book text-opacity-90 text-white font-semibold" />
-                        <span className="text-opacity-90 text-white font-semibold">Cast</span>
+                        <span className="text-opacity-90 text-white font-semibold">
+                            Cast
+                        </span>
                     </button>
                     <button
                         className="flex items-center justify-center space-x-2 bg-gradient-to-b from-rose-500 to-regent-st-blue-300 rounded-full p-4 text-white text-lg shadow-md focus:outline-none focus:ring-2 focus:ring-regent-st-blue-300 dark:focus:ring-regent-st-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 hover:opacity-90 dark:hover:opacity-100"
                         aria-label="Attack and Cast"
                     >
                         <i className="ra ra-crossed-swords text-opacity-90 text-white font-semibold" />
-                        <span className="text-opacity-90 text-white font-semibold">Atk & Cast</span>
+                        <span className="text-opacity-90 text-white font-semibold">
+                            Atk & Cast
+                        </span>
                     </button>
                     <button
                         className="flex items-center justify-center space-x-2 bg-gradient-to-b from-rose-500 to-regent-st-blue-300 rounded-full p-4 text-white text-lg shadow-md focus:outline-none focus:ring-2 focus:ring-regent-st-blue-300 dark:focus:ring-regent-st-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 hover:opacity-90 dark:hover:opacity-100"
                         aria-label="Cast and Attack"
                     >
                         <i className="ra ra-crossed-swords text-opacity-90 text-white font-semibold" />
-                        <span className="text-opacity-90 text-white font-semibold">Cast & Atk</span>
+                        <span className="text-opacity-90 text-white font-semibold">
+                            Cast & Atk
+                        </span>
                     </button>
                     <button
                         className="col-span-2 flex items-center justify-center space-x-2 bg-gradient-to-b from-rose-500 to-regent-st-blue-300 rounded-full p-4 text-white text-lg shadow-md focus:outline-none focus:ring-2 focus:ring-regent-st-blue-300 dark:focus:ring-regent-st-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 hover:opacity-90 dark:hover:opacity-100"
                         aria-label="Defend"
                     >
                         <i className="ra ra-heavy-shield text-opacity-90 text-white font-semibold" />
-                        <span className="text-opacity-90 text-white font-semibold">Defend</span>
+                        <span className="text-opacity-90 text-white font-semibold">
+                            Defend
+                        </span>
                     </button>
                 </div>
                 <div className="flex justify-center mt-4 space-x-4 text-gray-800 dark:text-gray-200">
@@ -64,7 +73,6 @@ export default class AttackButtons extends React.Component<AttackButtonsProps> {
                     </a>
                 </div>
             </div>
-        )
+        );
     }
-
 }

resources/js/phoniex/components/fighting/components/attack-log.tsx

@@ -27,12 +27,11 @@ export default class AttackLog extends React.Component<AttackLogProps> {
                     </p>
                 </div>
                 <div className="flex justify-center mt-6">
-                    <button
-                        className="px-4 py-2 bg-emerald-600 text-white rounded-lg shadow hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
+                    <button className="px-4 py-2 bg-emerald-600 text-white rounded-lg shadow hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                         Revive
                     </button>
                 </div>
             </div>
-        )
+        );
     }
 }

resources/js/phoniex/components/fighting/components/base-monster-section.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import BaseMonsterSectionProps from "./types/baee-monster-section-props";
 export default class BaseMonsterSection extends React.Component<BaseMonsterSectionProps> {
-
     constructor(props: BaseMonsterSectionProps) {
         super(props);
     }
@@ -25,8 +24,7 @@ export default class BaseMonsterSection extends React.Component<BaseMonsterSecti
                 <h3 className="text-2xl text-center font-semibold text-gray-800 dark:text-gray-200 mt-4">
                     Goblin
                 </h3>
-                <div
-                    className="flex md:justify-between flex-col md:flex-row md:gap-4 mt-6 text-gray-700 dark:text-gray-300">
+                <div className="flex md:justify-between flex-col md:flex-row md:gap-4 mt-6 text-gray-700 dark:text-gray-300">
                     {/* Stats Column 1 */}
                     <div className="flex flex-col space-y-1 w-full md:w-1/2">
                         <div className="flex items-center justify-between text-sm">
@@ -99,6 +97,6 @@ export default class BaseMonsterSection extends React.Component<BaseMonsterSecti
                     </div>
                 </div>
             </>
-        )
+        );
     }
 }

resources/js/phoniex/components/fighting/fight.tsx

@@ -28,12 +28,14 @@ export default class Fight extends React.Component<{}, FightState> {
                     <AttackButtons />
                 ) : (
                     <div className="flex justify-center mt-6">
-                        <DangerButton on_click={this.initiateFight.bind(this)} label={'Initiate Fight'} />
+                        <DangerButton
+                            on_click={this.initiateFight.bind(this)}
+                            label={"Initiate Fight"}
+                        />
                     </div>
                 )}
 
                 <AttackLog />
-
             </div>
         );
     }

resources/js/phoniex/components/game-card.tsx

@@ -5,21 +5,17 @@ import CharacterSheet from "./character-sheet/character-sheet";
 import Map from "./map/map";
 import GameCardProps from "./types/game-card-props";
 
-export default class GameCard extends React.Component<
-    GameCardProps
-> {
-
+export default class GameCard extends React.Component<GameCardProps> {
     render() {
         return (
             <Tabs
-                tabs={['Fight', 'Character Sheet', 'Map']}
-                icons={['ra ra-sword', 'ra ra-player', 'fas fa-map-signs']}
+                tabs={["Fight", "Character Sheet", "Map"]}
+                icons={["ra ra-sword", "ra ra-player", "fas fa-map-signs"]}
             >
                 <Fight />
                 <CharacterSheet />
                 <Map />
             </Tabs>
         );
-
     }
 }

resources/js/phoniex/components/map/map.tsx

@@ -8,8 +8,6 @@ export default class Map extends React.Component<MapProps> {
     }
 
     render() {
-        return (
-            'Map Content ...'
-        )
+        return "Map Content ...";
     }
 }

resources/js/phoniex/ui/buttons/danger-button.tsx

@@ -15,6 +15,6 @@ export default class DangerButton extends React.Component<DangerButtonProps> {
             >
                 {this.props.label}
             </button>
-        )
+        );
     }
 }

resources/js/phoniex/ui/tabs/tabs.tsx

@@ -1,63 +1,71 @@
-import React from 'react'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import clsx from 'clsx'
+import React from "react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import clsx from "clsx";
 import TabsProps from "./types/tabs-props";
 import TabsState from "./types/tabs-state";
 
 export default class Tabs extends React.Component<TabsProps, TabsState> {
     constructor(props: TabsProps) {
-        super(props)
+        super(props);
         this.state = {
             selectedIndex: 0,
-        }
+        };
     }
 
     handleChange = (index: number) => {
-        this.setState({ selectedIndex: index })
-        const { onChange } = this.props
-        if (onChange) onChange(index)
-    }
+        this.setState({ selectedIndex: index });
+        const { onChange } = this.props;
+        if (onChange) onChange(index);
+    };
 
     render() {
-        const { tabs, icons } = this.props
-        const { selectedIndex } = this.state
+        const { tabs, icons } = this.props;
+        const { selectedIndex } = this.state;
 
         return (
             <div className="flex h-screen w-full bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50">
                 <div className="hidden md:flex flex-col w-64 border-r border-gray-200 dark:border-gray-700 top-0">
-                    <TabGroup selectedIndex={selectedIndex} onChange={this.handleChange}>
+                    <TabGroup
+                        selectedIndex={selectedIndex}
+                        onChange={this.handleChange}
+                    >
                         <TabList className="flex flex-col p-4 sticky">
                             {tabs.map((tab, index) => (
                                 <Tab
                                     key={tab}
                                     className={clsx(
-                                        'flex items-center gap-4 rounded-lg py-3 px-4 text-base font-semibold',
+                                        "flex items-center gap-4 rounded-lg py-3 px-4 text-base font-semibold",
                                         index === selectedIndex
-                                            ? 'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-200'
-                                            : 'text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+                                            ? "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-200"
+                                            : "text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
                                     )}
                                     aria-selected={index === selectedIndex}
                                     aria-controls={`panel-${index}`}
                                     id={`tab-${index}`}
                                 >
                                     <i className={`${icons[index]} text-2xl`} />
-                                    <span className="hidden md:inline">{tab}</span>
+                                    <span className="hidden md:inline">
+                                        {tab}
+                                    </span>
                                 </Tab>
                             ))}
                         </TabList>
                     </TabGroup>
                 </div>
                 <div className="w-full flex-1 flex flex-col">
-                    <TabGroup selectedIndex={selectedIndex} onChange={this.handleChange}>
+                    <TabGroup
+                        selectedIndex={selectedIndex}
+                        onChange={this.handleChange}
+                    >
                         <TabList className="md:hidden flex gap-6 px-4 py-2 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-gray-50 dark:bg-gray-900">
                             {tabs.map((tab, index) => (
                                 <Tab
                                     key={index}
                                     className={clsx(
-                                        'flex items-center gap-4 rounded-lg py-3 px-4 text-base font-semibold',
+                                        "flex items-center gap-4 rounded-lg py-3 px-4 text-base font-semibold",
                                         index === selectedIndex
-                                            ? 'text-gray-900 dark:text-gray-200'
-                                            : 'text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+                                            ? "text-gray-900 dark:text-gray-200"
+                                            : "text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
                                     )}
                                     aria-selected={index === selectedIndex}
                                     aria-controls={`panel-${index}`}
@@ -69,26 +77,31 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
                             ))}
                         </TabList>
                         <TabPanels className="flex-1 p-4">
-                            {
-                                this.props.children ?
-                                    this.props.children.map((child: React.ReactNode, index: number) => (
-                                        <TabPanel
-                                            key={index}
-                                            id={`panel-${index}`}
-                                            className={clsx(
-                                                'rounded-xl p-4',
-                                                index === selectedIndex ? '' : 'hidden'
-                                            )}
-                                        >
-                                            {child}
-                                        </TabPanel>
-                                    ))
-                                    : null
-                            }
+                            {this.props.children
+                                ? this.props.children.map(
+                                      (
+                                          child: React.ReactNode,
+                                          index: number,
+                                      ) => (
+                                          <TabPanel
+                                              key={index}
+                                              id={`panel-${index}`}
+                                              className={clsx(
+                                                  "rounded-xl p-4",
+                                                  index === selectedIndex
+                                                      ? ""
+                                                      : "hidden",
+                                              )}
+                                          >
+                                              {child}
+                                          </TabPanel>
+                                      ),
+                                  )
+                                : null}
                         </TabPanels>
                     </TabGroup>
                 </div>
             </div>
-        )
+        );
     }
 }

resources/js/phoniex/ui/tabs/types/tabs-props.ts

@@ -1,6 +1,6 @@
 export default interface TabsProps {
-    tabs: string[]
-    icons: string[]
-    onChange?: (index: number) => void
-    children: React.ReactNode[]|[]
+    tabs: string[];
+    icons: string[];
+    onChange?: (index: number) => void;
+    children: React.ReactNode[] | [];
 }

resources/js/phoniex/ui/tabs/types/tabs-state.ts

@@ -1,3 +1,3 @@
 export default interface TabsState {
-    selectedIndex: number
+    selectedIndex: number;
 }