From 4e238c754186a245d86fe9d7d386dda3bffa087e Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Fri, 21 Feb 2025 16:19:19 +0100
Subject: [PATCH] =?UTF-8?q?r=C3=A9vision=20du=20fonctionnement=20et=20ajou?=
=?UTF-8?q?t=20d'un=20bouton=20de=20partage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/bug-generator.js | 137 ++++++++++++++++++++++++++++++++++++++++
assets/styles.css | 67 ++++++++++++++++++++
index.php | 8 ++-
3 files changed, 209 insertions(+), 3 deletions(-)
create mode 100644 assets/bug-generator.js
diff --git a/assets/bug-generator.js b/assets/bug-generator.js
new file mode 100644
index 0000000..6a9c802
--- /dev/null
+++ b/assets/bug-generator.js
@@ -0,0 +1,137 @@
+const { useState, useEffect } = React;
+
+const BugGenerator = () => {
+ const [currentBug, setCurrentBug] = useState('Qui peut s\'assoir à la même table que Dofus et dire qu\'il a des bugs aussi stylés ?');
+
+ const generateBug = async () => {
+ try {
+ const [hooksResponse, bugsResponse, featuresResponse] = await Promise.all([
+ fetch('data/hooks.json'),
+ fetch('data/bugs.json'),
+ fetch('data/features.json')
+ ]);
+
+ const [hooks, bugs, features] = await Promise.all([
+ hooksResponse.json(),
+ bugsResponse.json(),
+ featuresResponse.json()
+ ]);
+
+ const hook = hooks.hooks[Math.floor(Math.random() * hooks.hooks.length)];
+ const bug = bugs.bugs[Math.floor(Math.random() * bugs.bugs.length)];
+ const feature = features.features[Math.floor(Math.random() * features.features.length)];
+
+ const phrase = hook.includes("fait que") ?
+ `${hook} ${feature}` :
+ `${hook} ${bug}, ${feature}`;
+
+ setCurrentBug(phrase);
+ } catch (error) {
+ console.error('Erreur lors de la génération:', error);
+ setCurrentBug('Une erreur s\'est produite. Veuillez réessayer.');
+ }
+ };
+
+ const generateImage = async () => {
+ try {
+ // Créer un canvas temporaire
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Définir la taille du canvas
+ canvas.width = 1200;
+ canvas.height = 630;
+
+ // Définir le style
+ ctx.fillStyle = '#1a1b26';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ // Charger le favicon
+ const faviconLoadPromise = new Promise((resolve, reject) => {
+ const favicon = new Image();
+ favicon.onload = () => resolve(favicon);
+ favicon.onerror = reject;
+ favicon.src = 'assets/favicon.png';
+ });
+
+ const favicon = await faviconLoadPromise;
+ // Dessiner le favicon
+ const iconSize = 64;
+ ctx.drawImage(favicon,
+ canvas.width/2 - (iconSize + 180), // Position X (à gauche du texte)
+ 80 - iconSize/2, // Position Y (centré avec le texte)
+ iconSize,
+ iconSize
+ );
+
+ // Ajouter le texte "À cause de Flash"
+ ctx.fillStyle = '#9ece6a';
+ ctx.font = 'bold 48px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillText('À cause de Flash', canvas.width/2, 120);
+
+ // Ajouter le bug
+ ctx.fillStyle = '#c0caf5';
+ ctx.font = '32px Arial';
+
+ // Wrapper le texte
+ const words = currentBug.split(' ');
+ let line = '';
+ let lines = [];
+ const maxWidth = canvas.width - 100;
+ const lineHeight = 40;
+
+ for (let n = 0; n < words.length; n++) {
+ const testLine = line + words[n] + ' ';
+ const metrics = ctx.measureText(testLine);
+ if (metrics.width > maxWidth) {
+ lines.push(line);
+ line = words[n] + ' ';
+ } else {
+ line = testLine;
+ }
+ }
+ lines.push(line);
+
+ // Dessiner les lignes de texte
+ lines.forEach((line, i) => {
+ ctx.fillText(line, canvas.width/2, 280 + (i * lineHeight));
+ });
+
+ // Ajouter le watermark
+ ctx.fillStyle = '#a9b1d6';
+ ctx.font = '24px Arial';
+ ctx.fillText('https://cila.camelia-studio.org/a-cause-de-flash/', canvas.width/2, canvas.height - 40);
+
+ // Convertir le canvas en image et déclencher le téléchargement
+ const dataUrl = canvas.toDataURL('image/png');
+ const link = document.createElement('a');
+ link.download = 'mon-bug-dofus.png';
+ link.href = dataUrl;
+ link.click();
+ } catch (error) {
+ console.error('Erreur lors de la génération de l\'image:', error);
+ alert('Une erreur s\'est produite lors de la génération de l\'image.');
+ }
+ };
+
+ return React.createElement('div', { className: 'bug-container' },
+ React.createElement('button', {
+ onClick: generateBug,
+ className: 'generate-button'
+ }, 'Générer un bug !'),
+ React.createElement('div', {
+ className: 'bug-result'
+ }, currentBug),
+ React.createElement('button', {
+ onClick: generateImage,
+ className: 'share-button'
+ }, 'Partager mon bug')
+ );
+};
+
+// Attendre que le DOM soit chargé
+document.addEventListener('DOMContentLoaded', () => {
+ const root = document.getElementById('bug-generator-root');
+ ReactDOM.createRoot(root).render(React.createElement(BugGenerator));
+});
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
index e10df65..5090210 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -132,6 +132,59 @@ footer {
text-decoration: underline;
}
+/* Styles pour le générateur de bugs */
+#bug-generator-root {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem 1rem;
+}
+
+.bug-result {
+ padding: 1.5rem;
+ background-color: var(--bg-secondary);
+ border-radius: 8px;
+ font-size: 1.2rem;
+ line-height: 1.6;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.bug-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ width: 100%;
+}
+
+.generate-button,
+.share-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ background-color: var(--accent-primary);
+ color: var(--bg-primary);
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: transform 0.2s, background-color 0.2s;
+ font-weight: bold;
+ width: fit-content;
+ min-width: 200px;
+}
+
+.share-button:hover {
+ background-color: var(--accent-secondary);
+ transform: translateY(-2px);
+}
+
+.share-button:active {
+ transform: translateY(0);
+}
+
@media (max-width: 600px) {
h1 {
font-size: 2rem;
@@ -155,4 +208,18 @@ footer {
flex-direction: column;
text-align: center;
}
+
+ #bug-generator-root {
+ padding: 1rem;
+ }
+
+ .bug-result {
+ font-size: 1rem;
+ padding: 1rem;
+ }
+
+ .share-button {
+ padding: 0.8rem 1.6rem;
+ font-size: 1rem;
+ }
}
\ No newline at end of file
diff --git a/index.php b/index.php
index 47f4f72..d7106ad 100644
--- a/index.php
+++ b/index.php
@@ -8,6 +8,9 @@
<meta name="description" content="T'inquiète frère, une fois sur le moteur Unity il n'y aura plus aucun soucis !">
<link rel="stylesheet" href="assets/styles.css">
<link rel="icon" type="image/png" href="assets/favicon.png">
+ <!-- React -->
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
<header>
@@ -19,8 +22,7 @@
</header>
<main>
- <button id="generate">Générer un bug !</button>
- <p id="result">Qui peut s'assoir à la même table que Dofus et dire qu'il a des bugs aussi stylés ?</p>
+ <div id="bug-generator-root"></div>
</main>
<footer>
@@ -33,6 +35,6 @@
</div>
</footer>
- <script src="assets/script.js"></script>
+ <script src="assets/bug-generator.js"></script>
</body>
</html>
\ No newline at end of file