révision du fonctionnement et ajout d'un bouton de partage
This commit is contained in:
parent
c0571c0fbd
commit
4e238c7541
137
assets/bug-generator.js
Normal file
137
assets/bug-generator.js
Normal file
@ -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));
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user