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

package/dist/guess-the-year.d.ts

@@ -2,8 +2,6 @@ import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { Dayjs } from "dayjs";
 import { Incident } from "./lib/Incident";
 export declare class GuessTheYear extends LitElement {
-    private _startTime;
-    private _endTime;
     private sources;
     private _loading;
     private _score0;
@@ -18,16 +16,9 @@ export declare class GuessTheYear extends LitElement {
     impact: string;
     from: Dayjs;
     to: Dayjs;
-    limit: string;
-    shuffle: boolean;
-    showDuration: boolean;
-    showFeedback: boolean;
     noImageSrc: string;
     suppressImages: boolean;
-    autoFocus: boolean;
-    hintIntervalSecs: number;
     maxHints: number;
-    maxTries: number;
     numberOfQuestions: number;
     private _numberOfQuestionsSeen;
     private _incident;
@@ -38,15 +29,11 @@ export declare class GuessTheYear extends LitElement {
     private _hintsIndex;
     private _hints;
     private _solution;
-    private _displaySolution;
-    private _answeredCorrectly;
-    private _tries;
     _renderState: string;
     private _score;
     totalScore: number;
     private _answer;
     private _apiService;
-    private _intervalsPassed;
     private i18n;
     static styles: import("lit").CSSResult;
     constructor();
@@ -67,6 +54,7 @@ export declare class GuessTheYear extends LitElement {
     private _setToDate;
     private renderGameStage;
     private _renderIncident;
+    private _shouldDisplayAnImage;
     private _renderIncidentImage;
     private _renderAnswers;
     private _renderGameScore;
@@ -81,22 +69,7 @@ export declare class GuessTheYear extends LitElement {
     private setupNewGame;
     private _resetStage;
     _loadQuestion(): Promise<void>;
-    renderRefreshButton(): TemplateResult;
-    renderStopGameButton(): TemplateResult;
-    renderFeedbackPossibility(): TemplateResult;
-    renderSubmitPossibility(): TemplateResult;
-    renderTries(): TemplateResult;
-    renderTheSolution(): TemplateResult;
-    renderTheDuration(): TemplateResult;
-    renderTiles(incident: Incident | undefined): "" | TemplateResult<1>;
-    private _tileShouldDisplayAnImage;
-    renderTile(incident: Incident): TemplateResult;
-    renderTileContent(incident: Incident): TemplateResult;
     private _generateHintText;
-    renderHintTile(hint: Incident | undefined): TemplateResult;
-    renderTileTitle(incident: Incident): TemplateResult;
-    renderTileImage(incident: Incident): TemplateResult;
-    renderTileTextContent(incident: Incident): TemplateResult;
     renderSources(): TemplateResult;
     _handleImageLoadError: (evt: Event, incident: Incident) => false | undefined;
 }

package/dist/guess-the-year.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guess-the-year.d.ts","sourceRoot":"","sources":["../src/guess-the-year.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"guess-the-year.d.ts","sourceRoot":"","sources":["../src/guess-the-year.ts"],"names":[],"mappings":"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"}

package/dist/guess-the-year.js

@@ -6,23 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-// import { Task } from '@lit/task';
 import dayjs from "dayjs";
 import { Dayjs } from "dayjs";
 const { setTimeout } = window;
-import { Categories } from "./lib/Incident";
-import { NoImageImg, RefreshIconSVG, SolutionIconSVG } from "./lib/Icon";
+import { Categories, Category } from "./lib/Incident";
+import { NoImageImg } from "./lib/Icon";
 import { ApiService, ContentFeedback } from "./lib/ApiService";
 import { Util } from "./lib/Util";
 import { i18nFactory } from "./lib/i18n/i18n";
 import { GameState } from "./lib/enums";
 import stylesheet from "./scss/main.scss";
 import { QuestionScoreController } from "./lib/controller/scorecontroller";
-// const GREEN = "#07d207";
-// const RED = "#ec3737";
-// const BLACK = "#000";
-const SPLASH_DELAY = 3000;
+const SPLASH_DELAY = 1000;
 const MIN_YEAR = 1950;
 const MAX_YEAR = 2024;
 const MAX_QUESTIONS = 10;
@@ -34,12 +29,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     set loading(value) {
         this._loading = value;
     }
-    // private _game_engine: Engine;
     constructor() {
         super();
-        this._startTime = new Date();
-        this._endTime = new Date();
-        // private _uuid = Math.random();
         this.sources = [];
         this._loading = false;
         this.teeeApiUrl = "https://api.tee-e.com";
@@ -51,16 +42,9 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         this.impact = "";
         this.from = dayjs(`${MIN_YEAR}-01-01`, "YYYY-MM-DD");
         this.to = dayjs(); // defaults to today
-        this.limit = "";
-        this.shuffle = false;
-        this.showDuration = false;
-        this.showFeedback = false;
         this.noImageSrc = "";
         this.suppressImages = false;
-        this.autoFocus = false;
-        this.hintIntervalSecs = 7;
         this.maxHints = 3;
-        this.maxTries = -1;
         this.numberOfQuestions = 10;
         this._numberOfQuestionsSeen = 0;
         this._incident = undefined;
@@ -71,40 +55,17 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         this._hintsIndex = 0;
         this._hints = [];
         this._solution = undefined;
-        this._displaySolution = false;
-        this._answeredCorrectly = false;
-        this._tries = 0;
         this._renderState = GameState.INIT;
         this._score = 30;
         this.totalScore = 0;
         // _answer is stored as string because it will be entered character for character
         this._answer = undefined;
         this._apiService = new ApiService(this.teeeApiUrl);
-        this._intervalsPassed = 0;
         this.i18n = i18nFactory("nl");
-        // private _incidentsTask: Task = new Task(this, {
-        //   task: async ([]) => {
-        //     console.debug('incidentsTask');
-        //     if (!this.loading) {
-        //       this.loading = true;
-        //       await this.setupNewGame();
-        //       this.loading = false;
-        //     }
-        //   },
-        //   args: () => [
-        //     this.country,
-        //     this.category,
-        //     this.emotion,
-        //     this.impact,
-        //     this.date,
-        //     this.from,
-        //     this.to,
-        //   ],
-        // });
         this._handleImageLoadError = (evt, incident) => {
             // grab the image element that triggered the error
             const targetImage = evt.target;
-            console.info(`Error loading image: ${targetImage.src}`);
+            console.debug(`Error loading image: ${targetImage.src}`);
             // find out which no image source needs to be used
             const noImageSrc = this.noImageSrc || NoImageImg;
             // don't try to set the image source if it
@@ -126,7 +87,6 @@ let GuessTheYear = class GuessTheYear extends LitElement {
             return false;
         };
         this._score0 = new QuestionScoreController(this, 30, 1000);
-        // this._engine = new GameController(this);
     }
     connectedCallback() {
         console.debug("connectedCallback");
@@ -137,7 +97,6 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     disconnectedCallback() {
         console.debug("disconnectedCallback");
         super.disconnectedCallback();
-        // clearInterval(this._intervalHandler);
         this._renderState = GameState.INIT;
         this._score0.stop();
         this._score0.reset();
@@ -213,10 +172,6 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         return html `
       <div id="splash-screen-container" class="splashscreen">
         <div class="splash-logo">
-          <img
-            src="./assets/logo.png"
-            alt="logo"
-          />
           <h2>${this.i18n.translate("game-name")}</h2>
           <p>${this.i18n.translate("Loading...")}</p>
         </div>
@@ -241,9 +196,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     // allows to select the number of questions,
     // select the year range
     // and to start the game
-    // TODO: add real content
     renderGameIntro() {
-        console.info("renderGameIntro");
+        console.debug("renderGameIntro");
         // pre-render number of question options
         // and mark selected when they match
         const selectQuestionOptions = [];
@@ -310,7 +264,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     renderGameStage() {
         console.debug("renderGameStage");
         return html `
-      ${this._renderHeader(this.i18n.translate("game-call-to-action"))}
+      ${this._renderHeader(this.i18n.translate("game-call-to-action").replace(/__FROM__/, this.from.year() + '').replace(/__TO__/, this.to.year() + ''))}
       <div class="guess-the-year-game-stage">
         <div class="game-score">${this._renderGameScore()}</div>
 
@@ -344,12 +298,22 @@ let GuessTheYear = class GuessTheYear extends LitElement {
       </div>
     `;
     }
+    _shouldDisplayAnImage(incident) {
+        const hasImage = !!(incident && incident.image && incident.image[0]);
+        const displayImages = !this.suppressImages;
+        return hasImage && displayImages;
+    }
     // renders the optional image with the item
     _renderIncidentImage(incident) {
-        if (incident && incident.image) {
+        if (incident && this._shouldDisplayAnImage(incident)) {
             return html `
         <div class="incident--image">
-          <img src="${incident.image}" />
+          <img 
+            @error=${(evt) => {
+                this._handleImageLoadError(evt, incident);
+            }}
+            src="${incident.image[0]}"
+          />
         </div>
       `;
         }
@@ -398,7 +362,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         // check if the answer is correct
         if (answer) {
             // this._apiService.postIncidentAnswer(this._incident?.id, answer);
-            console.info(answer, this._solution, this._score, answer == this._solution);
+            console.debug(answer, this._solution, this._score, answer == this._solution);
             this._answer = answer;
         }
     }
@@ -418,7 +382,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         return html `
       <div class="game-controls--hint">
         <button @click="${this._handleHintClicked}">
-         ${this.i18n.translate("show-hint")} (${this.maxHints - this._hintsIndex})
+         ${this.i18n.translate("show-hint")} (${this._hints.length - this._hintsIndex})
         </button>
       </div>
     `;
@@ -428,7 +392,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     // subtracts the cost of the hint from
     // the question score
     _handleHintClicked() {
-        console.info("handleHintClicked", [this._hintsIndex, this._hints.length]);
+        console.debug("handleHintClicked", [this._hintsIndex, this._hints.length]);
         if (this._hintsIndex < this._hints.length) {
             const hintText = this._generateHintText(this._hints[this._hintsIndex]);
             if (hintText) {
@@ -529,8 +493,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     // private _incidentsStack = [];
     // private _totalScore: number = 0;
     setupNewGame() {
-        console.log("new game!");
-        console.info({
+        console.debug("new game!");
+        console.debug({
             "number of questions": this.numberOfQuestions,
             from: this.from.toISOString(),
             to: this.to.toISOString(),
@@ -557,11 +521,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         var _a;
         this._resetStage();
         const response = await this._apiService.fetchOneIncident(this.country, this.category, this.emotion, this.impact, this.date, this.from.format("YYYY-MM-DD"), this.to.format("YYYY-MM-DD"), "40", "quiz_year");
-        this._startTime = new Date();
-        this._endTime = new Date();
         this._incident = response.incident;
         this.sources = response.sources;
-        this._tries = this.maxTries;
         this._solution = Number((((_a = response.incident) === null || _a === void 0 ? void 0 : _a.yearplusmonth) || "").substring(0, 4));
         const answers = [this._solution];
         const from = this.from.year();
@@ -577,8 +538,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         answers.sort();
         this._answers = answers;
         for (let i = 0; i < this.maxHints; i++) {
-            console.info("loading hint", i);
-            const response = await this._apiService.fetchOneIncident(this.country, Util.shuffleArray(Categories).shift(), undefined, undefined, "", `${this._solution}-01-01`, `${this._solution}-12-31`, undefined, undefined);
+            console.debug("loading hint", i);
+            const response = 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);
             }
@@ -596,115 +557,14 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         // increment question counter
         this._numberOfQuestionsSeen += 1;
     }
-    renderRefreshButton() {
-        return html `<div class="refresh" id="refresh" @click="${this.setupNewGame}">
-      <span>${unsafeHTML(RefreshIconSVG)}</span>
-    </div>`;
-    }
-    renderStopGameButton() {
-        return html `<div
-      class="stop-game"
-      id="stop-game"
-      @click="${() => {
-            this._displaySolution = true;
-        }}"
-    >
-      <span>${unsafeHTML(SolutionIconSVG)}</span>
-    </div>`;
-    }
-    renderFeedbackPossibility() {
-        if (this.showFeedback) {
-            return html `<div class="feedback-possibility">
-        <input
-          type="text"
-          id="feedback"
-          size="15"
-          placeholder="${this.i18n.translate("your-feedback")}"
-        />
-      </div>`;
-        }
-        else {
-            return html ``;
-        }
-    }
-    renderSubmitPossibility() {
-        return html `<div class="submit-possibility">
-      <input
-        type="text"
-        id="answer"
-        size="15"
-        ?disabled=${this._displaySolution}
-        placeholder="${this.i18n.translate("your-answer")}"
-      />
-      ${this.renderTries()}
-    </div>`;
-    }
-    renderTries() {
-        const i18nKey = this._tries > 1 ? "tries-left" : "try-left";
-        if (this._tries >= 0 && !this._displaySolution) {
-            return html `<span class="tries"
-        >${this.i18n
-                .translate(i18nKey)
-                .replace("__TRIES__", "" + this._tries)}</span
-      >`;
-        }
-        return html ``;
-    }
-    renderTheSolution() {
-        if (this._displaySolution) {
-            return html `<div class="solution">${this._solution}</div>
-        ${this.renderTheDuration()} `;
-        }
-        return html ``;
-    }
-    renderTheDuration() {
-        const duration = Math.round(new Date(this._endTime.getTime() - this._startTime.getTime()).getTime() /
-            1000);
-        const i18nKey = duration === 1 ? "in-x-seconds" : "in-one-second";
-        if (this.showDuration && this._answeredCorrectly) {
-            return html `<div class="timer">
-        ${this.i18n.translate(i18nKey).replace("__SECONDS__", "" + duration)}
-      </div>`;
-        }
-        return html ``;
-    }
-    renderTiles(incident) {
-        console.debug("renderTiles");
-        if (!incident) {
-            return "";
-        }
-        return html `${this.renderTile(incident)}`;
-    }
-    _tileShouldDisplayAnImage(incident) {
-        const hasImage = !!incident.image;
-        const displayImages = !this.suppressImages;
-        return hasImage && displayImages;
-    }
-    renderTile(incident) {
-        console.debug("renderTile");
-        const tileContent = this.renderTileContent(incident);
-        if (this._tileShouldDisplayAnImage(incident)) {
-            return html `<div class="guess-the-year-tile with-image">
-        ${tileContent}
-      </div>`;
-        }
-        return html `<div class="guess-the-year-tile">${tileContent}</div>`;
-    }
-    renderTileContent(incident) {
-        console.debug("renderTileContent");
-        return html `<div class="guess-the-year-tile-content">
-      ${this.renderTileTitle(incident)} ${this.renderTileImage(incident)}
-      ${this.renderTileTextContent(incident)}
-    </div>`;
-    }
     _generateHintText(hintIncident) {
         let hint = "";
         const hintTemplates = this.i18n.HintTemplates[hintIncident.category];
         switch (hintIncident.category) {
-            case "newsItem":
+            case Category.newsItem:
                 hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || "").replace(/__TITLE__/, hintIncident.title);
                 break;
-            case "radioSong":
+            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");
@@ -713,64 +573,29 @@ let GuessTheYear = class GuessTheYear extends LitElement {
                     .replace(/__ARTIST__/, artist)
                     .replace(/__TRACK__/, track);
                 break;
-            case "cinemaMovie":
+            case Category.cinemaMovie:
                 hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
                     hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);
                 break;
-            case "tech":
+            case Category.tech:
                 hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
                     hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);
                 break;
-            case "newsPresenter":
+            case Category.newsPresenter:
                 hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-                    hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);
+                    hintTemplates[0]).replace(/__TITLE__/, hintIncident.title || hintIncident.text);
                 break;
-            case "sports":
+            case Category.sports:
                 hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] ||
-                    hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);
+                    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;
     }
-    renderHintTile(hint) {
-        if (hint) {
-            console.debug("renderHint");
-            return html `<div class="guess-the-year-hint-tile">
-        <h1 class="title">
-          Hint ${this._intervalsPassed} <br />
-          ${this._generateHintText(hint)}
-        </h1>
-        ${this.renderTileTextContent(hint)}
-      </div>`;
-        }
-        return html ``;
-    }
-    renderTileTitle(incident) {
-        console.debug("renderTileTitle");
-        if (incident.title) {
-            return html `<h1 class="guess-the-year-tile-title">${incident.title}</h1>`;
-        }
-        return html ``;
-    }
-    renderTileImage(incident) {
-        console.debug("renderTileImage");
-        if (this._tileShouldDisplayAnImage(incident)) {
-            return html `<img
-        @error=${(evt) => {
-                this._handleImageLoadError(evt, incident);
-            }}
-        src=${incident.image}
-      />`;
-        }
-        return html ``;
-    }
-    renderTileTextContent(incident) {
-        console.debug("renderTileTextContent");
-        if (incident.text) {
-            return html `<p class="hint-text">${incident.text}</p>`;
-        }
-        return html ``;
-    }
     renderSources() {
         console.debug("renderSources");
         if (!this.sources.length) {
@@ -813,7 +638,7 @@ __decorate([
         type: Dayjs,
         converter: {
             fromAttribute: (value) => {
-                console.info(["from", "from", value]);
+                console.debug(["from", "from", value]);
                 if (!value) {
                     return dayjs();
                 }
@@ -823,7 +648,7 @@ __decorate([
                 return dayjs(`${value}-01-01`, "YYYY-MM-DD");
             },
             toAttribute: (value) => {
-                console.info(["from", "to", value]);
+                console.debug(["from", "to", value]);
                 return value.format("YYYY-MM-DD");
             },
         },
@@ -834,7 +659,7 @@ __decorate([
         type: Dayjs,
         converter: {
             fromAttribute: (value) => {
-                console.info(["to", "from", value]);
+                console.debug(["to", "from", value]);
                 if (!value) {
                     return dayjs();
                 }
@@ -844,42 +669,21 @@ __decorate([
                 return dayjs(`${value}-12-31`, "YYYY-MM-DD");
             },
             toAttribute: (value) => {
-                console.info(["to", "to", value]);
+                console.debug(["to", "to", value]);
                 return value.format("YYYY-MM-DD");
             },
         },
     })
 ], GuessTheYear.prototype, "to", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "limit", void 0);
-__decorate([
-    property({ type: Boolean })
-], GuessTheYear.prototype, "shuffle", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "show-duration" })
-], GuessTheYear.prototype, "showDuration", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "show-feedback" })
-], GuessTheYear.prototype, "showFeedback", void 0);
 __decorate([
     property({ type: String, attribute: "no-image-src" })
 ], GuessTheYear.prototype, "noImageSrc", void 0);
 __decorate([
     property({ type: Boolean, attribute: "suppress-images" })
 ], GuessTheYear.prototype, "suppressImages", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "auto-focus" })
-], GuessTheYear.prototype, "autoFocus", void 0);
-__decorate([
-    property({ type: Number, attribute: "hint-interval-length" })
-], GuessTheYear.prototype, "hintIntervalSecs", void 0);
 __decorate([
     property({ type: Number, attribute: "max-hints" })
 ], GuessTheYear.prototype, "maxHints", void 0);
-__decorate([
-    property({ type: Number, attribute: "max-tries" })
-], GuessTheYear.prototype, "maxTries", void 0);
 __decorate([
     property({ type: Number, attribute: "number-of-questions", reflect: true })
 ], GuessTheYear.prototype, "numberOfQuestions", void 0);
@@ -892,15 +696,6 @@ __decorate([
 __decorate([
     state()
 ], GuessTheYear.prototype, "_solution", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_displaySolution", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_answeredCorrectly", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_tries", void 0);
 __decorate([
     state()
 ], GuessTheYear.prototype, "_renderState", void 0);