guess-the-year-web-component 1.0.3 → 2.0.0

package/README.md

@@ -32,11 +32,17 @@ The guess-the-year element accepts parameters to control it's behaviour:
 * `impact` : fetch incidents had this impact(s). Reference https://swagger.tee-e.com for a list of supported emotions.
 * `no-image-src` : what image should be shown when an incident's image is broken. Use a url or base64 encoded image
 * `report-broken-images` : report broken images back to the server so that they can be repaired
-* `delay` : the time (in seconds) waited before the first tip is displayed and the time between the tips
+* `hint-interval-length` : the time (in seconds) waited before the first tip is displayed and the time between the tips
+* `max-hints` : the maximum amount of hints that will be displayed
+* `auto-focus` : set the focus on the answer input element
+* `max-tries` : maximum number of tries before the game stops
+* `show-duration` : display the amount of seconds that it took to answer correctly
+* `show-feedback` : display a feedback input field at the top right of the component
 
 
 ### Adjust the styling
 The guess-the-year element accepts css parameters to specify (significant parts of) it's styling:
+* `--guess-the-year-font-family` : the font of the tile
 * `--guess-the-year-title-color` : the text color of the title of the tile
 * `--guess-the-year-title-background-color`: the background color of the title of the tile
 * `--guess-the-year-title-font-size` : the font size of the title text of the tile
