feat: ✨ adding all dnd classes + adding main framework for dragonborn…

… type + adding boilerplate nextjs 13 routing

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/components/common/Auth.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Auth = () => {
+  return <div>Auth</div>;
+};

app/components/common/Button.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+interface Props {
+  className?: string;
+  id?: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  type?: "submit" | "button" | "reset" | undefined;
+}
+
+export const Button = ({ className, id, onClick, children, type }: Props) => {
+  return (
+    <button
+      className={` bg-light-primary cursor-pointer text-center rounded-md border-2 border-light-primary py-4 px-8 h-20 w-40 justify-center flex items-center hover:bg-light-secondary text-light-secondary hover:text-light-primary transition-all  ${className}`}
+      id={id}
+      onClick={onClick}
+      type={type}
+    >
+      {children}
+    </button>
+  );
+};

app/components/common/Input.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+interface Props {
+  className?: string;
+  id?: string;
+  placeholder?: string;
+  value?: any;
+  type?: "submit" | "button" | "reset" | undefined;
+  onChange?: (e: any) => void;
+}
+
+export const Input = ({
+  className,
+  id,
+  type,
+  placeholder,
+  value,
+  onChange,
+}: Props) => {
+  return (
+    <input
+      className={`  cursor-pointer text-xl rounded-md border-2 border-light-primary py-4 px-8 h-20 w-60 justify-center flex text-light-primary active:border-light-accent transition-all  ${className}`}
+      onChange={onChange}
+      id={id}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+    ></input>
+  );
+};

app/components/common/LoginModal.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from "react";
+
+export const LoginModal = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const toggleModal = () => {
+    setShowModal((showModal) => !showModal);
+  };
+  return (
+    <div onClick={() => toggleModal} className="">
+      LoginModal
+    </div>
+  );
+};

app/components/common/Sidebar.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import React from "react";
+
+export const Sidebar = () => {
+  const routes = [
+    {
+      title: "Create",
+      route: "/create",
+    },
+    {
+      title: "Sheets",
+      route: "/sheets",
+    },
+  ];
+
+  return (
+    <nav className="w-96 h-full bg-light-primary flex flex-col py-6 drop-shadow-2xl text-light-secondary">
+      <h1 className=" text-3xl font-bold mx-auto text-center">
+        Dungeon Crafter
+      </h1>
+      <section className="flex w-full h-full flex-col my-8 ">
+        {routes.map((route) => (
+          <Link
+            className="w-full h-14 flex px-10 hover:bg-light-secondary transition-all hover:text-light-primary items-center"
+            href={route.route}
+            key={route.title}
+          >
+            <p>{route.title}</p>
+          </Link>
+        ))}
+      </section>
+      <section>
+        <div className="w-12 h-12 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 mx-4 "></div>
+      </section>
+    </nav>
+  );
+};

app/create/layout.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@/app/components/common/Button";
+import React from "react";
+
+interface LayoutArgs {
+  children: React.ReactNode;
+}
+export default function Page({ children }: LayoutArgs) {
+  return (
+    <div className="w-full h-full flex  flex-col">
+      <section className="flex w-full">
+        <Button className="mr-8">New</Button>
+        {/* <Button>List</Button> */}
+      </section>
+      <section className="flex w-full h-full">{children}</section>
+    </div>
+  );
+}

app/create/list.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const List = () => {
+  return <div>list</div>;
+};
+
+export default List;

app/create/new/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../../components/common/Input";
+
+export const New = () => {
+  return (
+    <div>
+      <Input placeholder="Name" />
+    </div>
+  );
+};
+
+export default New;

app/create/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Create = () => {
+  return <div>Create</div>;
+};
+
+export default Create;

app/globals.css

@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  font-family: "Poppins";
+}

app/head.tsx

@@ -0,0 +1,10 @@
+export default function Head() {
+  return (
+    <head>
+      <title>Dungeon Crafter</title>
+      <meta name="description" content="Character creation tool" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href="/favicon.ico" />
+    </head>
+  );
+}

app/layout.tsx

@@ -0,0 +1,18 @@
+import { Sidebar } from "./components/common/Sidebar";
+import "./globals.css";
+import React from "react";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <div className="h-screen w-screen bg-light-secondary text-light-primary flex">
+        <Sidebar />
+        <div className="w-full h-full px-12 py-8 flex flex-col">{children}</div>
+      </div>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <></>;
+}

data/dragonborn/race.ts

@@ -0,0 +1,39 @@
+import { Race } from "../types";
+
+export const Dragonborn: Race = {
+  name: "Dragonborn",
+  expansion: "Player's Handbook / Basic Rules",
+  traits: {
+    abilityScoreIncrease: {
+      strength: +2,
+      charisma: +1,
+    },
+    age: {
+      description:
+        "Young dragonborn grow quickly. They walk hours after hatching, attain the size and development of a 10-year-old human child by the age of 3, and reach adulthood by 15. They live to be around 80.",
+    },
+    size: {
+      description:
+        "Dragonborn are taller and heavier than humans, standing well over 6 feet tall and averaging almost 250 pounds. Your size is Medium.",
+      size: "medium",
+    },
+    speed: {
+      description: "Your base walking speed is 30 feet.",
+      baseWalkingSpeed: 30,
+    },
+    draconicAncestry: [
+      {
+        colour: "black",
+        damageType: "acid",
+        breathWeapon: {
+          description:
+            "You can use your action to exhale destructive energy. Your draconic ancestry determines the size, shape, and damage type of the exhalation. When you use your breath weapon, each creature in the area of the exhalation must make a saving throw, the type of which is determined by your draconic ancestry. The DC for this saving throw equals 8 + your Constitution modifier + your proficiency bonus. A creature takes 2d6 damage on a failed save, and half as much damage on a successful one. The damage increases to 3d6 at 6th level, 4d6 at 11th level, and 5d6 at 16th level. After you use your breath weapon, you can’t use it again until you complete a short or long rest.",
+          type: "line",
+          length: 5,
+          width: 30,
+          saveType: "dexterity",
+        },
+      },
+    ],
+  },
+};

data/dragonborn/types.ts

@@ -0,0 +1,31 @@
+export interface DraconicAncestry {
+  colour?:
+    | "black"
+    | "blue"
+    | "brass"
+    | "bronze"
+    | "copper"
+    | "gold"
+    | "green"
+    | "red"
+    | "silver"
+    | "white";
+  damageType?: "acid" | "lightning" | "fire" | "poison" | "cold";
+  breathWeapon?: BreathWeaponLine | BreathWeaponCone;
+}
+
+export interface BreathWeapon {
+  saveType: "dexterity" | "constitution";
+  description: string;
+}
+
+export interface BreathWeaponLine extends BreathWeapon {
+  type: "line";
+  length: number;
+  width: number;
+}
+
+export interface BreathWeaponCone extends BreathWeapon {
+  type: "cone";
+  length: number;
+}