Merge pull request #1 from OptimusCrime/redesign

Redesign

.github/workflows/lint-test-build-deploy.yaml

@@ -9,8 +9,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2.3.1
+      - name: Git Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node & install dependencies
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc  # Use the same version as configured for the project
 
       - name: Install
         env:

.nvmrc

@@ -0,0 +1 @@
+18.16.0

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,13 +12,17 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/react-redux": "^7.1.24",
+    "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",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.9.3",
     "web-vitals": "^2.1.4"
   },
@@ -67,6 +67,7 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "eslint-plugin-unused-imports": "^2.0.0"
   }

src/App.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import { MultiColumnWrapper, OneColumnWrapper } from './layout/Wrappers';
-import { Characters } from './pages/Characters';
-import { EncounterEdit } from './pages/EncounterEdit';
-import { EncounterPlayCombat } from './pages/EncounterPlayCombat';
-import { EncounterPlayInitiative } from './pages/EncounterPlayInitiative';
-import { Encounters } from './pages/Encounters';
-import { Settings } from './pages/Settings';
+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';
@@ -15,42 +9,18 @@ export const App = () => {
   const { page } = useAppSelector((state) => state[ReducerNames.GLOBAL]);
 
   switch (page) {
-    case Page.ENCOUNTERS:
-      return (
-        <OneColumnWrapper>
-          <Encounters />
-        </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

@@ -1,15 +1,20 @@
-import './index.css';
+// import './index.css';
+import './input.css';
 
 import React from 'react';
 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/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;