Merge pull request #26 from 8kto/feature/ui-improvements

UI improvements, translations
8kto · Feb 5, 2024 · f124b63 · f124b63
2 parents 913efe5 + 7952070
commit f124b63
Show file tree

Hide file tree

Showing 22 changed files with 909 additions and 387 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,12 @@
 
 <!-- For PROGRESS update, run yarn update-readme-stats -->
 
-Lamentations of the Flame Princess helpers.
+Lamentations of the Flame Princess Helpers: an online inventory and equipment tool for the LotFP TTRPG
+system.
+
+The main task this tool aims to solve is to allow playing from a
+phone or desktop, quickly create inventory, and easily calculate
+encumbrance and movement rate (speed).
 
 ## Demo
 
@@ -51,20 +56,25 @@ I value your feedback and don't want to spend time on unnecessary things.
 Please reach out to me with your questions or comments through my GitHub profile,
 or create an Issue/Feature request.
 
+- [ ] PWA
 - [ ] Multiple Inventories
 - [ ] Mounts
 - [ ] Firearms list
 
 I would also be glad to add more languages. Please reach out to me if you're interested in volunteering.
 
-## Getting Started
-
-Run `yarn` to install project dependencies.
-
-Run the development server:
+## Development
 
-```bash
-yarn dev
+```sh
+nvm use     # Use the required Node.js version
+yarn        # Install project dependencies
+yarn dev    # Start the development server
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Disclaimer
+
+This project is created just for fun and is not officially affiliated with or endorsed by the publishers of ["Lamentations of the Flame Princess" (LotFP)](https://www.lotfp.com/RPG/) or any other related entities.
+
+The content utilized in this project has been sourced from publicly available materials, including but not limited to the [LotFP Rules & Magic Free Version](https://preview.drivethrurpg.com/en/product/115059/LotFP-Rules--Magic-Free-Version) and resources from [Basic Fantasy RPG](https://www.basicfantasy.org/downloads.html).
diff --git a/middleware.ts b/middleware.ts
@@ -1,6 +1,8 @@
 import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 
+import { DEFAULT_LOCALE } from '@/translations/languages'
+
 const PUBLIC_FILE = /\.(.*)$/
 
 export async function middleware(req: NextRequest) {
@@ -13,7 +15,7 @@ export async function middleware(req: NextRequest) {
   }
 
   if (req.nextUrl.locale === 'default') {
-    const locale = req.cookies.get('NEXT_LOCALE')?.value || 'en'
+    const locale = req.cookies.get('NEXT_LOCALE')?.value || DEFAULT_LOCALE
 
     return NextResponse.redirect(
       new URL(

diff --git a/src/components/Wallet/Wallet.tsx b/src/components/Wallet/Wallet.tsx
@@ -61,7 +61,7 @@ const Wallet = () => {
           onChange={toggleCoinsWeightActive}
           title={t`Enable the weight of coins for encumbrance calculations.`}
         >
-          <Trans>Coin weight</Trans>
+          <Trans>Coins weigh</Trans>
         </Toggle>
       </>
     </div>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,23 +1,28 @@
+import { Trans } from '@lingui/macro'
 import Image from 'next/image'
 import Link from 'next/link'
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 
 import NavigationLinks from '@/components/layout/NavigationLinks'
+import UiContext from '@/shared/context/uiContext'
 import isDevEnv from '@/shared/helpers/isDevEnv'
 
 const Footer = () => {
   const [viewportDebugHidden, setViewportDebugHidden] = useState(false)
+  const {
+    uiState: { version },
+  } = useContext(UiContext)
 
   return (
     <footer className='text-base text-gray-700'>
       <div className='mx-auto max-w-screen-2xl px-4 py-6 sm:px-6 lg:px-8'>
-        <div className='flex flex-col md:flex-row items-center justify-between'>
-          <div className='mb-2 text-base md:mb-0 whitespace-normal break-words'>
+        <div className='flex flex-col items-center justify-between'>
+          <div className='mb-4 max-w-full whitespace-normal break-words text-base'>
             <NavigationLinks />
             <Link
               href='https://github.com/8kto/ttrpg-lotfp-helpers'
               target='_blank'
-              className='ph-color-accent hover:underline underline-offset-4'
+              className='ph-color-accent underline-offset-4 hover:underline whitespace-nowrap'
             >
               GitHub
             </Link>
@@ -28,18 +33,19 @@ const Footer = () => {
               alt='Flame Princess'
               width='32'
               height='32'
-              className='mr-2'
+              className='mr-1'
             />
-            <span className='text-sm'>
-              © 2023-2024{' '}
+            <div className='inline-block text-sm text-gray-600'>
+              <Trans>Princess Helpers</Trans> v{version}{' '}
+              <span className='ml-4'>© 2023-2024 </span>
               <Link
                 href='https://ivlev.blog/'
-                className='hover:underline underline-offset-4 whitespace-nowrap'
+                className='whitespace-nowrap underline-offset-4 hover:underline'
                 target='_blank'
               >
                 Igor Okto (undefined)
               </Link>
-            </span>
+            </div>
           </div>
         </div>
         {isDevEnv() && (

diff --git a/src/components/layout/PageLayout.tsx b/src/components/layout/PageLayout.tsx
@@ -5,8 +5,8 @@ import Toast from '@/components/Toast/Toast'
 const PageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
-      <div className='flex flex-grow pt-[5.5rem]'>
-        <main className='ph-content-container mx-auto w-full max-w-screen-md px-2.5 sm:px-6 lg:px-8'>
+      <div className='flex flex-grow pt-[5.2rem] md:pt-24'>
+        <main className='ph-content-container mx-auto w-full max-w-screen-lg px-2.5 sm:px-6 lg:px-8'>
           <div className='rounded border border-gray-200 bg-white p-6 shadow-sm sm:p-8'>
             {children}
           </div>

diff --git a/src/config/MiscEquipmentItems.ts b/src/config/MiscEquipmentItems.ts
@@ -136,6 +136,7 @@ back out again`,
   {
     categoryKey: 'miscEquipment',
     cityCostCp: 20,
+    details: t`Using a crowbar adds a +1 bonus to the Open Doors roll chances.`,
     name: t`Crowbar`,
     points: EncumbranceUnit.Regular,
     ruralCostCp: 20,
@@ -164,6 +165,7 @@ back out again`,
   {
     categoryKey: 'miscEquipment',
     cityCostCp: 3,
+    details: t`An aromatic herb that repels vampires and some other undead monsters.`,
     name: t`Garlic`,
     points: EncumbranceUnit.None,
     ruralCostCp: 1,
@@ -221,7 +223,7 @@ back out again`,
   {
     categoryKey: 'miscEquipment',
     cityCostCp: 1,
-    details: t`Writing ink: Stored in a small ceramic jar or tin and sufficient for 50 pages of normal writing`,
+    details: t`Writing ink: Stored in a small ceramic jar or tin and sufficient for 50 pages of normal writing. Required for mapping.`,
     name: t`Ink`,
     points: EncumbranceUnit.None,
     ruralCostCp: 5,
@@ -339,6 +341,7 @@ make noise when it shatters.`,
   {
     categoryKey: 'miscEquipment',
     cityCostCp: 2,
+    details: t`Required for mapping.`,
     name: t`Paper`,
     points: EncumbranceUnit.None,
     ruralCostCp: 2,
@@ -513,6 +516,7 @@ required by a normal character in a single day.`,
   {
     categoryKey: 'miscEquipment',
     cityCostCp: 10,
+    details: t`Aconite, also known as wolvesbane (wolfsbane) is sold dried or fresh in single sprigs. This herb is used to drive off lycanthropes, who cannot stand it.`,
     name: t`Wolvesbane`,
     points: EncumbranceUnit.None,
     ruralCostCp: 1,

diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -6,149 +6,31 @@ import React from 'react'
 
 import HeadMetadata from '@/components/layout/HeadMetadata'
 import PageLayout from '@/components/layout/PageLayout'
-import { loadCatalog } from '@/translations/utils'
+import type { LOCALE_SHORT } from '@/translations/languages'
+import { getTranslatedPageContent, loadCatalog } from '@/translations/utils'
 
 export const getStaticProps: GetStaticProps = async (ctx) => {
   const translation = await loadCatalog(ctx.locale!)
 
   return {
     props: {
       translation,
+      locale: ctx.locale,
     },
   }
 }
 
-export default function AboutPage() {
+export default function AboutPage({ locale }: { locale: LOCALE_SHORT }) {
+  const ContentComponent = getTranslatedPageContent('about', locale)
+
   return (
     <>
       <HeadMetadata
         title={t`About`}
         description={t`About LotFP tools project`}
       />
       <PageLayout>
-        <section>
-          <header>
-            <h2>About</h2>
-          </header>
-          <p>
-            This is an online inventory and equipment tool for the LotFP TTRPG
-            system. Currently, it does not include mounts, animals, or firearms.
-            I plan to revisit this after a [short] break.
-          </p>
-          <p>
-            The main task this tool aims to solve is to allow playing from a
-            phone or desktop, quickly create inventory, and easily calculate
-            encumbrance and movement rate (speed). The inventory can be shared,
-            it is saved between page refreshes, and there is an export and
-            import feature.
-          </p>
-          <details className='mb-4'>
-            <summary>Features list</summary>
-            <ul>
-              <li>
-                Lists of equipment including armor, weapons, miscellaneous
-                items, and some tips about these items.
-              </li>
-              <li>
-                Calculation
-                <ul>
-                  <li>Encumbrance</li>
-                  <li>Movement</li>
-                  <li>Terrain and weather adjustments</li>
-                </ul>
-              </li>
-              <li>Custom equipment entries</li>
-              <li>
-                Inventory is saved in locale storage and survives the page
-                reload
-                <ul>
-                  <li>State can be exported and imported</li>
-                </ul>
-              </li>
-              <li>Languages support</li>
-              <li>Responsive layout, mobile devices support</li>
-              <li>
-                Equipment sets
-                <ul>
-                  <li>By class</li>
-                  <li>Common</li>
-                  <li>Random</li>
-                </ul>
-              </li>
-            </ul>
-          </details>
-          <p>
-            The full list of features is available on the{' '}
-            <a
-              target='_blank'
-              rel='noopener noreferrer'
-              href='https://github.com/8kto/ttrpg-lotfp-helpers?tab=readme-ov-file#features-list'
-            >
-              project page
-            </a>
-            .
-          </p>
-        </section>
-
-        <section>
-          <header>
-            <h2>Contacts</h2>
-          </header>
-          <p>
-            I&apos;d love to hear that you&apos;re using the app in your games.
-          </p>
-          <ul>
-            <li>
-              <a
-                href='https://quoteque.itch.io/princess-helpers'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                quoteque.itch.io/princess-helpers
-              </a>
-            </li>
-            <li>
-              My website:{' '}
-              <a
-                href='https://ivlev.blog/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                ivlev.blog
-              </a>
-            </li>
-            <li>
-              <a href='https://t.me/oktottrpg'>What Does Oktopus Say</a> in
-              Telegram.
-            </li>
-          </ul>
-          <p>
-            For feedback, bug reports, feature requests, typos in translations
-            (some are machine-translated), or other comments, visit{' '}
-            <a
-              href='https://github.com/8kto/ttrpg-lotfp-helpers'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              Princess Helpers on GitHub
-            </a>
-            . <br />
-            You may <strong>suggest translation</strong> at the same page.
-          </p>
-          <p>
-            If you enjoy the tool, feel free to share it, star it on GitHub,
-            hack it,{' '}
-            <a
-              target='_blank'
-              rel='noopener noreferrer'
-              href='https://www.buymeacoffee.com/8kto'
-            >
-              buy me a coffee
-            </a>{' '}
-            (I will spend that money on role-playing games; your name would be
-            added to the contributors list).
-          </p>
-        </section>
+        <ContentComponent />
       </PageLayout>
     </>
   )