diff --git a/index.html b/index.html index 2dcb2c6..b1a0c07 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,11 @@
+
+
0
+
/
+
6
+
0
/
diff --git a/main.ts b/main.ts index 0d38bab..b4d9d42 100644 --- a/main.ts +++ b/main.ts @@ -9,6 +9,7 @@ import { Companion, CompanionState } from './src/ui/companion'; import { InfoMessage } from './src/ui/info'; import { Intro } from './src/ui/intro'; import { Score } from './src/ui/score'; +import { OvScore } from './src/ui/ov-score'; const sketch = (s: p5) => { // Scenes @@ -23,6 +24,7 @@ const sketch = (s: p5) => { new Companion(); new InfoMessage(); new Score(); + new OvScore(); overviewScene = new OverviewScene(); detailScene = new DetailScene(); diff --git a/package.json b/package.json index a054f63..37f0b79 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "repository": "git@github.com:dennisschoepf/codewanderer.git", "author": "Dennis Schoepf ", "license": "MIT", - "type": "module", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html", diff --git a/src/store.ts b/src/store.ts index abc8d20..5dffe6c 100644 --- a/src/store.ts +++ b/src/store.ts @@ -23,13 +23,15 @@ export interface State { finishedGame: boolean; revealablesFinished: number; showScore: boolean; + showOvScore: boolean; uid: string; } const store = create((set) => ({ uid: null, showScore: false, - currentIntroStep: 1, + showOvScore: true, + currentIntroStep: 0, revealablesFinished: 0, currentScene: Scenes.OVERVIEW, currentSubproject: null, diff --git a/src/ui/intro.ts b/src/ui/intro.ts index ed06bc6..732444e 100644 --- a/src/ui/intro.ts +++ b/src/ui/intro.ts @@ -173,6 +173,7 @@ export class Intro { if (currentStep === 6) { this.sendGeneralQuestionAnswers(); + window.scrollTo(0); } if (currentStep === 5) { diff --git a/src/ui/ov-score.ts b/src/ui/ov-score.ts new file mode 100644 index 0000000..9103348 --- /dev/null +++ b/src/ui/ov-score.ts @@ -0,0 +1,41 @@ +import store from '../store'; + +export class OvScore { + showScore: boolean; + + scoreFound: number; + scoreTotal: number; + + scoreRef: HTMLElement; + scoreFoundRef: HTMLElement; + scoreTotalRef: HTMLElement; + + constructor() { + this.scoreRef = document.querySelector('#ov-score'); + this.scoreFoundRef = document.querySelector('#ov-score-found'); + this.scoreTotalRef = document.querySelector('#ov-score-total'); + + this.scoreFound = 0; + this.scoreTotal = 3; + + this.scoreFoundRef.innerHTML = this.scoreFound.toString(); + this.scoreTotalRef.innerHTML = this.scoreTotal.toString(); + + if (store.getState().showOvScore) { + this.scoreRef.style.display = 'flex'; + } + + store.subscribe((state) => { + if (state.showOvScore) { + this.scoreRef.style.display = 'flex'; + } else { + this.scoreRef.style.display = 'none'; + } + + this.scoreFound = state.finishedSubProjects.length; + + this.scoreFoundRef.innerHTML = this.scoreFound.toString(); + this.scoreTotalRef.innerHTML = this.scoreTotal.toString(); + }); + } +} diff --git a/styles.scss b/styles.scss index 79ca5a0..076afbc 100644 --- a/styles.scss +++ b/styles.scss @@ -200,6 +200,7 @@ textarea { } } + #ov-score, #score { display: none; position: absolute; @@ -208,11 +209,13 @@ textarea { color: #b0b7bf; font-size: 32px; + #ov-score-found, #score-found { font-size: 60px; font-weight: bold; } + #ov-score-divider, #score-divider { font-size: 42px; align-self: flex-end;