From 0ae9d6efd84762443ace3869fa352debc3017e76 Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Mon, 25 Jul 2022 18:31:20 +0100
Subject: [PATCH] chore: run prettier

---
 components/Button.tsx                     |  45 +-
 components/NavBar.tsx                     |  18 +-
 components/TextInput.tsx                  |  35 +-
 next.config.js                            |   4 +-
 pages/_app.tsx                            |  14 +-
 pages/api/auth/[...nextauth].ts           |   6 +-
 pages/api/submit-page-bubbles.ts          |  53 ++-
 pages/comic/[comic]/index.tsx             | 100 +++--
 pages/comic/[comic]/transcribe/[page].tsx | 495 +++++++++++++---------
 pages/comic/[comic]/transcribe/random.tsx |  65 +--
 postcss.config.js                         |  10 +-
 prisma/seed-data/comics/rain.json         |   4 +-
 prisma/seed.ts                            |  22 +-
 src/ocr.ts                                |  36 +-
 src/utils.ts                              |  21 +-
 tailwind.config.js                        |  24 +-
 16 files changed, 577 insertions(+), 375 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index 82d0618..62a4b49 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,16 +1,43 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefAttributes } from "react";
+import {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    DetailedHTMLProps,
+    RefAttributes,
+} from 'react';
 import Link, { LinkProps } from 'next/link';
 
