web/iswhoa
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finished the results page

Browse source
This commit is contained in:
Leon Mika 2025-06-22 02:21:04 +02:00
parent d6b09e2305
commit 3107bd8a2f
5 changed files with 110 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

37
public/scripts/controllers/yourscore.js
View file

@ -2,9 +2,11 @@ import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.j
import { gameState } from "./gamestate.js";
const ANIMATION_DURATION = 1500.0;
const MAX_QUESTIONS = 10;
const CIRCLE_RADIUS = 50;
export default class extends Controller {
static targets = ['path', 'count'];
static targets = ['path', 'pathBack', 'count', 'postScore', 'rank'];
connect() {
this._startT = 0;
@ -13,41 +15,41 @@ export default class extends Controller {
}
_startAnimating(t) {
this._finalScore = 3;
this._finalScore = 10;
this._startT = t;
this._finalArcPostition = 360 * this._finalScore / 10;
this._updateCounterEvery = ANIMATION_DURATION / this._finalScore;
this._updateCounterAt = 0;
this._finalArcPostition = 360 * this._finalScore / MAX_QUESTIONS;
this._currentlyDisplayedScore = 0;
this.countTarget.innerText = "0";
this.countTarget.innerText = "0%";
requestAnimationFrame(this._animateFrame.bind(this));
}
_animateFrame(t) {
let tt = t - this._startT;
let tScaled = tt / ANIMATION_DURATION;
if (tt >= ANIMATION_DURATION) {
if (this._finalArcPostition == 360) {
this.pathTarget.setAttribute("d", this._describeCircle(50, 50, 45));
this.pathTarget.setAttribute("d", this._describeCircle(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5));
} else {
this.pathTarget.setAttribute("d", this._describeArc(50, 50, 45, 0, this._finalArcPostition));
this.pathTarget.setAttribute("d", this._describeArc(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5, 0, this._finalArcPostition));
}
this.countTarget.innerText = this._finalScore.toString();
let scoreToDisplay = (this._finalScore * 100 / MAX_QUESTIONS) | 0;
this.countTarget.innerText = `${scoreToDisplay}%`;
window.setTimeout(() => this._showPostStore(), 1);
return;
}
let arcT = Math.sin(tt / ANIMATION_DURATION * Math.PI / 2.0);
this.pathTarget.setAttribute("d", this._describeArc(50, 50, 45, 0, this._finalArcPostition * arcT));
this.pathTarget.setAttribute("d", this._describeArc(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5, 0, this._finalArcPostition * arcT));
if (tt >= this._updateCounterAt) {
this._currentlyDisplayedScore++;
this.countTarget.innerText = this._currentlyDisplayedScore.toString();
this._updateCounterAt += this._updateCounterEvery;
let scoreToDisplay = (arcT * this._finalScore * 100 / MAX_QUESTIONS) | 0;
if (scoreToDisplay != this._currentlyDisplayedScore) {
this._currentlyDisplayedScore = scoreToDisplay;
this.countTarget.innerText = `${scoreToDisplay}%`;
}
requestAnimationFrame(this._animateFrame.bind(this));
@ -87,4 +89,9 @@ export default class extends Controller {
return d;
}
_showPostStore() {
this.rankTarget.innerText = "Developer";
this.postScoreTarget.classList.remove("hidden");
}
}