Testing page generation

src/lib/components/Button.svelte

@@ -41,6 +41,7 @@
 	style:--color={color}
 	style:--background-color={backgroundColor}
 	style:--active={activeColor}
+	{...$$restProps}
 	on:click
 >
 	<slot />

src/lib/components/Catalog.svelte

@@ -11,32 +11,92 @@
 		{
 			title: 'Manga name',
 			cover: image1,
-			currentPage: 26,
-			totalPages: 100
+			volumes: [
+				{
+					cover: image1,
+					title: 'Volume 1',
+					currentPage: 0,
+					totalPages: 100
+				},
+				{
+					cover: image1,
+					title: 'Volume 2',
+					currentPage: 0,
+					totalPages: 100
+				}
+			]
 		},
 		{
 			title: 'Another',
 			cover: image2,
-			currentPage: 0,
-			totalPages: 120
+			volumes: [
+				{
+					cover: image2,
+					title: 'Volume 1',
+					currentPage: 0,
+					totalPages: 100
+				},
+				{
+					cover: image2,
+					title: 'Volume 2',
+					currentPage: 0,
+					totalPages: 100
+				}
+			]
 		},
 		{
 			title: 'Awooo',
 			cover: image3,
-			currentPage: 69,
-			totalPages: 96
+			volumes: [
+				{
+					cover: image3,
+					title: 'Volume 1',
+					currentPage: 0,
+					totalPages: 100
+				},
+				{
+					cover: image3,
+					title: 'Volume 2',
+					currentPage: 0,
+					totalPages: 100
+				}
+			]
 		},
 		{
 			title: 'Title',
 			cover: image4,
-			currentPage: 9,
-			totalPages: 59
+			volumes: [
+				{
+					cover: image4,
+					title: 'Volume 1',
+					currentPage: 0,
+					totalPages: 100
+				},
+				{
+					cover: image4,
+					title: 'Volume 2',
+					currentPage: 0,
+					totalPages: 100
+				}
+			]
 		},
 		{
 			title: 'sdhfjksdh',
 			cover: image5,
-			currentPage: 19,
-			totalPages: 200
+			volumes: [
+				{
+					cover: image5,
+					title: 'Volume 1',
+					currentPage: 0,
+					totalPages: 100
+				},
+				{
+					cover: image5,
+					title: 'Volume 2',
+					currentPage: 0,
+					totalPages: 100
+				}
+			]
 		}
 	];
 </script>

src/lib/components/CatalogItem.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { currentManga } from '$lib/catalog';
 	import type { Manga } from '$lib/types/catalog';
-	import Button from './Button.svelte';
-
+	import { navbarTitle } from './NavBar.svelte';
 	export let manga: Manga;
-	const { cover, currentPage, title, totalPages } = manga;
+	const { cover, title } = manga;
 
 	function onClick() {
+		console.log('bruh');
+
+		navbarTitle.set(title);
 		currentManga.set(manga);
 	}
 </script>
@@ -16,7 +17,6 @@
 	<div class="content">
 		{title}
 		<img src={cover} alt={title} />
-		{currentPage} / {totalPages}
 	</div>
 </a>
 

src/lib/components/FileUpload.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Entry } from '@zip.js/zip.js';
+	import Button from './Button.svelte';
+	import { colors } from '$lib/theme';
+
+	export let accept: string | null | undefined = undefined;
+	export let files: FileList | null | undefined = undefined;
+	export let multiple: boolean | null | undefined = true;
+	export let onUpload: ((files: FileList) => void) | undefined = undefined;
+
+	let input: HTMLInputElement;
+
+	function handleChange() {
+		if (files && onUpload) {
+			onUpload(files);
+		}
+	}
+
+	function onClick() {
+		input.click();
+	}
+
+	function onDrop(event: DragEvent) {
+		const items = event.dataTransfer?.items;
+		// TODO
+	}
+</script>
+
+<input type="file" {multiple} {accept} bind:files bind:this={input} on:change={handleChange} />
+
+<button
+	on:click={onClick}
+	style:--border={colors.secondaryColor}
+	on:dragover|preventDefault
+	on:drop|preventDefault|stopPropagation={onDrop}
+>
+	<p style:color={colors.secondaryColor}><slot>Upload</slot></p>
+</button>
+
+<style>
+	input {
+		display: none;
+	}
+
+	button {
+		width: 500px;
+		height: 100px;
+		border-radius: 12px;
+		border: 2px dashed var(--border);
+	}
+
+	p {
+		font-weight: bold;
+		font-size: 16px;
+	}
+</style>

