guess-the-year-web-component 3.0.2 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guess-the-year-web-component",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "description": "Guess the year",
   "main": "dist/main.js",
   "type": "module",

package/src/guess-the-year.ts

@@ -13,13 +13,20 @@ import stylesheet from "./scss/main.scss";
 import { QuestionScoreController } from "./lib/controller/scorecontroller";
 
 const SPLASH_DELAY: number = 1000;
-const MIN_YEAR: number = 1950;
-const MAX_YEAR: number = 2024;
 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';
+const GTY_TO_YEAR_VAR = 'gty-to-year';
+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';
 
 @customElement("guess-the-year")
 export class GuessTheYear extends LitElement {
+
   private sources: Array<string> = [];
   private _loading = false;
 
@@ -75,7 +82,7 @@ export class GuessTheYear extends LitElement {
       },
     },
   })
-  from: Dayjs = dayjs(`${MIN_YEAR}-01-01`, "YYYY-MM-DD");
+  from: Dayjs = dayjs(`${window.localStorage.getItem(GTY_FROM_YEAR_VAR) || MIN_YEAR}-01-01`, "YYYY-MM-DD");
 
   @property({
     type: Dayjs,
@@ -98,7 +105,7 @@ export class GuessTheYear extends LitElement {
       },
     },
   })
-  to: Dayjs = dayjs(); // defaults to today
+  to: Dayjs = dayjs(`${window.localStorage.getItem(GTY_TO_YEAR_VAR) || MAX_YEAR}-01-01`, "YYYY-MM-DD");
 
   @property({ type: String, attribute: "no-image-src" })
   noImageSrc: string = "";
