microboard-ui-temp 0.0.3

package/src/features/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,112 @@
+import React, { PropsWithChildren, ErrorInfo } from "react";
+import style from "./ErrorBoundary.module.css";
+import { Button } from "shared/ui-lib/Button/Button";
+
+class ErrorBoundary extends React.Component<
+	PropsWithChildren<{
+		onError?: (error: Error, errorInfo: ErrorInfo) => void;
+	}>,
+	{
+		hasError: boolean;
+		error: Error | null;
+		recoveryAttempts: number;
+		lastErrorTime: number | null;
+	}
+> {
+	private readonly MAX_RECOVERY_ATTEMPTS = 3;
+	private readonly RECOVERY_TIMEOUT = 1000; // 1 second
+
+	constructor(props: PropsWithChildren<{}>) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null,
+			recoveryAttempts: 0,
+			lastErrorTime: null,
+		};
+	}
+
+	static getDerivedStateFromError(error: Error): {
+		hasError: boolean;
+		error: Error;
+		recoveryAttempts: number;
+		lastErrorTime: number;
+	} {
+		return {
+			hasError: true,
+			error,
+			recoveryAttempts: 0,
+			lastErrorTime: Date.now(),
+		};
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+		console.error("Caught Error:", error, errorInfo);
+		this.props.onError?.(error, errorInfo);
+
+		if (
+			this.state.lastErrorTime === null ||
+			Date.now() - this.state.lastErrorTime > this.RECOVERY_TIMEOUT
+		) {
+			this.attemptRecovery();
+		}
+	}
+
+	componentDidUpdate(
+		prevProps: PropsWithChildren<{}>,
+		prevState: { hasError: boolean },
+	) {
+		if (
+			!prevState.hasError &&
+			this.state.hasError &&
+			this.state.recoveryAttempts < this.MAX_RECOVERY_ATTEMPTS
+		) {
+			this.attemptRecovery();
+		}
+	}
+
+	attemptRecovery = () => {
+		if (this.state.recoveryAttempts >= this.MAX_RECOVERY_ATTEMPTS) {
+			return; // Stop trying after max attempts
+		}
+
+		this.setState(prevState => ({
+			recoveryAttempts: prevState.recoveryAttempts + 1,
+			hasError: false,
+			error: null,
+		}));
+	};
+
+	render(): React.ReactNode {
+		if (
+			this.state.hasError &&
+			this.state.recoveryAttempts >= this.MAX_RECOVERY_ATTEMPTS
+		) {
+			return (
+				<div className={style.wrapper}>
+					<div className={style.errorContainer}>
+						<div className={style.errorMessage}>
+							<h2>Something went wrong</h2>
+							<p>An error occurred:</p>
+							<p className={style.recoveryInfo}>
+								{this.state.error?.message ||
+									`We tried to recover automatically ${this.MAX_RECOVERY_ATTEMPTS} times but couldn't fix the issue.`}
+							</p>
+							<div className={style.errorButtons}>
+								<Button
+									onClick={() => window.location.reload()}
+								>
+									Refresh Page
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+export { ErrorBoundary };

package/src/features/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { ErrorBoundary } from "./ErrorBoundary.tsx";

package/src/features/ExportPanel/ExportPanel.module.css

@@ -0,0 +1,55 @@
+.container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	position: absolute;
+	top: 16px;
+	left: 16px;
+	z-index: 2;
+}
+
+.button {
+	font-weight: 500;
+	font-size: 1.6rem;
+	padding: 0 1.2rem;
+	box-shadow: 0px 10px 16px -3px rgba(20, 21, 26, 0.08);
+}
+
+.loader {
+	width: 60px;
+	aspect-ratio: 2;
+	--_g: no-repeat radial-gradient(circle closest-side, #fff 90%, #fff0);
+	background:
+		var(--_g) 0% 50%,
+		var(--_g) 50% 50%,
+		var(--_g) 100% 50%;
+	background-size: calc(100% / 3) 50%;
+	animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+	20% {
+		background-position:
+			0% 0%,
+			50% 50%,
+			100% 50%;
+	}
+	40% {
+		background-position:
+			0% 100%,
+			50% 0%,
+			100% 50%;
+	}
+	60% {
+		background-position:
+			0% 50%,
+			50% 100%,
+			100% 0%;
+	}
+	80% {
+		background-position:
+			0% 50%,
+			50% 50%,
+			100% 100%;
+	}
+}

package/src/features/ExportPanel/ExportPanel.tsx

@@ -0,0 +1,73 @@
+import { useAppSubscription } from "App/useBoardSubscription";
+import clsx from "clsx";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { notify } from "shared/ui-lib/Toast";
+import { UiLoader } from "shared/ui-lib/UiLoader";
+import style from "./ExportPanel.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function ExportPanel(): React.ReactElement | null {
+	const [isLoading, setIsLoading] = useState(false);
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const forceUpdate = useForceUpdate();
+	useAppSubscription({ observer: forceUpdate, subjects: ["tools"] });
+	const exportTool = board.tools.getExport();
+
+	useEffect(() => {
+		if (isLoading) {
+			exportTool
+				?.takeSnapshot()
+				?.then(() => {
+					setIsLoading(false);
+					board.tools.cancel();
+				})
+				.catch(() => {
+					notify({
+						header: t("export.error.title"),
+						body: t("export.error.description"),
+						variant: "error",
+					});
+					setIsLoading(false);
+					board.tools.cancel();
+				});
+		}
+	}, [isLoading]);
+
+	const handleConfirm = (): void => {
+		if (isLoading) {
+			return;
+		}
+		setIsLoading(true);
+	};
+
+	const handleCancel = (): void => {
+		board.tools.cancel();
+	};
+
+	if (!exportTool) {
+		return null;
+	}
+
+	return (
+		<div className={style.container}>
+			<UiButton
+				className={clsx(style.button)}
+				onClick={handleConfirm}
+				disabled={isLoading}
+			>
+				{isLoading ? <UiLoader /> : t("export.confirm")}
+			</UiButton>
+			<UiButton
+				className={clsx(style.button)}
+				onClick={handleCancel}
+				variant="secondary"
+			>
+				{t("export.cancel")}
+			</UiButton>
+		</div>
+	);
+}

package/src/features/ExportPanel/ExportVisible.tsx

@@ -0,0 +1,18 @@
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { PropsWithChildren } from "react";
+import { useAppContext } from "features/AppContext";
+
+export function ExportVisible({
+	children,
+}: PropsWithChildren<{}>): React.ReactElement | null {
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	useAppSubscription({ observer: forceUpdate, subjects: ["tools"] });
+
+	const isExport = board.tools.getExport();
+	if (isExport) {
+		return null;
+	}
+	return <>{children}</>;
+}

package/src/features/ExportPanel/index.ts

@@ -0,0 +1 @@
+export { ExportPanel } from "./ExportPanel";

package/src/features/GameItems/CreateCardsModal.tsx

@@ -0,0 +1,178 @@
+import React from "react";
+import styles from "./Modal.module.css";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { useAccount } from "App/useAccount";
+import { Card, ItemsMap } from "microboard-temp";
+import { catchMediaErrorResponse } from "App/MediaHelpers";
+import { uploadImages } from "shared/api/media/uploadImage";
+
+export const CREATE_CARDS_MODAL = Symbol("createCardsModal");
+
+export function CreateCardsModal(): JSX.Element {
+	const { t } = useTranslation();
+	const { closeModal } = useUiModalContext();
+	const { board } = useAppContext();
+	const account = useAccount();
+
+	const [cover, setCover] = React.useState<File | null>(null);
+	const [coverPreview, setCoverPreview] = React.useState<string | null>(null);
+	const [cards, setCards] = React.useState<File[]>([]);
+	const [cardsPreview, setCardsPreview] = React.useState<string[]>([]);
+	const [loading, setLoading] = React.useState(false);
+
+	const coverInputRef = React.useRef<HTMLInputElement>(null);
+	const cardsInputRef = React.useRef<HTMLInputElement>(null);
+
+	const handleCoverClick = () => coverInputRef.current?.click();
+	const handleCardsClick = () => cardsInputRef.current?.click();
+
+	const createDeck = (backsideUrl: string, faceUrls: string[]) => {
+		const cards: Card[] = [];
+
+		const { left, top, bottom, right } = board.camera.getMbr();
+		const x = (left + right) / 2;
+		const y = (top + bottom) / 2;
+
+		faceUrls.forEach((faceUrl, index) => {
+			const card = new Card(board, index + faceUrl, {
+				backsideUrl,
+				faceUrl,
+			});
+			card.transformation.apply({
+				class: "Transformation",
+				method: "translateTo",
+				item: [card.getId()],
+				x: x,
+				y: y,
+			});
+			cards.push(card);
+		});
+
+		const itemsMap: ItemsMap = {};
+		cards.forEach(card => {
+			itemsMap[card.getId()] = card.serialize();
+		});
+
+		board.paste(itemsMap, false, false);
+	};
+
+	const handleCoverChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setCover(file);
+			const reader = new FileReader();
+			reader.onload = ev => setCoverPreview(ev.target?.result as string);
+			reader.readAsDataURL(file);
+		}
+	};
+
+	const handleCardsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files = e.target.files ? Array.from(e.target.files) : [];
+		setCards(files);
+		Promise.all(
+			files.map(
+				file =>
+					new Promise<string>(resolve => {
+						const reader = new FileReader();
+						reader.onload = ev =>
+							resolve(ev.target?.result as string);
+						reader.readAsDataURL(file);
+					}),
+			),
+		).then(setCardsPreview);
+	};
+
+	const handleAccept = async () => {
+		setLoading(true);
+		try {
+			if (cards.length > 0 && cover) {
+				const urls = await uploadImages(
+					[cover, ...cards],
+					board.getBoardId(),
+					account.accessToken,
+				);
+				createDeck(urls[0], urls.slice(1));
+			}
+			closeModal();
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<UiModal
+			modalId={CREATE_CARDS_MODAL}
+			closeOnClickOutside={false}
+			renderAsPageOnMobile={true}
+		>
+			<div className={styles.modalContent}>
+				<div className={styles.title}>
+					{t("toolsPanel.addGameItem.addCard.title")}
+				</div>
+				<div className={styles.cardsRow}>
+					<div
+						className={styles.cardSilhouette}
+						onClick={handleCoverClick}
+					>
+						{coverPreview ? (
+							<img
+								src={coverPreview}
+								alt="cover"
+								className={styles.cardPreview}
+							/>
+						) : (
+							<span className={styles.cardLabel}>
+								{t("toolsPanel.addGameItem.addCard.cover")}
+							</span>
+						)}
+						<input
+							type="file"
+							accept="image/*"
+							style={{ display: "none" }}
+							ref={coverInputRef}
+							onChange={handleCoverChange}
+						/>
+					</div>
+					<div
+						className={styles.cardSilhouette}
+						onClick={handleCardsClick}
+					>
+						{cardsPreview.length > 0 ? (
+							<img
+								src={cardsPreview[0]}
+								alt="preview"
+								className={styles.cardPreview}
+							/>
+						) : (
+							<span className={styles.cardLabel}>
+								{t("toolsPanel.addGameItem.addCard.cards")}
+							</span>
+						)}
+						<input
+							type="file"
+							accept="image/*"
+							multiple
+							style={{ display: "none" }}
+							ref={cardsInputRef}
+							onChange={handleCardsChange}
+						/>
+					</div>
+				</div>
+				<UiButton
+					className={styles.acceptBtn}
+					variant="primary"
+					onClick={handleAccept}
+					disabled={loading}
+				>
+					{t("common.confirm")}
+				</UiButton>
+			</div>
+		</UiModal>
+	);
+}

