Add ov score
This commit is contained in:
Dennis Schoepf
parent
2be130aedc
commit
63896d10c8
7 changed files with 55 additions and 2 deletions
|
|
@ -7,6 +7,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="ui">
|
<div class="ui">
|
||||||
|
<div id="ov-score">
|
||||||
|
<div id="ov-score-found">0</div>
|
||||||
|
<div id="ov-score-divider">/</div>
|
||||||
|
<div id="ov-score-total">6</div>
|
||||||
|
</div>
|
||||||
<div id="score">
|
<div id="score">
|
||||||
<div id="score-found">0</div>
|
<div id="score-found">0</div>
|
||||||
<div id="score-divider">/</div>
|
<div id="score-divider">/</div>
|
||||||
|
|
|
||||||
2
main.ts
2
main.ts
|
|
@ -9,6 +9,7 @@ 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';
|
import { Score } from './src/ui/score';
|
||||||
|
import { OvScore } from './src/ui/ov-score';
|
||||||
|
|
||||||
const sketch = (s: p5) => {
|
const sketch = (s: p5) => {
|
||||||
// Scenes
|
// Scenes
|
||||||
|
|
@ -23,6 +24,7 @@ const sketch = (s: p5) => {
|
||||||
new Companion();
|
new Companion();
|
||||||
new InfoMessage();
|
new InfoMessage();
|
||||||
new Score();
|
new Score();
|
||||||
|
new OvScore();
|
||||||
|
|
||||||
overviewScene = new OverviewScene();
|
overviewScene = new OverviewScene();
|
||||||
detailScene = new DetailScene();
|
detailScene = new DetailScene();
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
"repository": "git@github.com:dennisschoepf/codewanderer.git",
|
"repository": "git@github.com:dennisschoepf/codewanderer.git",
|
||||||
"author": "Dennis Schoepf <dennis@schoepf.co>",
|
"author": "Dennis Schoepf <dennis@schoepf.co>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "parcel index.html",
|
"dev": "parcel index.html",
|
||||||
"build": "parcel build index.html",
|
"build": "parcel build index.html",
|
||||||
|
|
|
||||||
|
|
@ -23,13 +23,15 @@ export interface State {
|
||||||
finishedGame: boolean;
|
finishedGame: boolean;
|
||||||
revealablesFinished: number;
|
revealablesFinished: number;
|
||||||
showScore: boolean;
|
showScore: boolean;
|
||||||
|
showOvScore: boolean;
|
||||||
uid: string;
|
uid: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const store = create<State>((set) => ({
|
const store = create<State>((set) => ({
|
||||||
uid: null,
|
uid: null,
|
||||||
showScore: false,
|
showScore: false,
|
||||||
currentIntroStep: 1,
|
showOvScore: true,
|
||||||
|
currentIntroStep: 0,
|
||||||
revealablesFinished: 0,
|
revealablesFinished: 0,
|
||||||
currentScene: Scenes.OVERVIEW,
|
currentScene: Scenes.OVERVIEW,
|
||||||
currentSubproject: null,
|
currentSubproject: null,
|
||||||
|
|
|
||||||
|
|
@ -173,6 +173,7 @@ export class Intro {
|
||||||
|
|
||||||
if (currentStep === 6) {
|
if (currentStep === 6) {
|
||||||
this.sendGeneralQuestionAnswers();
|
this.sendGeneralQuestionAnswers();
|
||||||
|
window.scrollTo(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (currentStep === 5) {
|
if (currentStep === 5) {
|
||||||
|
|
|
||||||
41
src/ui/ov-score.ts
Normal file
41
src/ui/ov-score.ts
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -200,6 +200,7 @@ textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ov-score,
|
||||||
#score {
|
#score {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -208,11 +209,13 @@ textarea {
|
||||||
color: #b0b7bf;
|
color: #b0b7bf;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
|
||||||
|
#ov-score-found,
|
||||||
#score-found {
|
#score-found {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ov-score-divider,
|
||||||
#score-divider {
|
#score-divider {
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
|
||||||
Reference in a new issue