guess-the-year-web-component 3.2.3 → 4.0.0

package/src/guess-the-year.ts

@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import dayjs from "dayjs";
 import { Dayjs } from "dayjs";
 const { setTimeout } = window;
-import { Incident, Categories, Category } from "./lib/Incident";
+import { Incident } from "./lib/Incident";
 import { NoImageImg } from "./lib/Icon";
 import { ApiService, ContentFeedback } from "./lib/ApiService";
 import { Util } from "./lib/Util";
@@ -14,7 +14,6 @@ import { QuestionScoreController } from "./lib/controller/scorecontroller";
 
 const SPLASH_DELAY: number = 1000;
 const MAX_QUESTIONS: number = 10;
-const HINT_COST: number = 2;
 const MIN_YEAR: number = 1950;
 const MAX_YEAR: number = parseInt(dayjs().format('YYYY'), 10);
 const GTY_FROM_YEAR_VAR = 'gty-from-year';
@@ -23,6 +22,8 @@ const GTY_NUM_QUESTIONS_VAR = 'gty-number-of-questions';
 const MAX_DOB: number = 1915;
 const MIN_DOB: number = parseInt(dayjs().format('YYYY'), 10) - 10;
 const GTY_PLAYER_DOB_VAR = 'gty-player-dob';
+const GTY_TIME_PER_QUESTION_VAR = 'gty-time-per-question';
+const DEFAULT_TIME_PER_QUESTION: number = 10;
 
 @customElement("guess-the-year")
 export class GuessTheYear extends LitElement {
@@ -113,42 +114,48 @@ export class GuessTheYear extends LitElement {
   @property({ type: Boolean, attribute: "suppress-images" })
   suppressImages: boolean = false;
 
-  @property({ type: Number, attribute: "max-hints" })
-  maxHints: number = 3;
-
   @property({ type: Number, attribute: "number-of-questions", reflect: true })
   numberOfQuestions: number = parseInt(window.localStorage.getItem(GTY_NUM_QUESTIONS_VAR) || MAX_QUESTIONS + '', 10);
   private _numberOfQuestionsSeen: number = 0;
 
   private _playerDob: number = parseInt(window.localStorage.getItem(GTY_PLAYER_DOB_VAR) || 0 + '', 10);
 
-  @state()
-  private _incident: Incident | undefined = undefined;
-
-  private _answers: Array<Number> = [];
+  @property({ type: Number, attribute: "time-per-question" })
+  timePerQuestion: number = parseInt(window.localStorage.getItem(GTY_TIME_PER_QUESTION_VAR) || DEFAULT_TIME_PER_QUESTION + '', 10);
 
   @state()
-  private _hint: string | undefined = undefined;
+  private _incident: Incident | undefined = undefined;
 
-  private _showHint: boolean = true;
   private _showFooter: boolean = false;
-  private _hintsIndex: number = 0;
-  private _hints: Array<Incident> = [];
 
   @state()
-  private _solution: Number | undefined = undefined;
+  private _solution: number | undefined = undefined;
 
   @state()
   public _renderState: string = GameState.INIT;
 
-  @state()
-  private _score = 30;
-
   public totalScore = 0;
 
-  // _answer is stored as string because it will be entered character for character
+  // Timeline state
+  @state()
+  private _timelineYears: number[] = [];
+  
   @state()
-  private _answer: number | undefined = undefined;
+  private _clickedPosition: number | undefined = undefined;
+  
+  @state()
+  private _correctYear: number | undefined = undefined;
+  
+  private _scoreAddedForCurrentQuestion: boolean = false;
+  private _userClicked: boolean = false; // Track if user actually clicked (vs timeout)
+  
+  @state()
+  private _toastMessage: string | undefined = undefined;
+  
+  @state()
+  private _toastType: 'correct' | 'wrong' | undefined = undefined;
+  
+  private _toastTimeout: number | undefined = undefined;
 
   private _apiService = new ApiService(this.teeeApiUrl);
   private i18n = i18nFactory("nl");
@@ -159,7 +166,23 @@ export class GuessTheYear extends LitElement {
 
   constructor() {
     super();
-    this._score0 = new QuestionScoreController(this, 30, 1000);
+    // Initialize with default, will be reset with actual timePerQuestion when needed
+    this._score0 = new QuestionScoreController(this, DEFAULT_TIME_PER_QUESTION, 1000, () => {
+      this._handleTimeUp();
+    });
+  }
+
+  // Handles when time runs out - treat as wrong answer
+  private _handleTimeUp(): void {
+    // If user hasn't clicked yet, treat as wrong answer
+    if (!this._userClicked) {
+      // Don't set _clickedPosition - timeout is always wrong
+      // Process feedback (will be wrong since no answer was given)
+      this._processFeedback();
+      
+      // Request update to show feedback
+      this.requestUpdate();
+    }
   }
 
   override connectedCallback() {
@@ -215,6 +238,7 @@ export class GuessTheYear extends LitElement {
         ${this._renderState == GameState.PLAY ? this.renderGameStage() : ""}
         ${this._renderState == GameState.END ? this.renderGameEnd() : ""}
         ${this._renderFooter()}
+        ${this._renderToast()}
       </div>
     `;
   }
@@ -224,13 +248,9 @@ export class GuessTheYear extends LitElement {
     this?.shadowRoot?.querySelector(element)?.style.setProperty("color", color);
   }
 
-  // this renders the game header
-  private _renderHeader(content: string = this.i18n.translate("game-name")): TemplateResult {
-    return html`
-      <section id="top" class="header guess-the-year-header">
-        <h1>${content}</h1>
-      </section>
-    `;
+  // this renders the game header (disabled for tile theme)
+  private _renderHeader(_content: string = this.i18n.translate("game-name")): TemplateResult {
+    return html``;
   }
 
   // this renders the game footer
@@ -300,6 +320,17 @@ export class GuessTheYear extends LitElement {
       `);
     }
 
+    // pre-render time per question options
+    const timeOptions = [2, 5, 10, 15];
+    const selectTimeOptions = [];
+    for (const time of timeOptions) {
+      selectTimeOptions.push(html`
+        <option value="${time}" ?selected=${this.timePerQuestion == time}>
+          ${time}
+        </option>
+      `);
+    }
+
     return html`
       ${this._renderHeader(this.i18n.translate("game-introduction-welcome"))}
 
@@ -307,15 +338,8 @@ export class GuessTheYear extends LitElement {
         <div class="game-explanation">
           <p>
             ${this.i18n.translate("game-introduction-p1")}
-          </p>
-
-          <p>
             ${this.i18n.translate("game-introduction-p2")}
           </p>
-
-          <p>
-            ${this.i18n.translate("game-introduction-p3")}
-          </p>
         </div>
 
         <div class="game-settings">
@@ -327,6 +351,11 @@ export class GuessTheYear extends LitElement {
               ${selectQuestionOptions}
             </select>
             ${this.i18n.translate("game-settings-p1-2")}
+            ${this.i18n.translate("game-settings-time-1")}
+            <select @change="${this._setTimePerQuestion}">
+              ${selectTimeOptions}
+            </select>
+            ${this.i18n.translate("game-settings-time-2")}
             ${this.i18n.translate("game-settings-p2")}
             <select @change="${this._setFromDate}">
               ${this._renderYearStepXSelectOptions(MIN_YEAR, MAX_YEAR, 5, this.from.format("YYYY"))}
@@ -360,6 +389,11 @@ export class GuessTheYear extends LitElement {
     window.localStorage.setItem(GTY_NUM_QUESTIONS_VAR, this.numberOfQuestions + '');
   }
 
+  private _setTimePerQuestion(event: any): void {
+    this.timePerQuestion = Number(event.target.value);
+    window.localStorage.setItem(GTY_TIME_PER_QUESTION_VAR, this.timePerQuestion + '');
+  }
+
   private _setFromDate(event: any): void {
     this.from = this.from.year(event.target.value);
     window.localStorage.setItem(GTY_FROM_YEAR_VAR, this.from.format('YYYY') + '');
@@ -381,16 +415,12 @@ export class GuessTheYear extends LitElement {
 
         <div class="container">
           <div class="incident">${this._renderIncident()}</div>
-          ${this._renderHint()}
           <div class="sources">${this.renderSources()}</div>
         </div>
 
         <div class="game-controls">
-          <div class="game-controls--hint">${this._renderHintButton()}</div>
-          <div class="game-controls--answers">${this._renderAnswers()}</div>
+          <div class="game-controls--timeline">${this._renderTimeline()}</div>
         </div>
-
-        ${this._renderFeedback()}
       </div>
     `;
   }
@@ -441,23 +471,82 @@ export class GuessTheYear extends LitElement {
     return html``;
   }
 
-  // renders a list of possible answers
-  private _renderAnswers(): TemplateResult {
+  // renders the timeline for relative year positioning
+  private _renderTimeline(): TemplateResult {
+    const fromYear = this.from.year();
+    const toYear = this.to.year();
+    const timelineRange = toYear - fromYear;
+    
+    // Calculate positions for known years on timeline (0-100%)
+    const yearPositions = this._timelineYears.map(year => {
+      const position = ((year - fromYear) / timelineRange) * 100;
+      return { year, position: Math.max(0, Math.min(100, position)) };
+    });
+
+    // Calculate clicked position if available
+    let clickedPositionPercent: number | undefined = undefined;
+    if (this._clickedPosition !== undefined) {
+      clickedPositionPercent = ((this._clickedPosition - fromYear) / timelineRange) * 100;
+      clickedPositionPercent = Math.max(0, Math.min(100, clickedPositionPercent));
+    }
+
+    // Calculate correct position if available
+    let correctPositionPercent: number | undefined = undefined;
+    if (this._correctYear !== undefined) {
+      correctPositionPercent = ((this._correctYear - fromYear) / timelineRange) * 100;
+      correctPositionPercent = Math.max(0, Math.min(100, correctPositionPercent));
+    }
+
     return html`
-      <div class="answers--list">
-        <ul>
-          ${this._answers.map(
-      (answer) =>
-        html`<li @click="${this._handleAnswerClicked}">${answer}</li>`,
-    )}
-        </ul>
+      <div class="timeline-container">
+        <div 
+          class="timeline" 
+          @click="${this._handleTimelineClick}"
+        >
+          <!-- Timeline line -->
+          <div class="timeline-line"></div>
+          
+          <!-- Year markers (tegeltjes) -->
+          ${yearPositions.map(({ year, position }) => html`
+            <div 
+              class="timeline-tile"
+              style="left: ${position}%;"
+            >
+              <div class="timeline-tile-content">
+                ${year}
+              </div>
+            </div>
+          `)}
+          
+          <!-- Clicked position indicator -->
+          ${clickedPositionPercent !== undefined ? html`
+            <div 
+              class="timeline-clicked ${this._isTimelinePositionCorrect() ? 'timeline-clicked-correct' : 'timeline-clicked-wrong'}"
+              style="left: ${clickedPositionPercent}%;"
+            ></div>
+          ` : ''}
+          
+          <!-- Correct position indicator (shown after answer) -->
+          ${correctPositionPercent !== undefined && this._clickedPosition !== undefined ? html`
+            <div 
+              class="timeline-correct"
+              style="left: ${correctPositionPercent}%;"
+            ></div>
+          ` : ''}
+          
+          <!-- Year labels at start and end -->
+          <div class="timeline-year-start">${fromYear}</div>
+          <div class="timeline-year-end">${toYear}</div>
+        </div>
       </div>
     `;
   }
 
   // renders the current question score
-  // it counts back to 0
   private _renderGameScore(): TemplateResult {
+    // Show the countdown score (remaining time/points)
+    const currentQuestionScore = Math.max(0, this._score0.value);
+    
     return html`
       <div class="game-score--total">
         <div class="game-score--label">${this.i18n.translate("question-number")}:</div>
@@ -468,7 +557,7 @@ export class GuessTheYear extends LitElement {
 
       <div class="game-score--score">
         <div class="game-score--label">${this.i18n.translate("question-score")}:</div>
-        <div class="game-score--value">${this._score0.value}</div>
+        <div class="game-score--value">${currentQuestionScore}</div>
       </div>
 
       <div class="game-score--total">
@@ -478,157 +567,208 @@ export class GuessTheYear extends LitElement {
     `;
   }
 
-  // handles the click on an answer
-  private _handleAnswerClicked(event: any): void {
-    // get the clicked answer
-    const answer = event.target.textContent;
+  // handles the click on the timeline
+  private _handleTimelineClick(event: MouseEvent): void {
+    if (!this._correctYear) {
+      return; // No question loaded yet
+    }
 
-    // stop the score counter
+    const timelineElement = event.currentTarget as HTMLElement;
+    const rect = timelineElement.getBoundingClientRect();
+    const clickX = event.clientX - rect.left;
+    const clickPercentage = (clickX / rect.width) * 100;
+
+    const fromYear = this.from.year();
+    const toYear = this.to.year();
+    const timelineRange = toYear - fromYear;
+    
+    // Convert click position to year
+    const clickedYear = Math.round(fromYear + (clickPercentage / 100) * timelineRange);
+    
+    // Clamp to valid range
+    const clampedYear = Math.max(fromYear, Math.min(toYear, clickedYear));
+    
+    this._clickedPosition = clampedYear;
+    this._userClicked = true; // Mark that user actually clicked
+
+    // Stop the score counter (if still running)
     this._score0.stop();
 
-    // remove the hint button
-    this._showHint = false;
-
-    // check if the answer is correct
-    if (answer) {
-      // this._apiService.postIncidentAnswer(this._incident?.id, answer);
-      console.debug(
-        answer,
-        this._solution,
-        this._score,
-        answer == this._solution,
-      );
-
-      this._answer = answer;
-    }
+    // Process feedback and show toast
+    this._processFeedback();
+    
+    // Request update to show feedback
+    this.requestUpdate();
   }
 
-  // renders the requested hint
-  private _renderHint(): TemplateResult {
-    if (!this._hint) {
-      return html``;
+  // checks if the clicked position is correct (between older and younger events)
+  private _isTimelinePositionCorrect(): boolean {
+    if (this._clickedPosition === undefined || this._correctYear === undefined) {
+      return false;
     }
 
-    return html` <p>${this._hint}</p> `;
+    // Find the position where the correct year should be inserted
+    const sortedKnownYears = [...this._timelineYears].sort((a, b) => a - b);
+    
+    // Find the two years that bracket the correct year
+    let lowerBound: number | null = null;
+    let upperBound: number | null = null;
+    
+    for (let i = 0; i < sortedKnownYears.length; i++) {
+      if (sortedKnownYears[i] < this._correctYear) {
+        lowerBound = sortedKnownYears[i];
+      } else if (sortedKnownYears[i] > this._correctYear && upperBound === null) {
+        upperBound = sortedKnownYears[i];
+        break;
+      }
+    }
+    
+    // If no lower bound, use the start of the timeline
+    if (lowerBound === null) {
+      lowerBound = this.from.year();
+    }
+    
+    // If no upper bound, use the end of the timeline
+    if (upperBound === null) {
+      upperBound = this.to.year();
+    }
+    
+    // Check if clicked position is between lower and upper bound
+    return this._clickedPosition >= lowerBound && this._clickedPosition <= upperBound;
   }
 
-  // renders the hint button until
-  // all max hints have been used
-  private _renderHintButton(): TemplateResult {
-    if (!this._showHint) {
-      return html``;
-    }
 
-    return html`
-      <div class="game-controls--hint">
-        <button @click="${this._handleHintClicked}">
-         ${this.i18n.translate("show-hint")} (${this._hints.length - this._hintsIndex})
-        </button>
-      </div>
-    `;
-  }
+  /**
+   * Processes feedback and shows toast notification
+   */
+  private _processFeedback(): void {
+    // Stop score counter if still running
+    if (this._score0.isRunning()) {
+      this._score0.stop();
+    }
 
-  // handles the click on the hint button
-  // and shows the next hint if available
-  // subtracts the cost of the hint from
-  // the question score
-  private _handleHintClicked(): void {
-    console.debug("handleHintClicked", [this._hintsIndex, this._hints.length]);
+    // If user didn't click (timeout), always treat as wrong
+    if (!this._userClicked) {
+      const is_correct = false;
+      const score = 0;
 
-    if (this._hintsIndex < this._hints.length) {
-      const hintText = this._generateHintText(this._hints[this._hintsIndex]);
+      // Add score to total (only once per question)
+      if (!this._scoreAddedForCurrentQuestion) {
+        this.totalScore += score;
+        this._scoreAddedForCurrentQuestion = true;
+      }
 
-      if (hintText) {
-        this._hint = hintText;
-        this._hintsIndex++;
-        this._score0.subtract(HINT_COST);
+      // Fire-and-forget recallability feedback.
+      if (this._incident?.id) {
+        this._apiService.incidentRecallability(this._incident?.id, this._playerDob, is_correct);
       }
-    }
 
-    if (this._hintsIndex >= this._hints.length) {
-      // this._hintsIndex = 0;
-      this._showHint = false;
+      // Show toast notification
+      const message = this.i18n.translate("timeline-wrong")
+        .replace(/__YEAR__/, (this._correctYear || 0).toString())
+        .replace(/__YEAR1__/, this.from.year().toString())
+        .replace(/__YEAR2__/, this.to.year().toString());
+      this._showToast(message, 'wrong');
+      return;
     }
-  }
 
-  // renders the feedback overlay
-  private _renderFeedback(): TemplateResult {
-    // do not show anything until an answer has been made
-    // and the score is greater than 0
-    if (!this._answer && this._score0.value > 0) {
-      return html``;
+    // do not process if no answer has been made
+    if (!this._clickedPosition) {
+      return;
     }
 
-    // check if the answer is correct
-    // cast to strings to compare
-    const is_correct = this._answer + "" == this._solution + "";
-    const score = is_correct ? this._score0.value : 0;
+    // check if the timeline position is correct
+    const is_correct = this._isTimelinePositionCorrect();
+    // Use remaining time as score (or 0 if wrong)
+    const score = is_correct ? Math.max(0, this._score0.value) : 0;
 
-    if (this._score0.isRunning()) {
-      this._score0.stop();
+    // Add score to total (only once per question)
+    if (!this._scoreAddedForCurrentQuestion) {
+      this.totalScore += score;
+      this._scoreAddedForCurrentQuestion = true;
     }
 
-    this.totalScore += score;
+    // Add correct year to timeline only if answer is correct
+    if (is_correct && this._correctYear !== undefined) {
+      this._addYearToTimeline(this._correctYear);
+    }
 
     // Fire-and-forget recallability feedback.
     if (this._incident?.id) {
       this._apiService.incidentRecallability(this._incident?.id, this._playerDob, is_correct);
     }
 
+    // Find the bounds for the correct position
+    const sortedKnownYears = [...this._timelineYears].sort((a, b) => a - b);
+    let lowerBound: number = this.from.year();
+    let upperBound: number = this.to.year();
+    
+    if (this._correctYear !== undefined) {
+      for (let i = 0; i < sortedKnownYears.length; i++) {
+        if (sortedKnownYears[i] < this._correctYear) {
+          lowerBound = sortedKnownYears[i];
+        } else if (sortedKnownYears[i] > this._correctYear && upperBound === this.to.year()) {
+          upperBound = sortedKnownYears[i];
+          break;
+        }
+      }
+    }
+
+    // Show toast message
     if (is_correct) {
-      return html`
-        <div class="feedback">
-          <div class="feedback--content">
-            <h3>${this.i18n.translate("answer-correct")}!</h3>
-            <p>
-              ${this._hintsIndex == 1 ? this.i18n.translate("used-hint-singular") : this.i18n.translate("used-hint-plural").replace(/__HINTS__/, this._hintsIndex + '')}
-            </p>
-            <p>
-              ${score == 1 ? this.i18n.translate("number-points-singular") : this.i18n.translate("number-points-plural").replace(/__POINTS__/, score + '')}
-            </p>
-
-            ${this._renderNextQuestionButton()}
-          </div>
-        </div>
-      `;
-    } else if (!is_correct && this._answer) {
-      return html`
-        <div class="feedback">
-          <div class="feedback--content">
-            <h3>${this.i18n.translate("answer-wrong")}</h3>
-            <p>
-              ${this.i18n.translate("correct-answer-was").replace(/__WRONG__/, this._answer + '').replace(/__CORRECT__/, this._solution + '')}
-            </p>
-            ${this._renderNextQuestionButton()}
-          </div>
-        </div>
-      `;
+      this._showToast(
+        this.i18n.translate("timeline-correct-with-year").replace(/__YEAR__/, this._correctYear + '').replace(/__YEAR1__/, lowerBound + '').replace(/__YEAR2__/, upperBound + ''),
+        'correct'
+      );
     } else {
+      this._showToast(
+        this.i18n.translate("timeline-wrong").replace(/__YEAR__/, this._correctYear + '').replace(/__YEAR1__/, lowerBound + '').replace(/__YEAR2__/, upperBound + ''),
+        'wrong'
+      );
+    }
+  }
+
+  // Renders the toast notification
+  private _renderToast(): TemplateResult {
+    if (this._toastMessage && this._toastType) {
       return html`
-        <div class="feedback">
-          <div class="feedback--content">
-            <h3>Helaas</h3>
-            <p>
-            ${this.i18n.translate("no-answer-correct-answer-was").replace(/__CORRECT__/, this._solution + '')}
-            </p>
-            ${this._renderNextQuestionButton()}
+        <div class="toast toast-${this._toastType}">
+          <div class="toast-content">
+            <p>${this._toastMessage}</p>
           </div>
         </div>
       `;
     }
+    return html``;
   }
 
-  // renders the next question button
-  private _renderNextQuestionButton(): TemplateResult {
-    if (this._numberOfQuestionsSeen < this.numberOfQuestions) {
-      return html`
-        <button @click="${this._loadQuestion}">${this.i18n.translate("next-question")}</button>
-      `;
+  // Shows a toast notification that auto-dismisses after 3 seconds
+  private _showToast(message: string, type: 'correct' | 'wrong'): void {
+    // Clear any existing timeout
+    if (this._toastTimeout) {
+      clearTimeout(this._toastTimeout);
     }
 
-    return html` <button @click="${this._endGame}">${this.i18n.translate("quit")}</button> `;
+    this._toastMessage = message;
+    this._toastType = type;
+    this.requestUpdate();
+
+    // Auto-dismiss after 3 seconds and load next question
+    this._toastTimeout = setTimeout(() => {
+      this._toastMessage = undefined;
+      this._toastType = undefined;
+      this.requestUpdate();
+
+      // Automatically load next question or end game
+      if (this._numberOfQuestionsSeen < this.numberOfQuestions) {
+        this._loadQuestion();
+      } else {
+        this._endGame();
+      }
+    }, 3000);
   }
 
+
   // renders the end of the game
   private _endGame(): void {
     this._renderState = GameState.END;
@@ -636,10 +776,10 @@ export class GuessTheYear extends LitElement {
 
   private renderGameEnd(): TemplateResult {
     console.debug("renderGameEnd");
-    const maxScore: number = this.numberOfQuestions * this._score;
+    const maxScore: number = this.numberOfQuestions * this.timePerQuestion; // max points per question
     const scoreRatio = Math.round((this.totalScore / maxScore) * 100);
     return html`
-      ${this._renderHeader("The end!")}
+      ${this._renderHeader(this.i18n.translate("the-end"))}
       <div class="guess-the-year-game-end">
         <p>
           ${this.i18n.translate("end").replace(/__SCORE__/, this.totalScore + '').replace(/__MAX_SCORE__/, maxScore + '').replace(/__PERCENT__/, scoreRatio + '')}
@@ -667,19 +807,41 @@ export class GuessTheYear extends LitElement {
     this.totalScore = 0;
     this._numberOfQuestionsSeen = 0;
 
+    // Initialize timeline with middle of the period
+    const middleYear = Math.floor((this.from.year() + this.to.year()) / 2);
+    this._timelineYears = [middleYear];
+
     this._loadQuestion();
   }
 
   private _resetStage(): void {
     this.sources = [];
     this._incident = undefined;
-    this._hints = [];
-    this._answer = undefined;
-    this._answers = [];
-    this._hintsIndex = 0;
+    
+    // Reset user interaction flags
+    this._userClicked = false;
+    
+    // Update score controller with current timePerQuestion value
+    this._score0.startValue = this.timePerQuestion;
     this._score0.reset();
-    this._showHint = false;
-    this._hint = undefined;
+    // Reset timeline interaction state, but keep known years
+    this._clickedPosition = undefined;
+    this._correctYear = undefined;
+    this._scoreAddedForCurrentQuestion = false;
+    
+    // Clear toast
+    if (this._toastTimeout) {
+      clearTimeout(this._toastTimeout);
+      this._toastTimeout = undefined;
+    }
+    this._toastMessage = undefined;
+    this._toastType = undefined;
+  }
+
+  private _addYearToTimeline(year: number): void {
+    if (!this._timelineYears.includes(year)) {
+      this._timelineYears = [...this._timelineYears, year].sort((a, b) => a - b);
+    }
   }
 
   async _loadQuestion(): Promise<void> {
@@ -701,54 +863,13 @@ export class GuessTheYear extends LitElement {
     this._incident = response.incident;
     this.sources = response.sources;
 
-    this._solution = Number(
+    this._solution = parseInt(
       (response.incident?.yearplusmonth || "").substring(0, 4),
-    );
+      10
+    ) || undefined;
 
-    const answers = [this._solution];
-    const from = this.from.year();
-    const to = this.to.year();
-
-    // generate 3 more random and unique answers between to and from
-    while (answers.length < 4) {
-      const randomAnswer = Math.floor(Math.random() * (to - from)) + from;
-      if (!answers.includes(randomAnswer)) {
-        answers.push(randomAnswer);
-      }
-    }
-
-    // sort theses answers
-    answers.sort();
-
-    this._answers = answers;
-
-    for (let i = 0; i < this.maxHints; i++) {
-      console.debug("loading hint", i);
-
-      const response: { incident: Incident | undefined; sources: string[] } =
-        await this._apiService.fetchOneIncident(
-          this.country,
-          Util.shuffleArray([...Categories]).shift(),
-          undefined,
-          undefined,
-          "",
-          `${this._solution}-01-01`,
-          `${this._solution}-12-31`,
-          undefined,
-          undefined,
-        );
-
-      if (response.incident) {
-        this._hints.push(response.incident);
-      }
-    }
-
-    if (this._hints.length === 0) {
-      this._showHint = false;
-    }
-    else {
-      this._showHint = true;
-    }
+    // Store correct year for timeline
+    this._correctYear = this._solution;
 
     // start render game stage
     this._renderState = GameState.PLAY;
@@ -760,65 +881,6 @@ export class GuessTheYear extends LitElement {
     this._numberOfQuestionsSeen += 1;
   }
 
-  private _generateHintText(hintIncident: Incident): string {
-    let hint = "";
-    const hintTemplates = this.i18n.HintTemplates[hintIncident.category];
-    switch (hintIncident.category) {
-      case Category.newsItem:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] || ""
-        ).replace(/__TITLE__/, hintIncident.title);
-        break;
-      case Category.radioSong:
-        // The title property of radioSongs always follow this pattern: track - artist
-        const track = hintIncident.title.replace(/(.*?)\s+\-.*/, "$1");
-        const artist = hintIncident.title.replace(/.*\-(.*)/, "$1");
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        )
-          .replace(/__ARTIST__/, artist)
-          .replace(/__TRACK__/, track);
-        break;
-      case Category.cinemaMovie:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title);
-        break;
-      case Category.tech:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title);
-        break;
-      case Category.newsPresenter:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title || hintIncident.text);
-        break;
-      case Category.tvShowOrSeries:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title || hintIncident.text);
-        break;
-      case Category.sports:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title || hintIncident.text);
-        break;
-      case Category.showbizz:
-        hint = (
-          hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-          hintTemplates[0]
-        ).replace(/__TITLE__/, hintIncident.title || hintIncident.text);
-        break;
-    }
-    return hint;
-  }
 
   renderSources(): TemplateResult {
     console.debug("renderSources");