-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split up the icons and the monster section into components with types…
… and deffintions
- Loading branch information
Showing
20 changed files
with
458 additions
and
242 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
...urces/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
47 changes: 47 additions & 0 deletions
47
resources/js/phoniex/components/actions/components/fight-section/attack-messages.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
6 changes: 6 additions & 0 deletions
6
...ex/components/actions/components/fight-section/deffinitions/attack-message-deffinition.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { AttackMessageType } from "../enums/attack-message-type"; | ||
|
|
||
| export default interface AttackMessageDeffintion { | ||
| message: string; | ||
| type: AttackMessageType; | ||
| } |
5 changes: 5 additions & 0 deletions
5
...urces/js/phoniex/components/actions/components/fight-section/enums/attack-message-type.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export enum AttackMessageType { | ||
| PLAYER_ATTACK = "player-attack", | ||
| ENEMY_ATTACK = "enemy-attack", | ||
| REGULAR = "regular", | ||
| } |
4 changes: 4 additions & 0 deletions
4
resources/js/phoniex/components/actions/components/fight-section/enums/health-bar-type.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export enum HealthBarType { | ||
| ENEMY, | ||
| PLAYER, | ||
| } |
17 changes: 17 additions & 0 deletions
17
resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.