-export default function Button({ className, ...props }: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) {
-    return <button className={'bg-slate-600 text-slate-50 p-1 rounded shadow shadow-slate-900 hover:bg-slate-500 transition-colors ' + (className || '')} {...props} />
+export default function Button({
+    className,
+    ...props
+}: DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+>) {
+    return (
+        <button
+            className={
+                'bg-slate-600 text-slate-50 p-1 rounded shadow shadow-slate-900 hover:bg-slate-500 transition-colors ' +
+                (className || '')
+            }
+            {...props}
+        />
+    );
 }
 
-type LinkButtonProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> & LinkProps & {
-    children?: React.ReactNode;
-} & RefAttributes<HTMLAnchorElement>;
+type LinkButtonProps = Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof LinkProps
+> &
+    LinkProps & {
+        children?: React.ReactNode;
+    } & RefAttributes<HTMLAnchorElement>;
 
 export function LinkButton({ className, children, ...props }: LinkButtonProps) {
-    return <Link {...props}>
-        <a className={'text-blue-200 hover:underline ' + (className || '')}>{children}</a>
-    </Link>
+    return (
+        <Link {...props}>
+            <a className={'text-blue-200 hover:underline ' + (className || '')}>
+                {children}
+            </a>
+        </Link>
+    );
 }
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 24eb6ff..f21691d 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import { signIn, signOut, useSession } from "next-auth/react";
+import { signIn, signOut, useSession } from 'next-auth/react';
 
 export default function NavBar() {
     const { data, status } = useSession();
@@ -6,11 +6,15 @@ export default function NavBar() {
     return (
         <nav className='flex flex-row h-12 bg-gray-900 justify-end items-center p-4 gap-1 shadow mb-4'>
             {status === 'loading' && <>...</>}
-            {status === 'unauthenticated' && <button onClick={() => signIn('keycloak')}>Log in</button>}
-            {status === 'authenticated' && <>
-                <span>{data?.user?.name}</span>
-                <button onClick={() => signOut()}>(Log out)</button>
-            </>}
+            {status === 'unauthenticated' && (
+                <button onClick={() => signIn('keycloak')}>Log in</button>
+            )}
+            {status === 'authenticated' && (
+                <>
+                    <span>{data?.user?.name}</span>
+                    <button onClick={() => signOut()}>(Log out)</button>
+                </>
+            )}
         </nav>
-    )
+    );
 }
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
index eeff077..273d919 100644
--- a/components/TextInput.tsx
+++ b/components/TextInput.tsx
@@ -1,12 +1,37 @@
-import { DetailedHTMLProps, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+import {
+    DetailedHTMLProps,
+    InputHTMLAttributes,
+    TextareaHTMLAttributes,
+} from 'react';
 
-type Props = ({ multiline: true } & DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>)
-    | ({ multiline: false | undefined } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>);
+type Props =
+    | ({ multiline: true } & DetailedHTMLProps<
+          TextareaHTMLAttributes<HTMLTextAreaElement>,
+          HTMLTextAreaElement
+      >)
+    | ({ multiline: false | undefined } & DetailedHTMLProps<
+          InputHTMLAttributes<HTMLInputElement>,
+          HTMLInputElement
+      >);
 
 export default function TextInput({ multiline, className, ...props }: Props) {
     if (multiline) {
-        return <textarea className={'bg-slate-600 p-1 overflow-auto rounded ' + className} {...props as any} />
+        return (
+            <textarea
+                className={
+                    'bg-slate-600 p-1 overflow-auto rounded ' + className
+                }
+                {...(props as any)}
+            />
+        );
     } else {
-        return <input className={'bg-slate-600 p-1 overflow-auto rounded ' + className} {...props as any} />
+        return (
+            <input
+                className={
+                    'bg-slate-600 p-1 overflow-auto rounded ' + className
+                }
+                {...(props as any)}
+            />
+        );
     }
 }
diff --git a/next.config.js b/next.config.js
index 00e6898..ad874a6 100755
--- a/next.config.js
+++ b/next.config.js
@@ -3,9 +3,7 @@ const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     images: {
-        domains: [
-            'img.comicfury.com'
-        ],
+        domains: ['img.comicfury.com'],
     },
 };
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a5f6004..b7f1bbf 100755
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,12 +4,14 @@ import { SessionProvider } from 'next-auth/react';
 import NavBar from '../components/NavBar';
 
 function MyApp({ Component, pageProps }: AppProps) {
-    return <>
-        <SessionProvider>
-            <NavBar />
-            <Component {...pageProps} />
-        </SessionProvider>
-    </>;
+    return (
+        <>
+            <SessionProvider>
+                <NavBar />
+                <Component {...pageProps} />
+            </SessionProvider>
+        </>
+    );
 }
 
 export default MyApp;
diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
index d8dce9d..809e93e 100644
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -1,6 +1,6 @@
-import NextAuth, { NextAuthOptions } from "next-auth";
-import Keycloak from "next-auth/providers/keycloak";
-import process from "process";
+import NextAuth, { NextAuthOptions } from 'next-auth';
+import Keycloak from 'next-auth/providers/keycloak';
+import process from 'process';
 
 export const authOptions: NextAuthOptions = {
     providers: [
diff --git a/pages/api/submit-page-bubbles.ts b/pages/api/submit-page-bubbles.ts
index 5e54e7d..9130029 100644
--- a/pages/api/submit-page-bubbles.ts
+++ b/pages/api/submit-page-bubbles.ts
@@ -1,32 +1,39 @@
-import { ComicBubble, Prisma } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
-import { unstable_getServerSession } from "next-auth";
+import { ComicBubble, Prisma } from '@prisma/client';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { unstable_getServerSession } from 'next-auth';
 import { z } from 'zod';
-import { prisma } from "../../src/db";
-import { authOptions } from "./auth/[...nextauth]";
+import { prisma } from '../../src/db';
+import { authOptions } from './auth/[...nextauth]';
 
 const PageBubblesSchema = z.object({
-    bubbles: z.array(z.object({
-        area: z.object({
-            x: z.number(),
-            y: z.number(),
-            width: z.number(),
-            height: z.number(),
-        }),
-        character: z.number(),
-        index: z.number(),
-        text: z.string(),
-    })),
+    bubbles: z.array(
+        z.object({
+            area: z.object({
+                x: z.number(),
+                y: z.number(),
+                width: z.number(),
+                height: z.number(),
+            }),
+            character: z.number(),
+            index: z.number(),
+            text: z.string(),
+        })
+    ),
     comicId: z.number(),
     pageId: z.number(),
 });
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method !== 'PUT') return res.status(405).json({ error: 'method not allowed' });
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse
+) {
+    if (req.method !== 'PUT')
+        return res.status(405).json({ error: 'method not allowed' });
 
     const session = await unstable_getServerSession(req, res, authOptions);
-    if (!session) return res.status(401).json({ error: 'authentication required' });
-    
+    if (!session)
+        return res.status(401).json({ error: 'authentication required' });
+
     const data = PageBubblesSchema.parse(req.body);
 
     const page = await prisma.comicPage.findFirst({
@@ -46,7 +53,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             const char = await prisma.comicCharacter.findFirst({
                 where: {
                     id: bubble.character,
-                }
+                },
             });
             if (!char) {
                 return res.status(400).json({ message: 'bad request' });
@@ -79,11 +86,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                 areaHeight: bubble.area.height,
                 characterId: bubble.character,
                 content: bubble.text,
-            }
+            },
         });
         ops.push(op);
     }
     await prisma.$transaction(ops);
 
-    res.status(201).json({ });
+    res.status(201).json({});
 }
