Added ui

ui/.env.TEMPLATE

@@ -0,0 +1,5 @@
+SERVICE_HOST=service
+SERVICE_PORT=5000
+
+UI_PORT=8080
+NODE_ENV=development

ui/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint/eslint-plugin"
+  ],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

ui/.nvmrc

@@ -0,0 +1 @@
+18.17.1

ui/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}

ui/Dockerfile

@@ -0,0 +1,39 @@
+# Base
+FROM node:18-alpine AS base
+
+# Dependencies
+FROM base as deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Dev
+FROM base AS dev
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Builder
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# Runner
+FROM base AS runner
+WORKDIR /app
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT 3000
+ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["node", "server.js"]

ui/Makefile

@@ -0,0 +1,26 @@
+#!make
+
+SHELL := /bin/bash
+
+.PHONY: help build start stop lint
+
+help: ## This info
+	@echo
+	@cat Makefile | grep -E '^[a-zA-Z\/_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+	@echo
+
+build:  ## Install the dependencies and build
+	docker compose build
+
+up:  ## Start the dev instance
+	docker compose up -d
+
+down:  ## Stop the dev instance
+	docker compose down
+
+lint:  ## Run the linter
+	npm run lint
+
+clean:  ## Remove node modules
+	docker compose down && \
+	docker image rm siren-ui

ui/docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3'
+
+name: siren
+services:
+  ui:
+    container_name: siren-ui
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=${NODE_ENV:-development}
+    ports:
+      - ${UI_PORT:-8080}:3000
+    build:
+      context: ./
+      target: dev
+    command: "npm run dev"
+    volumes:
+      - ./src:/app/src
+      - ./public:/app/public
+      - ./styles:/app/styles
+    networks:
+      - siren-frontend
+    restart: unless-stopped
+
+networks:
+  siren-frontend: {}

ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

ui/next.config.js

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  eslint: {
+    ignoreDuringBuilds: true
+  },
+  webpackDevMiddleware: (config) => {
+    config.watchOptions = {
+      poll: 1000,
+      aggregateTimeout: 300
+    };
+    return config;
+  },
+  publicRuntimeConfig: {
+    // remove private variables from processEnv
+    processEnv: Object.fromEntries(Object.entries(process.env).filter(([key]) => key.includes('NEXT_PUBLIC_')))
+  },
+  output: 'standalone'
+};
+
+module.exports = nextConfig;

ui/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "siren-ui",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@mantine/core": "^7.1.2",
+        "@mantine/hooks": "^7.1.2",
+        "@mantine/modals": "^7.1.2",
+        "@mantine/notifications": "^7.1.2",
+        "axios": "^1.5.1",
+        "next": "^13.5.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
+        "react-leaflet": "^4.2.1",
+        "recharts": "^2.8.0",
+        "recoil": "^0.7.7"
+    },
+    "devDependencies": {
+        "@types/node": "20.8.2",
+        "@types/react": "18.2.24",
+        "@types/react-dom": "18.2.8",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "@typescript-eslint/parser": "^6.7.4",
+        "autoprefixer": "^10.4.16",
+        "eslint": "8.50.0",
+        "eslint-config-next": "13.5.4",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "postcss": "^8.4.31",
+        "postcss-import": "^15.1.0",
+        "postcss-preset-mantine": "^1.8.0",
+        "prettier": "^3.0.3",
+        "typescript": "5.2.2"
+    }
+}

ui/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-import': {},
+    autoprefixer: {}
+  }
+};

ui/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

ui/src/api/index.ts

@@ -0,0 +1,25 @@
+import axios, { AxiosResponse } from 'axios';
+
+const serviceHost = process.env.SERVICE_HOST || 'http://localhost';
+const servicePort = process.env.SERVICE_PORT || 5000;
+
+export async function getRequest(endpoint: string, params: any): Promise<AxiosResponse<any, any> | undefined> {
+  const response = await axios
+    .get(`${serviceHost}:${servicePort}/${endpoint}`, { params })
+    .catch((error) => console.error(error));
+  return response || undefined;
+}
+
+export async function postRequest(endpoint: string, body: any): Promise<AxiosResponse<any, any> | undefined> {
+  const response = await axios
+    .post(`${serviceHost}:${servicePort}/${endpoint}`, { body })
+    .catch((error) => console.error(error));
+  return response || undefined;
+}
+
+export interface Metadata {
+  limit: number;
+  page: number;
+  pages: number;
+  total: number;
+}