@@ -45,12 +51,15 @@ The guess-the-year element accepts css parameters to specify (significant parts
 * `--guess-the-year-text-font-size` : the size of the title text of the tile
 * `--guess-the-year-text-max-height` : the maximum height of the text of the tile
 * `--guess-the-year-background-color` : the color of the background of the tile
-* `--guess-the-year-image-min-height` : the minimum height of the image
-* `--guess-the-year-image-max-height` : the maximum height of the image
+* `--guess-the-year-tile-min-height` : the minimum height of the tile
+* `--guess-the-year-tile-max-height` : the maximum height of the tile
 * `--guess-the-year-ruler-color` : the color of the ruler that is displayed between two incidents vertically
 * `--guess-the-year-icon-color` : the color of the incident's category icon
 * `--guess-the-year-attribution-font-size` : the font size of the list of attributions / sources
 * `--guess-the-year-attribution-font-color` : the font color of the list of attributions / sources
+* `--guess-the-year-solution-color` : the color of the solution
+* `--guess-the-year-hint-title-background-color` : color of hint title
+* `--guess-the-year-hint-text-background-color` : color of hint text
 
 ## Development
 Fetch all packages: `npm ci`  
@@ -64,4 +73,10 @@ Version the application: `npm version major|minor|patch`
 Build the application: `npm run build:prod`  
 Logon at npmjs.org: `npm login`  
 Publish the application: `npm publish`  
-Fix access tokens in npmjs.org in case of 403
+Fix access tokens in npmjs.org in case of 403
+
+## Runtime
+Needs permissions for:
+* attribute-yearplusmonth
+* filter-seed
+* filter-maxlasted

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

@@ -1,6 +1,8 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { Incident } from './lib/Incident';
 export declare class GuessTheYear extends LitElement {
+    private _startTime;
+    private _endTime;
     private _uuid;
     private sources;
     private _loading;
@@ -17,15 +19,23 @@ export declare class GuessTheYear extends LitElement {
     to: string;
     limit: string;
     shuffle: boolean;
+    showDuration: boolean;
+    showFeedback: boolean;
     noImageSrc: string;
     suppressImages: boolean;
-    hintIntervalSecs: string;
-    maxAmountHints: string;
+    autoFocus: boolean;
+    hintIntervalSecs: number;
+    maxHints: number;
+    maxTries: number;
     private _incident;
     private _hint;
-    private _answerToDisplay;
+    private _solution;
+    private _displaySolution;
+    private _answeredCorrectly;
+    private _tries;
+    private _answer;
     private _apiService;
-    private _interval;
+    private _intervalHandler;
     private _intervalsPassed;
     private i18n;
     static styles: import("lit").CSSResult;
@@ -33,12 +43,19 @@ export declare class GuessTheYear extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    colorElement(element: any, color: string): void;
     firstUpdated(changedProperties: PropertyValues): void;
     shouldUpdate(changedProperties: PropertyValues): boolean;
     update(changedProperties: PropertyValues): void;
     updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
-    renderAnswer(year: Number): TemplateResult;
+    setupNewGame(): Promise<void>;
+    renderRefreshButton(): TemplateResult;
+    renderFeedbackPossibility(): TemplateResult;
+    renderSubmitPossibility(): TemplateResult;
+    renderTries(): TemplateResult;
+    renderTheSolution(): TemplateResult;
+    renderTheDuration(): TemplateResult;
     renderTiles(incident: Incident | undefined): TemplateResult<1> | "";
     private _tileShouldDisplayAnImage;
     renderTile(incident: Incident): TemplateResult;

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":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,QAAQ,EAAc,MAAM,gBAAgB,CAAC;AAMtD,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,OAAO,IAIQ,OAAO,CAFzB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAGD,UAAU,EAAE,MAAM,CAA2B;IAG7C,kBAAkB,EAAE,OAAO,CAAS;IAGpC,IAAI,EAAE,MAAM,CAAM;IAGlB,OAAO,EAAE,MAAM,CAAM;IAGrB,QAAQ,EAAE,MAAM,CAAM;IAGtB,OAAO,EAAE,MAAM,CAAM;IAGrB,MAAM,EAAE,MAAM,CAAM;IAGpB,IAAI,EAAE,MAAM,CAAM;IAGlB,EAAE,EAAE,MAAM,CAAM;IAGhB,KAAK,EAAE,MAAM,CAAM;IAGnB,OAAO,EAAE,OAAO,CAAS;IAGzB,UAAU,EAAE,MAAM,CAAM;IAGxB,cAAc,EAAE,OAAO,CAAS;IAGhC,gBAAgB,EAAE,MAAM,CAAO;IAG/B,cAAc,EAAE,MAAM,CAAO;IAG7B,OAAO,CAAC,SAAS,CAAmC;IAGpD,OAAO,CAAC,KAAK,CAAmC;IAGhD,OAAO,CAAC,gBAAgB,CAAiC;IAEzD,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,IAAI,CAAwB;IAEpC,OAAgB,MAAM,0BA8HpB;;IAMO,iBAAiB;IA+BjB,oBAAoB;IAMpB,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAKE,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKrD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,OAAO;IAKxD,MAAM,CAAC,iBAAiB,EAAE,cAAc;IAKxC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAKzC,MAAM;IAef,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc;IAO1C,WAAW,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS;IAQ1C,OAAO,CAAC,yBAAyB;IAMjC,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAY9C,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IASrD,OAAO,CAAC,iBAAiB;IA6BzB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc;IAW1D,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAQnD,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAWnD,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAQzD,aAAa,IAAI,cAAc;IAU/B,OAAO,CAAC,cAAc,CAqCnB;IAEH,qBAAqB,QAAS,KAAK,uBA6BjC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"guess-the-year.d.ts","sourceRoot":"","sources":["../src/guess-the-year.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5E,OAAO,EAAE,QAAQ,EAAc,MAAM,gBAAgB,CAAC;AAStD,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,OAAO,IAIQ,OAAO,CAFzB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAGD,UAAU,EAAE,MAAM,CAA2B;IAG7C,kBAAkB,EAAE,OAAO,CAAS;IAGpC,IAAI,EAAE,MAAM,CAAM;IAGlB,OAAO,EAAE,MAAM,CAAM;IAGrB,QAAQ,EAAE,MAAM,CAAM;IAGtB,OAAO,EAAE,MAAM,CAAM;IAGrB,MAAM,EAAE,MAAM,CAAM;IAGpB,IAAI,EAAE,MAAM,CAAM;IAGlB,EAAE,EAAE,MAAM,CAAM;IAGhB,KAAK,EAAE,MAAM,CAAM;IAGnB,OAAO,EAAE,OAAO,CAAS;IAGzB,YAAY,EAAE,OAAO,CAAS;IAG9B,YAAY,EAAE,OAAO,CAAS;IAG9B,UAAU,EAAE,MAAM,CAAM;IAGxB,cAAc,EAAE,OAAO,CAAS;IAGhC,SAAS,EAAE,OAAO,CAAS;IAG3B,gBAAgB,EAAE,MAAM,CAAK;IAG7B,QAAQ,EAAE,MAAM,CAAK;IAGrB,QAAQ,EAAE,MAAM,CAAK;IAGrB,OAAO,CAAC,SAAS,CAAmC;IAGpD,OAAO,CAAC,KAAK,CAAmC;IAGhD,OAAO,CAAC,SAAS,CAAiC;IAGlD,OAAO,CAAC,gBAAgB,CAAkB;IAG1C,OAAO,CAAC,kBAAkB,CAAkB;IAG5C,OAAO,CAAC,MAAM,CAAa;IAG3B,OAAO,CAAC,OAAO,CAAc;IAE7B,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,IAAI,CAAwB;IAEpC,OAAgB,MAAM,0BA0KpB;;IAMO,iBAAiB;IAKjB,oBAAoB;IAMpB,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAKP,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM;IAI/B,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA6CrD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,OAAO;IAKxD,MAAM,CAAC,iBAAiB,EAAE,cAAc;IAKxC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAKzC,MAAM;IAkBT,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IA0DnC,mBAAmB,IAAI,cAAc;IAKrC,yBAAyB,IAAI,cAAc;IAW3C,uBAAuB,IAAI,cAAc;IAOzC,WAAW,IAAI,cAAc;IAQ7B,iBAAiB,IAAI,cAAc;IASnC,iBAAiB,IAAI,cAAc;IASnC,WAAW,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS;IAQ1C,OAAO,CAAC,yBAAyB;IAMjC,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAY9C,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IASrD,OAAO,CAAC,iBAAiB;IA6BzB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc;IAW1D,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAQnD,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAWnD,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc;IAQzD,aAAa,IAAI,cAAc;IAU/B,OAAO,CAAC,cAAc,CAkBnB;IAEH,qBAAqB,QAAS,KAAK,uBA6BjC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/guess-the-year.js

@@ -6,13 +6,17 @@ 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';
 const { setTimeout } = window;
 import { Categories } from './lib/Incident';
-import { NoImageImg } from './lib/Icon';
+import { NoImageImg, RefreshIconSVG } from './lib/Icon';
 import { ApiService } from './lib/ApiService';
 import { Util } from './lib/Util';
 import { i18nFactory } from './lib/i18n/i18n';
+const GREEN = '#07d207';
+const RED = '#ec3737';
+const BLACK = '#000';
 let GuessTheYear = class GuessTheYear extends LitElement {
     get loading() {
         return this._loading;
@@ -22,6 +26,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     }
     constructor() {
         super();
+        this._startTime = new Date();
+        this._endTime = new Date();
         this._uuid = Math.random();
         this.sources = [];
         this._loading = false;
@@ -36,25 +42,32 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         this.to = '';
         this.limit = '';
         this.shuffle = false;
+        this.showDuration = false;
+        this.showFeedback = false;
         this.noImageSrc = '';
         this.suppressImages = false;
-        this.hintIntervalSecs = '7';
-        this.maxAmountHints = '3';
+        this.autoFocus = false;
+        this.hintIntervalSecs = 7;
+        this.maxHints = 3;
+        this.maxTries = 1;
         this._incident = undefined;
         this._hint = undefined;
-        this._answerToDisplay = undefined;
+        this._solution = undefined;
+        this._displaySolution = false;
+        this._answeredCorrectly = false;
+        this._tries = 0;
+        // _answer is stored as string because it will be entered character for character
+        this._answer = '';
         this._apiService = new ApiService(this.teeeApiUrl);
         this._intervalsPassed = 0;
         this.i18n = i18nFactory('nl-nl');
         this._incidentsTask = new Task(this, {
-            task: async ([country, category, emotion, impact, date, from, to,]) => {
+            task: async ([]) => {
                 console.debug('incidentsTask');
                 if (!this.loading) {
                     this.loading = true;
-                    const response = await this._apiService.fetchOneIncident(country, category, emotion, impact, date, from, to, '1');
+                    await this.setupNewGame();
                     this.loading = false;
-                    this._incident = response.incident;
-                    this.sources = response.sources;
                 }
             },
             args: () => [
@@ -82,7 +95,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
             // Assume we show only one incident.
             if (this.reportBrokenImages) {
                 if (this._incident) {
-                    this._apiService.postDataQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');
+                    this._apiService.postAttributeQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');
                 }
             }
             // wait a bit before setting the image
@@ -96,38 +109,63 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     connectedCallback() {
         console.debug('connectedCallback');
         super.connectedCallback();
-        this._interval = setInterval(async () => {
-            var _a;
-            const year = Number((((_a = this._incident) === null || _a === void 0 ? void 0 : _a.yearplusmonth) || '').substring(0, 4));
-            this._intervalsPassed += 1;
-            if (this._intervalsPassed <= Number(this.maxAmountHints)) {
-                console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${year}`);
-                const response = await this._apiService.fetchOneIncident(this.country, Util.shuffleArray(Categories).shift(), undefined, 
-                // 'moderate,substantial,large,major',
-                undefined, '', `${year}-01-01`, `${year}-12-31`, undefined);
-                this._hint = response.incident;
-            }
-            else {
-                this._hint = undefined;
-                setTimeout(() => {
-                    this._answerToDisplay = year;
-                }, Number(this.hintIntervalSecs) * 1000);
-                clearInterval(this._interval);
-            }
-        }, Number(this.hintIntervalSecs) * 1000);
     }
     disconnectedCallback() {
         console.debug('disconnectedCallback');
         super.disconnectedCallback();
-        clearInterval(this._interval);
+        clearInterval(this._intervalHandler);
     }
     attributeChangedCallback(name, _old, value) {
         console.debug('attributeChangedCallback: ', name, _old, value);
         super.attributeChangedCallback(name, _old, value);
     }
+    colorElement(element, color) {
+        var _a, _b;
+        (_b = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(element)) === null || _b === void 0 ? void 0 : _b.style.setProperty('color', color);
+    }
     firstUpdated(changedProperties) {
+        var _a, _b, _c, _d, _e, _f;
         console.debug('firstUpdated');
         super.firstUpdated(changedProperties);
+        // handle answer events
+        if ((_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#answer')) {
+            (_c = (_b = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#answer')) === null || _c === void 0 ? void 0 : _c.addEventListener('input', (event) => {
+                var _a;
+                this._answer = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+                // Display the answer when 4 characters have been inputted.
+                if (this._answer.length === 4) {
+                    this._answeredCorrectly = Number(this._answer) === Number(this._solution);
+                    if (this._answeredCorrectly) {
+                        this._displaySolution = true;
+                        this.colorElement('#answer', GREEN);
+                    }
+                    else {
+                        this.colorElement('#answer', RED);
+                    }
+                    this._tries -= 1;
+                    if (this._tries <= 0) {
+                        this._displaySolution = true;
+                    }
+                    if (this._displaySolution) {
+                        this._endTime = new Date();
+                    }
+                }
+            });
+        }
+        // handle feedback events
+        if ((_d = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#feedback')) {
+            (_f = (_e = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#feedback')) === null || _f === void 0 ? void 0 : _f.addEventListener('change', (event) => {
+                const element = event === null || event === void 0 ? void 0 : event.target;
+                const feedback = element === null || element === void 0 ? void 0 : element.value;
+                element.value = this.i18n.translate('sending') + '...';
+                setTimeout(() => {
+                    element.value = '';
+                }, 1000);
+                if (this._incident) {
+                    this._apiService.postIncidentQualityFeedback(this._incident.id, feedback);
+                }
+            });
+        }
     }
     shouldUpdate(changedProperties) {
         console.debug('shouldUpdate');
@@ -145,19 +183,97 @@ let GuessTheYear = class GuessTheYear extends LitElement {
         console.debug('render');
         return html `
       <div class="guess-the-year-container">
+      ${this.renderRefreshButton()}
         ${this._incidentsTask.render({
             pending: () => html `Loading data...`,
             complete: () => html `${this.renderTiles(this._incident)}`,
         })}
-        ${this.renderSources()}
+        ${this.renderSubmitPossibility()}
+        ${this.renderFeedbackPossibility()}
         ${this.renderHintTile(this._hint)}
-        ${this.renderAnswer(this._answerToDisplay || 0)}
+        ${this.renderTheSolution()}
+        ${this.renderSources()}
       </div>
     `;
     }
-    renderAnswer(year) {
-        if (year) {
-            return html `<div class="answer">${year}</div>`;
+    async setupNewGame() {
+        var _a, _b;
+        console.log('new game!');
+        this._incident = undefined;
+        this._hint = undefined;
+        const response = await this._apiService.fetchOneIncident(this.country, this.category, this.emotion, this.impact, this.date, this.from, this.to, '40');
+        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));
+        this._displaySolution = false;
+        this._intervalsPassed = 0;
+        this._answer = '';
+        this.colorElement('#answer', BLACK);
+        const answerInputElement = (_b = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#answer');
+        if (answerInputElement) {
+            answerInputElement.value = '';
+            if (this.autoFocus) {
+                answerInputElement.focus();
+            }
+        }
+        clearInterval(this._intervalHandler);
+        this._intervalHandler = setInterval(async () => {
+            this._intervalsPassed += 1;
+            if (this._intervalsPassed <= this.maxHints) {
+                console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${this._solution}`);
+                const response = await this._apiService.fetchOneIncident(this.country, Util.shuffleArray(Categories).shift(), undefined, undefined, '', `${this._solution}-01-01`, `${this._solution}-12-31`, undefined);
+                this._hint = response.incident;
+            }
+            else {
+                this._hint = undefined;
+                this._displaySolution = true;
+                clearInterval(this._intervalHandler);
+            }
+        }, this.hintIntervalSecs * 1000);
+        this.requestUpdate();
+    }
+    renderRefreshButton() {
+        return html `<div class="refresh" id="refresh" @click="${this.setupNewGame}"><span>${unsafeHTML(RefreshIconSVG)}</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 && !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 ``;
     }
@@ -249,7 +365,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     renderTileTextContent(incident) {
         console.debug('renderTileTextContent');
         if (incident.text) {
-            return html `<p>${incident.text}</p>`;
+            return html `<p class="hint-text">${incident.text}</p>`;
         }
         return html ``;
     }
@@ -263,7 +379,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
     `;
     }
 };
-GuessTheYear.styles = css `
+GuessTheYear.styles = css `    
     :host {
       color: var(--guess-the-year-text-color, black);
       background: var(--guess-the-year-background-color, white);
@@ -278,6 +394,8 @@ GuessTheYear.styles = css `
       margin: 0;
       padding: 0;
       background-color: var(--guess-the-year-background-color);
+      min-height: var(--guess-the-year-tile-min-height, 375px);
+      max-height: var(--guess-the-year-tile-max-height, 70vh);
     }
 
     .guess-the-year-hint-tile {
@@ -289,6 +407,12 @@ GuessTheYear.styles = css `
       margin: auto;
     }
 
+    div.feedback-possibility {
+      position: absolute;
+      top: 2px;
+      right: 4px;
+    }
+
     .guess-the-year-hint-tile h1.title {
       background-color: var(
         --guess-the-year-hint-title-background-color,
@@ -296,15 +420,51 @@ GuessTheYear.styles = css `
       );
     }
 
-    div.answer {
+    .guess-the-year-hint-tile .hint-text {
+      background-color: var(
+        --guess-the-year-hint-text-background-color,
+        #bebbd8e3
+      );
+      max-height: 40vh;
+      overflow: scroll;
+    }
+
+    div.solution {
       position: absolute;
-      top: 50%;
-      bottom: 0;
+      inset: 50% 0px 0px;
+      font-size: 70pt;
+      color: var(--guess-the-year-solution-color, #b768cf);
+      font-weight: bold;
+      text-shadow: 2px 2px #0000009e;
+    }
+
+    div.timer {
+      font-size: x-small;
+    }
+
+    div.submit-possibility {
       left: 0;
       right: 0;
-      font-size: 100pt;
-      color: white;
-      font-weight: bold;
+      margin: 2px;
+    }
+
+    div.submit-possibility input {
+      font-size: 14pt;
+      font-family: var(--guess-the-year-font-family, courier);
+      text-align: center;
+      line-height: 1.5;
+    }
+
+    div.refresh {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 32px;
+    }
+
+    span.tries {
+      font-size: 8pt;
     }
 
     h1 {
@@ -331,10 +491,10 @@ GuessTheYear.styles = css `
       padding: 0;
       display: block;
       width: 100%;
-      min-height: var(--guess-the-year-image-min-height, 375px);
-      max-height: var(--guess-the-year-image-max-height, 70vh);
       object-fit: cover;
       object-position: center;
+      min-height: var(--guess-the-year-tile-min-height, 375px);
+      max-height: var(--guess-the-year-tile-max-height, 70vh);
     }
 
     p {
@@ -423,6 +583,12 @@ __decorate([
 __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);
@@ -430,11 +596,17 @@ __decorate([
     property({ type: Boolean, attribute: 'suppress-images' })
 ], GuessTheYear.prototype, "suppressImages", void 0);
 __decorate([
-    property({ type: String, attribute: 'hint-interval-length' })
+    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: String, attribute: 'max-amount-hints' })
-], GuessTheYear.prototype, "maxAmountHints", void 0);
+    property({ type: Number, attribute: 'max-hints' })
+], GuessTheYear.prototype, "maxHints", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-tries' })
+], GuessTheYear.prototype, "maxTries", void 0);
 __decorate([
     state()
 ], GuessTheYear.prototype, "_incident", void 0);
@@ -443,7 +615,16 @@ __decorate([
 ], GuessTheYear.prototype, "_hint", void 0);
 __decorate([
     state()
-], GuessTheYear.prototype, "_answerToDisplay", void 0);
+], 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);
 GuessTheYear = __decorate([
     customElement('guess-the-year')
 ], GuessTheYear);