@@ -110,9 +117,11 @@ export class GuessTheYear extends LitElement {
   maxHints: number = 3;
 
   @property({ type: Number, attribute: "number-of-questions", reflect: true })
-  numberOfQuestions: number = 10;
+  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;
 
@@ -259,12 +268,12 @@ export class GuessTheYear extends LitElement {
 
   // renders a selector for a year
   // TODO: set type of selector
-  private _renderYearSelectOptions(selectedValue: string): TemplateResult {
+  private _renderYearStepXSelectOptions(from: number, to: number, step: number, selectedValue: string): TemplateResult {
     const selected = parseInt(selectedValue, 10);
     // pre-render year options
     // and mark selected when they match
     const selectYearOptions = [];
-    for (let i = MIN_YEAR; i <= MAX_YEAR; i += 5) {
+    for (let i = from; i <= to; i += step) {
       selectYearOptions.push(html`
         <option value="${i}" ?selected=${selected == i}>${i}</option>
       `);
@@ -311,21 +320,21 @@ export class GuessTheYear extends LitElement {
 
         <div class="game-settings">
           <p>
+            ${this.i18n.translate("game-settings-p0")}
+            <select @change="${this._setPlayerDob}">
+              ${this._renderYearStepXSelectOptions(MAX_DOB, MIN_DOB, 1, this._playerDob + '')}
+            </select>
             ${this.i18n.translate("game-settings-p1")}
-            <select
-              @change="${(event: any) => {
-        this.numberOfQuestions = Number(event.target.value);
-      }}"
-            >
+            <select @change="${this._setNumberOfQuestions}">
               ${selectQuestionOptions}
             </select>
             ${this.i18n.translate("game-settings-p2")}
             <select @change="${this._setFromDate}">
-              ${this._renderYearSelectOptions(this.from.format("YYYY"))}
+              ${this._renderYearStepXSelectOptions(MIN_YEAR, MAX_YEAR, 5, this.from.format("YYYY"))}
             </select>
             ${this.i18n.translate("game-settings-p3")}
             <select @change="${this._setToDate}">
-              ${this._renderYearSelectOptions(this.to.format("YYYY"))}
+              ${this._renderYearStepXSelectOptions(MIN_YEAR, MAX_YEAR, 5, this.to.format("YYYY"))}
             </select>
             ${this.i18n.translate("game-settings-p4")}
           </p>
@@ -337,13 +346,24 @@ export class GuessTheYear extends LitElement {
       </div>
     `;
   }
+  private _setPlayerDob(event: any): void {
+    this._playerDob = Number(event.target.value);
+    window.localStorage.setItem(GTY_PLAYER_DOB_VAR, this._playerDob + '');
+  }
+
+  private _setNumberOfQuestions(event: any): void {
+    this.numberOfQuestions = Number(event.target.value);
+    window.localStorage.setItem(GTY_NUM_QUESTIONS_VAR, this.numberOfQuestions + '');
+  }
 
   private _setFromDate(event: any): void {
     this.from = this.from.year(event.target.value);
+    window.localStorage.setItem(GTY_FROM_YEAR_VAR, this.from.format('YYYY') + '');
   }
 
   private _setToDate(event: any): void {
     this.to = this.to.year(event.target.value);
+    window.localStorage.setItem(GTY_TO_YEAR_VAR, this.to.format('YYYY') + '');
   }
 
   // renders the actual game stage
@@ -407,7 +427,10 @@ export class GuessTheYear extends LitElement {
       `;
     }
 
-    return html``;
+    // Preserve html structure to prevent the webcomponent to collapse.
+    return html`<div class="incident--image">
+          <img/>
+        </div>`;
   }
 
   // renders a list of possible answers
@@ -539,6 +562,11 @@ export class GuessTheYear extends LitElement {
 
     this.totalScore += score;
 
+    // Fire-and-forget recallability feedback.
+    if (this._incident?.id) {
+      this._apiService.incidentRecallability(this._incident?.id, this._playerDob, is_correct);
+    }
+
     if (is_correct) {
       return html`
         <div class="feedback">
@@ -599,8 +627,6 @@ export class GuessTheYear extends LitElement {
   }
 
   private renderGameEnd(): TemplateResult {
-    // clearInterval(this._scoreIntervalHandler);
-
     console.debug("renderGameEnd");
     return html`
       ${this._renderHeader("The end!")}
@@ -612,10 +638,6 @@ export class GuessTheYear extends LitElement {
     `;
   }
 
-  // private _incidentsStack = [];
-
-  // private _totalScore: number = 0;
-
   private setupNewGame(): void {
     console.debug("new game!");
 
@@ -628,14 +650,10 @@ export class GuessTheYear extends LitElement {
     this.totalScore = 0;
     this._numberOfQuestionsSeen = 0;
 
-    // this._question.load(this.from.format('YYYY'), this.to.format('YYYY'));
-    // this._question.init();
-
     this._loadQuestion();
   }
 
   private _resetStage(): void {
-    // window.scrollTo(0, 0);
     this.sources = [];
     this._incident = undefined;
     this._hints = [];
@@ -763,6 +781,12 @@ export class GuessTheYear extends LitElement {
           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)] ||

package/src/index.html

@@ -36,8 +36,8 @@
       --guess-the-year-title-background-color: orange;
       --guess-the-year-title-color: white;
       /* --guess-the-year-text-position: static; */
-      --guess-the-year-text-background-color: rgba(255, 255, 255, 0.9);
-      --guess-the-year-text-color: #000;
+      /* --guess-the-year-text-color: white;
+      --guess-the-year-text-background-color: rgb(3, 78, 3); */
       --guess-the-year-text-max-height: 200px;
       --guess-the-year-tile-min-height: 500px;
       --guess-the-year-tile-max-height: 90vh;

package/src/lib/ApiService.ts

@@ -127,7 +127,7 @@ export class ApiService {
   }
 
   // post feedback about an incident.
-  public async postIncidentQualityFeedback(incidentid: string, remark: string) {
+  public async postIncidentFeedback(incidentid: string, remark: string) {
     const url = `${this.teeeApiUrl}/feedback/${incidentid}/remark`;
     await fetch(url, {
       method: "POST",
@@ -140,6 +140,11 @@ export class ApiService {
       }),
     });
   }
+
+  // Post the recallability of this incident by the player.
+  public async incidentRecallability(incidentid: string, dob: number, is_correct: boolean) {
+    this.postIncidentFeedback(incidentid, `recall:absolute-year:${Util.dobToGeneration(dob)}:${is_correct}`);
+  }
 }
 
 export enum ContentFeedback {

package/src/lib/Incident.ts

@@ -44,4 +44,5 @@ export const Categories = [
   Category.showbizz,
   Category.sports,
   Category.tech,
+  Category.tvShowOrSeries,
 ];

package/src/lib/Util.ts

@@ -27,15 +27,35 @@ export class Util {
   public static shuffleArray(array: Array<any>): Array<any> {
     return array.sort(() => Math.random() - 0.5);
   }
+
+  // The naming of the generations should conform to what the backend expects.
+  public static dobToGeneration(dob: number): string {
+    if (dob >= 2013) return 'generationalpha';
+    if (dob >= 1997) return 'generationz';
+    if (dob >= 1981) return 'generationy';
+    if (dob >= 1965) return 'generationx';
+    if (dob >= 1946) return 'babyboomers';
+    if (dob >= 1928) return 'silentgeneration';
+    if (dob >= 1901) return 'greatestgeneration';
+    return '';
+    // greatestgeneration: 1901-1927
+    // silentgeneration: 1928-1945
+    // babyboomers: 1946-1964
+    // generationx: 1965-1980
+    // generationy: 1981-1996
+    // generationz: 1997-2012
+    // generationalpha: 2013-2028
+  }
+
 }
 
 export interface IHash {
   [Identifier: string | number]:
-    | boolean
-    | number
-    | string
-    | string[]
-    | undefined;
+  | boolean
+  | number
+  | string
+  | string[]
+  | undefined;
 }
 
 export interface IStringArrayHash {

package/src/lib/i18n/EN.ts

@@ -15,6 +15,9 @@ export class EN implements i18n {
       "Sports news: __TITLE__.",
       "Sports fans were talking about '__TITLE__'.",
     ];
+    HintTemplates[Category.tvShowOrSeries] = [
+      "We watched '__TITLE__' on television.",
+    ];
     HintTemplates[Category.newsItem] = [
       "The newspaper also mentioned '__TITLE__' this year.",
       "'__TITLE__' was also in the news this year.",
@@ -101,6 +104,8 @@ export class EN implements i18n {
         return "In __SECONDS__ second";
       case "in-x-seconds":
         return "In __SECONDS__ seconds";
+      case "game-settings-p0":
+        return " What year of birth?"
       case "game-settings-p1":
         return " Right. Oh hey, Biff, hey, guys, how are you doing? Look, there's a            rhythmic"
       case "game-settings-p2":

package/src/lib/i18n/NL.ts

@@ -18,6 +18,10 @@ export class NL implements i18n {
       "Sportnieuws: __TITLE__.",
       "Sportfanaten spraken over '__TITLE__'.",
     ];
+    HintTemplates[Category.tvShowOrSeries] = [
+      "Op tv was '__TITLE__'.",
+      "'s Avonds keken we naar '__TITLE__' op televisie.",
+    ];
     HintTemplates[Category.newsItem] = [
       "In de krant stond dit jaar ook '__TITLE__'.",
       "'__TITLE__' was dit jaar ook in het nieuws te lezen.",
@@ -59,7 +63,7 @@ export class NL implements i18n {
       case "new-game":
         return "nieuw spel";
       case "end":
-        return "Je hebt het gered :)";
+        return "Goed gedaan!";
       case "next-question":
         return "Volgende vraag";
       case "quit":
@@ -104,6 +108,8 @@ export class NL implements i18n {
         return "In __SECONDS__ seconde";
       case "in-x-seconds":
         return "In __SECONDS__ seconden";
+      case "game-settings-p0":
+        return " Welk geboortejaar?"
       case "game-settings-p1":
         return " Right. Oh hey, Biff, hey, guys, how are you doing? Look, there's a            rhythmic"
       case "game-settings-p2":

package/todo.txt

@@ -1,6 +0,0 @@
-
-- leeftijd / generatie van de speler uitvragen obv geb dat
-- postIncidentAnswer feedback
-- jaartal 0 ??
-- not found image knippert en wordt vaak opgehaald
-- persist eerder gekozen from-to dates