Source: noodlesResults.js

// noodlesResults.html onload module script

// Make sure to document our code
// See examples:
// - https://jsdoc.app/howto-es2015-modules.html
// - https://jsdoc.app/howto-es2015-classes.html

window.addEventListener('DOMContentLoaded', init);

import { getHoroscope, getNoodleData } from './genHoroscope.js';

const smokeAnimationTime = 1840;
const imageAnimationTime = 2900;
const timeBeforeSmoke = 2000;
const smokePeakCoverTime = 700;
const totalImageCycles = 2;
const imageExponentialPlier = 1.1;

/**
 * On load function,
 * use localStorage to get the quiz result and display the corresponding noodle
 */
async function init() {
	const noodleDescription = document.getElementById('noodleDescription');
	const quizResult = document.getElementById('quizResult');
	const smoke = document.getElementById('smokeImage');
	noodleDescription.style.opacity = 0;
	quizResult.textContent = 'Your personality type is being calculated...';
	smoke.style.display = 'none';

	spinNoodleWheel();

	setTimeout(() => {
		doSmokeEffect();
	}, timeBeforeSmoke);

	setTimeout(() => {
		noodleDescription.style.opacity = 1;
		quizResult.style.opacity = 1;
		setDescriptionAndResult();
	}, timeBeforeSmoke + smokePeakCoverTime);

	setTimeout(() => {
		setImageCorrectly();
	}, imageAnimationTime + 500);

	bindButtons();
}

/**
 * Set the noodle image to the corresponding image of the user's quiz result
 */
async function setImageCorrectly() {
	const image = document.getElementById('noodleImg');
	const noodleData = await getNoodleData();
	const noodleIndex = localStorage.getItem('myNoodleIndex');
	image.setAttribute('src', noodleData[noodleIndex]['path']);
	image.setAttribute('alt', noodleData[noodleIndex]['noodleName']);
}

/**
 * Set the noodle description and quiz result to the corresponding text of the user's quiz result
 */
async function setDescriptionAndResult() {
	const noodleDescription = document.getElementById('noodleDescription');
	const quizResult = document.getElementById('quizResult');
	let noodleId = localStorage.getItem('myNoodleIndex');

	// convert noodleId to int
	noodleId = parseInt(noodleId);
	const noodleData = await getNoodleData();
	noodleDescription.textContent =
		noodleData[noodleId]['personalityDescription'];
	quizResult.textContent = `Congratulations, your personality type is ${noodleData[noodleId]['noodleName']}!`;
}

/**
 * Animates the image to shuffle through all noodle images
 */
async function spinNoodleWheel() {
	const noodleData = await getNoodleData();
	const spinsAround = totalImageCycles;

	// exponential function
	const b = imageExponentialPlier;
	const a = imageAnimationTime / Math.pow(b, spinsAround * 12);

	const image = document.getElementById('noodleImg');
	for (let i = 0; i < spinsAround * 12; i++) {
		setTimeout(() => {
			image.setAttribute('src', noodleData[i % 12]['path']);
		}, a * Math.pow(b, i));
	}
}

/**
 * Animates the smoke image exactly once
 */
function doSmokeEffect() {
	const smoke = document.getElementById('smokeImage');
	setTimeout(() => {
		smoke.style.display = 'none';
	}, smokeAnimationTime);
	// img.src = img.src + "?";
	smoke.style.display = 'block';
}