277 lines
9.4 KiB
TypeScript
277 lines
9.4 KiB
TypeScript
import { logger } from '../logger';
|
|
import { Scenes } from '../scenes/scenes';
|
|
import store from '../store';
|
|
|
|
export class Intro {
|
|
currentStep: number;
|
|
anonymous: boolean;
|
|
|
|
nextButton: HTMLElement;
|
|
anonymousCheckbox: HTMLInputElement;
|
|
introContainer: HTMLElement;
|
|
introBackdrop: HTMLElement;
|
|
step1Container: HTMLElement;
|
|
step2Container: HTMLElement;
|
|
step3Container: HTMLElement;
|
|
step4Container: HTMLElement;
|
|
step5Container: HTMLElement;
|
|
step6Container: HTMLElement;
|
|
step7Container: HTMLElement;
|
|
|
|
nameRef: HTMLInputElement;
|
|
ageRef: HTMLInputElement;
|
|
backgroundRef: HTMLInputElement;
|
|
experienceRef: HTMLSelectElement;
|
|
|
|
fb1: HTMLTextAreaElement;
|
|
fb2: HTMLTextAreaElement;
|
|
fb3: HTMLTextAreaElement;
|
|
fb4: HTMLTextAreaElement;
|
|
fb5: HTMLTextAreaElement;
|
|
fb6: HTMLTextAreaElement;
|
|
fb7: HTMLTextAreaElement;
|
|
fb8: HTMLTextAreaElement;
|
|
fb9: HTMLTextAreaElement;
|
|
fb10: HTMLTextAreaElement;
|
|
|
|
k1: HTMLTextAreaElement;
|
|
k2: HTMLTextAreaElement;
|
|
k3: HTMLTextAreaElement;
|
|
k4: HTMLTextAreaElement;
|
|
k5: HTMLTextAreaElement;
|
|
|
|
errorRef: HTMLElement;
|
|
|
|
constructor() {
|
|
this.step1Container = document.getElementById('intro-step1');
|
|
this.step2Container = document.getElementById('intro-step2');
|
|
this.step3Container = document.getElementById('intro-step3');
|
|
this.step4Container = document.getElementById('intro-step4');
|
|
this.step5Container = document.getElementById('intro-step5');
|
|
this.step6Container = document.getElementById('intro-step6');
|
|
this.step7Container = document.getElementById('intro-step7');
|
|
this.nextButton = document.getElementById('intro-button');
|
|
this.anonymousCheckbox = document.querySelector('#intro-anonymous');
|
|
this.introContainer = document.querySelector('#intro');
|
|
this.introBackdrop = document.querySelector('#intro-backdrop');
|
|
|
|
this.nameRef = document.querySelector('#intro-name');
|
|
this.ageRef = document.querySelector('#intro-age');
|
|
this.backgroundRef = document.querySelector('#intro-background');
|
|
this.experienceRef = document.querySelector('#intro-experience');
|
|
|
|
this.fb1 = document.querySelector('#fb-1');
|
|
this.fb2 = document.querySelector('#fb-2');
|
|
this.fb3 = document.querySelector('#fb-3');
|
|
this.fb4 = document.querySelector('#fb-4');
|
|
this.fb5 = document.querySelector('#fb-5');
|
|
this.fb6 = document.querySelector('#fb-6');
|
|
this.fb7 = document.querySelector('#fb-7');
|
|
this.fb8 = document.querySelector('#fb-8');
|
|
this.fb9 = document.querySelector('#fb-9');
|
|
this.fb10 = document.querySelector('#fb-10');
|
|
|
|
this.k1 = document.querySelector('#k-1');
|
|
this.k2 = document.querySelector('#k-2');
|
|
this.k3 = document.querySelector('#k-3');
|
|
this.k4 = document.querySelector('#k-4');
|
|
this.k5 = document.querySelector('#k-5');
|
|
|
|
this.errorRef = document.querySelector('#intro-error');
|
|
|
|
this.nextButton.addEventListener('click', () => this.onNextClick());
|
|
|
|
this.currentStep = store.getState().currentIntroStep;
|
|
|
|
if (this.currentStep === 0) {
|
|
this.introContainer.style.display = 'none';
|
|
this.introBackdrop.style.display = 'none';
|
|
} else {
|
|
this.showStep();
|
|
}
|
|
|
|
store.subscribe((state) => {
|
|
this.currentStep = state.currentIntroStep;
|
|
this.anonymous = state.participantAnonymous;
|
|
|
|
if (state.currentIntroStep === 2) {
|
|
this.nextButton.innerHTML = 'Agree';
|
|
} else if (state.currentIntroStep === 3) {
|
|
this.nextButton.innerHTML = 'Confirm';
|
|
} else if (state.currentIntroStep === 4) {
|
|
this.nextButton.innerHTML = 'Start already!';
|
|
} else if (state.currentIntroStep === 7) {
|
|
this.nextButton.style.display = 'none';
|
|
} else if (state.currentIntroStep === 0) {
|
|
this.introContainer.style.display = 'none';
|
|
this.introBackdrop.style.display = 'none';
|
|
} else {
|
|
this.nextButton.innerHTML = 'Continue';
|
|
}
|
|
|
|
if (state.currentIntroStep !== 0) {
|
|
this.introContainer.style.display = 'block';
|
|
this.introBackdrop.style.display = 'block';
|
|
}
|
|
|
|
if (this.anonymous) {
|
|
this.hideNameInput();
|
|
}
|
|
|
|
this.showStep();
|
|
});
|
|
}
|
|
|
|
private onNextClick() {
|
|
const currentStep = store.getState().currentIntroStep;
|
|
|
|
// Track if particpant wants to be anon
|
|
if (currentStep === 2) {
|
|
store.setState({ participantAnonymous: this.anonymousCheckbox.checked });
|
|
}
|
|
|
|
// Validate input
|
|
if (currentStep === 3) {
|
|
const name = this.nameRef.value;
|
|
const age = Number(this.ageRef.value);
|
|
const background = this.backgroundRef.value;
|
|
const experience = this.experienceRef.value;
|
|
|
|
if (
|
|
(this.anonymous ? false : !name) ||
|
|
!age ||
|
|
!background ||
|
|
experience === 'Choose an option...'
|
|
) {
|
|
this.errorRef.style.display = 'block';
|
|
return;
|
|
} else {
|
|
this.errorRef.style.display = 'none';
|
|
|
|
store.setState({
|
|
uid: `${Date.now()}_${name.replace(/[^a-zA-Z ]/g, '').toLowerCase()}`,
|
|
});
|
|
|
|
this.sendDemographicData(name, age, background, experience);
|
|
}
|
|
}
|
|
|
|
if (currentStep === 4) {
|
|
store.setState({ currentIntroStep: 0 });
|
|
|
|
setTimeout(() => {
|
|
if (store.getState().currentScene !== Scenes.DETAIL) {
|
|
store.getState().addUserMessage({
|
|
inputWanted: false,
|
|
text: "Hey there! Need help here? You'll have to touch the parts of the project you want to take a look at with you character's head. As soon as the project part (packages/...) is highlighted, you can click it to dive deeper into what lies behind 🔬",
|
|
});
|
|
}
|
|
}, 3000);
|
|
|
|
return;
|
|
}
|
|
|
|
if (currentStep === 6) {
|
|
this.sendGeneralQuestionAnswers();
|
|
}
|
|
|
|
if (currentStep === 5) {
|
|
this.sendKnowledgeQuestionAnswers();
|
|
}
|
|
|
|
store.setState((state) => ({ currentIntroStep: state.currentIntroStep + 1 }));
|
|
}
|
|
|
|
private sendDemographicData(name: string, age: number, background: string, experience: string) {
|
|
logger.logPersonalData(name, age, background, experience, this.anonymous);
|
|
}
|
|
|
|
private sendGeneralQuestionAnswers() {
|
|
const answers = [
|
|
this.fb1.value,
|
|
this.fb2.value,
|
|
this.fb3.value,
|
|
this.fb4.value,
|
|
this.fb5.value,
|
|
this.fb6.value,
|
|
this.fb7.value,
|
|
this.fb8.value,
|
|
this.fb9.value,
|
|
this.fb10.value,
|
|
];
|
|
|
|
logger.logQuestions(answers);
|
|
}
|
|
|
|
private sendKnowledgeQuestionAnswers() {
|
|
const answers = [this.k1.value, this.k2.value, this.k3.value, this.k4.value, this.k5.value];
|
|
|
|
logger.logQuestions(answers, true);
|
|
}
|
|
|
|
private hideNameInput() {
|
|
this.nameRef.style.display = 'none';
|
|
const label = document.querySelector('#name-label') as HTMLElement;
|
|
label.style.display = 'none';
|
|
}
|
|
|
|
private showStep() {
|
|
if (this.currentStep === 1) {
|
|
this.step1Container.style.display = 'flex';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 2) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'flex';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 3) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'flex';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 4) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'flex';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 5) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'flex';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 6) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'flex';
|
|
this.step7Container.style.display = 'none';
|
|
} else if (this.currentStep === 7) {
|
|
this.step1Container.style.display = 'none';
|
|
this.step2Container.style.display = 'none';
|
|
this.step3Container.style.display = 'none';
|
|
this.step4Container.style.display = 'none';
|
|
this.step5Container.style.display = 'none';
|
|
this.step6Container.style.display = 'none';
|
|
this.step7Container.style.display = 'flex';
|
|
}
|
|
}
|
|
}
|