feat: total rewrite

README.md

@@ -1,3 +1,3 @@
-# DnD – Simple Combat Management
+# Dungeons and Dragons – Simple Encounter Manager
 
-Simple tool used to keep track of DnD combat scenarios. Data is stored in LocalStorage.
+Simple tool to run Dungeons and Dragons encounters. Kept purposefully simple.

package.json

@@ -1,12 +1,8 @@
 {
-  "name": "dnd-simple-combat-management",
+  "name": "dnd-simple-encounter-manager",
   "version": "1.0.0",
-  "homepage": "/dnd-simple-combat-management",
+  "homepage": "/dnd-simple-encounter-manager",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.10.14",
-    "@mui/material": "^5.10.14",
     "@reduxjs/toolkit": "^1.9.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -16,9 +12,11 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/react-redux": "^7.1.24",
-    "daisyui": "^2.51.6",
+    "classnames": "^2.3.2",
+    "daisyui": "^4.4.6",
     "husky": "^8.0.2",
     "lint-staged": "^13.1.0",
+    "nanoid": "^5.0.3",
     "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import { MultiColumnWrapper, OneColumnWrapper } from './layout/Wrappers';
-import { EncounterPlayCombat } from './pages/EncounterPlayCombat';
-import { EncounterPlayInitiative } from './pages/EncounterPlayInitiative';
-import { Characters, EncounterEdit, EncountersList, Settings } from './pages';
+import { Characters, EncounterEdit, EncounterInitiative, EncounterPlay, EncountersList, Settings } from './pages';
 import { useAppSelector } from './store/hooks';
 import { Page } from './store/reducers/globalReducer';
 import { ReducerNames } from './store/reducers/reducerNames';
@@ -12,42 +9,18 @@ export const App = () => {
   const { page } = useAppSelector((state) => state[ReducerNames.GLOBAL]);
 
   switch (page) {
-    case Page.ENCOUNTERS:
-      return (
-        <OneColumnWrapper>
-          <EncountersList />
-        </OneColumnWrapper>
-      );
+    case Page.ENCOUNTERS_LIST:
+      return <EncountersList />;
     case Page.ENCOUNTER_EDIT:
-      return (
-        <OneColumnWrapper>
-          <EncounterEdit />
-        </OneColumnWrapper>
-      );
-    case Page.ENCOUNTER_PLAY_INITIATIVE:
-      return (
-        <OneColumnWrapper>
-          <EncounterPlayInitiative />
-        </OneColumnWrapper>
-      );
-    case Page.ENCOUNTER_PLAY_COMBAT:
-      return (
-        <MultiColumnWrapper>
-          <EncounterPlayCombat />
-        </MultiColumnWrapper>
-      );
+      return <EncounterEdit />;
+    case Page.ENCOUNTER_INITIATIVE:
+      return <EncounterInitiative />;
+    case Page.ENCOUNTER_COMBAT:
+      return <EncounterPlay />;
     case Page.SETTINGS:
-      return (
-        <OneColumnWrapper>
-          <Settings />
-        </OneColumnWrapper>
-      );
+      return <Settings />;
     case Page.CHARACTERS:
     default:
-      return (
-        <OneColumnWrapper>
-          <Characters />
-        </OneColumnWrapper>
-      );
+      return <Characters />;
   }
 };

src/components/Dropdown.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DropdownProps {
+  text: string;
+  children: React.ReactNode;
+  onOpen?: () => void;
+}
+
+export const Dropdown = (props: DropdownProps) => {
+  const { text, children, onOpen } = props;
+  return (
+    <div className="dropdown">
+      <label tabIndex={0} className="btn" onClick={onOpen}>
+        {text}
+      </label>
+      <ul tabIndex={0} className="dropdown-content z-[1] menu p-4 shadow bg-base-100 rounded-box w-52">
+        {children}
+      </ul>
+    </div>
+  );
+};

src/components/DropdownItemToggle.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+import React from 'react';
+
+interface DropdownItemToggleProps {
+  checked: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+export const DropdownItemToggle = (props: DropdownItemToggleProps) => {
+  const { checked, onClick, children } = props;
+
+  const className = checked ? 'bg-base-300' : '';
+
+  return (
+    <li className={cx('rounded', className)}>
+      <a onClick={onClick} className="rounded no-underline">
+        {children}
+      </a>
+    </li>
+  );
+};

src/components/Heading.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Heading = ({ text }: { text: string }) => <h4 className="text-3xl pb-2">{text}</h4>;

src/components/Modal.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ModalProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const Modal = (props: ModalProps) => {
+  const { id, children } = props;
+
+  return (
+    <dialog className="modal" id={id}>
+      <div className="modal-box">{children}</div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+};

src/components/index.ts

@@ -0,0 +1,4 @@
+export { Dropdown } from './Dropdown';
+export { DropdownItemToggle } from './DropdownItemToggle';
+export { Heading } from './Heading';
+export { Modal } from './Modal';

src/index.tsx

@@ -6,11 +6,15 @@ import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import { App } from './App';
+import { Wrapper } from './layout';
 import { store } from './store';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
 root.render(
   <Provider store={store}>
-    <App />
+    <Wrapper>
+      <App />
+    </Wrapper>
   </Provider>,
 );

src/layout/Header.tsx

@@ -6,7 +6,7 @@ import { Page, setPage } from '../store/reducers/globalReducer';
 const pages: { text: string; identifier: Page }[] = [
   {
     text: 'Encounters',
-    identifier: Page.ENCOUNTERS,
+    identifier: Page.ENCOUNTERS_LIST,
   },
   {
     text: 'Characters',
@@ -50,7 +50,7 @@ export const Header = () => {
           onClick={(e) => {
             e.preventDefault();
 
-            dispatch(setPage(Page.ENCOUNTERS));
+            dispatch(setPage(Page.ENCOUNTERS_LIST));
           }}
         >
           DnD Simple Combat Management

src/layout/Wrapper.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Header } from './Header';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const Wrapper = ({ children }: WrapperProps) => (
+  <div className="container max-w-none mb-16">
+    <div className="container max-w-none bg-neutral">
+      <div className="container">
+        <Header />
+      </div>
+    </div>
+    <div className="container mx-auto">{children}</div>
+  </div>
+);

src/layout/index.ts

@@ -0,0 +1 @@
+export { Wrapper } from './Wrapper';

src/pages/Characters/Characters.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 
-import { Content } from '../../layout/Content';
+import { Heading } from '../../components';
 import { ListCharacters, NewCharacter } from './components';
 
 export const Characters = () => (
   <>
-    <Content title="Characters">
+    <div>
+      <Heading text="Characters" />
       <div className="card bg-neutral text-neutral-content card-compact">
         <div className="card-body prose">
           <ListCharacters />
         </div>
       </div>
-    </Content>
-    <Content title="Add character" className="mt-8">
+    </div>
+    <div className="mt-8">
+      <Heading text="Add character" />
       <div className="card bg-neutral text-neutral-content card-compact">
         <div className="card-body">
           <NewCharacter />
         </div>
       </div>
-    </Content>
+    </div>
   </>
 );

src/pages/Characters/components/ListCharacters.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { removeCharacter } from '../../../store/reducers/characterReducer';
 import { ReducerNames } from '../../../store/reducers/reducerNames';
-import { removeCharacter } from '../../../store/reducers/charactersReducer';
 
 export const ListCharacters = () => {
   const { characters } = useAppSelector((state) => state[ReducerNames.CHARACTERS]);

src/pages/Characters/components/NewCharacter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
 import { useAppDispatch } from '../../../store/hooks';
-import { addCharacter } from '../../../store/reducers/charactersReducer';
+import { addCharacter } from '../../../store/reducers/characterReducer';
 
 export const NewCharacter = () => {
   const dispatch = useAppDispatch();

src/pages/EncounterEdit/EncounterEdit.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Content } from '../../layout/Content';
+import { Heading } from '../../components';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { selectEncounter } from '../../store/reducers/encountersReducer';
 import { Page, setPage } from '../../store/reducers/globalReducer';
@@ -14,26 +14,26 @@ export const EncounterEdit = () => {
   const currentEncounter = encounters.find((encounter) => encounter.id === selectedEncounter);
   if (!currentEncounter) {
     dispatch(selectEncounter(null));
-    dispatch(setPage(Page.ENCOUNTERS));
+    dispatch(setPage(Page.ENCOUNTERS_LIST));
 
     // The fuck
     return <div></div>;
   }
 
-  const { name, entities } = currentEncounter;
-
-  const monsters = entities.filter((entity) => !entity.isPlayerCharacter);
+  const { name, monsters } = currentEncounter;
 
   return (
-    <>
-      <Content title={`Encounter: ${name}`}>
+    <div>
+      <div>
+        <Heading text={`Encounter: ${name}`} />
         <div className="card bg-neutral text-neutral-content card-compact">
           <div className="card-body">
             <EncounterInformation />
           </div>
         </div>
-      </Content>
-      <Content title={`Monsters (${monsters.length})`} className="mt-8">
+      </div>
+      <div className="mt-8">
+        <Heading text={`Monsters (${monsters.length})`} />
         <div className="card bg-neutral text-neutral-content card-compact">
           <div className="card-body prose">
             <ListMonsters />
@@ -42,7 +42,7 @@ export const EncounterEdit = () => {
             <AddMonster />
           </div>
         </div>
-      </Content>
-    </>
+      </div>
+    </div>
   );
 };

src/pages/EncounterEdit/components/AddMonster.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { addMonster } from '../../../store/reducers/encountersReducer';
+
 import { useAppDispatch } from '../../../store/hooks';
+import { addMonster } from '../../../store/reducers/encountersReducer';
 
 export const AddMonster = () => {
   const dispatch = useAppDispatch();