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

package/dist/guess-the-year.js

@@ -1,751 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import dayjs from "dayjs";
-import { Dayjs } from "dayjs";
-const { setTimeout } = window;
-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 SPLASH_DELAY = 1000;
-const MAX_QUESTIONS = 10;
-const HINT_COST = 2;
-const MIN_YEAR = 1950;
-const MAX_YEAR = 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 = 1915;
-const MIN_DOB = parseInt(dayjs().format('YYYY'), 10) - 10;
-const GTY_PLAYER_DOB_VAR = 'gty-player-dob';
-let GuessTheYear = class GuessTheYear extends LitElement {
-    get loading() {
-        return this._loading;
-    }
-    set loading(value) {
-        this._loading = value;
-    }
-    constructor() {
-        super();
-        this.sources = [];
-        this._loading = false;
-        this.teeeApiUrl = "https://api.tee-e.com";
-        this.reportBrokenImages = false;
-        this.date = "";
-        this.country = "";
-        this.category = "";
-        this.emotion = "";
-        this.impact = "";
-        this.from = dayjs(`${window.localStorage.getItem(GTY_FROM_YEAR_VAR) || MIN_YEAR}-01-01`, "YYYY-MM-DD");
-        this.to = dayjs(`${window.localStorage.getItem(GTY_TO_YEAR_VAR) || MAX_YEAR}-01-01`, "YYYY-MM-DD");
-        this.noImageSrc = "";
-        this.suppressImages = false;
-        this.maxHints = 3;
-        this.numberOfQuestions = parseInt(window.localStorage.getItem(GTY_NUM_QUESTIONS_VAR) || MAX_QUESTIONS + '', 10);
-        this._numberOfQuestionsSeen = 0;
-        this._playerDob = parseInt(window.localStorage.getItem(GTY_PLAYER_DOB_VAR) || 0 + '', 10);
-        this._incident = undefined;
-        this._answers = [];
-        this._hint = undefined;
-        this._showHint = true;
-        this._showFooter = false;
-        this._hintsIndex = 0;
-        this._hints = [];
-        this._solution = undefined;
-        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.i18n = i18nFactory("nl");
-        this._handleImageLoadError = (evt, incident) => {
-            // grab the image element that triggered the error
-            const targetImage = evt.target;
-            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
-            // has already been set
-            if (targetImage.src == noImageSrc) {
-                return;
-            }
-            // report broken images back to the server if set.
-            if (this.reportBrokenImages) {
-                if (incident) {
-                    this._apiService.postAttributeQualityFeedback(incident.id, "image", targetImage.src, ContentFeedback.incorrect);
-                }
-            }
-            // wait a bit before setting the image
-            // so we don't hammer the no image server
-            setTimeout(() => {
-                targetImage.src = noImageSrc;
-            }, 250);
-            return false;
-        };
-        this._score0 = new QuestionScoreController(this, 30, 1000);
-    }
-    connectedCallback() {
-        console.debug("connectedCallback");
-        super.connectedCallback();
-        // first step is splash
-        this._renderState = GameState.SPLASH;
-    }
-    disconnectedCallback() {
-        console.debug("disconnectedCallback");
-        super.disconnectedCallback();
-        this._renderState = GameState.INIT;
-        this._score0.stop();
-        this._score0.reset();
-    }
-    firstUpdated(changedProperties) {
-        console.debug("firstUpdated");
-        super.firstUpdated(changedProperties);
-    }
-    shouldUpdate(changedProperties) {
-        console.debug("shouldUpdate");
-        return super.shouldUpdate(changedProperties);
-    }
-    update(changedProperties) {
-        console.debug("update");
-        return super.update(changedProperties);
-    }
-    updated(changedProperties) {
-        console.debug("updated");
-        return super.updated(changedProperties);
-    }
-    render() {
-        /**
-         * this is the main render function
-         * it renders different stages during the game
-         */
-        console.debug("render");
-        return html `
-      <div class="guess-the-year-container">
-        ${this._renderState == GameState.INIT ? "Loading..." : ""}
-        ${this._renderState == GameState.SPLASH
-            ? this.renderSplashScreen()
-            : ""}
-        ${this._renderState == GameState.INTRO ? this.renderGameIntro() : ""}
-        ${this._renderState == GameState.PLAY ? this.renderGameStage() : ""}
-        ${this._renderState == GameState.END ? this.renderGameEnd() : ""}
-        ${this._renderFooter()}
-      </div>
-    `;
-    }
-    colorElement(element, color) {
-        var _a, _b;
-        console.debug("colorElement");
-        (_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);
-    }
-    // this renders the game header
-    _renderHeader(content = this.i18n.translate("game-name")) {
-        return html `
-      <section id="top" class="header guess-the-year-header">
-        <h1>${content}</h1>
-      </section>
-    `;
-    }
-    // this renders the game footer
-    _renderFooter() {
-        if (this._showFooter) {
-            return html `
-      <section class="footer guess-the-year-footer">
-        <div class="guess-the-year-copyright">
-          ${"The Throwback Company ©" + dayjs().year()}
-        </div>
-      </section>
-    `;
-        }
-        return html ``;
-    }
-    // render the splash screen
-    renderSplashScreen() {
-        console.debug("renderSplashScreen");
-        // (pretend) to load before the game starts
-        setTimeout(() => {
-            this._renderState = GameState.INTRO;
-        }, SPLASH_DELAY);
-        return html `
-      <div id="splash-screen-container" class="splashscreen">
-        <div class="splash-logo">
-          <h2>${this.i18n.translate("game-name")}</h2>
-          <p>${this.i18n.translate("Loading...")}</p>
-        </div>
-      </div>
-    `;
-    }
-    // renders a selector for a year
-    // TODO: set type of selector
-    _renderYearStepXSelectOptions(from, to, step, selectedValue) {
-        const selected = parseInt(selectedValue, 10);
-        // pre-render year options
-        // and mark selected when they match
-        const selectYearOptions = [];
-        for (let i = from; i <= to; i += step) {
-            selectYearOptions.push(html `
-        <option value="${i}" ?selected=${selected == i}>${i}</option>
-      `);
-        }
-        return html `${selectYearOptions}`;
-    }
-    // render the game intro
-    // allows to select the number of questions,
-    // select the year range
-    // and to start the game
-    renderGameIntro() {
-        console.debug("renderGameIntro");
-        // pre-render number of question options
-        // and mark selected when they match
-        const selectQuestionOptions = [];
-        for (let i = 1; i <= MAX_QUESTIONS; i++) {
-            selectQuestionOptions.push(html `
-        <option value="${i}" ?selected=${this.numberOfQuestions == i}>
-          ${i}
-        </option>
-      `);
-        }
-        return html `
-      ${this._renderHeader(this.i18n.translate("game-introduction-welcome"))}
-
-      <div class="game-intro">
-        <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">
-          <p>
-            ${this.i18n.translate("game-settings-p0")}
-
-            ${this.i18n.translate("game-settings-p1-1")}
-            <select @change="${this._setNumberOfQuestions}">
-              ${selectQuestionOptions}
-            </select>
-            ${this.i18n.translate("game-settings-p1-2")}
-            ${this.i18n.translate("game-settings-p2")}
-            <select @change="${this._setFromDate}">
-              ${this._renderYearStepXSelectOptions(MIN_YEAR, MAX_YEAR, 5, this.from.format("YYYY"))}
-            </select>
-            ${this.i18n.translate("game-settings-p3")}
-            <select @change="${this._setToDate}">
-              ${this._renderYearStepXSelectOptions(MIN_YEAR, MAX_YEAR, 5, this.to.format("YYYY"))}
-            </select>
-            ${this.i18n.translate("game-settings-p4")}
-            ${this.i18n.translate("game-settings-p5-1")}
-            <select @change="${this._setPlayerDob}">
-              ${this._renderYearStepXSelectOptions(MAX_DOB, MIN_DOB, 1, this._playerDob + '')}
-            </select>
-            ${this.i18n.translate("game-settings-p5-2")}
-          </p>
-        </div>
-
-        <div class="game-start">
-          <button @click="${this.setupNewGame}">${this.i18n.translate("start")}</button>
-        </div>
-      </div>
-    `;
-    }
-    _setPlayerDob(event) {
-        this._playerDob = Number(event.target.value);
-        window.localStorage.setItem(GTY_PLAYER_DOB_VAR, this._playerDob + '');
-    }
-    _setNumberOfQuestions(event) {
-        this.numberOfQuestions = Number(event.target.value);
-        window.localStorage.setItem(GTY_NUM_QUESTIONS_VAR, this.numberOfQuestions + '');
-    }
-    _setFromDate(event) {
-        this.from = this.from.year(event.target.value);
-        window.localStorage.setItem(GTY_FROM_YEAR_VAR, this.from.format('YYYY') + '');
-    }
-    _setToDate(event) {
-        this.to = this.to.year(event.target.value);
-        window.localStorage.setItem(GTY_TO_YEAR_VAR, this.to.format('YYYY') + '');
-    }
-    // renders the actual game stage
-    renderGameStage() {
-        console.debug("renderGameStage");
-        return html `
-      ${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>
-
-        <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>
-
-        ${this._renderFeedback()}
-      </div>
-    `;
-    }
-    // renders the item for the year to guess
-    _renderIncident() {
-        var _a, _b;
-        return html `
-      <div class="incident--title">
-        <h1>${(_a = this._incident) === null || _a === void 0 ? void 0 : _a.title}</h1>
-      </div>
-
-      ${this._renderIncidentImage(this._incident)}
-
-      <div class="incident--text">
-        <p>${(_b = this._incident) === null || _b === void 0 ? void 0 : _b.text}</p>
-      </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 && this._shouldDisplayAnImage(incident)) {
-            return html `
-        <div class="incident--image">
-          <img 
-            @error=${(evt) => {
-                this._handleImageLoadError(evt, incident);
-            }}
-            src="${incident.image[0]}"
-          />
-        </div>
-      `;
-        }
-        if (!this.suppressImages) {
-            // Preserve html structure to prevent the webcomponent to collapse.
-            return html `<div class="incident--image">
-          <img/>
-        </div>`;
-        }
-        return html ``;
-    }
-    // renders a list of possible answers
-    _renderAnswers() {
-        return html `
-      <div class="answers--list">
-        <ul>
-          ${this._answers.map((answer) => html `<li @click="${this._handleAnswerClicked}">${answer}</li>`)}
-        </ul>
-      </div>
-    `;
-    }
-    // renders the current question score
-    // it counts back to 0
-    _renderGameScore() {
-        return html `
-      <div class="game-score--total">
-        <div class="game-score--label">${this.i18n.translate("question-number")}:</div>
-        <div class="game-score--value">
-          ${this._numberOfQuestionsSeen} van ${this.numberOfQuestions}
-        </div>
-      </div>
-
-      <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>
-
-      <div class="game-score--total">
-        <div class="game-score--label">${this.i18n.translate("total-score")}:</div>
-        <div class="game-score--value">${this.totalScore}</div>
-      </div>
-    `;
-    }
-    // handles the click on an answer
-    _handleAnswerClicked(event) {
-        // get the clicked answer
-        const answer = event.target.textContent;
-        // stop the score counter
-        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;
-        }
-    }
-    // renders the requested hint
-    _renderHint() {
-        if (!this._hint) {
-            return html ``;
-        }
-        return html ` <p>${this._hint}</p> `;
-    }
-    // renders the hint button until
-    // all max hints have been used
-    _renderHintButton() {
-        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>
-    `;
-    }
-    // handles the click on the hint button
-    // and shows the next hint if available
-    // subtracts the cost of the hint from
-    // the question score
-    _handleHintClicked() {
-        console.debug("handleHintClicked", [this._hintsIndex, this._hints.length]);
-        if (this._hintsIndex < this._hints.length) {
-            const hintText = this._generateHintText(this._hints[this._hintsIndex]);
-            if (hintText) {
-                this._hint = hintText;
-                this._hintsIndex++;
-                this._score0.subtract(HINT_COST);
-            }
-        }
-        if (this._hintsIndex >= this._hints.length) {
-            // this._hintsIndex = 0;
-            this._showHint = false;
-        }
-    }
-    // renders the feedback overlay
-    _renderFeedback() {
-        var _a, _b;
-        // 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 ``;
-        }
-        // 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;
-        if (this._score0.isRunning()) {
-            this._score0.stop();
-        }
-        this.totalScore += score;
-        // Fire-and-forget recallability feedback.
-        if ((_a = this._incident) === null || _a === void 0 ? void 0 : _a.id) {
-            this._apiService.incidentRecallability((_b = this._incident) === null || _b === void 0 ? void 0 : _b.id, this._playerDob, is_correct);
-        }
-        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>
-      `;
-        }
-        else {
-            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>
-        </div>
-      `;
-        }
-    }
-    // renders the next question button
-    _renderNextQuestionButton() {
-        if (this._numberOfQuestionsSeen < this.numberOfQuestions) {
-            return html `
-        <button @click="${this._loadQuestion}">${this.i18n.translate("next-question")}</button>
-      `;
-        }
-        return html ` <button @click="${this._endGame}">${this.i18n.translate("quit")}</button> `;
-    }
-    // renders the end of the game
-    _endGame() {
-        this._renderState = GameState.END;
-    }
-    renderGameEnd() {
-        console.debug("renderGameEnd");
-        const maxScore = this.numberOfQuestions * this._score;
-        const scoreRatio = Math.round((this.totalScore / maxScore) * 100);
-        return html `
-      ${this._renderHeader("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 + '')}
-        </p>
-        <p>
-          ${this.i18n.translate(Util.scoreToValueJudgement(scoreRatio))}
-        </p>
-      </div>
-      <button @click="${() => (this._renderState = GameState.SPLASH)}" >
-        ${this.i18n.translate("new-game")}
-    </button>
-      ${this._renderFooter()}
-    `;
-    }
-    setupNewGame() {
-        console.debug("new game!");
-        console.debug({
-            "number of questions": this.numberOfQuestions,
-            from: this.from.toISOString(),
-            to: this.to.toISOString(),
-        });
-        this.totalScore = 0;
-        this._numberOfQuestionsSeen = 0;
-        this._loadQuestion();
-    }
-    _resetStage() {
-        this.sources = [];
-        this._incident = undefined;
-        this._hints = [];
-        this._answer = undefined;
-        this._answers = [];
-        this._hintsIndex = 0;
-        this._score0.reset();
-        this._showHint = false;
-        this._hint = undefined;
-    }
-    async _loadQuestion() {
-        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._incident = response.incident;
-        this.sources = response.sources;
-        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();
-        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 = 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;
-        }
-        // start render game stage
-        this._renderState = GameState.PLAY;
-        // start score counter
-        this._score0.start();
-        // increment question counter
-        this._numberOfQuestionsSeen += 1;
-    }
-    _generateHintText(hintIncident) {
-        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() {
-        console.debug("renderSources");
-        if (!this.sources.length) {
-            return html ``;
-        }
-        // deduplicate array via [...new Set(this.sources)]
-        return html `
-      <div class="guess-the-year-sources" >
-        Source: ${[...new Set(this.sources)].join(", ")}
-    </div>
-      `;
-    }
-};
-GuessTheYear.styles = css `
-    ${stylesheet}
-  `;
-__decorate([
-    property({ type: String, attribute: "tee-e-api-url" })
-], GuessTheYear.prototype, "teeeApiUrl", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "report-broken-images" })
-], GuessTheYear.prototype, "reportBrokenImages", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "date", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "country", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "category", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "emotion", void 0);
-__decorate([
-    property({ type: String })
-], GuessTheYear.prototype, "impact", void 0);
-__decorate([
-    property({
-        type: Dayjs,
-        converter: {
-            fromAttribute: (value) => {
-                console.debug(["from", "from", value]);
-                if (!value) {
-                    return dayjs();
-                }
-                if (value.length >= 10) {
-                    return dayjs(value, "YYYY-MM-DD");
-                }
-                return dayjs(`${value}-01-01`, "YYYY-MM-DD");
-            },
-            toAttribute: (value) => {
-                console.debug(["from", "to", value]);
-                return value.format("YYYY-MM-DD");
-            },
-        },
-    })
-], GuessTheYear.prototype, "from", void 0);
-__decorate([
-    property({
-        type: Dayjs,
-        converter: {
-            fromAttribute: (value) => {
-                console.debug(["to", "from", value]);
-                if (!value) {
-                    return dayjs();
-                }
-                if (value.length >= 10) {
-                    return dayjs(value, "YYYY-MM-DD");
-                }
-                return dayjs(`${value}-12-31`, "YYYY-MM-DD");
-            },
-            toAttribute: (value) => {
-                console.debug(["to", "to", value]);
-                return value.format("YYYY-MM-DD");
-            },
-        },
-    })
-], GuessTheYear.prototype, "to", 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: Number, attribute: "max-hints" })
-], GuessTheYear.prototype, "maxHints", void 0);
-__decorate([
-    property({ type: Number, attribute: "number-of-questions", reflect: true })
-], GuessTheYear.prototype, "numberOfQuestions", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_incident", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_hint", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_solution", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_renderState", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_score", void 0);
-__decorate([
-    state()
-], GuessTheYear.prototype, "_answer", void 0);
-GuessTheYear = __decorate([
-    customElement("guess-the-year")
-], GuessTheYear);
-export { GuessTheYear };
-//# sourceMappingURL=guess-the-year.js.map