diff --git a/pages/comic/[comic]/index.tsx b/pages/comic/[comic]/index.tsx
index 2cd2587..d2028df 100644
--- a/pages/comic/[comic]/index.tsx
+++ b/pages/comic/[comic]/index.tsx
@@ -1,9 +1,9 @@
-import { Comic } from "@prisma/client";
-import { GetServerSideProps } from "next";
-import Head from "next/head";
-import { ParsedUrlQuery } from "querystring";
-import { LinkButton } from "../../../components/Button";
-import { prisma } from "../../../src/db";
+import { Comic } from '@prisma/client';
+import { GetServerSideProps } from 'next';
+import Head from 'next/head';
+import { ParsedUrlQuery } from 'querystring';
+import { LinkButton } from '../../../components/Button';
+import { prisma } from '../../../src/db';
 
 interface Params extends ParsedUrlQuery {
     comic: string;
@@ -14,47 +14,56 @@ interface Props {
     completion: {
         completePages: number;
         totalPages: number;
-    }
+    };
 }
 
 export default function ComicPage({ comic, completion }: Props) {
-    return <main className='p-4'>
-        <Head>
-            <title>{`${comic.title}`}</title>
-        </Head>
-        <h1 className='text-4xl pb-2'>
-            {comic.title}
-        </h1>
+    return (
+        <main className='p-4'>
+            <Head>
+                <title>{`${comic.title}`}</title>
+            </Head>
+            <h1 className='text-4xl pb-2'>{comic.title}</h1>
 
-        <section>
-            <p>
-                So far, a total of {completion.completePages} out of {completion.totalPages} pages have been transcribed!
-            </p>
-        </section>
+            <section>
+                <p>
+                    So far, a total of {completion.completePages} out of{' '}
+                    {completion.totalPages} pages have been transcribed!
+                </p>
+            </section>
 
-        <nav>
-            <ul>
-                <li>
-                    <LinkButton href={`/comic/${comic.slug}/transcribe/random`}>
-                        Random page
-                    </LinkButton>
-                </li>
-                <li>
-                    <LinkButton href={`/comic/${comic.slug}/transcribe/random?completed=true`}>
-                        Random page (complete)
-                    </LinkButton>
-                </li>
-                <li>
-                    <LinkButton href={`/comic/${comic.slug}/transcribe/random?completed=false`}>
-                        Random page (incomplete)
-                    </LinkButton>
-                </li>
-            </ul>
-        </nav>
-    </main>
+            <nav>
+                <ul>
+                    <li>
+                        <LinkButton
+                            href={`/comic/${comic.slug}/transcribe/random`}
+                        >
+                            Random page
+                        </LinkButton>
+                    </li>
+                    <li>
+                        <LinkButton
+                            href={`/comic/${comic.slug}/transcribe/random?completed=true`}
+                        >
+                            Random page (complete)
+                        </LinkButton>
+                    </li>
+                    <li>
+                        <LinkButton
+                            href={`/comic/${comic.slug}/transcribe/random?completed=false`}
+                        >
+                            Random page (incomplete)
+                        </LinkButton>
+                    </li>
+                </ul>
+            </nav>
+        </main>
+    );
 }
 
-export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ params }) => {
+export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
+    params,
+}) => {
     const { comic: comicId } = params!;
 
     const comic = await prisma.comic.findFirst({
@@ -83,8 +92,9 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ pa
             comic,
             completion: {
                 totalPages: pages.length,
-                completePages: pages.filter(page => page._count.bubbles !== 0).length,
-            }
-        }
-    }
-}
+                completePages: pages.filter((page) => page._count.bubbles !== 0)
+                    .length,
+            },
+        },
+    };
+};
diff --git a/pages/comic/[comic]/transcribe/[page].tsx b/pages/comic/[comic]/transcribe/[page].tsx
index 305c9bf..75ee567 100644
--- a/pages/comic/[comic]/transcribe/[page].tsx
+++ b/pages/comic/[comic]/transcribe/[page].tsx
@@ -1,15 +1,19 @@
-import { AreaSelector, IArea, IAreaRendererProps } from "@bmunozg/react-image-area";
-import { GetServerSideProps } from "next";
-import Head from "next/head";
+import {
+    AreaSelector,
+    IArea,
+    IAreaRendererProps,
+} from '@bmunozg/react-image-area';
+import { GetServerSideProps } from 'next';
+import Head from 'next/head';
 import Image from 'next/image';
-import { ParsedUrlQuery } from "querystring";
-import { useCallback, useMemo, useState } from "react";
+import { ParsedUrlQuery } from 'querystring';
+import { useCallback, useMemo, useState } from 'react';
 import Select from 'react-select';