ui/src/api/spells.ts

@@ -0,0 +1,37 @@
+import { getRequest } from '.';
+import { GetSpellsResponse } from './spells.types';
+
+interface GetSpellsParams {
+  name?: string;
+  schools?: string[];
+  levels?: number[];
+  ritual?: boolean;
+  concentration?: boolean;
+  classes?: string[];
+  damage_inflict?: string[];
+  damage_resist?: string[];
+  conditions?: string[];
+  saving_throw?: string[];
+  attack_type?: string[];
+  limit?: number;
+  page?: number;
+}
+
+export async function getSpells(params?: GetSpellsParams): Promise<GetSpellsResponse> {
+  const response = await getRequest('spells', {
+    name: params?.name,
+    schools: params?.schools?.join(','),
+    levels: params?.levels?.join(','),
+    ritual: params?.ritual,
+    concentration: params?.concentration,
+    classes: params?.classes?.join(','),
+    damage_inflict: params?.damage_inflict?.join(','),
+    damage_resist: params?.damage_resist?.join(','),
+    conditions: params?.conditions?.join(','),
+    saving_throw: params?.saving_throw?.join(','),
+    attack_type: params?.attack_type?.join(','),
+    limit: params?.limit,
+    page: params?.page
+  });
+  return response?.data || { data: [] };
+}

ui/src/api/spells.types.ts

@@ -0,0 +1,82 @@
+import { Metadata } from '.';
+
+export interface Spell {
+  id: string;
+  name: string;
+  school: string;
+  level: number;
+  ritual: boolean;
+  casting_time: CastingTime;
+  saving_throw?: string[];
+  attack_type?: string;
+  damage_inflict?: string[];
+  damage_resist?: string[];
+  conditions?: string[];
+  range: Range;
+  area?: Area;
+  components: Components;
+  durations: Duration[];
+  classes: string[];
+  sources: Source[];
+  tags?: string[];
+  description?: Description;
+}
+
+export interface CastingTime {
+  value: number;
+  unit: string;
+}
+
+export interface Range {
+  type: string;
+  value?: number;
+  unit?: string;
+}
+
+export interface Area {
+  type: string;
+  value?: number;
+  unit?: string;
+}
+
+export interface Components {
+  verbal: boolean;
+  somatic: boolean;
+  material: boolean;
+  materials_needed?: string;
+  materials_cost?: number;
+  materials_consumed?: boolean;
+}
+
+export interface Duration {
+  type: string;
+  value?: number;
+  unit?: string;
+  // concentration: boolean;
+}
+
+export interface Source {
+  source: string;
+  page?: number;
+}
+
+export interface Description {
+  entries: EntryType[];
+}
+
+type EntryType = string | Entry;
+
+export interface Entry {
+  type: string;
+  items: string[];
+}
+
+export interface GetSpellResponse {
+  data: Spell;
+  metadata: Metadata;
+}
+
+export interface GetSpellsResponse {
+  data: Spell[];
+  metadata: Metadata;
+}

ui/src/app/backgrounds/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/classes/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/feats/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/items/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/layout.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import RecoilRootWrapper from '@app/recoil-root-wrapper';
+import Topbar from '@/components/Topbar';
+import { Inter } from 'next/font/google';
+import { Box, MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
+import { Notifications } from '@mantine/notifications';
+import 'styles/globals.css';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+
+export const metadata = {
+  title: 'Siren',
+  description: ''
+};
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en' className='h-full bg-white'>
+      <head>
+        <title>Siren</title>
+      </head>
+      <body className={`${inter.className} wrapper h-full`}>
+        <RecoilRootWrapper>
+          <MantineProvider>
+            <Notifications />
+            <ModalsProvider>
+              <Topbar />
+              <Box p='xl' pt='sm' className='h-full'>
+                {children}
+              </Box>
+            </ModalsProvider>
+          </MantineProvider>
+        </RecoilRootWrapper>
+      </body>
+    </html>
+  );
+}

