Spaces:
Sleeping
Sleeping
File size: 5,199 Bytes
c80c485 8720f76 c80c485 8720f76 c80c485 f4d7808 c80c485 8720f76 c80c485 8720f76 c80c485 8720f76 c80c485 8720f76 c80c485 8720f76 c80c485 c068971 8720f76 c068971 de1bb89 c068971 c80c485 8720f76 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>What possibly go Wrong 2025</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 800px;
font-family: Arial, sans-serif;
overflow: hidden;
background-color: transparent;
}
/* Image de fond qui remplit tout l'écran */
body {
background: url('/images/intro/Intro.jpg') no-repeat center center;
background-size: cover; /* ou 100% auto */
position: relative;
}
/* Conteneur du texte */
#text-container {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 60%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
color: #fff;
text-align: left;
font-weight: bold;
font-size: 1.2rem;
z-index: 3; /* au-dessus des flammes si besoin */
}
/* Conteneur des flammes */
#flames {
position: absolute;
bottom: -50px; /* Move flames down a bit */
left: 0;
width: 100%;
height: 180px; /* Increase height */
background: url('/images/intro/fire3.png') repeat-x;
background-size: auto 180px; /* Match height */
animation: flameAnim 3s steps(10) infinite;
pointer-events: none;
z-index: 999;
}
@keyframes flameAnim {
100% {
background-position: -1000px 0;
}
}
</style>
</head>
<body>
<div id="text-container"></div>
<div id="flames"></div>
<script>
const lines1 = [
"Warning !",
"This game is a work of fiction.",
"Any resemblance to real people or events is purely coincidental.",
"",
"USA is on the edge of total colapse.",
"Borders are wide open.",
"People are eating cats and dogs.",
"Oil production? It's practically a fairy tale now ! ",
"God sent the perfect president to save the nation.",
];
const textContainer = document.getElementById('text-container');
let lineIndex = 0; // Indice de la ligne en cours
let charIndex = 0; // Indice du caractère en cours dans la ligne
let currentLineElem; // Élement HTML pour la ligne en cours (si non vide)
function typeWriter(lines, lineIndex, charIndex) {
// Si on a traité toutes les lignes, on arrête
if (lineIndex >= lines.length) {
return;
}
const currentLine = lines[lineIndex];
// -- 1) Gérer la ligne vide ("") --
if (currentLine === "") {
// On affiche un saut de ligne
textContainer.appendChild(document.createElement('br'));
// Après 2 secondes, on efface le texte et on passe à la suite
// setTimeout(() => {
// textContainer.innerHTML = "";
// lineIndex++;
// charIndex = 0;
// typeWriter(); // relance l'affichage de la ligne suivante
// }, 3000);
lineIndex++;
charIndex = 0;
typeWriter(lines, lineIndex, charIndex); // relance l'affichage de la ligne suivante
// On quitte immédiatement la fonction pour éviter tout conflit de setTimeout
return;
}
// -- 2) Si la ligne n'est pas vide, affichage "lettre par lettre" --
if (charIndex === 0) {
// On crée un nouvel élément pour la nouvelle ligne
currentLineElem = document.createElement('div');
textContainer.appendChild(currentLineElem);
}
// Ajout du caractère suivant
currentLineElem.textContent += currentLine.charAt(charIndex);
charIndex++;
// S'il reste des caractères à afficher dans la ligne
if (charIndex < currentLine.length) {
setTimeout(() => typeWriter(lines, lineIndex, charIndex), 30);
} else {
// Ligne terminée : on passe à la ligne suivante
lineIndex++;
charIndex = 0;
currentLineElem = null;
// Petite pause avant d'attaquer la prochaine ligne
setTimeout(() => typeWriter(lines, lineIndex, charIndex), 25);
}
}
// On démarre le « typewriter »
// typeWriter(lines1, lineIndex, charIndex)
// Check if this is the initial load or reload
const urlParams = new URLSearchParams(window.location.search);
const isReload = urlParams.get('reload');
const lines2 = [
"Welcome to",
"What Could Possibly Go Wrong in 2025 !",
"",
"President Trump is actively chatting on X",
"sharing his plans with random individuals.",
"",
"Your role is to manage the ensuing chaos...",
"",
"You will play as these individuals, responding to his messages.",
"Your goal: Convince him not to take actions that could threaten global peace. The map shows other countries' relations with the USA.",
];
if (!isReload) {
// First load - show lines1 and set up reload
typeWriter(lines1, 0, 0);
setTimeout(() => {
window.location.href = window.location.pathname + '?reload=true';
}, 12000);
} else {
// After reload - show lines2
typeWriter(lines2, 0, 0);
}
</script>
</body>
</html>
|