dennis/codewanderer
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic setup of intro screens

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-02 13:34:33 +02:00
parent 1e04b3a826
commit 1e5b627e26
5 changed files with 185 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/store.ts
View file

@ -9,6 +9,7 @@ import { getRevealablesforSubproject } from './helpers';
import { SubProject } from './types';
export interface State {
currentIntroStep: number;
currentScene: Scenes;
currentSubproject?: string;
companionState: CompanionState;
@ -24,6 +25,7 @@ export interface State {
const store = create<State>(
devtools((set) => ({
currentIntroStep: 1,
currentScene: Scenes.OVERVIEW,
currentSubproject: null,
companionState: CompanionState.IDLE,

60
src/ui/intro.ts Normal file
View file

@ -0,0 +1,60 @@
import store from '../store';
export class Intro {
currentStep: number;
nextButton: HTMLElement;
step1Container: HTMLElement;
step2Container: HTMLElement;
step3Container: HTMLElement;
step4Container: 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.nextButton = document.getElementById('intro-button');
this.nextButton.addEventListener('click', this.onNextClick);
store.subscribe((state) => {
const currentStep = state.currentIntroStep;
this.showStep(currentStep);
});
}
private onNextClick() {
console.log('go next');
store.setState((state) => ({ currentIntroStep: state.currentIntroStep + 1 }));
}
private sendConsent() {}
private sendDemoographicData() {}
private showStep(stepToShow: number) {
if (stepToShow === 1) {
this.step1Container.style.display = 'flex';
this.step2Container.style.display = 'none';
this.step3Container.style.display = 'none';
this.step4Container.style.display = 'none';
} else if (stepToShow === 2) {
this.step1Container.style.display = 'none';
this.step2Container.style.display = 'flex';
this.step3Container.style.display = 'none';
this.step4Container.style.display = 'none';
} else if (stepToShow === 3) {
this.step1Container.style.display = 'none';
this.step2Container.style.display = 'none';
this.step3Container.style.display = 'flex';
this.step4Container.style.display = 'none';
} else if (stepToShow === 4) {
this.step1Container.style.display = 'none';
this.step2Container.style.display = 'none';
this.step3Container.style.display = 'none';
this.step4Container.style.display = 'flex';
}
}
}