ui/src/app/options/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/races/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Page() {
+  return <></>;
+}

ui/src/app/recoil-root-wrapper.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { RecoilRoot } from 'recoil';
+import React, { ReactNode } from 'react';
+
+export default function RecoilRootWrapper({ children }: { children: ReactNode }) {
+  return <RecoilRoot>{children}</RecoilRoot>;
+}

ui/src/app/spells/page.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { getSpells } from '@/api/spells';
+import { Spell } from '@/api/spells.types';
+import SpellModal from '@/components/SpellModal';
+import React, { useEffect, useState } from 'react';
+import './spells.css';
+import { Box, TextInput } from '@mantine/core';
+import { AiOutlineVerticalAlignTop } from 'react-icons/ai';
+
+export default function Page() {
+  const [cantrips, setCantrips] = useState<Spell[]>([]);
+  const [level1, setLevel1] = useState<Spell[]>([]);
+  const [level2, setLevel2] = useState<Spell[]>([]);
+  const [level3, setLevel3] = useState<Spell[]>([]);
+  const [level4, setLevel4] = useState<Spell[]>([]);
+  const [level5, setLevel5] = useState<Spell[]>([]);
+  const [level6, setLevel6] = useState<Spell[]>([]);
+  const [level7, setLevel7] = useState<Spell[]>([]);
+  const [level8, setLevel8] = useState<Spell[]>([]);
+  const [level9, setLevel9] = useState<Spell[]>([]);
+  const [activeSpell, setActiveSpell] = useState<Spell | undefined>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchName, setSearchName] = useState('');
+
+  useEffect(() => {
+    getSpells({ levels: [0] }).then((s) => setCantrips(s.data));
+    getSpells({ levels: [1] }).then((s) => setLevel1(s.data));
+    getSpells({ levels: [2] }).then((s) => setLevel2(s.data));
+    getSpells({ levels: [3] }).then((s) => setLevel3(s.data));
+    getSpells({ levels: [4] }).then((s) => setLevel4(s.data));
+    getSpells({ levels: [5] }).then((s) => setLevel5(s.data));
+    getSpells({ levels: [6] }).then((s) => setLevel6(s.data));
+    getSpells({ levels: [7] }).then((s) => setLevel7(s.data));
+    getSpells({ levels: [8] }).then((s) => setLevel8(s.data));
+    getSpells({ levels: [9] }).then((s) => setLevel9(s.data));
+  }, []);
+
+  return (
+    <Box style={{ width: '60%', margin: 'auto' }}>
+      <h1>Spells</h1>
+      <TextInput
+        label='Search by name'
+        placeholder='Acid Splash...'
+        onChange={(e) => setSearchName(e.target.value)}
+        style={{ width: '25%' }}
+      />
+      <SpellSection
+        title='Cantrips'
+        spells={cantrips.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      {activeSpell && <SpellModal spell={activeSpell} isOpen={isOpen} onClose={() => setIsOpen(false)} />}
+    </Box>
+  );
+}
+
+function SpellSection({ title, spells, onClick }: { title: string; spells: Spell[]; onClick: (spell: Spell) => void }) {
+  const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js
+
+  function scrollToTop() {
+    if (!isBrowser()) return;
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  return (
+    <Box>
+      <h2>{title}</h2>
+      <ul>
+        {spells.map((spell) => (
+          <li
+            key={spell.id}
+            className='link spell-item'
+            style={{ width: 'fit-content' }}
+            onClick={() => onClick(spell)}
+          >
+            {spell.name}
+          </li>
+        ))}
+      </ul>
+      <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'gray' }} onClick={scrollToTop}>
+        <span style={{ paddingRight: '0.2em' }}>Back to top</span>
+        <AiOutlineVerticalAlignTop />
+      </div>
+    </Box>
+  );
+}

ui/src/app/spells/spells.css

@@ -0,0 +1,7 @@
+.spell-item {
+  padding: 0.2rem;
+}
+
+.spell-item:hover {
+  text-decoration: underline;
+}

