-
Notifications
You must be signed in to change notification settings - Fork 6
/
shellshockers.js
46 lines (41 loc) · 2.49 KB
/
shellshockers.js
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
// Array of instructions and notices
const content = [
{ type: 'instruction', text: "First, go to v6.wiki or use the page on Classboard" },
{ type: 'instruction', text: "Then, once there, go to Search, then type in 'Shell Shockers'. Click the link that says Crazy Games in it." },
{ type: 'instruction', text: "Once it loads in, click 'Play' and wait for it to load files, decompress, parse, etc." },
{ type: 'instruction', text: "Keep waiting while the main game loads. If it loads to a black screen, click the reload button in the right button set (circle with arrow)" },
{ type: 'instruction', text: "Once you are in, click 'Play'. If it says server is full, click the settings button in the top right corner, then click the third tab, then select a different server." },
{ type: 'instruction', text: "Nice! You're all done!" },
];
let currentStep = -1; // Start from step 0 (welcome message)
const instructionsElement = document.getElementById("instructions");
const currentStepElement = document.getElementById("currentStep");
const totalStepsElement = document.getElementById("totalSteps");
// Initialize step counter
updateStepCounter();
// Function to update the step counter display
function updateStepCounter() {
currentStepElement.textContent = currentStep + 1;
totalStepsElement.textContent = content.length; // Display total steps including notice
}
// Function to display the next step with a slide-in animation
function nextStep() {
if (currentStep < content.length - 1) {
currentStep++;
instructionsElement.style.animation = "slide-out 0.5s ease-in forwards"; // Slide-out animation
setTimeout(() => {
const item = content[currentStep];
if (item.type === 'instruction') {
instructionsElement.innerHTML = `<p>Step ${currentStep + 1}: ${item.text}</p>`;
} else if (item.type === 'notice') {
instructionsElement.innerHTML = `<p class="notice">${item.text}</p>`;
}
instructionsElement.style.animation = "slide-in 0.5s ease-out forwards"; // Slide-in animation
updateStepCounter(); // Update step counter after transition
}, 500); // Wait for slide-out animation to complete (500ms)
} else {
instructionsElement.innerHTML = "<p>Enjoy the new game ;D</p>";
document.getElementById("nextButton").style.display = "none"; // Hide the button
document.getElementById("checkIcon").style.display = "block"; // Show the check mark icon
}
}