-import Button, { LinkButton } from "../../../../components/Button";
-import TextInput from "../../../../components/TextInput";
-import { prisma } from "../../../../src/db";
-import { performOcr } from "../../../../src/ocr";
-import { percentify, randomColour, unPercentify } from "../../../../src/utils";
+import Button, { LinkButton } from '../../../../components/Button';
+import TextInput from '../../../../components/TextInput';
+import { prisma } from '../../../../src/db';
+import { performOcr } from '../../../../src/ocr';
+import { percentify, randomColour, unPercentify } from '../../../../src/utils';
 
 interface Params extends ParsedUrlQuery {
     comic: string;
@@ -44,11 +48,16 @@ interface Region {
 
 const SelectedArea = (props: IAreaRendererProps) => {
     if (!props.isChanging) {
-        return <div key={props.areaNumber} className='text-slate-900 font-bold bg-slate-50 opacity-90 text-center'>
-            {props.areaNumber}
-        </div>
+        return (
+            <div
+                key={props.areaNumber}
+                className='text-slate-900 font-bold bg-slate-50 opacity-90 text-center'
+            >
+                {props.areaNumber}
+            </div>
+        );
     }
-}
+};
 
 export default function TranscribePage(props: Props) {
     const [regions, setRegions] = useState<Region[]>(props.regions);
@@ -59,25 +68,29 @@ export default function TranscribePage(props: Props) {
 
     const extractText = useCallback(() => {
         if (image && regions.length > 0) {
-            const promises = regions.map(region => performOcr(image, region.area));
-            Promise.all(promises).then(texts => {
-                setRegions(regions.map((region, i) => {
-                    return {
-                        ...region,
-                        text: texts[i],
-                    };
-                }));
+            const promises = regions.map((region) =>
+                performOcr(image, region.area)
+            );
+            Promise.all(promises).then((texts) => {
+                setRegions(
+                    regions.map((region, i) => {
+                        return {
+                            ...region,
+                            text: texts[i],
+                        };
+                    })
+                );
             });
         }
     }, [regions, setRegions, image]);
 
     const characters = useMemo(() => {
-        return props.characters.map(character => {
+        return props.characters.map((character) => {
             return {
                 value: character.id,
                 label: character.shortName,
             };
-        })
+        });
     }, [props.characters]);
 
     async function submitBubbles() {
@@ -88,24 +101,39 @@ export default function TranscribePage(props: Props) {
             },
             body: JSON.stringify({
                 bubbles: regions.map((region, i) => {
-                    const area = region.area.unit === 'px' ? {
-                        x: region.area.x,
-                        y: region.area.y,
-                        width: region.area.width,
-                        height: region.area.height,
-                    } : {
-                        x: unPercentify(props.page.width, region.area.x),
-                        y: unPercentify(props.page.height, region.area.y),
-                        width: unPercentify(props.page.width, region.area.width),
-                        height: unPercentify(props.page.height, region.area.height),
-                    };
+                    const area =
+                        region.area.unit === 'px'
+                            ? {
+                                  x: region.area.x,
+                                  y: region.area.y,
+                                  width: region.area.width,
+                                  height: region.area.height,
+                              }
+                            : {
+                                  x: unPercentify(
+                                      props.page.width,
+                                      region.area.x
+                                  ),
+                                  y: unPercentify(
+                                      props.page.height,
+                                      region.area.y
+                                  ),
+                                  width: unPercentify(
+                                      props.page.width,
+                                      region.area.width
+                                  ),
+                                  height: unPercentify(
+                                      props.page.height,
+                                      region.area.height
+                                  ),
+                              };
 
                     return {
                         area,
                         character: region.character?.value ?? -1,
                         index: i,
                         text: region.text,
-                    }
+                    };
                 }),
                 comicId: props.page.comic.id,
                 pageId: props.page.id,
@@ -118,162 +146,249 @@ export default function TranscribePage(props: Props) {
         }
     }
 
-    return <main className='p-4'>
-        <Head>
-            <title>{`${props.page.title} - ${props.page.comic.title}`}</title>
-        </Head>
+    return (
+        <main className='p-4'>
+            <Head>
+                <title>{`${props.page.title} - ${props.page.comic.title}`}</title>
+            </Head>
 
-        <div className='flex flex-row w-full gap-4'>
-            <section className='h-full max-w-1/2'>
-                <header className='mb-4'>
-                    <nav className='flex flex-row w-full'>
-                        <LinkButton className='flex-1 w-full' href={{
-                                pathname: '/comic/[comic]',
-                                query: {
-                                    comic: props.page.comic.slug,
-                                }
-                            }}>
-                            &larr; Back to {props.page.comic.title}
-                        </LinkButton>
-                    </nav>
-
-                    <h1 className='text-4xl pb-2'>{props.page.title}</h1>
-
-                    <nav className='flex flex-row w-full'>
-                        {props.page.id > 1 && <LinkButton className='flex-1 w-full text-center' href={{
-                            pathname: '/comic/[comic]/transcribe/[page]',
-                            query: {
-                                comic: props.page.comic.slug,
-                                page: props.page.id - 1,
-                            }
-                        }}>
-                            &larr; Previous page
-                        </LinkButton>}
-                        <LinkButton className='flex-1 w-full text-center' href={{
-                            pathname: '/comic/[comic]/transcribe/random',
-                            query: {
-                                comic: props.page.comic.slug,
-                            }
-                        }}>
-                            Random page
-                        </LinkButton>
-                        <LinkButton className='flex-1 w-full text-center' href={{
-                            pathname: '/comic/[comic]/transcribe/[page]',
-                            query: {
-                                comic: props.page.comic.slug,
-                                page: props.page.id + 1,
-                            }
-                        }}>
-                            Next page &rarr;
-                        </LinkButton>
-                    </nav>
-                </header>
-
-                <AreaSelector
-                    areas={regions.map(r => r.area)}
-                    onChange={areas => !lockAreas && setRegions(areas.map((area, i) => {
-                        if (i < regions.length) {
-                            return {
-                                ...regions[i],
-                                area,
-                            };
-                        } else {
-                            return {
-                                area,
-                                character: null,
-                                index: i,
-                                text: '',
-                            };
-                        }
-                    }))}
-                    globalAreaStyle={{
-                        border: `1.5px dashed ${randomColour(props.page.comic.id, 0.3, .49, 0.5)}`,
-                        backgroundColor: randomColour(props.page.comic.id, undefined, undefined, 0.5),
-                    }}
-                    customAreaRenderer={indicateNumbers ? SelectedArea : undefined}
-                    unit="percentage"
-                    >
-                    <Image crossOrigin="" src={props.page.imageUrl} alt={props.page.title} width={props.page.width} height={props.page.height} onLoad={e => setImage(e.currentTarget)} />
-                </AreaSelector>
-            </section>
-            <section className='flex-1'>
-                <div>
-                    <Button onClick={extractText}>Extract text</Button>
-                    <br />
-                    <label htmlFor='indicate-numbers'>
-                        <input id='indicate-numbers' type='checkbox' value={indicateNumbers.toString()} onChange={e => setIndicateNumbers(e.target.checked)} />
-                        Show selection numbers?
-                    </label>
-
-                    <br />
-
-                    <label htmlFor='lock-areas'>
-                        <input id='lock-areas' type='checkbox' value={lockAreas.toString()} onChange={e => setLockAreas(e.target.checked)} />
-                        Lock areas
-                    </label>
-                </div>
-
-                <hr className='border-slate-600 my-2' />
-
-                <div>
-                    {selectedBubble === -1 && <p>
-                        <em>Click a bubble to edit</em>
-                    </p>}
-
-                    {selectedBubble !== -1 && <>
-                        <TextInput multiline className='w-full h-24'
-                        value={regions[selectedBubble].text} onChange={(e) => {
-                            const newRegions = regions.slice();
-                            newRegions[selectedBubble].text = e.target.value;
-                            setRegions(newRegions);
-                        }} />
-
-                        <Select className='text-slate-900' onChange={(v) => {
-                            const newRegions = regions.slice();
-                            newRegions[selectedBubble].character = v;
-                            setRegions(newRegions);
-                        }} options={characters} value={regions[selectedBubble].character} />
-
-                        <Button className='mt-2 w-full' onClick={() => {
-                            const newRegions = regions.filter((_, i) => i !== selectedBubble);
-                            setRegions(newRegions);
-                            setSelectedBubble(-1);
-                        }}>
-                            Remove
-                        </Button>
-                    </>}
-                </div>
-
-                <hr className='border-slate-600 my-2' />
-
-                <div className='grid grid-cols-2 gap-2'>
-                    {regions.map((region, i) => {
-                        return <div
-                            key={i}
-                            onClick={() => setSelectedBubble(selectedBubble === i ? -1 : i)}
-                            className={'border-slate-600 border-2 rounded p-2 ' + (i === selectedBubble ? 'bg-teal-900 border-teal-700' : '')}
+            <div className='flex flex-row w-full gap-4'>
+                <section className='h-full max-w-1/2'>
+                    <header className='mb-4'>
+                        <nav className='flex flex-row w-full'>
+                            <LinkButton
+                                className='flex-1 w-full'
+                                href={{
+                                    pathname: '/comic/[comic]',
+                                    query: {
+                                        comic: props.page.comic.slug,
+                                    },
+                                }}
                             >
-                            <h3>Bubble {i + 1}</h3>
+                                &larr; Back to {props.page.comic.title}
+                            </LinkButton>
+                        </nav>
+
+                        <h1 className='text-4xl pb-2'>{props.page.title}</h1>
+
+                        <nav className='flex flex-row w-full'>
+                            {props.page.id > 1 && (
+                                <LinkButton
+                                    className='flex-1 w-full text-center'
+                                    href={{
+                                        pathname:
+                                            '/comic/[comic]/transcribe/[page]',
+                                        query: {
+                                            comic: props.page.comic.slug,
+                                            page: props.page.id - 1,
+                                        },
+                                    }}
+                                >
+                                    &larr; Previous page
+                                </LinkButton>
+                            )}
+                            <LinkButton
+                                className='flex-1 w-full text-center'
+                                href={{
+                                    pathname:
+                                        '/comic/[comic]/transcribe/random',
+                                    query: {
+                                        comic: props.page.comic.slug,
+                                    },
+                                }}
+                            >
+                                Random page
+                            </LinkButton>
+                            <LinkButton
+                                className='flex-1 w-full text-center'
+                                href={{
+                                    pathname:
+                                        '/comic/[comic]/transcribe/[page]',
+                                    query: {
+                                        comic: props.page.comic.slug,
+                                        page: props.page.id + 1,
+                                    },
+                                }}
+                            >
+                                Next page &rarr;
+                            </LinkButton>
+                        </nav>
+                    </header>
+
+                    <AreaSelector
+                        areas={regions.map((r) => r.area)}
+                        onChange={(areas) =>
+                            !lockAreas &&
+                            setRegions(
+                                areas.map((area, i) => {
+                                    if (i < regions.length) {
+                                        return {
+                                            ...regions[i],
+                                            area,
+                                        };
+                                    } else {
+                                        return {
+                                            area,
+                                            character: null,
+                                            index: i,
+                                            text: '',
+                                        };
+                                    }
+                                })
+                            )
+                        }
+                        globalAreaStyle={{
+                            border: `1.5px dashed ${randomColour(
+                                props.page.comic.id,
+                                0.3,
+                                0.49,
+                                0.5
+                            )}`,
+                            backgroundColor: randomColour(
+                                props.page.comic.id,
+                                undefined,
+                                undefined,
+                                0.5
+                            ),
+                        }}
+                        customAreaRenderer={
+                            indicateNumbers ? SelectedArea : undefined
+                        }
+                        unit='percentage'
+                    >
+                        <Image
+                            crossOrigin=''
+                            src={props.page.imageUrl}
+                            alt={props.page.title}
+                            width={props.page.width}
+                            height={props.page.height}
+                            onLoad={(e) => setImage(e.currentTarget)}
+                        />
+                    </AreaSelector>
+                </section>
+                <section className='flex-1'>
+                    <div>
+                        <Button onClick={extractText}>Extract text</Button>
+                        <br />
+                        <label htmlFor='indicate-numbers'>
+                            <input
+                                id='indicate-numbers'
+                                type='checkbox'
+                                value={indicateNumbers.toString()}
+                                onChange={(e) =>
+                                    setIndicateNumbers(e.target.checked)
+                                }
+                            />
+                            Show selection numbers?
+                        </label>
+
+                        <br />
+
+                        <label htmlFor='lock-areas'>
+                            <input
+                                id='lock-areas'
+                                type='checkbox'
+                                value={lockAreas.toString()}
+                                onChange={(e) => setLockAreas(e.target.checked)}
+                            />
+                            Lock areas
+                        </label>
+                    </div>
+
+                    <hr className='border-slate-600 my-2' />
+
+                    <div>
+                        {selectedBubble === -1 && (
                             <p>
-                                <b>{region.character?.label}</b>: {region.text || '...'}
+                                <em>Click a bubble to edit</em>
                             </p>
-                        </div>;
-                    })}
-                </div>
+                        )}
 
-                <hr className='border-slate-600 my-2' />
+                        {selectedBubble !== -1 && (
+                            <>
+                                <TextInput
+                                    multiline
+                                    className='w-full h-24'
+                                    value={regions[selectedBubble].text}
+                                    onChange={(e) => {
+                                        const newRegions = regions.slice();
+                                        newRegions[selectedBubble].text =
+                                            e.target.value;
+                                        setRegions(newRegions);
+                                    }}
+                                />
 
-                <div>
-                    <Button onClick={submitBubbles}>
-                        Save!
-                    </Button>
-                </div>
-            </section>
-        </div>
-    </main>
+                                <Select
+                                    className='text-slate-900'
+                                    onChange={(v) => {
+                                        const newRegions = regions.slice();
+                                        newRegions[selectedBubble].character =
+                                            v;
+                                        setRegions(newRegions);
+                                    }}
+                                    options={characters}
+                                    value={regions[selectedBubble].character}
+                                />
+
+                                <Button
+                                    className='mt-2 w-full'
+                                    onClick={() => {
+                                        const newRegions = regions.filter(
+                                            (_, i) => i !== selectedBubble
+                                        );
+                                        setRegions(newRegions);
+                                        setSelectedBubble(-1);
+                                    }}
+                                >
+                                    Remove
+                                </Button>
+                            </>
+                        )}
+                    </div>
+
+                    <hr className='border-slate-600 my-2' />
+
+                    <div className='grid grid-cols-2 gap-2'>
+                        {regions.map((region, i) => {
+                            return (
+                                <div
+                                    key={i}
+                                    onClick={() =>
+                                        setSelectedBubble(
+                                            selectedBubble === i ? -1 : i
+                                        )
+                                    }
+                                    className={
+                                        'border-slate-600 border-2 rounded p-2 ' +
+                                        (i === selectedBubble
+                                            ? 'bg-teal-900 border-teal-700'
+                                            : '')
+                                    }
+                                >
+                                    <h3>Bubble {i + 1}</h3>
+                                    <p>
+                                        <b>{region.character?.label}</b>:{' '}
+                                        {region.text || '...'}
+                                    </p>
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    <hr className='border-slate-600 my-2' />
+
+                    <div>
+                        <Button onClick={submitBubbles}>Save!</Button>
+                    </div>
+                </section>
+            </div>
+        </main>
+    );
 }
 
-export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ params }) => {
+export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
+    params,
+}) => {
     const { comic: comicId, page: id } = params!;
     const pageId = parseInt(id);
     if (isNaN(pageId)) return { notFound: true };
@@ -329,8 +444,8 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ pa
                 select: {
                     id: true,
                     shortName: true,
-                }
-            }
+                },
+            },
         },
     });
 
@@ -339,7 +454,7 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ pa
             page,
             characters,
             key: `${page.comic.slug}-${page.id}`,
-            regions: bubbles.map(bubble => {
+            regions: bubbles.map((bubble) => {
                 return {
                     character: {
                         value: bubble.character.id,
@@ -354,8 +469,8 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ pa
                     },
                     index: bubble.idx,
                     text: bubble.content,
-                }
-            })
+                };
+            }),
         },
     };