ui/src/components/SpellModal.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { Spell } from '@/api/spells.types';
+import { levelText, rollDice } from '@/js/spells';
+import { capitalize } from '@/js/utils';
+import { Grid, Modal } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+
+interface SpellModalProps {
+  spell: Spell;
+  isOpen: boolean;
+  onClose(): void;
+}
+
+export default function SpellModal({ spell, isOpen, onClose }: SpellModalProps) {
+  return (
+    <Modal opened={isOpen} onClose={onClose} withCloseButton={false} size={'50%'} className='modal'>
+      <h1 style={{ padding: '0', margin: '0' }}>{spell.name}</h1>
+      <Grid gutter={1}>
+        <Grid.Col span={4} style={{ paddingBottom: '1rem' }}>
+          <span style={{ fontWeight: 'bold' }}>
+            {capitalize(spell.school)} {levelText(spell)}
+          </span>
+        </Grid.Col>
+        <Grid.Col span={8} style={{ paddingBottom: '1rem' }}>
+          <div style={{ float: 'right' }}>
+            <span style={{ float: 'right' }}>
+              {spell.components.verbal && spell.components.somatic ? 'V, ' : 'V '}
+              {spell.components.somatic && spell.components.material ? 'S, ' : 'S '}
+              {spell.components.material && spell.components.materials_needed ? 'M*' : 'M'}
+            </span>
+            {spell.components.materials_needed && (
+              <span style={{ fontSize: '0.8em', color: 'gray' }}>
+                <br />*{capitalize(spell.components.materials_needed)}
+              </span>
+            )}
+          </div>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <span style={{ fontWeight: 'bold', paddingRight: '1em' }}>Sources:</span>
+          {spell.sources.map((s) => (
+            <span style={{ paddingRight: '0.6em' }}>
+              {s.source}
+              {s.page ? `.${s.page}` : ''}
+            </span>
+          ))}
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <span style={{ fontWeight: 'bold', marginRight: '1em' }}>Classes:</span>
+          <span style={{ overflowWrap: 'break-word' }}>
+            {spell.classes.map((c) => (
+              <span style={{ paddingRight: '0.6em', display: 'inline-block' }} className='link'>
+                {capitalize(c)}
+              </span>
+            ))}
+          </span>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <span style={{ fontWeight: 'bold', paddingRight: '1em' }}>Casting Time:</span>
+          <span style={{ paddingRight: '0.6em' }}>
+            {spell.casting_time.value} {capitalize(spell.casting_time.unit)}
+          </span>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <span style={{ fontWeight: 'bold', paddingRight: '1em' }}>Range:</span>
+          <span style={{ paddingRight: '0.6em' }}>
+            {spell.range.type != 'point' && capitalize(spell.range.type)} {spell.range.value}{' '}
+            {capitalize(spell.range.unit)}
+          </span>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <span style={{ fontWeight: 'bold', paddingRight: '1em' }}>Duration:</span>
+          <span style={{ paddingRight: '0.6em' }}>
+            {spell.durations.map((d) => (
+              <span>
+                {capitalize(d.type)} {d.value} {capitalize(d.unit)}
+              </span>
+            ))}
+          </span>
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <SpellDescription spell={spell} />
+        </Grid.Col>
+      </Grid>
+    </Modal>
+  );
+}
+
+function SpellDescription({ spell }: { spell: Spell }) {
+  function parseText(text: string) {
+    const regex = /{@(.*?) (.*?)}/g;
+    const matches = text.matchAll(regex);
+    const result = [];
+    let lastIndex = 0;
+    for (const match of matches) {
+      const [full, type, name] = match;
+      result.push(text.slice(lastIndex, match.index));
+      if (match.index !== undefined) {
+        result.push(
+          <span onClick={() => handleLink(type, name)} className='link'>
+            {name}
+          </span>
+        );
+        lastIndex = match.index + full.length;
+      }
+    }
+    result.push(text.slice(lastIndex));
+    return result;
+  }
+
+  function handleLink(type: string, name: string) {
+    if (type == 'spell') {
+      console.log(`Link to spell: ${name}`);
+    } else if (type == 'dice' || type == 'damage') {
+      const rolls = rollDice(name);
+      notifications.show({
+        title: `Rolling ${name}`,
+        message: `${rolls.join(' + ')} = ${rolls.reduce((a, b) => a + b, 0)}`,
+        color: 'blue',
+        autoClose: 5000,
+        withCloseButton: false
+      });
+    } else {
+      console.error(`Unknown link type: ${type}`);
+    }
+  }
+
+  return (
+    <>
+      {spell.description && (
+        <>
+          {spell.description.entries.map((e) =>
+            typeof e === 'string' ? (
+              <p>{parseText(e)}</p>
+            ) : (
+              <>
+                {e.type == 'list' ? (
+                  <ul>
+                    {e.items.map((text) => (
+                      <li>{parseText(text)}</li>
+                    ))}
+                  </ul>
+                ) : (
+                  <></>
+                )}
+              </>
+            )
+          )}
+        </>
+      )}
+    </>
+  );
+}

