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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guess-the-year-web-component",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Guess the year",
   "main": "dist/main.js",
   "type": "module",
@@ -9,13 +9,12 @@
   "customElements": "custom-elements.json",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "copy:assets": "cp -r src/assets dist",
     "build:dev": "rimraf dist && webpack --mode=development",
     "build:prod": "rimraf dist && npm run build:module && npm run build:package",
-    "build:module": "tsc && npm run copy:assets",
+    "build:module": "tsc",
     "build:package": "webpack --mode=production --node-env=production",
     "watch": "webpack --watch",
-    "develop": "npm run copy:assets && cross-env webpack serve --hot --mode development --port 8000",
+    "develop": "cross-env webpack serve --hot --mode development --port 8000",
     "dev": "npm run develop",
     "serve": "webpack serve",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",

package/src/guess-the-year.ts

@@ -1,29 +1,18 @@
 import { LitElement, css, html, PropertyValues, TemplateResult } 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 { Incident, Categories } from "./lib/Incident";
-import { NoImageImg, RefreshIconSVG, SolutionIconSVG } from "./lib/Icon";
+import { Incident, 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: number = 3000;
+const SPLASH_DELAY: number = 1000;
 const MIN_YEAR: number = 1950;
 const MAX_YEAR: number = 2024;
 const MAX_QUESTIONS: number = 10;
@@ -31,9 +20,6 @@ const HINT_COST: number = 2;
 
 @customElement("guess-the-year")
 export class GuessTheYear extends LitElement {
-  private _startTime: Date = new Date();
-  private _endTime: Date = new Date();
-  // private _uuid = Math.random();
   private sources: Array<string> = [];
   private _loading = false;
 
@@ -72,7 +58,7 @@ export class GuessTheYear extends LitElement {
     type: Dayjs,
     converter: {
       fromAttribute: (value: string) => {
-        console.info(["from", "from", value]);
+        console.debug(["from", "from", value]);
         if (!value) {
           return dayjs();
         }
@@ -84,7 +70,7 @@ export class GuessTheYear extends LitElement {
         return dayjs(`${value}-01-01`, "YYYY-MM-DD");
       },
       toAttribute: (value: Dayjs) => {
-        console.info(["from", "to", value]);
+        console.debug(["from", "to", value]);
         return value.format("YYYY-MM-DD");
       },
     },
@@ -95,7 +81,7 @@ export class GuessTheYear extends LitElement {
     type: Dayjs,
     converter: {
       fromAttribute: (value: string) => {
-        console.info(["to", "from", value]);
+        console.debug(["to", "from", value]);
         if (!value) {
           return dayjs();
         }
@@ -107,43 +93,22 @@ export class GuessTheYear extends LitElement {
         return dayjs(`${value}-12-31`, "YYYY-MM-DD");
       },
       toAttribute: (value: Dayjs) => {
-        console.info(["to", "to", value]);
+        console.debug(["to", "to", value]);
         return value.format("YYYY-MM-DD");
       },
     },
   })
   to: Dayjs = dayjs(); // defaults to today
 
-  @property({ type: String })
-  limit: string = "";
-
-  @property({ type: Boolean })
-  shuffle: boolean = false;
-
-  @property({ type: Boolean, attribute: "show-duration" })
-  showDuration: boolean = false;
-
-  @property({ type: Boolean, attribute: "show-feedback" })
-  showFeedback: boolean = false;
-
   @property({ type: String, attribute: "no-image-src" })
   noImageSrc: string = "";
 
   @property({ type: Boolean, attribute: "suppress-images" })
   suppressImages: boolean = false;
 
-  @property({ type: Boolean, attribute: "auto-focus" })
-  autoFocus: boolean = false;
-
-  @property({ type: Number, attribute: "hint-interval-length" })
-  hintIntervalSecs: number = 7;
-
   @property({ type: Number, attribute: "max-hints" })
   maxHints: number = 3;
 
-  @property({ type: Number, attribute: "max-tries" })
-  maxTries: number = -1;
-
   @property({ type: Number, attribute: "number-of-questions", reflect: true })
   numberOfQuestions: number = 10;
   private _numberOfQuestionsSeen: number = 0;
@@ -164,15 +129,6 @@ export class GuessTheYear extends LitElement {
   @state()
   private _solution: Number | undefined = undefined;
 
-  @state()
-  private _displaySolution: boolean = false;
-
-  @state()
-  private _answeredCorrectly: boolean = false;
-
-  @state()
-  private _tries: number = 0;
-
   @state()
   public _renderState: string = GameState.INIT;
 
@@ -186,21 +142,15 @@ export class GuessTheYear extends LitElement {
   private _answer: number | undefined = undefined;
 
   private _apiService = new ApiService(this.teeeApiUrl);
-  private _intervalsPassed: number = 0;
   private i18n = i18nFactory("nl");
 
   static override styles = css`
     ${stylesheet}
   `;
 
-  // private _game_engine: Engine;
-
   constructor() {
     super();
-
     this._score0 = new QuestionScoreController(this, 30, 1000);
-
-    // this._engine = new GameController(this);
   }
 
   override connectedCallback() {
@@ -214,7 +164,6 @@ export class GuessTheYear extends LitElement {
   override disconnectedCallback() {
     console.debug("disconnectedCallback");
     super.disconnectedCallback();
-    // clearInterval(this._intervalHandler);
     this._renderState = GameState.INIT;
     this._score0.stop();
     this._score0.reset();
@@ -301,10 +250,6 @@ export 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>
@@ -332,9 +277,8 @@ export class GuessTheYear extends LitElement {
   // allows to select the number of questions,
   // select the year range
   // and to start the game
-  // TODO: add real content
   private renderGameIntro(): TemplateResult {
-    console.info("renderGameIntro");
+    console.debug("renderGameIntro");
 
     // pre-render number of question options
     // and mark selected when they match
@@ -407,7 +351,7 @@ export class GuessTheYear extends LitElement {
     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>
 
@@ -442,12 +386,23 @@ export class GuessTheYear extends LitElement {
     `;
   }
 
+  private _shouldDisplayAnImage(incident: Incident): boolean {
+    const hasImage = !!(incident && incident.image && incident.image[0]);
+    const displayImages = !this.suppressImages;
+    return hasImage && displayImages;
+  }
+
   // renders the optional image with the item
   private _renderIncidentImage(incident: Incident | undefined): TemplateResult {
-    if (incident && incident.image) {
+    if (incident && this._shouldDisplayAnImage(incident)) {
       return html`
         <div class="incident--image">
-          <img src="${incident.image}" />
+          <img 
+            @error=${(evt: Event) => {
+          this._handleImageLoadError(evt, incident);
+        }}
+            src="${incident.image[0]}"
+          />
         </div>
       `;
     }
@@ -506,7 +461,7 @@ export class GuessTheYear extends LitElement {
     // check if the answer is correct
     if (answer) {
       // this._apiService.postIncidentAnswer(this._incident?.id, answer);
-      console.info(
+      console.debug(
         answer,
         this._solution,
         this._score,
@@ -536,7 +491,7 @@ export 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>
     `;
@@ -547,7 +502,7 @@ export class GuessTheYear extends LitElement {
   // subtracts the cost of the hint from
   // the question score
   private _handleHintClicked(): void {
-    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]);
@@ -662,9 +617,9 @@ export class GuessTheYear extends LitElement {
   // private _totalScore: number = 0;
 
   private setupNewGame(): void {
-    console.log("new game!");
+    console.debug("new game!");
 
-    console.info({
+    console.debug({
       "number of questions": this.numberOfQuestions,
       from: this.from.toISOString(),
       to: this.to.toISOString(),
@@ -708,11 +663,8 @@ export class GuessTheYear extends LitElement {
         "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(
       (response.incident?.yearplusmonth || "").substring(0, 4),
@@ -736,12 +688,12 @@ export class GuessTheYear extends LitElement {
     this._answers = answers;
 
     for (let i = 0; i < this.maxHints; i++) {
-      console.info("loading hint", i);
+      console.debug("loading hint", i);
 
       const response: { incident: Incident | undefined; sources: string[] } =
         await this._apiService.fetchOneIncident(
           this.country,
-          Util.shuffleArray(Categories).shift(),
+          Util.shuffleArray([...Categories]).shift(),
           undefined,
           undefined,
           "",
@@ -773,130 +725,16 @@ export class GuessTheYear extends LitElement {
     this._numberOfQuestionsSeen += 1;
   }
 
-  renderRefreshButton(): TemplateResult {
-    return html`<div class="refresh" id="refresh" @click="${this.setupNewGame}">
-      <span>${unsafeHTML(RefreshIconSVG)}</span>
-    </div>`;
-  }
-
-  renderStopGameButton(): TemplateResult {
-    return html`<div
-      class="stop-game"
-      id="stop-game"
-      @click="${() => {
-        this._displaySolution = true;
-      }}"
-    >
-      <span>${unsafeHTML(SolutionIconSVG)}</span>
-    </div>`;
-  }
-
-  renderFeedbackPossibility(): TemplateResult {
-    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(): TemplateResult {
-    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(): TemplateResult {
-    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(): TemplateResult {
-    if (this._displaySolution) {
-      return html`<div class="solution">${this._solution}</div>
-        ${this.renderTheDuration()} `;
-    }
-    return html``;
-  }
-
-  renderTheDuration(): TemplateResult {
-    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: Incident | undefined) {
-    console.debug("renderTiles");
-    if (!incident) {
-      return "";
-    }
-    return html`${this.renderTile(incident)}`;
-  }
-
-  private _tileShouldDisplayAnImage(incident: Incident): boolean {
-    const hasImage = !!incident.image;
-    const displayImages = !this.suppressImages;
-    return hasImage && displayImages;
-  }
-
-  renderTile(incident: Incident): TemplateResult {
-    console.debug("renderTile");
-    const tileContent: TemplateResult = 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: Incident): TemplateResult {
-    console.debug("renderTileContent");
-    return html`<div class="guess-the-year-tile-content">
-      ${this.renderTileTitle(incident)} ${this.renderTileImage(incident)}
-      ${this.renderTileTextContent(incident)}
-    </div>`;
-  }
-
   private _generateHintText(hintIncident: Incident): string {
     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");
@@ -907,77 +745,40 @@ export 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);
+        ).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);
+        ).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: Incident | undefined): TemplateResult {
-    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: Incident): TemplateResult {
-    console.debug("renderTileTitle");
-    if (incident.title) {
-      return html`<h1 class="guess-the-year-tile-title">${incident.title}</h1>`;
-    }
-    return html``;
-  }
-
-  renderTileImage(incident: Incident): TemplateResult {
-    console.debug("renderTileImage");
-    if (this._tileShouldDisplayAnImage(incident)) {
-      return html`<img
-        @error=${(evt: Event) => {
-          this._handleImageLoadError(evt, incident);
-        }}
-        src=${incident.image}
-      />`;
-    }
-    return html``;
-  }
-
-  renderTileTextContent(incident: Incident): TemplateResult {
-    console.debug("renderTileTextContent");
-    if (incident.text) {
-      return html`<p class="hint-text">${incident.text}</p>`;
-    }
-    return html``;
-  }
-
   renderSources(): TemplateResult {
     console.debug("renderSources");
     if (!this.sources.length) {
@@ -991,30 +792,10 @@ export class GuessTheYear extends LitElement {
     `;
   }
 
-  // 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,
-  //   ],
-  // });
-
   _handleImageLoadError = (evt: Event, incident: Incident) => {
     // grab the image element that triggered the error
     const targetImage = evt.target as HTMLImageElement;
-    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;

package/src/index.html

@@ -96,8 +96,7 @@
   <!-- 'Random from a date range' -->
   <section>
     <div class="big-container">
-      <guess-the-year from="2010-01-01" to="2020-12-31" country="nl" category="newsItem" hint-interval-length="4"
-        max-hints="3" auto-focus max-tries="2" show-duration show-feedback report-broken-images
+      <guess-the-year country="nl" category="newsItem" max-hints="3" report-broken-images
         no-image-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAKCAYAAADGmhxQAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wQMDCEDZE8l3wAAAAxpVFh0Q29tbWVudAAAAAAAvK6ymQAAABVJREFUOMtjYBgFo2AUjIJRMAooAQAGSgABkOHaHwAAAABJRU5ErkJggg==">
       </guess-the-year>
     </div>

package/src/lib/ApiService.ts

@@ -92,7 +92,7 @@ export class ApiService {
           }
         });
 
-        console.info([incidents, sourcesFoundInIncidents]);
+        console.debug([incidents, sourcesFoundInIncidents]);
 
         resolve({
           incident: firstIncidentInList,