Implement score
This commit is contained in:
Dennis Schoepf
parent
dadcdc92ef
commit
0c542da265
7 changed files with 85 additions and 5 deletions
|
|
@ -7,6 +7,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="ui">
|
||||
<div id="score">
|
||||
<div id="score-found">0</div>
|
||||
<div id="score-divider">/</div>
|
||||
<div id="score-total">6</div>
|
||||
</div>
|
||||
<div id="companion">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="companion-shape" viewBox="0 0 80 80">
|
||||
<polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>
|
||||
|
|
|
|||
2
main.ts
2
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();
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,15 @@ export interface State {
|
|||
setProjectMetadata: (projectName: string) => void;
|
||||
participantAnonymous: boolean;
|
||||
finishedGame: boolean;
|
||||
revealablesFinished: number;
|
||||
showScore: boolean;
|
||||
}
|
||||
|
||||
const store = create<State>(
|
||||
devtools((set) => ({
|
||||
showScore: false,
|
||||
currentIntroStep: 0,
|
||||
revealablesFinished: 0,
|
||||
currentScene: Scenes.OVERVIEW,
|
||||
currentSubproject: null,
|
||||
participantAnonymous: false,
|
||||
|
|
|
|||
42
src/ui/score.ts
Normal file
42
src/ui/score.ts
Normal file
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
20
styles.scss
20
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;
|
||||
|
|
|
|||
Reference in a new issue