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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guess-the-year-web-component",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "Guess the year",
   "main": "dist/main.js",
   "type": "module",

package/src/guess-the-year.ts

@@ -321,13 +321,12 @@ export class GuessTheYear extends LitElement {
         <div class="game-settings">
           <p>
             ${this.i18n.translate("game-settings-p0")}
-            <select @change="${this._setPlayerDob}">
-              ${this._renderYearStepXSelectOptions(MAX_DOB, MIN_DOB, 1, this._playerDob + '')}
-            </select>
-            ${this.i18n.translate("game-settings-p1")}
+
+            ${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"))}
@@ -337,6 +336,11 @@ export class GuessTheYear extends LitElement {
               ${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>
 
@@ -632,12 +636,21 @@ export class GuessTheYear extends LitElement {
 
   private renderGameEnd(): TemplateResult {
     console.debug("renderGameEnd");
+    const maxScore: number = 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">${this.i18n.translate("end")}</div>
-      <button @click="${() => (this._renderState = GameState.SPLASH)}">
-      ${this.i18n.translate("new-game")}
-      </button>
+      <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()}
     `;
   }
@@ -814,16 +827,16 @@ export class GuessTheYear extends LitElement {
     }
     // deduplicate array via [...new Set(this.sources)]
     return html`
-      <div class="guess-the-year-sources">
+      <div class="guess-the-year-sources" >
         Source: ${[...new Set(this.sources)].join(", ")}
-      </div>
-    `;
+    </div>
+      `;
   }
 
   _handleImageLoadError = (evt: Event, incident: Incident) => {
     // grab the image element that triggered the error
     const targetImage = evt.target as HTMLImageElement;
-    console.debug(`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/lib/ApiService.ts

@@ -58,18 +58,23 @@ export class ApiService {
 
           urls.push(url);
         } else if (fromString && toString) {
-          const from = new Date(fromString).toISOString().substring(0, 10);
-          const to = new Date(toString).toISOString().substring(0, 10);
+          try {
+            const from = new Date(fromString).toISOString().substring(0, 10);
+            const to = new Date(toString).toISOString().substring(0, 10);
 
-          // add from and to date to search
-          urlSearch.set("from", from);
-          urlSearch.set("to", to);
+            // add from and to date to search
+            urlSearch.set("from", from);
+            urlSearch.set("to", to);
 
-          // setup url
-          const url = new URL(this.teeeApiUrl);
-          url.search = urlSearch.toString();
+            // setup url
+            const url = new URL(this.teeeApiUrl);
+            url.search = urlSearch.toString();
 
-          urls.push(url);
+            urls.push(url);
+          }
+          catch (e) {
+            console.error(e, fromString, toString);
+          }
         } else {
           throw "No correct date or period specified.";
         }

package/src/lib/Util.ts

@@ -47,6 +47,18 @@ export class Util {
     // generationalpha: 2013-2028
   }
 
+
+  public static scoreToValueJudgement(scoreAsPercent: number): string {
+    if (scoreAsPercent >= 90) return 'excellent';
+    if (scoreAsPercent >= 80) return 'very-good';
+    if (scoreAsPercent >= 70) return 'good';
+    if (scoreAsPercent >= 60) return 'reasonable-good';
+    if (scoreAsPercent >= 50) return 'reasonable';
+    if (scoreAsPercent >= 40) return 'not-so-good';
+    if (scoreAsPercent >= 20) return 'not-good';
+    if (scoreAsPercent >= 0) return 'bad';
+    return '';
+  }
 }
 
 export interface IHash {

package/src/lib/i18n/EN.ts

@@ -57,9 +57,25 @@ export class EN implements i18n {
       case "start":
         return "start";
       case "new-game":
-        return "new game";
+        return "Try again";
       case "end":
-        return "You made it :)";
+        return "You scored __SCORE__ of the __MAX_SCORE__ points. That is a score of __PERCENT__%";
+      case "excellent":
+        return "That is excellent!";
+      case "very-good":
+        return "That is very good!";
+      case "good":
+        return "That is good!";
+      case "reasonable-good":
+        return "That is reasonably good";
+      case "reasonable":
+        return "That is reasonable!";
+      case "not-so-good":
+        return "That is ok";
+      case "not-good":
+        return "That is not so good";
+      case "bad":
+        return "That is really bad :)";
       case "next-question":
         return "Next question";
       case "quit":
@@ -105,21 +121,27 @@ export class EN implements i18n {
       case "in-x-seconds":
         return "In __SECONDS__ seconds";
       case "game-settings-p0":
-        return " What year of birth?"
-      case "game-settings-p1":
-        return " Right. Oh hey, Biff, hey, guys, how are you doing? Look, there's a            rhythmic"
+        return "This is how I want to play: "
+      case "game-settings-p5-1":
+        return "Take my birth year into account ("
+      case "game-settings-p5-2":
+        return ") when selecting events."
+      case "game-settings-p1-1":
+        return "give me a maximum of"
+      case "game-settings-p1-2":
+        return "events."
       case "game-settings-p2":
-        return " questions ceremonial ritual coming up.From start"
+        return "Limit yourself to the period from "
       case "game-settings-p3":
-        return " Precisely, just relax now Calvin. To end"
+        return " to "
       case "game-settings-p4":
-        return " you've got a big bruise on you're head."
+        return "."
       case "game-introduction-p1":
-        return "somethng"
+        return "Welcome to the ultimate test of your historical knowledge!"
       case "game-introduction-p2":
-        return "Excuse me. Go. Go. Never mind that, never mind that now, never mind that, never mind- Yeah, well, how about my homework, McFly? Don't stop, Wilbert, drive."
+        return "Dive into history and challenge yourself and your friends to guess the years of fascinating events. From groundbreaking inventions to memorable moments, this game takes you on a journey through time."
       case "game-introduction-p3":
-        return "Mom, is that you? Oh. Uh Doc, uh no. No, don't be silly. What did            your mother ever see in that kid? You guys, take him in back and            I'll be right there. Well c'mon, this ain't no peep show."
+        return "Are you the master of chronology? Find out now!"
       case "game-introduction-welcome":
         return `Welcome to Guess The Year!`
     }

package/src/lib/i18n/NL.ts

@@ -61,9 +61,25 @@ export class NL implements i18n {
       case "start":
         return "start";
       case "new-game":
-        return "nieuw spel";
+        return "Probeer opnieuw";
       case "end":
-        return "Goed gedaan!";
+        return "Je haalde __SCORE__ van de mogelijke __MAX_SCORE__ punten. Dat komt overeen met __PERCENT__%";
+      case "excellent":
+        return "Dat is echt ongelooflijk goed!";
+      case "very-good":
+        return "Dat is heel goed!";
+      case "good":
+        return "Dat is goed!";
+      case "reasonable-good":
+        return "Dat is best goed";
+      case "reasonable":
+        return "Dat is best redelijk!";
+      case "not-so-good":
+        return "Dat is redelijk";
+      case "not-good":
+        return "Dat is niet zo goed";
+      case "bad":
+        return "Dat is ronduit slecht :)";
       case "next-question":
         return "Volgende vraag";
       case "quit":
@@ -109,21 +125,27 @@ export class NL implements i18n {
       case "in-x-seconds":
         return "In __SECONDS__ seconden";
       case "game-settings-p0":
-        return " Welk geboortejaar?"
-      case "game-settings-p1":
-        return " Right. Oh hey, Biff, hey, guys, how are you doing? Look, there's a            rhythmic"
+        return "Zo wil ik het spelen: "
+      case "game-settings-p5-1":
+        return "Houd rekening met mijn geboortejaar ("
+      case "game-settings-p5-2":
+        return ") bij de selectie van de gebeurenissen."
+      case "game-settings-p1-1":
+        return "geef me maximaal"
+      case "game-settings-p1-2":
+        return "gebeurtenissen."
       case "game-settings-p2":
-        return " vragen ceremonial ritual coming up.Vanaf begin"
+        return "Beperk je tot de periode van "
       case "game-settings-p3":
-        return " Precisely, just relax now Calvin. Tot eind"
+        return " tot "
       case "game-settings-p4":
-        return " you've got a big bruise on you're head."
+        return "."
       case "game-introduction-p1":
-        return "somethng"
+        return "Welkom bij de ultieme test van je historische kennis!"
       case "game-introduction-p2":
-        return "Excuse me. Go. Go. Never mind that, never mind that now, never mind that, never mind- Yeah, well, how about my homework, McFly? Don't stop, Wilbert, drive."
+        return "Duik in de tijd en daag jezelf en je vrienden uit om de jaartallen van fascinerende gebeurtenissen te raden. Van baanbrekende uitvindingen tot memorabele momenten, dit spel neemt je mee op een reis door de geschiedenis."
       case "game-introduction-p3":
-        return "Mom, is that you? Oh. Uh Doc, uh no. No, don't be silly. What did            your mother ever see in that kid? You guys, take him in back and            I'll be right there. Well c'mon, this ain't no peep show."
+        return "Ben jij de meester van de chronologie? Ontdek het nu!"
       case "game-introduction-welcome":
         return `Welkom bij Guess The Year!`
     }