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

Implement score

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-02 22:46:48 +02:00
parent dadcdc92ef
commit 0c542da265
7 changed files with 85 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -7,6 +7,11 @@
</head> </head>
<body> <body>
<div class="ui"> <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"> <div id="companion">
<svg xmlns="http://www.w3.org/2000/svg" id="companion-shape" viewBox="0 0 80 80"> <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> <polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>

2
main.ts
View file

@ -7,6 +7,7 @@ import store from './src/store';
import { Companion, CompanionState } from './src/ui/companion'; import { Companion, CompanionState } from './src/ui/companion';
import { InfoMessage } from './src/ui/info'; import { InfoMessage } from './src/ui/info';
import { Intro } from './src/ui/intro'; import { Intro } from './src/ui/intro';
import { Score } from './src/ui/score';
const sketch = (s: p5) => { const sketch = (s: p5) => {
// Scenes // Scenes
@ -20,6 +21,7 @@ const sketch = (s: p5) => {
new Intro(); new Intro();
new Companion(); new Companion();
new InfoMessage(); new InfoMessage();
new Score();
overviewScene = new OverviewScene(); overviewScene = new OverviewScene();
detailScene = new DetailScene(); detailScene = new DetailScene();

11
src/scenes/DetailScene.ts
View file

@ -43,14 +43,12 @@ export class DetailScene {
} }
if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) { if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) {
console.log('3 seconds without interaction');
this.wasInteractedWith = true; this.wasInteractedWith = true;
store.getState().addUserMessage({ store.getState().addUserMessage({
inputWanted: false, 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', 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) { } else if (mp5.millis() > this.startTime + 8000 && !this.wasHovered && this.wasInteractedWith) {
console.log('3 seconds without hovering');
this.wasHovered = true; this.wasHovered = true;
store.getState().addUserMessage({ store.getState().addUserMessage({
inputWanted: false, inputWanted: false,
@ -67,6 +65,11 @@ export class DetailScene {
revObj.draw(); revObj.draw();
}); });
store.setState({
revealablesFinished: this.revealableObjects.filter((revObj) => revObj.wasInteractedWith)
.length,
});
this.player.move(); this.player.move();
if ( if (
@ -80,7 +83,7 @@ export class DetailScene {
store.getState().addUserMessage({ 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.", 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, inputWanted: false,
onNext: () => store.setState({ currentScene: Scenes.OVERVIEW }), onNext: () => store.setState({ showScore: false, currentScene: Scenes.OVERVIEW }),
showIdle: false, showIdle: false,
}); });
} }

6
src/scenes/OverviewScene.ts
View file

@ -31,7 +31,11 @@ export class OverviewScene {
const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y); const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y);
if (dist < edge.r) { if (dist < edge.r) {
store.getState().setProjectMetadata(edge.name); store.getState().setProjectMetadata(edge.name);
store.setState({ currentSubproject: edge.name, currentScene: Scenes.DETAIL }); store.setState({
showScore: true,
currentSubproject: edge.name,
currentScene: Scenes.DETAIL,
});
} }
}); });
} }

4
src/store.ts
View file

@ -22,11 +22,15 @@ export interface State {
setProjectMetadata: (projectName: string) => void; setProjectMetadata: (projectName: string) => void;
participantAnonymous: boolean; participantAnonymous: boolean;
finishedGame: boolean; finishedGame: boolean;
revealablesFinished: number;
showScore: boolean;
} }
const store = create<State>( const store = create<State>(
devtools((set) => ({ devtools((set) => ({
showScore: false,
currentIntroStep: 0, currentIntroStep: 0,
revealablesFinished: 0,
currentScene: Scenes.OVERVIEW, currentScene: Scenes.OVERVIEW,
currentSubproject: null, currentSubproject: null,
participantAnonymous: false, participantAnonymous: false,

42
src/ui/score.ts Normal file
View 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
View file

@ -86,6 +86,7 @@ textarea {
right: 40px; right: 40px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
#companion { #companion {
position: relative; 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 { #info-message {
display: none; display: none;
position: fixed; position: fixed;