data-primals-engine 1.0.10 → 1.1.0

package/client/src/RestoreDialog.jsx

@@ -0,0 +1,134 @@
+// C:/Dev/hackersonline-engine/client/src/RestoreDialog.jsx
+
+import React, { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useTranslation, Trans } from 'react-i18next';
+import Button from './Button'; // Assure-toi que le chemin est correct
+import { FaCheckCircle, FaExclamationTriangle, FaSpinner } from 'react-icons/fa';
+import './RestoreDialog.scss'; // Crée ce fichier pour le style du spinner
+
+function RestoreDialog() {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    const [username, setUsername] = useState(null); // Pour la redirection en cas de succès
+
+    useEffect(() => {
+        const token = searchParams.get('token');
+        const user = searchParams.get('username');
+        setUsername(user); // Stocke le username pour la redirection
+
+        if (!token || !user) {
+            setError(t('backup.restore.error.missingParams', "Paramètres 'token' ou 'username' manquants dans l'URL."));
+            setLoading(false);
+            return;
+        }
+
+        const apiUrl = `/api/backup/restore?token=${encodeURIComponent(token)}&username=${encodeURIComponent(user)}`;
+        // Note: On utilise un chemin relatif /api/... car le serveur API est probablement servi
+        // sur le même domaine/port ou via un proxy configuré dans Vite (vite.config.js)
+        // Si l'API est sur un domaine différent (comme https://data.primals.net), utilise l'URL complète.
+        // const apiUrl = `https://data.primals.net/api/backup/restore?token=${encodeURIComponent(token)}&username=${encodeURIComponent(user)}`;
+
+
+        const restoreBackup = async () => {
+            setLoading(true);
+            setError(null);
+            setSuccess(false);
+
+            try {
+                const response = await fetch(apiUrl, {
+                    method: 'GET', // Ou 'POST' si l'API l'exige, mais GET semble plus probable ici
+                    headers: {
+                        'Accept': 'application/json',
+                        // Ajoute d'autres headers si nécessaire (ex: Authorization si requis)
+                    },
+                });
+
+                if (!response.ok) {
+                    let errorMsg = t('backup.restore.error.generic', "Une erreur est survenue lors de la restauration.");
+                    try {
+                        // Essaye de lire un message d'erreur plus spécifique de l'API
+                        const errorData = await response.json();
+                        if (errorData && errorData.message) {
+                            errorMsg = errorData.message;
+                        } else {
+                            errorMsg = `${errorMsg} (Status: ${response.status})`;
+                        }
+                    } catch (e) {
+                        errorMsg = `${errorMsg} (Status: ${response.status})`;
+                        console.error("Could not parse error response:", e);
+                    }
+                    throw new Error(errorMsg);
+                }
+
+                // Si l'API renvoie des données JSON en cas de succès, tu peux les traiter ici
+                // const result = await response.json();
+                // console.log("Restore successful:", result);
+
+                setSuccess(true);
+
+            } catch (err) {
+                console.error("Restore error:", err);
+                setError(err.message || t('backup.restore.error.network', "Erreur réseau ou serveur inaccessible."));
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        restoreBackup();
+
+    }, [searchParams, t]); // Dépendance à searchParams et t
+
+    const handleGoToData = () => {
+        if (username) {
+            navigate(`/user/${username}/`);
+        } else {
+            navigate('/'); // Fallback si username n'est pas défini
+        }
+    };
+
+    const handleGoHome = () => {
+        navigate('/');
+    };
+
+
+    return (
+        <div className="restore-dialog-container">
+            <h2><Trans i18nKey="backup.restore.dialogTitle">Restauration de la sauvegarde</Trans></h2>
+
+            {loading && (
+                <div className="restore-status loading">
+                    <FaSpinner className="spinner" />
+                    <p><Trans i18nKey="backup.restore.restoring">Restauration en cours...</Trans></p>
+                </div>
+            )}
+
+            {error && (
+                <div className="restore-status error msg msg-error">
+                    <FaExclamationTriangle />
+                    <p><Trans i18nKey="backup.restore.error.prefix">Erreur :</Trans> {error}</p>
+                    <Button onClick={handleGoHome} className="btn-primary">
+                        <Trans i18nKey="backup.restore.goHome">Retour à l'accueil</Trans>
+                    </Button>
+                </div>
+            )}
+
+            {success && (
+                <div className="restore-status success msg msg-success">
+                    <FaCheckCircle />
+                    <p><Trans i18nKey="backup.restore.success">La restauration de votre sauvegarde a été effectuée avec succès.</Trans></p>
+                    <Button onClick={handleGoToData} className="btn-primary">
+                        <Trans i18nKey="backup.restore.goToData">Accéder à mes données</Trans>
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default RestoreDialog;

package/client/src/RestoreDialog.scss

@@ -0,0 +1,67 @@
+
+.restore-dialog-container {
+  padding: 2rem;
+  max-width: 600px;
+  margin: 4rem auto;
+  background-color: var(--bg-color-lighter, #f9f9f9);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  text-align: center;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+  h2 {
+    margin-bottom: 1.5rem;
+    color: var(--text-color-strong, #333);
+  }
+
+  .restore-status {
+    padding: 1.5rem;
+    border-radius: 5px;
+    margin-top: 1rem;
+
+    svg {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    &.loading {
+      color: var(--text-color, #555);
+      .spinner {
+        animation: spin 1.5s linear infinite;
+      }
+    }
+
+    &.error {
+      // Utilise les styles de .msg-error si définis globalement
+      // Sinon, ajoute des styles spécifiques ici
+      // background-color: #ffebee;
+      // border: 1px solid #e57373;
+      // color: #c62828;
+      svg { color: var(--color-error, #d32f2f); }
+    }
+
+    &.success {
+      // Utilise les styles de .msg-success si définis globalement
+      // Sinon, ajoute des styles spécifiques ici
+      // background-color: #e8f5e9;
+      // border: 1px solid #81c784;
+      // color: #2e7d32;
+      svg { color: var(--color-success, #388e3c); }
+    }
+
+    p {
+      margin-bottom: 1rem;
+      font-size: 1.1rem;
+    }
+
+    button {
+      margin-top: 1rem;
+    }
+  }
+}
+
+// Animation du spinner
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/client/src/RichTextEditorModal.jsx

@@ -0,0 +1,34 @@
+// client/src/RichTextEditorModal.jsx
+import React, { useState } from 'react';
+import {RTE} from "./RTE.jsx";
+import {Dialog} from "./Dialog.jsx";   // Styles pour la modale plein écran
+
+import './RichTextEditorModal.scss';
+const RichTextEditorModal = ({ initialContent, title, onSave, onClose }) => {
+    const [content, setContent] = useState(initialContent || '');
+
+    const handleSave = () => {
+        onSave?.(content.value);
+        onClose?.();
+    };
+
+    return (
+        <Dialog isModal={true} onClose={onClose}
+                title={title || 'Éditeur de Texte Riche'} isClosable={true}>
+            <div className="flex actions">
+                <button onClick={handleSave} className="btn btn-primary">Sauvegarder & Fermer</button>
+                <button onClick={onClose} className="btn">Fermer</button>
+            </div>
+            <div className="editor-container">
+                <RTE
+                    onChange={(e) => setContent(e)}
+                    value={content}
+                    name={"rte"}
+                    field={{name: 'rte'}}
+                />
+            </div>
+        </Dialog>
+    );
+};
+
+export default RichTextEditorModal;

package/client/src/RichTextEditorModal.scss

@@ -0,0 +1,54 @@
+// client/src/RichTextEditorModal.scss
+.richtext-editor-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 80vh;
+  background-color: #fff;
+  z-index: 2000; // Doit être au-dessus de tout le reste
+  display: flex;
+  flex-direction: column;
+
+  .editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #f8f9fa;
+
+    h2 {
+      margin: 0;
+      font-size: 1.2rem;
+    }
+
+    .editor-actions {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .editor-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; // Empêche le double scroll
+
+    .ql-toolbar {
+      border-left: none;
+      border-right: none;
+      border-top: none;
+    }
+
+    .ql-container {
+      flex-grow: 1;
+      border: none;
+      font-size: 16px;
+      overflow-y: auto; // Permet le scroll dans l'éditeur
+    }
+    .ql-editor {
+      padding: 2rem; // Un peu d'air
+    }
+  }
+}

package/client/src/TourSpotlight.jsx

@@ -0,0 +1,234 @@
+// C:/Dev/hackersonline-engine/client/src/TourSpotlight.jsx
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import './TourSpotlight.scss';
+import { useUI } from "./contexts/UIContext.jsx";
+import useLocalStorage from "./hooks/useLocalStorage.js";
+
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+function TourSpotlight({ name, steps = [], isOpen, onComplete, onClose, initialStepIndex = 0 }) {
+    const { tourStepIndex, setTourStepIndex, launchedTours, setLaunchedTours, currentTour, setCurrentTour, setCurrentTourSteps } = useUI();
+    const [targetRect, setTargetRect] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+    const tooltipRef = useRef(null);
+    const highlightRef = useRef(null);
+
+    const currentStep = steps[tourStepIndex];
+
+    // Réinitialiser l'index quand le tour s'ouvre
+    useEffect(() => {
+        if (isOpen) {
+            setTourStepIndex(initialStepIndex);
+            const rafId = requestAnimationFrame(() => {
+                calculateRectAndScroll();
+            });
+            return () => cancelAnimationFrame(rafId);
+        } else {
+            setTargetRect(null);
+        }
+    }, [isOpen, initialStepIndex]);
+
+    const calculateRectAndScroll = useCallback(() => {
+        if (!isOpen || !currentStep?.selector) {
+            setTargetRect(null);
+            return;
+        }
+
+        const element = document.querySelector(currentStep.selector);
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            if (!targetRect || rect.top !== targetRect.top || rect.left !== targetRect.left || rect.width !== targetRect.width || rect.height !== targetRect.height) {
+                setTargetRect(rect);
+            }
+        } else {
+            console.warn(`[TourSpotlight] Élément cible non trouvé : ${currentStep.selector}`);
+            setTargetRect(null);
+        }
+    }, [isOpen, currentStep?.selector, targetRect]);
+
+    useEffect(() => {
+        if (!isOpen || !name) return;
+
+        if (!currentStep?.selector) {
+            console.warn(`[TourSpotlight] Élément cible non défini pour le tour ${name}`);
+            return;
+        }
+
+        const element = document.querySelector(currentStep.selector);
+        if (element && currentTour !== name) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        }
+        const rafId = requestAnimationFrame(calculateRectAndScroll);
+        const debouncedCalculate = debounce(calculateRectAndScroll, 100);
+        window.addEventListener('resize', debouncedCalculate);
+        window.addEventListener('scroll', debouncedCalculate, true);
+        setCurrentTour(name);
+
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener('resize', debouncedCalculate);
+            window.removeEventListener('scroll', debouncedCalculate, true);
+        };
+    }, [isOpen, tourStepIndex, currentStep?.selector, calculateRectAndScroll, name]);
+
+    useEffect(() => {
+        if (!targetRect || !tooltipRef.current) {
+            setTooltipPosition({ top: -9999, left: -9999 });
+            return;
+        };
+        const tooltipEl = tooltipRef.current;
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        const spacing = 15;
+        let pos = { top: 0, left: 0 };
+        const positionPreference = currentStep.position || 'bottom';
+        switch (positionPreference) {
+            case 'top':
+                pos = { top: targetRect.top - tooltipRect.height - spacing, left: targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 };
+                break;
+            case 'left':
+                pos = { top: targetRect.top + targetRect.height / 2 - tooltipRect.height / 2, left: targetRect.left - tooltipRect.width - spacing };
+                break;
+            case 'right':
+                pos = { top: targetRect.top + targetRect.height / 2 - tooltipRect.height / 2, left: targetRect.right + spacing };
+                break;
+            case 'bottom':
+            default:
+                pos = { top: targetRect.bottom + spacing, left: targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 };
+                break;
+        }
+        pos.top = Math.max(spacing, pos.top);
+        pos.left = Math.max(spacing, pos.left);
+        pos.left = Math.min(window.innerWidth - tooltipRect.width - spacing, pos.left);
+        pos.top = Math.min(window.innerHeight - tooltipRect.height - spacing, pos.top);
+        setTooltipPosition(pos);
+    }, [targetRect, currentStep?.position, tourStepIndex]);
+
+    useEffect(() => {
+        if (isOpen) {
+            if (tourStepIndex === steps.length-1 && steps.length !== 1) {
+                setLaunchedTours(tours => {
+                    if(tours.includes(name))
+                        return tours;
+                    return [...tours, name];
+                });
+            }
+        }
+    }, [isOpen, launchedTours, name, setCurrentTour, tourStepIndex, steps]);
+
+    const handleComplete = useCallback(() => {
+        setCurrentTour(null);
+        setLaunchedTours(tours => {
+            if(tours.includes(name))
+                return tours;
+            return [...tours, name];
+        });
+        if (onComplete) {
+            onComplete(name);
+        } else{
+            onClose?.(name);
+        }
+    }, [name, onComplete, onClose, setCurrentTour]);
+
+    const handleNext = () => {
+        if (tourStepIndex < steps.length - 1) {
+            setTourStepIndex(prev => prev + 1);
+        } else {
+            handleComplete();
+        }
+    };
+
+    const handlePrev = () => {
+        if (tourStepIndex > 0) {
+            setTourStepIndex(prev => prev - 1);
+        }
+    }
+
+    const handleClose = useCallback(() => {
+        setCurrentTour(null);
+        setLaunchedTours(tours => {
+            if( tours.includes(name) )
+                return [...tours];
+            return [...tours, name];
+        });
+
+        if (onClose) {
+            onClose(name);
+        }
+    }, [onClose, name, setCurrentTour, launchedTours]);
+
+    if (!isOpen || !currentTour || !currentStep || (launchedTours && launchedTours.includes(name))) {
+        return null;
+    }
+
+    const highlightStyle = targetRect ? {
+        position: 'absolute',
+        top: `${targetRect.top}px`,
+        left: `${targetRect.left}px`,
+        width: `${targetRect.width}px`,
+        height: `${targetRect.height}px`,
+        borderRadius: '4px',
+        boxShadow: `0 0 0 9999px rgba(0, 0, 0, 0.75)`,
+        pointerEvents: 'none',
+        transition: 'top 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out',
+        zIndex: 10000,
+    } : { display: 'none' };
+
+    const tooltipStyle = {
+        position: 'fixed',
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`,
+        zIndex: 10001,
+        transition: 'top 0.3s ease-in-out, left 0.3s ease-in-out',
+    };
+
+    return (
+        <div
+            className="tour-spotlight-container"
+            onClick={handleClose}
+            style={{
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999, pointerEvents: 'auto',
+            }}
+        >
+            <div ref={highlightRef} style={highlightStyle}></div>
+            {targetRect && (
+                <div
+                    ref={tooltipRef}
+                    className="tour-tooltip"
+                    style={tooltipStyle}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <div className="tour-tooltip-content">
+                        {typeof currentStep.content === 'string' ? <p>{currentStep.content}</p> : currentStep.content}
+                    </div>
+                    <div className="tour-tooltip-footer">
+                        <span className="tour-step-indicator">
+                            Étape {tourStepIndex + 1} / {steps.length}
+                        </span>
+                        <div className="tour-buttons">
+                            {tourStepIndex > 0 && (
+                                <button onClick={handlePrev} className="tour-button tour-button-prev">Précédent</button>
+                            )}
+                            <button onClick={handleNext} className="tour-button tour-button-next">
+                                {tourStepIndex < steps.length - 1 ? 'Suivant' : 'Terminer'}
+                            </button>
+                        </div>
+                        <button onClick={handleClose} className="tour-button-close" aria-label="Fermer le tour">×</button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default TourSpotlight;

package/client/src/TourSpotlight.scss

@@ -0,0 +1,100 @@
+// Variables (optionnel)
+$tooltip-bg: white;
+$tooltip-color: #333;
+$tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+$button-bg: #3498db;
+$button-color: white;
+$overlay-bg: rgba(0, 0, 0, 0.75); // Couleur de l'overlay
+
+.tour-spotlight-overlay {
+  // Le style de base est défini en inline pour la position/taille
+  // On peut ajouter des transitions ici si souhaité
+  // background-color: $overlay-bg; // Alternative si on n'utilise pas box-shadow pour l'overlay principal
+}
+
+.tour-tooltip {
+  background-color: $tooltip-bg;
+  color: $tooltip-color;
+  padding: 15px 20px;
+  border-radius: 8px;
+  box-shadow: $tooltip-shadow;
+  box-sizing: border-box;
+  transition: top 0.2s ease-out, left 0.2s ease-out; // Transition douce
+  width: 100%;
+  max-width: 440px;
+  .tour-tooltip-content {
+    margin-bottom: 15px;
+    line-height: 1.5;
+  }
+
+  .tour-tooltip-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #eee;
+    padding-top: 10px;
+    margin-top: 10px;
+  }
+
+  .tour-step-indicator {
+    font-size: 0.85em;
+    color: #777;
+  }
+
+  .tour-buttons {
+    display: flex;
+    gap: 8px;
+  }
+
+  .tour-button {
+    background-color: $button-bg;
+    color: $button-color;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: darken($button-bg, 10%);
+    }
+  }
+  .tour-button-prev {
+    background-color: #777;
+    &:hover {
+      background-color: darken(#777, 10%);
+    }
+  }
+
+  .tour-button-close {
+    position: absolute;
+    top: 5px;
+    right: 8px;
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    color: #aaa;
+    cursor: pointer;
+    padding: 5px;
+    line-height: 1;
+
+    &:hover {
+      color: #333;
+    }
+  }
+}
+
+// Optionnel: Ajouter une petite flèche à l'info-bulle (plus complexe)
+// .tour-tooltip::after {
+//   content: '';
+//   position: absolute;
+//   border-width: 8px;
+//   border-style: solid;
+//   /* Logique pour positionner la flèche en fonction de props.position */
+//   /* Exemple pour 'bottom' */
+//   bottom: 100%;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   border-color: transparent transparent $tooltip-bg transparent;
+// }