-}
+};
diff --git a/pages/comic/[comic]/transcribe/random.tsx b/pages/comic/[comic]/transcribe/random.tsx
index 998b539..5c1d04e 100644
--- a/pages/comic/[comic]/transcribe/random.tsx
+++ b/pages/comic/[comic]/transcribe/random.tsx
@@ -1,43 +1,46 @@
-import { GetServerSideProps } from "next";
-import { ParsedUrlQuery } from "querystring";
-import { prisma } from "../../../../src/db";
+import { GetServerSideProps } from 'next';
+import { ParsedUrlQuery } from 'querystring';
+import { prisma } from '../../../../src/db';
 
 interface Params extends ParsedUrlQuery {
     comic: string;
 }
 
 export default function RandomPage() {
-    return <>
-        Please wait...
-    </>
+    return <>Please wait...</>;
 }
 
-export const getServerSideProps: GetServerSideProps<{}, Params> = async ({ params, query }) => {
+export const getServerSideProps: GetServerSideProps<{}, Params> = async ({
+    params,
+    query,
+}) => {
     const { comic: comicSlug } = params!;
 
-    const pages = await prisma.comicPage.findMany({
-        where: {
-            comic: {
-                slug: comicSlug,
+    const pages = await prisma.comicPage
+        .findMany({
+            where: {
+                comic: {
+                    slug: comicSlug,
+                },
             },
-        },
-        select: {
-            id: true,
-            _count: {
-                select: {
-                    bubbles: true,
-                }
+            select: {
+                id: true,
+                _count: {
+                    select: {
+                        bubbles: true,
+                    },
+                },
+            },
+        })
+        .then((pages) => {
+            if (query.completed === 'true') {
+                return pages.filter((page) => page._count.bubbles !== 0);
+            } else if (query.completed === 'false') {
+                return pages.filter((page) => page._count.bubbles === 0);
+            } else {
+                return pages;
             }
-        }
-    }).then(pages => {
-        if (query.completed === 'true') {
-            return pages.filter(page => page._count.bubbles !== 0);
-        } else if (query.completed === 'false') {
-            return pages.filter(page => page._count.bubbles === 0);
-        } else {
-            return pages;
-        }
-    });
+        });
 
     console.log(pages.length);
     const randomPage = pages[Math.floor(Math.random() * pages.length)];
@@ -46,6 +49,6 @@ export const getServerSideProps: GetServerSideProps<{}, Params> = async ({ param
         redirect: {
             destination: `/comic/${comicSlug}/transcribe/${randomPage.id}`,
             permanent: false,
-        }
-    }
-}
+        },
+    };
+};
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..67cdf1a 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/prisma/seed-data/comics/rain.json b/prisma/seed-data/comics/rain.json
index 2d23e33..a4764e2 100644
--- a/prisma/seed-data/comics/rain.json
+++ b/prisma/seed-data/comics/rain.json
@@ -21096,7 +21096,7 @@
             "longName": "Brett Desrocher",
             "shortName": "Brett"
         },
