guess-the-year-web-component 3.2.4 → 4.0.1

package/README.md

@@ -1,6 +1,6 @@
-# Guess the year
+# Tijdlijn Tegelen
 
-Guess the year is a webcomponent you can use to add a historic game to your website.
+Tijdlijn Tegelen is een webcomponent die je kunt gebruiken om een historisch spel aan je website toe te voegen.
 
 
 ## Usage

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

@@ -18,26 +18,28 @@ export declare class GuessTheYear extends LitElement {
     to: Dayjs;
     noImageSrc: string;
     suppressImages: boolean;
-    maxHints: number;
     numberOfQuestions: number;
     private _numberOfQuestionsSeen;
     private _playerDob;
+    timePerQuestion: number;
     private _incident;
-    private _answers;
-    private _hint;
-    private _showHint;
     private _showFooter;
-    private _hintsIndex;
-    private _hints;
     private _solution;
     _renderState: string;
-    private _score;
     totalScore: number;
-    private _answer;
+    private _timelineYears;
+    private _clickedPosition;
+    private _correctYear;
+    private _scoreAddedForCurrentQuestion;
+    private _userClicked;
+    private _toastMessage;
+    private _toastType;
+    private _toastTimeout;
     private _apiService;
     private i18n;
     static styles: import("lit").CSSResult;
     constructor();
+    private _handleTimeUp;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues): void;
@@ -53,26 +55,29 @@ export declare class GuessTheYear extends LitElement {
     private renderGameIntro;
     private _setPlayerDob;
     private _setNumberOfQuestions;
+    private _setTimePerQuestion;
     private _setFromDate;
     private _setToDate;
     private renderGameStage;
     private _renderIncident;
     private _shouldDisplayAnImage;
     private _renderIncidentImage;
-    private _renderAnswers;
+    private _renderTimeline;
     private _renderGameScore;
-    private _handleAnswerClicked;
-    private _renderHint;
-    private _renderHintButton;
-    private _handleHintClicked;
-    private _renderFeedback;
-    private _renderNextQuestionButton;
+    private _handleTimelineClick;
+    private _isTimelinePositionCorrect;
+    /**
+     * Processes feedback and shows toast notification
+     */
+    private _processFeedback;
+    private _renderToast;
+    private _showToast;
     private _endGame;
     private renderGameEnd;
     private setupNewGame;
     private _resetStage;
+    private _addYearToTimeline;
     _loadQuestion(): Promise<void>;
-    private _generateHintText;
     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/index.html

@@ -23,12 +23,7 @@
     }
 
     guess-the-year {
-      /* --guess-the-year-background-color: orange; */
-      --guess-the-year-ruler-color: orange;
-      --guess-the-year-title-background-color: orange;
-      --guess-the-year-title-color: white;
-      /* --guess-the-year-text-position: static; */
-      /* --guess-the-year-text-color: white; */
+      /* Tile theme - removed orange colors */
       --guess-the-year-intro-background-color: white;
       --guess-the-year-text-background-color: rgba(255, 255, 255, 0.861);
       --guess-the-year-text-max-height: 200px;
@@ -37,7 +32,7 @@
       --guess-the-year-attribution-font-color: rgb(168, 170, 171);
       --guess-the-year-attribution-font-size: 8px;
       --guess-the-year-font-family: "Comfortaa", cursive;
-      --guess-the-year-button-background-color: rgb(124, 1, 78);
+      --guess-the-year-button-background-color: #1e3a8a; /* Delfts blauw */
 
       min-height: 80vh;
     }
@@ -59,4 +54,4 @@
 
     guess-the-year {
       text-align: center;
-    }</style><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet"/><script defer="defer" src="main.js"></script></head><body><section><div class="big-container"><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></section></body></html>
+    }</style><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet"/><script defer="defer" src="main.bundle.js"></script></head><body><section><div class="big-container"><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></section></body></html>

package/dist/lib/controller/scorecontroller.d.ts

@@ -4,8 +4,9 @@ export declare class QuestionScoreController implements ReactiveController {
     startValue: number;
     value: number;
     timeout: number;
+    onTimeUp?: () => void;
     private _timerID?;
-    constructor(host: ReactiveControllerHost, startValue?: number, timeout?: number);
+    constructor(host: ReactiveControllerHost, startValue?: number, timeout?: number, onTimeUp?: () => void);
     start(): void;
     stop(): void;
     reset(): void;

package/dist/lib/controller/scorecontroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scorecontroller.d.ts","sourceRoot":"","sources":["../../../src/lib/controller/scorecontroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,qBAAa,uBAAwB,YAAW,kBAAkB;IAChE,IAAI,EAAE,sBAAsB,CAAC;IAE7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAK;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,QAAQ,CAAC,CAAiC;gBAEtC,IAAI,EAAE,sBAAsB,EAAE,UAAU,SAAI,EAAE,OAAO,SAAO;IAOxE,KAAK;IASL,IAAI;IAKJ,KAAK;IAIL,QAAQ,CAAC,KAAK,EAAE,MAAM;IAOtB,SAAS;IAIT,gBAAgB;CAKjB"}
+{"version":3,"file":"scorecontroller.d.ts","sourceRoot":"","sources":["../../../src/lib/controller/scorecontroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,qBAAa,uBAAwB,YAAW,kBAAkB;IAChE,IAAI,EAAE,sBAAsB,CAAC;IAE7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAK;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,OAAO,CAAC,QAAQ,CAAC,CAAiC;gBAEtC,IAAI,EAAE,sBAAsB,EAAE,UAAU,SAAI,EAAE,OAAO,SAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI;IAQ/F,KAAK;IAkBL,IAAI;IAKJ,KAAK;IAIL,QAAQ,CAAC,KAAK,EAAE,MAAM;IAOtB,SAAS;IAIT,gBAAgB;CAKjB"}

package/dist/lib/i18n/EN.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EN.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/EN.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBAAa,EAAG,YAAW,IAAI;IACV,aAAa,EAAE,gBAAgB;gBAA/B,aAAa,GAAE,gBAAqB;IA+CvD,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CAiG/B"}
+{"version":3,"file":"EN.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/EN.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBAAa,EAAG,YAAW,IAAI;IACV,aAAa,EAAE,gBAAgB;gBAA/B,aAAa,GAAE,gBAAqB;IA+CvD,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CA+G/B"}

package/dist/lib/i18n/NL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NL.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/NL.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBAAa,EAAG,YAAW,IAAI;IACV,aAAa,EAAE,gBAAgB;gBAA/B,aAAa,GAAE,gBAAqB;IAmDvD,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CAiG/B"}
+{"version":3,"file":"NL.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/NL.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBAAa,EAAG,YAAW,IAAI;IACV,aAAa,EAAE,gBAAgB;gBAA/B,aAAa,GAAE,gBAAqB;IAmDvD,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CA+G/B"}