src/lib/components/NavBar.svelte

@@ -1,16 +1,51 @@
-<script lang="ts">
-	import { colors } from '$lib/theme';
+<script lang="ts" context="module">
+	export let navbarTitle = writable<string | undefined>(undefined);
+</script>
 
-	export let title: string | undefined = undefined;
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	import { currentManga, currentVolume } from '$lib/catalog';
+
+	import { colors } from '$lib/theme';
+	import { writable } from 'svelte/store';
+	let title: string | undefined = 'Mokuro';
+	let back: string | undefined = undefined;
+
+	afterNavigate(() => {
+		console.log($page?.route.id);
+		window.document.body.classList.remove('reader');
+
+		switch ($page?.route.id) {
+			case '/[manga]':
+				title = $currentManga?.title;
+				back = '/';
+				break;
+			case '/[manga]/[volume]':
+				window.document.body.classList.add('reader');
+				title = $currentVolume?.title;
+				back = '/manga';
+				break;
+			case '/upload':
+				title = 'Upload';
+				back = '/';
+				break;
+			default:
+				title = 'Mokuro';
+				back = undefined;
+				break;
+		}
+	});
 </script>
 
 <nav>
 	<div style:background-color={colors.primaryColor}>
-		{#if title}
-			<a href="/"><h2>Back</h2></a>
+		{#if back}
+			<a href={back}><h2>Back</h2></a>
 			<h2>{title}</h2>
 		{:else}
-			<a href="/"><h2>Mokuro</h2></a>
+			<a href="/"><h2>{title}</h2></a>
 		{/if}
 	</div>
 </nav>

src/lib/components/Reader/MangaPage.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import img from '$lib/assets/001.jpg';
+
+	type Block = {
+		box: number[];
+		vertical: boolean;
+		fontSize: number;
+		lines: string[];
+	};
+
+	type Page = {
+		version?: string;
+		imgWidth: number;
+		imgHeight: number;
+		blocks: Block[];
+		imgPath: string;
+	};
+
+	let page: Page = {
+		version: '0.1.6',
+		imgWidth: 1078,
+		imgHeight: 1530,
+		blocks: [
+			{
+				box: [924, 167, 948, 380],
+				vertical: true,
+				fontSize: 21.0,
+				lines: ['私も頑張らなくちゃ！']
+			},
+			{
+				box: [584, 242, 610, 397],
+				vertical: true,
+				fontSize: 26.0,
+				lines: ['リョウ先輩！']
+			},
+			{
+				box: [895, 474, 943, 687],
+				vertical: true,
+				fontSize: 20.0,
+				lines: ['私のギターの練習', 'みてもらえませんか！']
+			},
+			{
+				box: [898, 787, 947, 979],
+				vertical: true,
+				fontSize: 21.0,
+				lines: ['ぼっちに教えて', 'もらってるじゃん？']
+			},
+			{
+				box: [708, 796, 783, 936],
+				vertical: true,
+				fontSize: 20.0,
+				lines: ['〜〜っ', 'もっと練習', 'したいんです！！']
+			},
+			{
+				box: [663, 832, 701, 971],
+				vertical: true,
+				fontSize: 20.0,
+				lines: ['後藤さんだって', '？の練習あるし．．．']
+			},
+			{
+				box: [568, 800, 616, 1011],
+				vertical: true,
+				fontSize: 20.0,
+				lines: ['ちょっと喜多ちゃん', '急にどうしちゃったの']
+			},
+			{
+				box: [874, 1122, 951, 1380],
+				vertical: true,
+				fontSize: 22.0,
+				lines: ['まさか結束パンドの', 'ギター同士で血で血を洗う', 'パート争いを．．．']
+			},
+			{
+				box: [636, 1135, 682, 1256],
+				vertical: true,
+				fontSize: 20.0,
+				lines: ['ちょっと', '結束してよ〜']
+			},
+			{
+				box: [560, 1240, 590, 1381],
+				vertical: true,
+				fontSize: 27.0,
+				lines: ['違います！！']
+			}
+		],
+		imgPath: '049.jpg'
+	};
+
+	let bold = false;
+
+	$: fontWeight = bold ? 'bold' : '400';
+
+	console.log(bold);
+
+	function clamp(x: number, min: number, max: number) {
+		return Math.min(Math.max(x, min), max);
+	}
+
+	const { blocks, imgHeight, imgPath, imgWidth } = page;
+	const area = imgWidth * imgHeight;
+
+	const textBoxes = blocks.map((block) => {
+		const { box, fontSize, lines, vertical } = block;
+		let [_xmin, _ymin, _xmax, _ymax] = box;
+
+		const xmin = clamp(_xmin, 0, imgWidth);
+		const ymin = clamp(_ymin, 0, imgHeight);
+		const xmax = clamp(_xmax, 0, imgWidth);
+		const ymax = clamp(_ymax, 0, imgHeight);
+
+		const width = xmax - xmin;
+		const height = ymax - ymin;
+
+		const textBox = {
+			left: `${xmin}px`,
+			top: `${ymin}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+			fontSize: `${fontSize}px`,
+			writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
+			lines
+		};
+
+		console.log(textBox);
+
+		return textBox;
+	});
+	let src = `/src/lib/assets/${imgPath}`;
+</script>
+
+<div style:--bold={fontWeight}>
+	<div class="bold">
+		<label>Bold</label>
+		<input bind:checked={bold} type="checkbox" placeholder="????" />
+	</div>
+	<img draggable="false" {src} alt="Page 1" />
+	{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
+		<div
+			class="text-box"
+			style:width
+			style:height
+			style:left
+			style:top
+			style:font-size={fontSize}
+			style:writing-mode={writingMode}
+		>
+			{#each lines as line}
+				<p>{line}</p>
+			{/each}
+		</div>
+		<div />
+	{/each}
+</div>
+
+<style>
+	div {
+		position: relative;
+		margin: 0 auto;
+	}
+
+	.bold {
+		position: absolute;
+		color: #000;
+		right: 10px;
+		bottom: 10px;
+		z-index: 99;
+	}
+
+	.text-box {
+		color: black;
+		padding: 0;
+		position: absolute;
+		line-height: 1.1em;
+		font-size: 16pt;
+		white-space: nowrap;
+		border: 1px solid rgba(0, 0, 0, 0);
+	}
+	.text-box:hover {
+		background: rgb(255, 255, 255);
+		border: 1px solid rgba(0, 0, 0, 0);
+		z-index: 999 !important;
+	}
+	.text-box p {
+		display: none;
+		white-space: nowrap;
+		letter-spacing: 0.1em;
+		line-height: 1.1em;
+		margin: 0;
+		background-color: rgb(255, 255, 255);
+		font-weight: var(--bold);
+	}
+
+	.text-box:hover p {
+		display: table;
+	}
+</style>

src/lib/components/Reader/Reader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { currentManga, currentVolume } from '$lib/catalog';
+	import Button from '$lib/components/Button.svelte';
+	import { Panzoom, zoomOriginal } from '$lib/panzoom';
+	import MangaPage from './MangaPage.svelte';
+
+	const volume = $currentVolume;
+</script>
+
+{#if volume}
+	<div>
+		<Button on:click={zoomOriginal}>Reset Zoom</Button>
+	</div>
+	<Panzoom>
+		<MangaPage />
+	</Panzoom>
+{/if}
+
+<style>
+	div {
+		position: absolute;
+		bottom: 10px;
+		left: 10px;
+		z-index: 1;
+	}
+</style>

src/lib/components/VolumeItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { currentManga, currentVolume } from '$lib/catalog';
+	import type { Volume } from '$lib/types/catalog';
+
+	export let volume: Volume;
+	const { cover, title, currentPage, totalPages } = volume;
+
+	function onClick() {
+		currentVolume.set(volume);
+	}
+</script>
+
+<a href={`${$page.params.manga}/${title}`} on:click={onClick}>
+	<div class="content">
+		{title}
+		<img src={cover} alt={title} />
+		{currentPage} / {totalPages}
+	</div>
+</a>
+
+<style>
+	img {
+		width: 250px;
+		height: 350px;
+		object-fit: contain;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		text-align: center;
+	}
+</style>