-        
+
         {
             "longName": "Father Quenton Morrison",
             "shortName": "Father Quenton"
@@ -21133,7 +21133,7 @@
         "Frank Johnson",
         "Norman Strongwell",
         "Donna Strongwell",
-        
+
         {
             "longName": "Heather Coven",
             "shortName": "Heather"
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 8783d43..c438972 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -34,7 +34,7 @@ async function seedComicRain() {
     {
         // Chapters not directly related to the story
         const SKIP_CHAPTERS = [
-            0,  // Cover page
+            0, // Cover page
             30, // SRS Hiatus
             37, // Summer 2018 Hiatus
             42, // Quarantine Hiatus 2020
@@ -73,14 +73,15 @@ async function seedComicRain() {
     {
         const ops: Prisma.Prisma__ComicCharacterClient<ComicCharacter>[] = [];
         for (const char of rain.characters) {
-            const character = (typeof char === 'string')
-                ? { longName: char, shortName: char }
-                : char;
-            
+            const character =
+                typeof char === 'string'
+                    ? { longName: char, shortName: char }
+                    : char;
+
             const characterData = {
                 comicId: comic.id,
-                ...character
-            }
+                ...character,
+            };
             const op = prisma.comicCharacter.upsert({
                 where: {
                     longName: character.longName,
@@ -95,11 +96,8 @@ async function seedComicRain() {
 }
 
 (async function () {
-
     await seedComicRain();
-
-})().catch(e => {
-    console.error('failed to seed',
-    e);
+})().catch((e) => {
+    console.error('failed to seed', e);
     process.exitCode = 1;
 });
diff --git a/src/ocr.ts b/src/ocr.ts
index 796e5de..f86c959 100644
--- a/src/ocr.ts
+++ b/src/ocr.ts
@@ -1,19 +1,25 @@
-import { IArea } from "@bmunozg/react-image-area";
-import Tesseract from "tesseract.js";
-import { unPercentify } from "./utils";
+import { IArea } from '@bmunozg/react-image-area';
+import Tesseract from 'tesseract.js';
+import { unPercentify } from './utils';
 
-export async function performOcr(image: HTMLImageElement, a: IArea): Promise<string> {
-    const area = a.unit === 'px' ? {
-        x: a.x,
-        y: a.y,
-        width: a.width,
-        height: a.height,
-    } : {
-        x: unPercentify(image.width, a.x),
-        y: unPercentify(image.height, a.y),
-        width: unPercentify(image.width, a.width),
-        height: unPercentify(image.height, a.height),
-    };
+export async function performOcr(
+    image: HTMLImageElement,
+    a: IArea
+): Promise<string> {
+    const area =
+        a.unit === 'px'
+            ? {
+                  x: a.x,
+                  y: a.y,
+                  width: a.width,
+                  height: a.height,
+              }
+            : {
+                  x: unPercentify(image.width, a.x),
+                  y: unPercentify(image.height, a.y),
+                  width: unPercentify(image.width, a.width),
+                  height: unPercentify(image.height, a.height),
+              };
     const canvas = document.createElement('canvas');
     canvas.width = area.width;
     canvas.height = area.height;
diff --git a/src/utils.ts b/src/utils.ts
index cb5ec9e..6c572ae 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,10 +1,10 @@
 const ONE_OVER_PHI = 0.618033988749895;
 
 function hsvToRgb(h: number, s: number, v: number): string {
-    const h_i = Math.round(h*6);
-    const f = h*6 - h_i;
+    const h_i = Math.round(h * 6);
+    const f = h * 6 - h_i;
     const p = v * (1 - s);
-    const q = v * (1 - f*s);
+    const q = v * (1 - f * s);
     const t = v * (1 - (1 - f) * s);
     let r: number, g: number, b: number;
     if (h_i === 0) {
@@ -32,15 +32,22 @@ function hsvToRgb(h: number, s: number, v: number): string {
         g = p;
         b = q;
     }
-    return `${Math.round(r*256)}, ${Math.round(g*256)}, ${Math.round(b*256)}`;
+    return `${Math.round(r * 256)}, ${Math.round(g * 256)}, ${Math.round(
+        b * 256
+    )}`;
 }
 
-export function randomColour(index: number, s: number = 0.3, v: number = 0.99, opacity: number = 1) {
+export function randomColour(
+    index: number,
+    s: number = 0.3,
+    v: number = 0.99,
+    opacity: number = 1
+) {
     // Generated with Math.random()
     let h = 0.6220694728604135;
     for (var i = 0; i < index; i++) {
-      h += ONE_OVER_PHI;
-      h %= 1;
+        h += ONE_OVER_PHI;
+        h %= 1;
     }
     return `rgba(${hsvToRgb(h, s, v)}, ${opacity * 100}%)`;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index e8c69bd..88284eb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,15 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      maxWidth: {
-        '1/2': '50%',
-      },
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx}',
+        './components/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {
+            maxWidth: {
+                '1/2': '50%',
+            },
+        },
     },
-  },
-  plugins: [],
-}
+    plugins: [],
+};