package/src/features/GameItems/CreateDiceModal.tsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./Modal.module.css";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { useAccount } from "App/useAccount";
+import { Dice } from "microboard-temp";
+import { uploadImages } from "shared/api/media/uploadImage";
+import { useTranslation } from "react-i18next";
+
+export const CREATE_DICE_MODAL = Symbol("createDiceModal");
+
+const MIN_SIDES = 6;
+const MAX_SIDES = 12;
+
+export function CreateDiceModal(): JSX.Element {
+	const { closeModal } = useUiModalContext();
+	const [faces, setFaces] = useState<(File | null)[]>(
+		Array(MIN_SIDES).fill(null),
+	);
+	const [previews, setPreviews] = useState<(string | null)[]>(
+		Array(MIN_SIDES).fill(null),
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+	const { board } = useAppContext();
+	const account = useAccount();
+	const { t } = useTranslation();
+
+	useEffect(() => {
+		faces.forEach((file, idx) => {
+			if (file) {
+				const reader = new FileReader();
+				reader.onload = ev => {
+					setPreviews(prev => {
+						const copy = [...prev];
+						copy[idx] = ev.target?.result as string;
+						return copy;
+					});
+				};
+				reader.readAsDataURL(file);
+			} else {
+				setPreviews(prev => {
+					const copy = [...prev];
+					copy[idx] = null;
+					return copy;
+				});
+			}
+		});
+	}, [faces]);
+
+	const handleFaceClick = (idx: number) => {
+		inputRefs.current[idx]?.click();
+	};
+
+	const handleFileChange = (
+		idx: number,
+		e: React.ChangeEvent<HTMLInputElement>,
+	) => {
+		const file = e.target.files?.[0] || null;
+		setFaces(prev => {
+			const copy = [...prev];
+			copy[idx] = file;
+			return copy;
+		});
+	};
+
+	const handleAddFace = () => {
+		if (faces.length < MAX_SIDES) {
+			setFaces(prev => [...prev, null]);
+			setPreviews(prev => [...prev, null]);
+		}
+	};
+
+	const handleRemoveLastFace = () => {
+		if (faces.length > MIN_SIDES) {
+			setFaces(prev => prev.slice(0, -1));
+			setPreviews(prev => prev.slice(0, -1));
+		}
+	};
+
+	const createDice = (urls: string[]) => {
+		const values: (string | number)[] = [];
+		let urlsIndex = 0;
+		faces.forEach((face, index) => {
+			if (!face) {
+				values.push(index + 1);
+			} else {
+				values.push(urls[urlsIndex] || index + 1);
+				urlsIndex++;
+			}
+		});
+
+		const dice = new Dice(
+			board,
+			"",
+			values.some(value => typeof value === "string")
+				? "custom"
+				: "common",
+			values,
+		);
+
+		const { left, top, bottom, right } = board.camera.getMbr();
+		const x = (left + right) / 2 - dice.getWidth() / 2;
+		const y = (top + bottom) / 2 - dice.getHeight() / 2;
+
+		dice.transformation.apply({
+			class: "Transformation",
+			method: "translateTo",
+			item: [dice.getId()],
+			x,
+			y,
+		});
+
+		board.add(dice);
+	};
+
+	const handleAccept = async () => {
+		setIsLoading(true);
+		try {
+			const files = faces.filter(face => face !== null);
+			if (files.length) {
+				const urls = await uploadImages(
+					files,
+					board.getBoardId(),
+					account.accessToken,
+				);
+				createDice(urls);
+			} else {
+				createDice([]);
+			}
+			closeModal();
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setIsLoading(false);
+		}
+		closeModal();
+	};
+
+	return (
+		<UiModal
+			modalId={CREATE_DICE_MODAL}
+			closeOnClickOutside={false}
+			renderAsPageOnMobile={true}
+		>
+			<div className={styles.modalContent}>
+				<div className={styles.title}>
+					{t("toolsPanel.addGameItem.addDice.title")}
+				</div>
+				<div
+					className={styles.cardsRow}
+					style={{ flexWrap: "wrap", gap: 16 }}
+				>
+					{faces.map((face, idx) => (
+						<div
+							key={idx}
+							className={styles.diceFace}
+							onClick={() => handleFaceClick(idx)}
+						>
+							{previews[idx] ? (
+								<img
+									src={previews[idx] || undefined}
+									alt={`face-${idx + 1}`}
+									className={styles.dicePreview}
+								/>
+							) : (
+								<span className={styles.diceLabel}>
+									{idx + 1}
+								</span>
+							)}
+							<input
+								type="file"
+								accept="image/*"
+								style={{ display: "none" }}
+								ref={el => (inputRefs.current[idx] = el)}
+								onChange={ev => handleFileChange(idx, ev)}
+							/>
+						</div>
+					))}
+					{faces.length < MAX_SIDES && (
+						<div
+							className={styles.addFaceBtn}
+							onClick={handleAddFace}
+						>
+							+
+						</div>
+					)}
+				</div>
+				{faces.length > MIN_SIDES && (
+					<div className={styles.removeFaceBtnWrapper}>
+						<UiButton
+							variant="secondary"
+							onClick={handleRemoveLastFace}
+							className={styles.removeFaceBtn}
+						>
+							{t("toolsPanel.addGameItem.addDice.removeFace")}
+						</UiButton>
+					</div>
+				)}
+				<UiButton
+					className={styles.acceptBtn}
+					variant="primary"
+					onClick={handleAccept}
+					disabled={isLoading}
+				>
+					{t("common.confirm")}
+				</UiButton>
+			</div>
+		</UiModal>
+	);
+}