Enhance ZoomableDiagram component with fullscreen toggle and update game design documentation

Author: danko-nobre

docs/content/game_design/00-intro/01-publico.md

@@ -2,10 +2,81 @@
 
 ## Faixa Etária
 
+**Principal:** Jogadores de 16 a 35 anos, especialmente aqueles entre 20-30 anos com experiência prévia em jogos táticos.
+
+**Secundária:** Adultos 35+ que apreciam jogos com profundidade estratégica.
+
+### Classificação Indicativa
+
+- Classificação indicativa esperada: T (Teen) / 12+ anos
+- Requer maturidade para apreciação das referências culturais indígenas
+
+---
+
 ## Interesse de Jogo
 
+**Motivações principais:** Estratégia, descoberta de sistemas, domínio de mecânicas complexas.
+
+**Perfil psicológico:** Predominantemente "Exploradores" (sistemas e mecânicas) e "Conquistadores" (superação de desafios).
+
+### Experiência de Jogo
+
+- Fãs de roguelikes e jogos táticos por turnos
+- Experiência similar a Slay the Spire, Darkest Dungeon e Into the Breach
+- Tempo de jogo médio por sessão: 30-60 minutos
+
+---
+
 ## Nível de Complexidade
 
+:::note
+
+WIP: Isso é o esperado, mas pode mudar conforme o desenvolvimento avança.
+
+:::
+
+- **Curva de aprendizado:** 15-20 minutos para mecânicas básicas, 2-3 horas para domínio intermediário.
+- **Profundidade:** Menor que Darkest Dungeon, maior que Slay the Spire.
+
+### Estratégias de Onboarding
+
+- Sistema de pré-visualização reduz a barreira de entrada
+- Tutoriais integrados introduzem mecânicas gradualmente
+- Complexidade emergente através de combinações de habilidades
+
+---
+
 ## Temática e Estilo
 
+:::note
+
+WIP: Ainda em estudo, sujeito a ajustes.
+
+:::
+
+**Diferencial:** Exploração de mitologias indígenas americanas, raramente abordadas em jogos.
+
+**Apelo estético:** Visual marcante e reconhecível.
+
+---
+
+## Dados Demográficos e Comportamento
+
+**Gênero:** Predominantemente masculino
+
+**Localização:** América do Norte, Europa e América Latina
+
+**Hábitos de consumo:** Preferência por jogos premium com possíveis DLCs
+
+**Canais de comunicação:** Reddit, Discord, Steam, YouTube
+
+---
+
 ## Plataformas
+
+**Lançamento inicial:** PC (Windows)
+
+### Considerações
+
+- Interface otimizada primariamente para mouse e teclado
+- Suporte para controles como característica secundária

docs/src/components/ZoomableDiagram/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Panzoom from "@panzoom/panzoom";
 import styles from "./styles.module.css";
 
@@ -7,6 +7,7 @@ const ZoomableDiagram = ({ children }) => {
     const zoomInRef = useRef<HTMLButtonElement | null>(null);
     const zoomOutRef = useRef<HTMLButtonElement | null>(null);
     const resetRef = useRef<HTMLButtonElement | null>(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
 
     useEffect(() => {
         if (contentRef.current) {
@@ -77,17 +78,41 @@ const ZoomableDiagram = ({ children }) => {
         }
     }, []);
 
+    useEffect(() => {
+        const handleEscKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setIsFullscreen(false);
+            }
+        };
+
+        window.addEventListener('keydown', handleEscKey);
+
+        return () => {
+            window.removeEventListener('keydown', handleEscKey);
+        };
+    }, []);
+
+    const toggleFullscreen = () => {
+        setIsFullscreen(!isFullscreen);
+    };
+
     return (
-        <div className={styles.container}>
-            <div ref={contentRef} className={styles.content}>
-                {children}
-            </div>
-            <div className={styles.controls}>
-                <button ref={zoomInRef} aria-label="Aumentar zoom">+</button>
-                <button ref={zoomOutRef} aria-label="Diminuir zoom">−</button>
-                <button ref={resetRef} aria-label="Resetar zoom">Reset</button>
+        <>
+            <div className={`${styles.container} ${isFullscreen ? styles.fullscreen : ""}`}>
+                <div ref={contentRef} className={`${styles.content} ${isFullscreen ? styles.fullscreenContent : ""}`}>
+                    {children}
+                </div>
+                <div className={styles.controls}>
+                    <button ref={zoomInRef} aria-label="Aumentar zoom">+</button>
+                    <button ref={zoomOutRef} aria-label="Diminuir zoom">−</button>
+                    <button ref={resetRef} aria-label="Resetar zoom">Reset</button>
+                    <button onClick={toggleFullscreen} aria-label="Toggle Fullscreen">
+                        {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+                    </button>
+                </div>
             </div>
-        </div>
+            {isFullscreen && <div className={styles.overlay} onClick={toggleFullscreen}></div>}
+        </>
     );
 };
 

docs/src/components/ZoomableDiagram/styles.module.css

@@ -28,3 +28,35 @@
   font-size: 14px;
   cursor: pointer;
 }
+
+.fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  flex-direction: column; /* Ensure the title appears below the image */
+}
+
+/* Ensure the content inside fullscreen is centered and styled similarly */
+.fullscreenContent {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  max-height: 100%;
+  flex-direction: column;
+}
+
+.fullscreenDiagram {
+  width: 80vw;
+  height: 80vh;
+  object-fit: contain;
+  border-radius: 8px;
+}

docs/src/css/custom.css

@@ -42,10 +42,6 @@ html {
   font-size: 0.8rem;
 }
 
-.docusaurus-mermaid-container {
-    max-height: 25rem;
-}
-
 h1,
 h2,
 h3,