diff --git a/index.html b/index.html index cadd266..9186864 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,11 @@
+
+
0
+
/
+
6
+
diff --git a/main.ts b/main.ts index 98c3aea..65f841f 100644 --- a/main.ts +++ b/main.ts @@ -7,6 +7,7 @@ import store from './src/store'; 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'; const sketch = (s: p5) => { // Scenes @@ -20,6 +21,7 @@ const sketch = (s: p5) => { new Intro(); new Companion(); new InfoMessage(); + new Score(); overviewScene = new OverviewScene(); detailScene = new DetailScene(); diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index e904224..0cee9fb 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -43,14 +43,12 @@ export class DetailScene { } if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) { - console.log('3 seconds without interaction'); this.wasInteractedWith = true; store.getState().addUserMessage({ inputWanted: false, text: 'Trouble knowing what to do? You should try clicking somewhere in order to spawn reveal bubbles. Try this in different parts of the canvas to see what you can find', }); - } else if (mp5.millis() > this.startTime + 6000 && !this.wasHovered && this.wasInteractedWith) { - console.log('3 seconds without hovering'); + } else if (mp5.millis() > this.startTime + 8000 && !this.wasHovered && this.wasInteractedWith) { this.wasHovered = true; store.getState().addUserMessage({ inputWanted: false, @@ -67,6 +65,11 @@ export class DetailScene { revObj.draw(); }); + store.setState({ + revealablesFinished: this.revealableObjects.filter((revObj) => revObj.wasInteractedWith) + .length, + }); + this.player.move(); if ( @@ -80,7 +83,7 @@ export class DetailScene { store.getState().addUserMessage({ text: "Yaay! You've found all of the important parts of this part of the repository. You will be returned to the subproject overview now. Pick the next subproject you want to take a look at there.", inputWanted: false, - onNext: () => store.setState({ currentScene: Scenes.OVERVIEW }), + onNext: () => store.setState({ showScore: false, currentScene: Scenes.OVERVIEW }), showIdle: false, }); } diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index 8566125..30657a3 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -31,7 +31,11 @@ export class OverviewScene { const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y); if (dist < edge.r) { store.getState().setProjectMetadata(edge.name); - store.setState({ currentSubproject: edge.name, currentScene: Scenes.DETAIL }); + store.setState({ + showScore: true, + currentSubproject: edge.name, + currentScene: Scenes.DETAIL, + }); } }); } diff --git a/src/store.ts b/src/store.ts index bc5edf5..360498c 100644 --- a/src/store.ts +++ b/src/store.ts @@ -22,11 +22,15 @@ export interface State { setProjectMetadata: (projectName: string) => void; participantAnonymous: boolean; finishedGame: boolean; + revealablesFinished: number; + showScore: boolean; } const store = create( devtools((set) => ({ + showScore: false, currentIntroStep: 0, + revealablesFinished: 0, currentScene: Scenes.OVERVIEW, currentSubproject: null, participantAnonymous: false, diff --git a/src/ui/score.ts b/src/ui/score.ts new file mode 100644 index 0000000..8aa50ba --- /dev/null +++ b/src/ui/score.ts @@ -0,0 +1,42 @@ +import store from '../store'; + +export class Score { + showScore: boolean; + + scoreFound: number; + scoreTotal: number; + + scoreRef: HTMLElement; + scoreFoundRef: HTMLElement; + scoreTotalRef: HTMLElement; + + constructor() { + this.scoreRef = document.querySelector('#score'); + this.scoreFoundRef = document.querySelector('#score-found'); + this.scoreTotalRef = document.querySelector('#score-total'); + + this.scoreFound = 0; + this.scoreTotal = store.getState().revealables.length; + + this.scoreFoundRef.innerHTML = this.scoreFound.toString(); + this.scoreTotalRef.innerHTML = this.scoreTotal.toString(); + + if (store.getState().showScore) { + this.scoreRef.style.display = 'flex'; + } + + store.subscribe((state) => { + if (state.showScore) { + this.scoreRef.style.display = 'flex'; + } else { + this.scoreRef.style.display = 'none'; + } + + this.scoreTotal = state.revealables.length; + this.scoreFound = state.revealablesFinished; + + this.scoreFoundRef.innerHTML = this.scoreFound.toString(); + this.scoreTotalRef.innerHTML = this.scoreTotal.toString(); + }); + } +} diff --git a/styles.scss b/styles.scss index 15f24de..ae128ab 100644 --- a/styles.scss +++ b/styles.scss @@ -86,6 +86,7 @@ textarea { right: 40px; display: flex; justify-content: flex-end; + align-items: center; #companion { position: relative; @@ -197,6 +198,25 @@ textarea { } } + #score { + display: none; + position: absolute; + left: 0; + align-items: flex-end; + color: #b0b7bf; + font-size: 32px; + + #score-found { + font-size: 60px; + font-weight: bold; + } + + #score-divider { + font-size: 42px; + align-self: flex-end; + } + } + #info-message { display: none; position: fixed;