Create PageDebugPostcard

components/postcard/toolbar/toolToggleVisibility.tsx

@@ -11,13 +11,13 @@ import { PostcardContext, PostcardVisibility } from "../base"
  */
 export function ToolToggleVisibility() {
     const { t } = useTranslation()
-    const { visibility, setVisibility } = useDefinedContext(PostcardContext)
+    const { visibility, changeVisibility } = useDefinedContext(PostcardContext)
 
     if (visibility === PostcardVisibility.BACKGROUND) {
         return (
             <Tool
                 aria-label={t("toggleVisibleShow")}
-                onClick={() => setVisibility(PostcardVisibility.FOREGROUND)}
+                onClick={() => changeVisibility(PostcardVisibility.FOREGROUND)}
             >
                 <FestaIcon icon={faEye} />
             </Tool>
@@ -27,7 +27,7 @@ export function ToolToggleVisibility() {
         return (
             <Tool
                 aria-label={t("toggleVisibleHide")}
-                onClick={() => setVisibility(PostcardVisibility.BACKGROUND)}
+                onClick={() => changeVisibility(PostcardVisibility.BACKGROUND)}
             >
                 <FestaIcon icon={faEyeSlash} />
             </Tool>

pages/debug/postcard.tsx

@@ -0,0 +1,67 @@
+import { NextPage, NextPageContext } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { StaticImageData } from "next/image";
+import { useState } from "react";
+import { ToolBar } from "../../components/generic/toolbar/bar";
+import { ViewNotice } from "../../components/generic/views/notice";
+import { PostcardSource } from "../../components/postcard/base";
+import { Postcard } from "../../components/postcard/changer";
+import { ToolToggleVisibility } from "../../components/postcard/toolbar/toolToggleVisibility";
+import debugPostcard from "../../public/postcards/markus-spiske-iar-afB0QQw-unsplash.jpg"
+
+
+export async function getStaticProps(context: NextPageContext) {
+    return {
+        props: {
+            ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
+        }
+    }
+}
+
+
+// All images from https://www.reddit.com/r/hmmm/
+const possiblePostcards: (PostcardSource | StaticImageData)[] = [
+    "https://i.imgur.com/tpC5y1N.png",
+    "https://i.imgur.com/sKdbsC5.jpg",
+    "https://i.redd.it/nx2usi3gssf21.jpg",
+    "https://i.redd.it/oy0ve07w6wgz.jpg",
+    "https://i.redd.it/b3do0thb66581.jpg",
+    "https://i.redd.it/w5ed0yk2s9l21.png",
+    "https://i.redd.it/pqnbvrc8och41.jpg",
+    "https://i.redd.it/x3dqd57hdyx31.jpg",
+    "https://i.redd.it/zo46srrm7xe21.png",
+]
+
+
+const PageDebugPostcard: NextPage = (props) => {
+    const { t } = useTranslation()
+    const [postcard, setPostcard] = useState<PostcardSource | StaticImageData>(debugPostcard)
+
+    return <>
+        <Postcard
+            src={postcard}
+        />
+        <ToolBar
+            vertical="vadapt"
+            horizontal="right"
+        >
+            <ToolToggleVisibility />
+        </ToolBar>
+        <ViewNotice
+            notice={<>
+                <p>
+                    {t("debugPostcardText")}
+                </p>
+                <button onClick={() => {
+                    setPostcard(possiblePostcards[~~(Math.random() * possiblePostcards.length)])
+                }}>
+                    {t("debugPostcardButton")}
+                </button>
+            </>}
+        />
+    </>
+}
+
+
+export default PageDebugPostcard

public/locales/it-IT/common.json

@@ -24,5 +24,7 @@
     "eventLoading": "Caricamento dei dettagli dell'evento in corso...",
     "eventError": "Si è verificato il seguente errore nel recupero dei dettagli dell'evento:",
     "debugLoading": "Questo è un esempio di caricamento full-page.",
-    "debugError": "Questo è un esempio di errore full-page."
+    "debugError": "Questo è un esempio di errore full-page.",
+    "debugPostcardText": "Questo è un esempio di transizione nello sfondo.",
+    "debugPostcardButton": "Hmmm."
 }