ui/src/components/Topbar/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import './topbar.css';
+
+const headerItems = [
+  {
+    name: 'Races',
+    link: '/races'
+  },
+  {
+    name: 'Classes',
+    link: '/classes'
+  },
+  {
+    name: 'Feats',
+    link: '/feats'
+  },
+  {
+    name: 'Options & Features',
+    link: '/options'
+  },
+  {
+    name: 'Backgrounds',
+    link: '/backgrounds'
+  },
+  {
+    name: 'Items',
+    link: '/items'
+  },
+  {
+    name: 'Spells',
+    link: '/spells'
+  }
+];
+
+export default function Topbar() {
+  const pathName = usePathname();
+
+  return (
+    <nav className='navbar'>
+      <div className='left'>
+        <Link href={'/'} className='title'>
+          Siren
+        </Link>
+        <div className='header-items'>
+          {headerItems.map((item) => (
+            <Link className={`header-item ${pathName == item.link && 'active'}`} href={item.link} key={item.name}>
+              {item.name}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}

ui/src/components/Topbar/topbar.css

@@ -0,0 +1,47 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  color: black;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.navbar .left {
+  display: flex;
+}
+
+.navbar .title {
+  padding-left: 2em;
+  padding-right: 2em;
+  margin: auto;
+  font-size: x-large;
+}
+
+.navbar .left .search {
+  margin: auto;
+}
+
+.navbar .avatar {
+  padding-right: 2em;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.header-items {
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-items .header-item {
+  padding-left: 2em;
+  padding-right: 2em;
+  margin: auto;
+  border-bottom: 2px solid transparent;
+}
+
+.header-items .header-item:hover {
+  border-bottom: 2px solid #e6e6e6;
+}
+
+.header-items .active {
+  border-bottom: 2px solid #5f5f5f;
+}

ui/src/js/spells.ts

@@ -0,0 +1,23 @@
+import { Spell } from '@/api/spells.types';
+
+export function levelText(spell: Spell) {
+  if (spell.level === 0) {
+    return 'Cantrip';
+  } else {
+    return `Level ${spell.level}`;
+  }
+}
+
+export function rollDice(dice: string): number[] {
+  // eslint-disable-next-line prefer-const
+  let [count, sides] = dice.split('d');
+  const rolls = [];
+  if (isNaN(parseInt(count))) {
+    count = '1';
+  }
+  for (let i = 0; i < parseInt(count); i++) {
+    rolls.push(Math.floor(Math.random() * parseInt(sides)) + 1);
+  }
+  console.log(rolls);
+  return rolls;
+}

ui/src/js/theme.ts

@@ -0,0 +1,5 @@
+'use client';
+
+import { createTheme } from '@mantine/core';
+
+export const theme = createTheme({});

ui/src/js/utils.ts

@@ -0,0 +1,6 @@
+export function capitalize(str: string | undefined): string {
+  if (!str || str.length === 0) {
+    return '';
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

ui/styles/globals.css

@@ -0,0 +1,38 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+}
+
+.wrapper > nav {
+  flex: 0 0 56px;
+  overflow: hidden;
+}
+
+.link {
+  list-style-type: none;
+  cursor: pointer;
+  color: #297bff;
+}
+
+.link:hover {
+  color: #1c59bb;
+}

ui/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "downlevelIteration": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["src/api"],
+      "@app/*": ["./src/app/*"],
+      "@components/*": ["src/components/*"],
+      "@lib/*": ["src/components/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}