;
19 |
20 | export type Handler = (
21 | state: S,
22 | payload: PayloadAction["payload"]
23 | ) => EntityContainer | void | undefined;
24 |
25 | export type CharacterHandler = Handler;
26 | export type PlayerHandler = Handler;
27 | export type HeroHandler = Handler;
28 | export type MinionHandler = Handler;
29 | export type HeroPowerHandler = Handler;
30 | export type WeaponHandler = Handler;
31 |
32 | export const extractEntity = <
33 | E extends Entity = Entity,
34 | P extends EntityPayload = EntityPayload
35 | >(
36 | handler: Handler
37 | ): CaseReducer> => (state, action) =>
38 | handler(state[action.payload.id] as E, action.payload);
39 |
--------------------------------------------------------------------------------
/src/UI/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DndProvider } from "react-dnd";
3 | import { HTML5Backend } from "react-dnd-html5-backend";
4 | import { TouchBackend } from "react-dnd-touch-backend";
5 | import {
6 | Container,
7 | Grid,
8 | Header,
9 | GridRow,
10 | GridColumn
11 | } from "semantic-ui-react";
12 | import TargetableBattlefield from "./Play/Battlefield";
13 | import Toastr from "toastr";
14 | import "toastr/build/toastr.css";
15 | import { isTouchDevice } from "./utils";
16 |
17 | Toastr.options.timeOut = 3000;
18 |
19 | const DnDBackend = isTouchDevice() ? TouchBackend : HTML5Backend;
20 |
21 | const App: React.FC = (props) => (
22 |
23 |
24 |
25 |
26 |
27 |
32 | Hearthstone simulator written using React & Redux.
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | );
44 |
45 | export default App;
46 |
--------------------------------------------------------------------------------
/src/redux/modules/play/weaponReducer.ts:
--------------------------------------------------------------------------------
1 | import { createReducer, PayloadAction } from "@reduxjs/toolkit";
2 | import {
3 | Character,
4 | EntityContainer,
5 | Weapon,
6 | isMinion,
7 | getWeapon,
8 | getEntity
9 | } from "../../../models";
10 | import {
11 | attackCharacter,
12 | destroyWeapon,
13 | equipWeapon,
14 | EquipWeaponPayload
15 | } from "./actions";
16 | import { EntityPayloadAction } from "../../utils";
17 |
18 | const equipWeaponHandler = (
19 | state: EntityContainer,
20 | action: PayloadAction
21 | ) => {
22 | state[action.payload.id] = action.payload.weapon;
23 | };
24 |
25 | const destroyWeaponHandler = (
26 | state: EntityContainer,
27 | action: EntityPayloadAction
28 | ) => {
29 | delete state[action.payload.id];
30 | };
31 |
32 | const attackCharacterHandler = (
33 | state: EntityContainer,
34 | { payload }: EntityPayloadAction
35 | ) => {
36 | const attacker = state[payload.id] as Character;
37 |
38 | if (isMinion(attacker)) return;
39 |
40 | if (attacker.weaponID) {
41 | const weapon = getEntity(state, attacker.weaponID) as Weapon;
42 | weapon.health--;
43 | }
44 | };
45 |
46 | export default createReducer(
47 | {},
48 | {
49 | [destroyWeapon.type]: destroyWeaponHandler,
50 | [equipWeapon.type]: equipWeaponHandler,
51 | [attackCharacter.type]: attackCharacterHandler
52 | }
53 | );
54 |
--------------------------------------------------------------------------------
/src/UI/components/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Label, List, Popup, Segment } from "semantic-ui-react";
3 | import { AbilityList, CardArt } from "./index";
4 | import { Card as ICard, isMinion, isWeapon } from "../../models";
5 |
6 | interface CardProps {
7 | active?: boolean;
8 | card: ICard;
9 | }
10 |
11 | const Card: React.FC = ({ card, active = true }) => {
12 | const { attack, cardID, cost, name, text } = card;
13 |
14 | return (
15 |
18 | {name}
19 |
20 |
21 |
22 |
23 |
26 |
27 |
30 |
34 |
35 |
36 | }
37 | content={
38 |
39 |
{name}
40 |
{text}
41 |
42 |
75 |
82 |
83 |
84 |
85 |
86 |