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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +15 -3
  2. package/dist/guess-the-year.d.ts +16 -3
  3. package/dist/guess-the-year.d.ts.map +1 -1
  4. package/dist/guess-the-year.js +177 -53
  5. package/dist/guess-the-year.js.map +1 -1
  6. package/dist/index.html +1 -1
  7. package/dist/lib/ApiService.d.ts +2 -1
  8. package/dist/lib/ApiService.d.ts.map +1 -1
  9. package/dist/lib/ApiService.js +15 -1
  10. package/dist/lib/ApiService.js.map +1 -1
  11. package/dist/lib/Icon.d.ts +1 -6
  12. package/dist/lib/Icon.d.ts.map +1 -1
  13. package/dist/lib/Icon.js +1 -6
  14. package/dist/lib/Icon.js.map +1 -1
  15. package/dist/lib/i18n/NL.d.ts.map +1 -1
  16. package/dist/lib/i18n/NL.js +6 -0
  17. package/dist/lib/i18n/NL.js.map +1 -1
  18. package/dist/main.js +52 -16
  19. package/package.json +1 -1
  20. package/src/guess-the-year.ts +195 -79
  21. package/src/index.html +8 -8
  22. package/src/lib/ApiService.ts +16 -1
  23. package/src/lib/Icon.ts +2 -12
  24. package/src/lib/i18n/NL.ts +6 -0
  25. package/todo.txt +4 -5
package/README.md CHANGED
@@ -33,8 +33,11 @@ The guess-the-year element accepts parameters to control it's behaviour:
33
33
  * `no-image-src` : what image should be shown when an incident's image is broken. Use a url or base64 encoded image
34
34
  * `report-broken-images` : report broken images back to the server so that they can be repaired
35
35
  * `hint-interval-length` : the time (in seconds) waited before the first tip is displayed and the time between the tips
36
- * `max-amount-hints` : the maximum amount of hints that will be displayed
37
- * `auto-focus` : set the focus on the answer input element
36
+ * `max-hints` : the maximum amount of hints that will be displayed
37
+ * `auto-focus` : set the focus on the answer input element
38
+ * `max-tries` : maximum number of tries before the game stops
39
+ * `show-duration` : display the amount of seconds that it took to answer correctly
40
+ * `show-feedback` : display a feedback input field at the top right of the component
38
41
 
39
42
 
40
43
  ### Adjust the styling
@@ -54,6 +57,9 @@ The guess-the-year element accepts css parameters to specify (significant parts
54
57
  * `--guess-the-year-icon-color` : the color of the incident's category icon
55
58
  * `--guess-the-year-attribution-font-size` : the font size of the list of attributions / sources
56
59
  * `--guess-the-year-attribution-font-color` : the font color of the list of attributions / sources
60
+ * `--guess-the-year-solution-color` : the color of the solution
61
+ * `--guess-the-year-hint-title-background-color` : color of hint title
62
+ * `--guess-the-year-hint-text-background-color` : color of hint text
57
63
 
58
64
  ## Development
59
65
  Fetch all packages: `npm ci`
@@ -67,4 +73,10 @@ Version the application: `npm version major|minor|patch`
67
73
  Build the application: `npm run build:prod`
68
74
  Logon at npmjs.org: `npm login`
69
75
  Publish the application: `npm publish`
70
- Fix access tokens in npmjs.org in case of 403
76
+ Fix access tokens in npmjs.org in case of 403
77
+
78
+ ## Runtime
79
+ Needs permissions for:
80
+ * attribute-yearplusmonth
81
+ * filter-seed
82
+ * filter-maxlasted
package/dist/guess-the-year.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { LitElement, PropertyValues, TemplateResult } from 'lit';
2
2
  import { Incident } from './lib/Incident';
3
3
  export declare class GuessTheYear extends LitElement {
4
+ private _startTime;
5
+ private _endTime;
4
6
  private _uuid;
5
7
  private sources;
6
8
  private _loading;
@@ -17,18 +19,23 @@ export declare class GuessTheYear extends LitElement {
17
19
  to: string;
18
20
  limit: string;
19
21
  shuffle: boolean;
22
+ showDuration: boolean;
23
+ showFeedback: boolean;
20
24
  noImageSrc: string;
21
25
  suppressImages: boolean;
22
26
  autoFocus: boolean;
23
- hintIntervalSecs: string;
24
- maxAmountHints: string;
27
+ hintIntervalSecs: number;
28
+ maxHints: number;
29
+ maxTries: number;
25
30
  private _incident;
26
31
  private _hint;
27
32
  private _solution;
28
33
  private _displaySolution;
34
+ private _answeredCorrectly;
35
+ private _tries;
29
36
  private _answer;
30
37
  private _apiService;
31
- private _interval;
38
+ private _intervalHandler;
32
39
  private _intervalsPassed;
33
40
  private i18n;
34
41
  static styles: import("lit").CSSResult;
@@ -36,13 +43,19 @@ export declare class GuessTheYear extends LitElement {
36
43
  connectedCallback(): void;
37
44
  disconnectedCallback(): void;
38
45
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
46
+ colorElement(element: any, color: string): void;
39
47
  firstUpdated(changedProperties: PropertyValues): void;
40
48
  shouldUpdate(changedProperties: PropertyValues): boolean;
41
49
  update(changedProperties: PropertyValues): void;
42
50
  updated(changedProperties: PropertyValues): void;
43
51
  render(): TemplateResult<1>;
52
+ setupNewGame(): Promise<void>;
53
+ renderRefreshButton(): TemplateResult;
54
+ renderFeedbackPossibility(): TemplateResult;
44
55
  renderSubmitPossibility(): TemplateResult;
56
+ renderTries(): TemplateResult;
45
57
  renderTheSolution(): TemplateResult;
58
+ renderTheDuration(): TemplateResult;
46
59
  renderTiles(incident: Incident | undefined): TemplateResult<1> | "";
47
60
  private _tileShouldDisplayAnImage;
48
61
  renderTile(incident: Incident): TemplateResult;
package/dist/guess-the-year.d.ts.map CHANGED
@@ -1 +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,SAAS,EAAE,OAAO,CAAS;IAG3B,gBAAgB,EAAE,MAAM,CAAO;IAG/B,cAAc,EAAE,MAAM,CAAO;IAG7B,OAAO,CAAC,SAAS,CAAmC;IAGpD,OAAO,CAAC,KAAK,CAAmC;IAGhD,OAAO,CAAC,SAAS,CAAiC;IAGlD,OAAO,CAAC,gBAAgB,CAAkB;IAG1C,OAAO,CAAC,OAAO,CAAc;IAE7B,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,IAAI,CAAwB;IAEpC,OAAgB,MAAM,0BA6IpB;;IAMO,iBAAiB;IAoCjB,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;IA0BrD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,OAAO;IAKxD,MAAM,CAAC,iBAAiB,EAAE,cAAc;IAKxC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAKzC,MAAM;IAgBf,uBAAuB,IAAI,cAAc;IASzC,iBAAiB,IAAI,cAAc;IAOnC,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"}
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;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 CHANGED
@@ -6,13 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { LitElement, css, html } from 'lit';
8
8
  import { customElement, property, state } from 'lit/decorators.js';
9
+ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
9
10
  import { Task } from '@lit/task';
10
11
  const { setTimeout } = window;
11
12
  import { Categories } from './lib/Incident';
12
- import { NoImageImg } from './lib/Icon';
13
+ import { NoImageImg, RefreshIconSVG } from './lib/Icon';
13
14
  import { ApiService } from './lib/ApiService';
14
15
  import { Util } from './lib/Util';
15
16
  import { i18nFactory } from './lib/i18n/i18n';
17
+ const GREEN = '#07d207';
18
+ const RED = '#ec3737';
19
+ const BLACK = '#000';
16
20
  let GuessTheYear = class GuessTheYear extends LitElement {
17
21
  get loading() {
18
22
  return this._loading;
@@ -22,6 +26,8 @@ let GuessTheYear = class GuessTheYear extends LitElement {
22
26
  }
23
27
  constructor() {
24
28
  super();
29
+ this._startTime = new Date();
30
+ this._endTime = new Date();
25
31
  this._uuid = Math.random();
26
32
  this.sources = [];
27
33
  this._loading = false;
@@ -36,29 +42,32 @@ let GuessTheYear = class GuessTheYear extends LitElement {
36
42
  this.to = '';
37
43
  this.limit = '';
38
44
  this.shuffle = false;
45
+ this.showDuration = false;
46
+ this.showFeedback = false;
39
47
  this.noImageSrc = '';
40
48
  this.suppressImages = false;
41
49
  this.autoFocus = false;
42
- this.hintIntervalSecs = '7';
43
- this.maxAmountHints = '3';
50
+ this.hintIntervalSecs = 7;
51
+ this.maxHints = 3;
52
+ this.maxTries = 1;
44
53
  this._incident = undefined;
45
54
  this._hint = undefined;
46
55
  this._solution = undefined;
47
56
  this._displaySolution = false;
57
+ this._answeredCorrectly = false;
58
+ this._tries = 0;
48
59
  // _answer is stored as string because it will be entered character for character
49
60
  this._answer = '';
50
61
  this._apiService = new ApiService(this.teeeApiUrl);
51
62
  this._intervalsPassed = 0;
52
63
  this.i18n = i18nFactory('nl-nl');
53
64
  this._incidentsTask = new Task(this, {
54
- task: async ([country, category, emotion, impact, date, from, to,]) => {
65
+ task: async ([]) => {
55
66
  console.debug('incidentsTask');
56
67
  if (!this.loading) {
57
68
  this.loading = true;
58
- const response = await this._apiService.fetchOneIncident(country, category, emotion, impact, date, from, to, '40');
69
+ await this.setupNewGame();
59
70
  this.loading = false;
60
- this._incident = response.incident;
61
- this.sources = response.sources;
62
71
  }
63
72
  },
64
73
  args: () => [
@@ -86,7 +95,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
86
95
  // Assume we show only one incident.
87
96
  if (this.reportBrokenImages) {
88
97
  if (this._incident) {
89
- this._apiService.postDataQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');
98
+ this._apiService.postAttributeQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');
90
99
  }
91
100
  }
92
101
  // wait a bit before setting the image
@@ -100,58 +109,60 @@ let GuessTheYear = class GuessTheYear extends LitElement {
100
109
  connectedCallback() {
101
110
  console.debug('connectedCallback');
102
111
  super.connectedCallback();
103
- // Debounce a little bit
104
- setTimeout(() => {
105
- var _a;
106
- const year = Number((((_a = this._incident) === null || _a === void 0 ? void 0 : _a.yearplusmonth) || '').substring(0, 4));
107
- if (year) {
108
- this._solution = year;
109
- }
110
- }, 500);
111
- this._interval = setInterval(async () => {
112
- this._intervalsPassed += 1;
113
- if (this._intervalsPassed <= Number(this.maxAmountHints)) {
114
- console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${this._solution}`);
115
- const response = await this._apiService.fetchOneIncident(this.country, Util.shuffleArray(Categories).shift(), undefined, undefined, '', `${this._solution}-01-01`, `${this._solution}-12-31`, undefined);
116
- this._hint = response.incident;
117
- }
118
- else {
119
- this._hint = undefined;
120
- this._displaySolution = true;
121
- clearInterval(this._interval);
122
- }
123
- }, Number(this.hintIntervalSecs) * 1000);
124
112
  }
125
113
  disconnectedCallback() {
126
114
  console.debug('disconnectedCallback');
127
115
  super.disconnectedCallback();
128
- clearInterval(this._interval);
116
+ clearInterval(this._intervalHandler);
129
117
  }
130
118
  attributeChangedCallback(name, _old, value) {
131
119
  console.debug('attributeChangedCallback: ', name, _old, value);
132
120
  super.attributeChangedCallback(name, _old, value);
133
121
  }
122
+ colorElement(element, color) {
123
+ var _a, _b;
124
+ (_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);
125
+ }
134
126
  firstUpdated(changedProperties) {
135
- var _a, _b, _c, _d;
127
+ var _a, _b, _c, _d, _e, _f;
136
128
  console.debug('firstUpdated');
137
129
  super.firstUpdated(changedProperties);
138
130
  // handle answer events
139
131
  if ((_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#answer')) {
140
- if (this.autoFocus) {
141
- ((_b = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#answer')).focus();
142
- }
143
- (_d = (_c = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#answer')) === null || _d === void 0 ? void 0 : _d.addEventListener('input', (event) => {
132
+ (_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) => {
144
133
  var _a;
145
134
  this._answer = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
146
135
  // Display the answer when 4 characters have been inputted.
147
136
  if (this._answer.length === 4) {
148
- if (Number(this._answer) === Number(this._solution)) {
149
- document.documentElement.style.setProperty('--guess-the-year-solution-color', 'green');
137
+ this._answeredCorrectly = Number(this._answer) === Number(this._solution);
138
+ if (this._answeredCorrectly) {
139
+ this._displaySolution = true;
140
+ this.colorElement('#answer', GREEN);
150
141
  }
151
142
  else {
152
- document.documentElement.style.setProperty('--guess-the-year-solution-color', 'red');
143
+ this.colorElement('#answer', RED);
144
+ }
145
+ this._tries -= 1;
146
+ if (this._tries <= 0) {
147
+ this._displaySolution = true;
153
148
  }
154
- this._displaySolution = true;
149
+ if (this._displaySolution) {
150
+ this._endTime = new Date();
151
+ }
152
+ }
153
+ });
154
+ }
155
+ // handle feedback events
156
+ if ((_d = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#feedback')) {
157
+ (_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) => {
158
+ const element = event === null || event === void 0 ? void 0 : event.target;
159
+ const feedback = element === null || element === void 0 ? void 0 : element.value;
160
+ element.value = this.i18n.translate('sending') + '...';
161
+ setTimeout(() => {
162
+ element.value = '';
163
+ }, 1000);
164
+ if (this._incident) {
165
+ this._apiService.postIncidentQualityFeedback(this._incident.id, feedback);
155
166
  }
156
167
  });
157
168
  }
@@ -172,28 +183,97 @@ let GuessTheYear = class GuessTheYear extends LitElement {
172
183
  console.debug('render');
173
184
  return html `
174
185
  <div class="guess-the-year-container">
186
+ ${this.renderRefreshButton()}
175
187
  ${this._incidentsTask.render({
176
188
  pending: () => html `Loading data...`,
177
189
  complete: () => html `${this.renderTiles(this._incident)}`,
178
190
  })}
179
191
  ${this.renderSubmitPossibility()}
180
- ${this.renderSources()}
192
+ ${this.renderFeedbackPossibility()}
181
193
  ${this.renderHintTile(this._hint)}
182
194
  ${this.renderTheSolution()}
195
+ ${this.renderSources()}
183
196
  </div>
184
197
  `;
185
198
  }
199
+ async setupNewGame() {
200
+ var _a, _b;
201
+ console.log('new game!');
202
+ this._incident = undefined;
203
+ this._hint = undefined;
204
+ const response = await this._apiService.fetchOneIncident(this.country, this.category, this.emotion, this.impact, this.date, this.from, this.to, '40');
205
+ this._startTime = new Date();
206
+ this._endTime = new Date();
207
+ this._incident = response.incident;
208
+ this.sources = response.sources;
209
+ this._tries = this.maxTries;
210
+ this._solution = Number((((_a = response.incident) === null || _a === void 0 ? void 0 : _a.yearplusmonth) || '').substring(0, 4));
211
+ this._displaySolution = false;
212
+ this._intervalsPassed = 0;
213
+ this._answer = '';
214
+ this.colorElement('#answer', BLACK);
215
+ const answerInputElement = (_b = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#answer');
216
+ if (answerInputElement) {
217
+ answerInputElement.value = '';
218
+ if (this.autoFocus) {
219
+ answerInputElement.focus();
220
+ }
221
+ }
222
+ clearInterval(this._intervalHandler);
223
+ this._intervalHandler = setInterval(async () => {
224
+ this._intervalsPassed += 1;
225
+ if (this._intervalsPassed <= this.maxHints) {
226
+ console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${this._solution}`);
227
+ const response = await this._apiService.fetchOneIncident(this.country, Util.shuffleArray(Categories).shift(), undefined, undefined, '', `${this._solution}-01-01`, `${this._solution}-12-31`, undefined);
228
+ this._hint = response.incident;
229
+ }
230
+ else {
231
+ this._hint = undefined;
232
+ this._displaySolution = true;
233
+ clearInterval(this._intervalHandler);
234
+ }
235
+ }, this.hintIntervalSecs * 1000);
236
+ this.requestUpdate();
237
+ }
238
+ renderRefreshButton() {
239
+ return html `<div class="refresh" id="refresh" @click="${this.setupNewGame}"><span>${unsafeHTML(RefreshIconSVG)}</span></div>`;
240
+ }
241
+ renderFeedbackPossibility() {
242
+ if (this.showFeedback) {
243
+ return html `<div class="feedback-possibility">
244
+ <input type="text" id="feedback" size="15" placeholder="${this.i18n.translate('your-feedback')}"/>
245
+ </div>`;
246
+ }
247
+ else {
248
+ return html ``;
249
+ }
250
+ }
186
251
  renderSubmitPossibility() {
187
- if (!this._displaySolution) {
188
- return html `<div class="submit-possibility">
189
- <input type="text" id="answer" size="15" @focus placeholder="${this.i18n.translate('your-answer')}"/>
190
- </div>`;
252
+ return html `<div class="submit-possibility">
253
+ <input type="text" id="answer" size="15" ?disabled=${this._displaySolution} placeholder="${this.i18n.translate('your-answer')}"/>
254
+ ${this.renderTries()}
255
+ </div>`;
256
+ }
257
+ renderTries() {
258
+ const i18nKey = this._tries > 1 ? 'tries-left' : 'try-left';
259
+ if (this._tries && !this._displaySolution) {
260
+ return html `<span class="tries">${this.i18n.translate(i18nKey).replace('__TRIES__', '' + this._tries)}</span>`;
191
261
  }
192
262
  return html ``;
193
263
  }
194
264
  renderTheSolution() {
195
265
  if (this._displaySolution) {
196
- return html `<div class="solution">${this._solution}</div>`;
266
+ return html `<div class="solution">${this._solution}</div>
267
+ ${this.renderTheDuration()}
268
+ `;
269
+ }
270
+ return html ``;
271
+ }
272
+ renderTheDuration() {
273
+ const duration = Math.round(new Date(this._endTime.getTime() - this._startTime.getTime()).getTime() / 1000);
274
+ const i18nKey = duration > 1 ? 'in-x-seconds' : 'in-one-second';
275
+ if (this.showDuration && this._answeredCorrectly) {
276
+ return html `<div class="timer">${this.i18n.translate(i18nKey).replace('__SECONDS__', '' + duration)}</div>`;
197
277
  }
198
278
  return html ``;
199
279
  }
@@ -285,7 +365,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
285
365
  renderTileTextContent(incident) {
286
366
  console.debug('renderTileTextContent');
287
367
  if (incident.text) {
288
- return html `<p>${incident.text}</p>`;
368
+ return html `<p class="hint-text">${incident.text}</p>`;
289
369
  }
290
370
  return html ``;
291
371
  }
@@ -299,7 +379,7 @@ let GuessTheYear = class GuessTheYear extends LitElement {
299
379
  `;
300
380
  }
301
381
  };
302
- GuessTheYear.styles = css `
382
+ GuessTheYear.styles = css `
303
383
  :host {
304
384
  color: var(--guess-the-year-text-color, black);
305
385
  background: var(--guess-the-year-background-color, white);
@@ -327,6 +407,12 @@ GuessTheYear.styles = css `
327
407
  margin: auto;
328
408
  }
329
409
 
410
+ div.feedback-possibility {
411
+ position: absolute;
412
+ top: 2px;
413
+ right: 4px;
414
+ }
415
+
330
416
  .guess-the-year-hint-tile h1.title {
331
417
  background-color: var(
332
418
  --guess-the-year-hint-title-background-color,
@@ -334,18 +420,29 @@ GuessTheYear.styles = css `
334
420
  );
335
421
  }
336
422
 
423
+ .guess-the-year-hint-tile .hint-text {
424
+ background-color: var(
425
+ --guess-the-year-hint-text-background-color,
426
+ #bebbd8e3
427
+ );
428
+ max-height: 40vh;
429
+ overflow: scroll;
430
+ }
431
+
337
432
  div.solution {
338
433
  position: absolute;
339
434
  inset: 50% 0px 0px;
340
435
  font-size: 70pt;
341
- color: var(--guess-the-year-solution-color, blue);
436
+ color: var(--guess-the-year-solution-color, #b768cf);
342
437
  font-weight: bold;
343
438
  text-shadow: 2px 2px #0000009e;
344
439
  }
345
440
 
441
+ div.timer {
442
+ font-size: x-small;
443
+ }
444
+
346
445
  div.submit-possibility {
347
- // position: absolute;
348
- // top: 70%;
349
446
  left: 0;
350
447
  right: 0;
351
448
  margin: 2px;
@@ -358,6 +455,18 @@ GuessTheYear.styles = css `
358
455
  line-height: 1.5;
359
456
  }
360
457
 
458
+ div.refresh {
459
+ position: absolute;
460
+ top: 0;
461
+ left: 0;
462
+ z-index: 1;
463
+ width: 32px;
464
+ }
465
+
466
+ span.tries {
467
+ font-size: 8pt;
468
+ }
469
+
361
470
  h1 {
362
471
  background-color: var(
363
472
  --guess-the-year-title-background-color,
@@ -474,6 +583,12 @@ __decorate([
474
583
  __decorate([
475
584
  property({ type: Boolean })
476
585
  ], GuessTheYear.prototype, "shuffle", void 0);
586
+ __decorate([
587
+ property({ type: Boolean, attribute: 'show-duration' })
588
+ ], GuessTheYear.prototype, "showDuration", void 0);
589
+ __decorate([
590
+ property({ type: Boolean, attribute: 'show-feedback' })
591
+ ], GuessTheYear.prototype, "showFeedback", void 0);
477
592
  __decorate([
478
593
  property({ type: String, attribute: 'no-image-src' })
479
594
  ], GuessTheYear.prototype, "noImageSrc", void 0);
@@ -484,11 +599,14 @@ __decorate([
484
599
  property({ type: Boolean, attribute: 'auto-focus' })
485
600
  ], GuessTheYear.prototype, "autoFocus", void 0);
486
601
  __decorate([
487
- property({ type: String, attribute: 'hint-interval-length' })
602
+ property({ type: Number, attribute: 'hint-interval-length' })
488
603
  ], GuessTheYear.prototype, "hintIntervalSecs", void 0);
489
604
  __decorate([
490
- property({ type: String, attribute: 'max-amount-hints' })
491
- ], GuessTheYear.prototype, "maxAmountHints", void 0);
605
+ property({ type: Number, attribute: 'max-hints' })
606
+ ], GuessTheYear.prototype, "maxHints", void 0);
607
+ __decorate([
608
+ property({ type: Number, attribute: 'max-tries' })
609
+ ], GuessTheYear.prototype, "maxTries", void 0);
492
610
  __decorate([
493
611
  state()
494
612
  ], GuessTheYear.prototype, "_incident", void 0);
@@ -501,6 +619,12 @@ __decorate([
501
619
  __decorate([
502
620
  state()
503
621
  ], GuessTheYear.prototype, "_displaySolution", void 0);
622
+ __decorate([
623
+ state()
624
+ ], GuessTheYear.prototype, "_answeredCorrectly", void 0);
625
+ __decorate([
626
+ state()
627
+ ], GuessTheYear.prototype, "_tries", void 0);
504
628
  GuessTheYear = __decorate([
505
629
  customElement('guess-the-year')
506
630
  ], GuessTheYear);
package/dist/guess-the-year.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"guess-the-year.js","sourceRoot":"","sources":["../src/guess-the-year.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Task } from '@lit/task';\nconst { setTimeout } = window;\n\nimport { Incident, Categories } from './lib/Incident';\nimport { NoImageImg } from './lib/Icon';\nimport { ApiService } from './lib/ApiService';\nimport { Util } from './lib/Util';\nimport { i18nFactory } from './lib/i18n/i18n';\n\n@customElement('guess-the-year')\nexport class GuessTheYear extends LitElement {\n private _uuid = Math.random();\n private sources: Array<string> = [];\n private _loading = false;\n\n get loading() {\n return this._loading;\n }\n\n set loading(value: boolean) {\n this._loading = value;\n }\n\n @property({ type: String, attribute: 'tee-e-api-url' })\n teeeApiUrl: string = 'https://api.tee-e.com';\n\n @property({ type: Boolean, attribute: 'report-broken-images' })\n reportBrokenImages: boolean = false;\n\n @property({ type: String })\n date: string = '';\n\n @property({ type: String })\n country: string = '';\n\n @property({ type: String })\n category: string = '';\n\n @property({ type: String })\n emotion: string = '';\n\n @property({ type: String })\n impact: string = '';\n\n @property({ type: String })\n from: string = '';\n\n @property({ type: String })\n to: string = '';\n\n @property({ type: String })\n limit: string = '';\n\n @property({ type: Boolean })\n shuffle: boolean = false;\n\n @property({ type: String, attribute: 'no-image-src' })\n noImageSrc: string = '';\n\n @property({ type: Boolean, attribute: 'suppress-images' })\n suppressImages: boolean = false;\n\n @property({ type: Boolean, attribute: 'auto-focus' })\n autoFocus: boolean = false;\n\n @property({ type: String, attribute: 'hint-interval-length' })\n hintIntervalSecs: string = '7';\n\n @property({ type: String, attribute: 'max-amount-hints' })\n maxAmountHints: string = '3';\n\n @state()\n private _incident: Incident | undefined = undefined;\n\n @state()\n private _hint: Incident | undefined = undefined;\n\n @state()\n private _solution: Number | undefined = undefined;\n\n @state()\n private _displaySolution: boolean = false;\n\n // _answer is stored as string because it will be entered character for character\n private _answer: string = '';\n\n private _apiService = new ApiService(this.teeeApiUrl);\n private _interval: any; // interval handler\n private _intervalsPassed: number = 0;\n private i18n = i18nFactory('nl-nl');\n\n static override styles = css`\n :host {\n color: var(--guess-the-year-text-color, black);\n background: var(--guess-the-year-background-color, white);\n }\n\n .guess-the-year-container {\n position: relative;\n }\n\n .guess-the-year-tile-content {\n position: relative;\n margin: 0;\n padding: 0;\n background-color: var(--guess-the-year-background-color);\n min-height: var(--guess-the-year-tile-min-height, 375px);\n max-height: var(--guess-the-year-tile-max-height, 70vh);\n }\n\n .guess-the-year-hint-tile {\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n width: 75%;\n margin: auto;\n }\n\n .guess-the-year-hint-tile h1.title {\n background-color: var(\n --guess-the-year-hint-title-background-color,\n #3f387c\n );\n }\n\n div.solution {\n position: absolute;\n inset: 50% 0px 0px;\n font-size: 70pt;\n color: var(--guess-the-year-solution-color, blue);\n font-weight: bold;\n text-shadow: 2px 2px #0000009e;\n }\n\n div.submit-possibility {\n // position: absolute;\n // top: 70%;\n left: 0;\n right: 0;\n margin: 2px;\n }\n\n div.submit-possibility input {\n font-size: 14pt;\n font-family: var(--guess-the-year-font-family, courier);\n text-align: center;\n line-height: 1.5;\n }\n\n h1 {\n background-color: var(\n --guess-the-year-title-background-color,\n rgba(255, 255, 255, 0.7)\n );\n color: var(--guess-the-year-title-color, rgba(0, 0, 0, 1));\n font-size: var(--guess-the-year-title-font-size, 16px);\n margin: 0;\n padding: 4px 24px 4px 4px;\n }\n\n .guess-the-year-tile.with-image h1 {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n }\n\n img {\n border: 0;\n margin: 0;\n padding: 0;\n display: block;\n width: 100%;\n object-fit: cover;\n object-position: center;\n min-height: var(--guess-the-year-tile-min-height, 375px);\n max-height: var(--guess-the-year-tile-max-height, 70vh);\n }\n\n p {\n margin: 0;\n padding: 4px;\n background-color: var(\n --guess-the-year-text-background-color,\n rgba(255, 255, 255, 0.5)\n );\n color: var(--guess-the-year-text-color, rgba(0, 0, 0, 1));\n font-size: var(--guess-the-year-text-font-size, 14px);\n }\n\n .guess-the-year-tile.with-image p {\n position: var(--guess-the-year-text-position, absolute);\n bottom: 0;\n left: 0;\n right: 0;\n max-height: var(--guess-the-year-text-max-height, 150px);\n overflow-y: auto;\n }\n\n hr {\n background-image: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n var(--guess-the-year-ruler-color, rgba(0, 0, 0, 1)),\n rgba(0, 0, 0, 0)\n );\n border: 0;\n height: 1px;\n margin-top: 32px;\n }\n\n span.category-icon {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n color: var(\n --guess-the-year-icon-color,\n var(--guess-the-year-title-color, rgba(0, 0, 0, 1))\n );\n margin: 4px;\n }\n\n span.category-icon svg {\n width: 24px;\n }\n\n div.guess-the-year-sources {\n font-size: var(--guess-the-year-attribution-font-size, 'inherit');\n color: var(--guess-the-year-attribution-font-color, 'inherit');\n }\n `;\n\n constructor() {\n super();\n }\n\n override connectedCallback() {\n console.debug('connectedCallback');\n super.connectedCallback();\n\n // Debounce a little bit\n setTimeout(() => {\n const year = Number((this._incident?.yearplusmonth || '').substring(0, 4));\n if (year) {\n this._solution = year;\n }\n }, 500);\n\n this._interval = setInterval(async () => {\n this._intervalsPassed += 1;\n if (this._intervalsPassed <= Number(this.maxAmountHints)) {\n console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${this._solution}`);\n const response: { incident: Incident | undefined, sources: string[] } = await this._apiService.fetchOneIncident(\n this.country,\n Util.shuffleArray(Categories).shift(),\n undefined,\n undefined,\n '',\n `${this._solution}-01-01`,\n `${this._solution}-12-31`,\n undefined\n )\n this._hint = response.incident;\n }\n else {\n this._hint = undefined;\n this._displaySolution = true;\n clearInterval(this._interval);\n }\n }, Number(this.hintIntervalSecs) * 1000);\n }\n\n override disconnectedCallback() {\n console.debug('disconnectedCallback');\n super.disconnectedCallback();\n clearInterval(this._interval);\n }\n\n override attributeChangedCallback(\n name: string,\n _old: string | null,\n value: string | null\n ): void {\n console.debug('attributeChangedCallback: ', name, _old, value);\n super.attributeChangedCallback(name, _old, value);\n }\n\n override firstUpdated(changedProperties: PropertyValues): void {\n console.debug('firstUpdated');\n super.firstUpdated(changedProperties);\n\n // handle answer events\n if (this?.shadowRoot?.querySelector('#answer')) {\n if (this.autoFocus) {\n (this?.shadowRoot?.querySelector('#answer') as HTMLElement).focus();\n }\n\n this?.shadowRoot?.querySelector('#answer')?.addEventListener('input', (event: any) => {\n this._answer = event?.target?.value;\n // Display the answer when 4 characters have been inputted.\n if (this._answer.length === 4) {\n if (Number(this._answer) === Number(this._solution)) {\n document.documentElement.style.setProperty('--guess-the-year-solution-color', 'green');\n }\n else {\n document.documentElement.style.setProperty('--guess-the-year-solution-color', 'red');\n }\n this._displaySolution = true;\n }\n });\n }\n }\n\n override shouldUpdate(changedProperties: PropertyValues): boolean {\n console.debug('shouldUpdate');\n return super.shouldUpdate(changedProperties);\n }\n\n override update(changedProperties: PropertyValues) {\n console.debug('update');\n return super.update(changedProperties);\n }\n\n override updated(changedProperties: PropertyValues) {\n console.debug('updated');\n return super.updated(changedProperties);\n }\n\n override render() {\n console.debug('render');\n return html`\n <div class=\"guess-the-year-container\">\n ${this._incidentsTask.render({\n pending: () => html`Loading data...`,\n complete: () => html`${this.renderTiles(this._incident)}`,\n })}\n ${this.renderSubmitPossibility()}\n ${this.renderSources()}\n ${this.renderHintTile(this._hint)}\n ${this.renderTheSolution()}\n </div>\n `;\n }\n\n renderSubmitPossibility(): TemplateResult {\n if (!this._displaySolution) {\n return html`<div class=\"submit-possibility\">\n <input type=\"text\" id=\"answer\" size=\"15\" @focus placeholder=\"${this.i18n.translate('your-answer')}\"/>\n </div>`;\n }\n return html``;\n }\n\n renderTheSolution(): TemplateResult {\n if (this._displaySolution) {\n return html`<div class=\"solution\">${this._solution}</div>`;\n }\n return html``;\n }\n\n renderTiles(incident: Incident | undefined) {\n console.debug('renderTiles');\n if (!incident) {\n return '';\n }\n return html`${this.renderTile(incident)}`;\n }\n\n private _tileShouldDisplayAnImage(incident: Incident): boolean {\n const hasImage = !!incident.image;\n const displayImages = !this.suppressImages;\n return hasImage && displayImages;\n }\n\n renderTile(incident: Incident): TemplateResult {\n console.debug('renderTile');\n const tileContent: TemplateResult = this.renderTileContent(incident);\n if (this._tileShouldDisplayAnImage(incident)) {\n return html`<div class=\"guess-the-year-tile with-image\">\n ${tileContent}\n </div>`;\n }\n\n return html`<div class=\"guess-the-year-tile\">${tileContent}</div>`;\n }\n\n renderTileContent(incident: Incident): TemplateResult {\n console.debug('renderTileContent');\n return html`<div class=\"guess-the-year-tile-content\">\n ${this.renderTileTitle(incident)}\n ${this.renderTileImage(incident)}\n ${this.renderTileTextContent(incident)}\n </div>`;\n }\n\n private _generateHintText(hintIncident: Incident): string {\n let hint = '';\n const hintTemplates = this.i18n.HintTemplates[hintIncident.category];\n switch (hintIncident.category) {\n case 'newsItem':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || '').replace(/__TITLE__/, hintIncident.title);\n break;\n case 'radioSong':\n // The title property of radioSongs always follow this pattern: track - artist\n const track = hintIncident.title.replace(/(.*?)\\s+\\-.*/, '$1');\n const artist = hintIncident.title.replace(/.*\\-(.*)/, '$1');\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__ARTIST__/, artist).replace(/__TRACK__/, track);\n break;\n case 'cinemaMovie':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'tech':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'newsPresenter':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'sports':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n }\n return hint;\n }\n\n renderHintTile(hint: Incident | undefined): TemplateResult {\n if (hint) {\n console.debug('renderHint');\n return html`<div class=\"guess-the-year-hint-tile\">\n <h1 class=\"title\">Hint ${this._intervalsPassed} <br/> ${this._generateHintText(hint)}</h1>\n ${this.renderTileTextContent(hint)}\n </div>`;\n }\n return html``;\n }\n\n renderTileTitle(incident: Incident): TemplateResult {\n console.debug('renderTileTitle');\n if (incident.title) {\n return html`<h1 class=\"guess-the-year-tile-title\">${incident.title}</h1>`;\n }\n return html``;\n }\n\n renderTileImage(incident: Incident): TemplateResult {\n console.debug('renderTileImage');\n if (this._tileShouldDisplayAnImage(incident)) {\n return html`<img\n @error=${this._handleImageLoadError}\n src=${incident.image}\n />`;\n }\n return html``;\n }\n\n renderTileTextContent(incident: Incident): TemplateResult {\n console.debug('renderTileTextContent');\n if (incident.text) {\n return html`<p>${incident.text}</p>`;\n }\n return html``;\n }\n\n renderSources(): TemplateResult {\n console.debug('renderSources');\n if (!this.sources.length) {\n return html``;\n }\n return html`\n <div class=\"guess-the-year-sources\">Source: ${this.sources.join(', ')}</div>\n `;\n }\n\n private _incidentsTask: Task = new Task(this, {\n task: async ([\n country,\n category,\n emotion,\n impact,\n date,\n from,\n to,\n ]) => {\n console.debug('incidentsTask');\n if (!this.loading) {\n this.loading = true;\n const response: { incident: Incident | undefined, sources: string[] } = await this._apiService.fetchOneIncident(\n country,\n category,\n emotion,\n impact,\n date,\n from,\n to,\n '40',\n );\n this.loading = false;\n this._incident = response.incident;\n this.sources = response.sources;\n }\n },\n args: () => [\n this.country,\n this.category,\n this.emotion,\n this.impact,\n this.date,\n this.from,\n this.to,\n ],\n });\n\n _handleImageLoadError = (evt: Event) => {\n console.debug(`Error loading image: ${evt}`, evt);\n // grab the image element that triggered the error\n const targetImage = evt.target as HTMLImageElement;\n\n // find out which no image source needs to be used\n const noImageSrc = this.noImageSrc || NoImageImg;\n\n // don't try to set the image source if it\n // has already been set\n if (targetImage.src == noImageSrc) {\n return;\n }\n\n // report broken images back to the server if set.\n // Assume we show only one incident.\n if (this.reportBrokenImages) {\n if (this._incident) {\n this._apiService.postDataQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');\n }\n }\n\n // wait a bit before setting the image\n // so we don't hammer the no image server\n setTimeout(() => {\n targetImage.src = noImageSrc;\n }, 250);\n\n return false;\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'guess-the-year': GuessTheYear;\n }\n}\n"]}
1
+ {"version":3,"file":"guess-the-year.js","sourceRoot":"","sources":["../src/guess-the-year.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;AAE9B,OAAO,EAAY,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,KAAK,GAAG,SAAS,CAAC;AACxB,MAAM,GAAG,GAAG,SAAS,CAAC;AACtB,MAAM,KAAK,GAAG,MAAM,CAAC;AAEd,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAO1C,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,IAAI,OAAO,CAAC,KAAc;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAiQD;QACE,KAAK,EAAE,CAAC;QA9QF,eAAU,GAAS,IAAI,IAAI,EAAE,CAAC;QAC9B,aAAQ,GAAS,IAAI,IAAI,EAAE,CAAC;QAC5B,UAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,YAAO,GAAkB,EAAE,CAAC;QAC5B,aAAQ,GAAG,KAAK,CAAC;QAWzB,eAAU,GAAW,uBAAuB,CAAC;QAG7C,uBAAkB,GAAY,KAAK,CAAC;QAGpC,SAAI,GAAW,EAAE,CAAC;QAGlB,YAAO,GAAW,EAAE,CAAC;QAGrB,aAAQ,GAAW,EAAE,CAAC;QAGtB,YAAO,GAAW,EAAE,CAAC;QAGrB,WAAM,GAAW,EAAE,CAAC;QAGpB,SAAI,GAAW,EAAE,CAAC;QAGlB,OAAE,GAAW,EAAE,CAAC;QAGhB,UAAK,GAAW,EAAE,CAAC;QAGnB,YAAO,GAAY,KAAK,CAAC;QAGzB,iBAAY,GAAY,KAAK,CAAC;QAG9B,iBAAY,GAAY,KAAK,CAAC;QAG9B,eAAU,GAAW,EAAE,CAAC;QAGxB,mBAAc,GAAY,KAAK,CAAC;QAGhC,cAAS,GAAY,KAAK,CAAC;QAG3B,qBAAgB,GAAW,CAAC,CAAC;QAG7B,aAAQ,GAAW,CAAC,CAAC;QAGrB,aAAQ,GAAW,CAAC,CAAC;QAGb,cAAS,GAAyB,SAAS,CAAC;QAG5C,UAAK,GAAyB,SAAS,CAAC;QAGxC,cAAS,GAAuB,SAAS,CAAC;QAG1C,qBAAgB,GAAY,KAAK,CAAC;QAGlC,uBAAkB,GAAY,KAAK,CAAC;QAGpC,WAAM,GAAW,CAAC,CAAC;QAE3B,iFAAiF;QACzE,YAAO,GAAW,EAAE,CAAC;QAErB,gBAAW,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE9C,qBAAgB,GAAW,CAAC,CAAC;QAC7B,SAAI,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;QAmf5B,mBAAc,GAAS,IAAI,IAAI,CAAC,IAAI,EAAE;YAC5C,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;gBACjB,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;gBAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBACpB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;oBAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC;YACD,IAAI,EAAE,GAAG,EAAE,CAAC;gBACV,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,MAAM;gBACX,IAAI,CAAC,IAAI;gBACT,IAAI,CAAC,IAAI;gBACT,IAAI,CAAC,EAAE;aACR;SACF,CAAC,CAAC;QAEH,0BAAqB,GAAG,CAAC,GAAU,EAAE,EAAE;YACrC,OAAO,CAAC,KAAK,CAAC,wBAAwB,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC;YAClD,kDAAkD;YAClD,MAAM,WAAW,GAAG,GAAG,CAAC,MAA0B,CAAC;YAEnD,kDAAkD;YAClD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC;YAEjD,0CAA0C;YAC1C,uBAAuB;YACvB,IAAI,WAAW,CAAC,GAAG,IAAI,UAAU,EAAE,CAAC;gBAClC,OAAO;YACT,CAAC;YAED,kDAAkD;YAClD,oCAAoC;YACpC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,CAAC,4BAA4B,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAC;gBACpH,CAAC;YACH,CAAC;YAED,sCAAsC;YACtC,yCAAyC;YACzC,UAAU,CAAC,GAAG,EAAE;gBACd,WAAW,CAAC,GAAG,GAAG,UAAU,CAAC;YAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;IApXF,CAAC;IAEQ,iBAAiB;QACxB,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACnC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAEQ,oBAAoB;QAC3B,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QACtC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACvC,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,IAAmB,EACnB,KAAoB;QAEpB,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/D,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,YAAY,CAAC,OAAY,EAAE,KAAa;;QACtC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC9E,CAAC;IAEQ,YAAY,CAAC,iBAAiC;;QACrD,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC9B,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,uBAAuB;QACvB,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/C,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE;;gBACnF,IAAI,CAAC,OAAO,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC;gBACpC,2DAA2D;gBAC3D,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;oBAC9B,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBAC1E,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;wBAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;wBAC7B,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;oBACtC,CAAC;yBACI,CAAC;wBACJ,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;oBACpC,CAAC;oBACD,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC;oBACjB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;wBACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;oBAC/B,CAAC;oBACD,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;oBAC7B,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,yBAAyB;QACzB,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC;YACjD,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;gBACtF,MAAM,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;gBAC9B,MAAM,QAAQ,GAAW,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;gBACxC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;gBACvD,UAAU,CAAC,GAAG,EAAE;oBACd,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;gBACrB,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,CAAC,2BAA2B,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBAC5E,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC9B,OAAO,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAEQ,MAAM,CAAC,iBAAiC;QAC/C,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACxB,OAAO,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACzC,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzB,OAAO,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACb,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACxB,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,mBAAmB,EAAE;UACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,iBAAiB;YACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;SAC1D,CAAC;UACI,IAAI,CAAC,uBAAuB,EAAE;UAC9B,IAAI,CAAC,yBAAyB,EAAE;UAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;UAC/B,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,YAAY;;QAChB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,MAAM,QAAQ,GAA0D,MAAM,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC7G,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,EAAE,EACP,IAAI,CACL,CAAA;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,IAAI,EAAE,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA,MAAA,QAAQ,CAAC,QAAQ,0CAAE,aAAa,KAAI,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACpC,MAAM,kBAAkB,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QACtE,IAAI,kBAAkB,EAAE,CAAC;YACtB,kBAAuC,CAAC,KAAK,GAAG,EAAE,CAAC;YACpD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBAClB,kBAAkC,CAAC,KAAK,EAAE,CAAC;YAC9C,CAAC;QACH,CAAC;QACD,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACrC,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;YAC7C,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC;YAC3B,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC3C,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,wBAAwB,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;gBACvH,MAAM,QAAQ,GAA0D,MAAM,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC7G,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,EACrC,SAAS,EACT,SAAS,EACT,EAAE,EACF,GAAG,IAAI,CAAC,SAAS,QAAQ,EACzB,GAAG,IAAI,CAAC,SAAS,QAAQ,EACzB,SAAS,CACV,CAAA;gBACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC;YACjC,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;QAEjC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,mBAAmB;QACjB,OAAO,IAAI,CAAA,6CAA6C,IAAI,CAAC,YAAY,WAAW,UAAU,CAAC,cAAc,CAAC,eAAe,CAAC;IAChI,CAAC;IAGD,yBAAyB;QACvB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO,IAAI,CAAA;gEAC+C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC;WACzF,CAAC;QACR,CAAC;aACI,CAAC;YACJ,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED,uBAAuB;QACrB,OAAO,IAAI,CAAA;2DAC4C,IAAI,CAAC,gBAAgB,iBAAiB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;QAC3H,IAAI,CAAC,WAAW,EAAE;WACf,CAAC;IACV,CAAC;IAED,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QAC5D,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAA,uBAAuB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QACjH,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAA,yBAAyB,IAAI,CAAC,SAAS;QAChD,IAAI,CAAC,iBAAiB,EAAE;OACzB,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;QAC5G,MAAM,OAAO,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC;QAChE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACjD,OAAO,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC;QAC9G,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,QAA8B;QACxC,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC5C,CAAC;IAEO,yBAAyB,CAAC,QAAkB;QAClD,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;QAClC,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAC3C,OAAO,QAAQ,IAAI,aAAa,CAAC;IACnC,CAAC;IAED,UAAU,CAAC,QAAkB;QAC3B,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC5B,MAAM,WAAW,GAAmB,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAA;UACP,WAAW;aACR,CAAC;QACV,CAAC;QAED,OAAO,IAAI,CAAA,oCAAoC,WAAW,QAAQ,CAAC;IACrE,CAAC;IAED,iBAAiB,CAAC,QAAkB;QAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACnC,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;UAC9B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;UAC9B,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC;aACjC,CAAC;IACZ,CAAC;IAEO,iBAAiB,CAAC,YAAsB;QAC9C,IAAI,IAAI,GAAG,EAAE,CAAC;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACrE,QAAQ,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC9B,KAAK,UAAU;gBACb,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;gBACxH,MAAM;YACR,KAAK,WAAW;gBACd,8EAA8E;gBAC9E,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBAC/D,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC5D,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;gBACvJ,MAAM;YACR,KAAK,aAAa;gBAChB,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtI,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtI,MAAM;YACR,KAAK,eAAe;gBAClB,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtI,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtI,MAAM;QACV,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc,CAAC,IAA0B;QACvC,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YAC5B,OAAO,IAAI,CAAA;iCACgB,IAAI,CAAC,gBAAgB,UAAU,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAClF,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;aAC7B,CAAC;QACV,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,eAAe,CAAC,QAAkB;QAChC,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA,yCAAyC,QAAQ,CAAC,KAAK,OAAO,CAAC;QAC5E,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,eAAe,CAAC,QAAkB;QAChC,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAA;iBACA,IAAI,CAAC,qBAAqB;cAC7B,QAAQ,CAAC,KAAK;SACnB,CAAC;QACN,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,qBAAqB,CAAC,QAAkB;QACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;QACvC,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,wBAAwB,QAAQ,CAAC,IAAI,MAAM,CAAC;QACzD,CAAC;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,aAAa;QACX,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAA;oDACqC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KACtE,CAAC;IACJ,CAAC;;AA/ee,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0K3B,AA1KqB,CA0KpB;AA5PF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDACV;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;wDAC3B;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACH;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAC1B;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAC1B;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAC9B;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;oDAC1B;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+CAC1B;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;sDACjC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAC9B;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAC9B;AAGb;IADP,KAAK,EAAE;+CAC4C;AAG5C;IADP,KAAK,EAAE;2CACwC;AAGxC;IADP,KAAK,EAAE;+CAC0C;AAG1C;IADP,KAAK,EAAE;sDACkC;AAGlC;IADP,KAAK,EAAE;wDACoC;AAGpC;IADP,KAAK,EAAE;4CACmB;AAxFhB,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAqoBxB","sourcesContent":["import { LitElement, css, html, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { Task } from '@lit/task';\nconst { setTimeout } = window;\n\nimport { Incident, Categories } from './lib/Incident';\nimport { NoImageImg, RefreshIconSVG } from './lib/Icon';\nimport { ApiService } from './lib/ApiService';\nimport { Util } from './lib/Util';\nimport { i18nFactory } from './lib/i18n/i18n';\n\nconst GREEN = '#07d207';\nconst RED = '#ec3737';\nconst BLACK = '#000';\n@customElement('guess-the-year')\nexport class GuessTheYear extends LitElement {\n private _startTime: Date = new Date();\n private _endTime: Date = new Date();\n private _uuid = Math.random();\n private sources: Array<string> = [];\n private _loading = false;\n\n get loading() {\n return this._loading;\n }\n\n set loading(value: boolean) {\n this._loading = value;\n }\n\n @property({ type: String, attribute: 'tee-e-api-url' })\n teeeApiUrl: string = 'https://api.tee-e.com';\n\n @property({ type: Boolean, attribute: 'report-broken-images' })\n reportBrokenImages: boolean = false;\n\n @property({ type: String })\n date: string = '';\n\n @property({ type: String })\n country: string = '';\n\n @property({ type: String })\n category: string = '';\n\n @property({ type: String })\n emotion: string = '';\n\n @property({ type: String })\n impact: string = '';\n\n @property({ type: String })\n from: string = '';\n\n @property({ type: String })\n to: string = '';\n\n @property({ type: String })\n limit: string = '';\n\n @property({ type: Boolean })\n shuffle: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-duration' })\n showDuration: boolean = false;\n\n @property({ type: Boolean, attribute: 'show-feedback' })\n showFeedback: boolean = false;\n\n @property({ type: String, attribute: 'no-image-src' })\n noImageSrc: string = '';\n\n @property({ type: Boolean, attribute: 'suppress-images' })\n suppressImages: boolean = false;\n\n @property({ type: Boolean, attribute: 'auto-focus' })\n autoFocus: boolean = false;\n\n @property({ type: Number, attribute: 'hint-interval-length' })\n hintIntervalSecs: number = 7;\n\n @property({ type: Number, attribute: 'max-hints' })\n maxHints: number = 3;\n\n @property({ type: Number, attribute: 'max-tries' })\n maxTries: number = 1;\n\n @state()\n private _incident: Incident | undefined = undefined;\n\n @state()\n private _hint: Incident | undefined = undefined;\n\n @state()\n private _solution: Number | undefined = undefined;\n\n @state()\n private _displaySolution: boolean = false;\n\n @state()\n private _answeredCorrectly: boolean = false;\n\n @state()\n private _tries: number = 0;\n\n // _answer is stored as string because it will be entered character for character\n private _answer: string = '';\n\n private _apiService = new ApiService(this.teeeApiUrl);\n private _intervalHandler: any;\n private _intervalsPassed: number = 0;\n private i18n = i18nFactory('nl-nl');\n\n static override styles = css` \n :host {\n color: var(--guess-the-year-text-color, black);\n background: var(--guess-the-year-background-color, white);\n }\n\n .guess-the-year-container {\n position: relative;\n }\n\n .guess-the-year-tile-content {\n position: relative;\n margin: 0;\n padding: 0;\n background-color: var(--guess-the-year-background-color);\n min-height: var(--guess-the-year-tile-min-height, 375px);\n max-height: var(--guess-the-year-tile-max-height, 70vh);\n }\n\n .guess-the-year-hint-tile {\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n width: 75%;\n margin: auto;\n }\n\n div.feedback-possibility {\n position: absolute;\n top: 2px;\n right: 4px;\n }\n\n .guess-the-year-hint-tile h1.title {\n background-color: var(\n --guess-the-year-hint-title-background-color,\n #3f387c\n );\n }\n\n .guess-the-year-hint-tile .hint-text {\n background-color: var(\n --guess-the-year-hint-text-background-color,\n #bebbd8e3\n );\n max-height: 40vh;\n overflow: scroll;\n }\n\n div.solution {\n position: absolute;\n inset: 50% 0px 0px;\n font-size: 70pt;\n color: var(--guess-the-year-solution-color, #b768cf);\n font-weight: bold;\n text-shadow: 2px 2px #0000009e;\n }\n\n div.timer {\n font-size: x-small;\n }\n\n div.submit-possibility {\n left: 0;\n right: 0;\n margin: 2px;\n }\n\n div.submit-possibility input {\n font-size: 14pt;\n font-family: var(--guess-the-year-font-family, courier);\n text-align: center;\n line-height: 1.5;\n }\n\n div.refresh {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 32px;\n }\n\n span.tries {\n font-size: 8pt;\n }\n\n h1 {\n background-color: var(\n --guess-the-year-title-background-color,\n rgba(255, 255, 255, 0.7)\n );\n color: var(--guess-the-year-title-color, rgba(0, 0, 0, 1));\n font-size: var(--guess-the-year-title-font-size, 16px);\n margin: 0;\n padding: 4px 24px 4px 4px;\n }\n\n .guess-the-year-tile.with-image h1 {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n }\n\n img {\n border: 0;\n margin: 0;\n padding: 0;\n display: block;\n width: 100%;\n object-fit: cover;\n object-position: center;\n min-height: var(--guess-the-year-tile-min-height, 375px);\n max-height: var(--guess-the-year-tile-max-height, 70vh);\n }\n\n p {\n margin: 0;\n padding: 4px;\n background-color: var(\n --guess-the-year-text-background-color,\n rgba(255, 255, 255, 0.5)\n );\n color: var(--guess-the-year-text-color, rgba(0, 0, 0, 1));\n font-size: var(--guess-the-year-text-font-size, 14px);\n }\n\n .guess-the-year-tile.with-image p {\n position: var(--guess-the-year-text-position, absolute);\n bottom: 0;\n left: 0;\n right: 0;\n max-height: var(--guess-the-year-text-max-height, 150px);\n overflow-y: auto;\n }\n\n hr {\n background-image: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n var(--guess-the-year-ruler-color, rgba(0, 0, 0, 1)),\n rgba(0, 0, 0, 0)\n );\n border: 0;\n height: 1px;\n margin-top: 32px;\n }\n\n span.category-icon {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n color: var(\n --guess-the-year-icon-color,\n var(--guess-the-year-title-color, rgba(0, 0, 0, 1))\n );\n margin: 4px;\n }\n\n span.category-icon svg {\n width: 24px;\n }\n\n div.guess-the-year-sources {\n font-size: var(--guess-the-year-attribution-font-size, 'inherit');\n color: var(--guess-the-year-attribution-font-color, 'inherit');\n }\n `;\n\n constructor() {\n super();\n }\n\n override connectedCallback() {\n console.debug('connectedCallback');\n super.connectedCallback();\n }\n\n override disconnectedCallback() {\n console.debug('disconnectedCallback');\n super.disconnectedCallback();\n clearInterval(this._intervalHandler);\n }\n\n override attributeChangedCallback(\n name: string,\n _old: string | null,\n value: string | null\n ): void {\n console.debug('attributeChangedCallback: ', name, _old, value);\n super.attributeChangedCallback(name, _old, value);\n }\n\n colorElement(element: any, color: string) {\n this?.shadowRoot?.querySelector(element)?.style.setProperty('color', color);\n }\n\n override firstUpdated(changedProperties: PropertyValues): void {\n console.debug('firstUpdated');\n super.firstUpdated(changedProperties);\n\n // handle answer events\n if (this?.shadowRoot?.querySelector('#answer')) {\n this?.shadowRoot?.querySelector('#answer')?.addEventListener('input', (event: any) => {\n this._answer = event?.target?.value;\n // Display the answer when 4 characters have been inputted.\n if (this._answer.length === 4) {\n this._answeredCorrectly = Number(this._answer) === Number(this._solution);\n if (this._answeredCorrectly) {\n this._displaySolution = true;\n this.colorElement('#answer', GREEN);\n }\n else {\n this.colorElement('#answer', RED);\n }\n this._tries -= 1;\n if (this._tries <= 0) {\n this._displaySolution = true;\n }\n if (this._displaySolution) {\n this._endTime = new Date();\n }\n }\n });\n }\n\n // handle feedback events\n if (this?.shadowRoot?.querySelector('#feedback')) {\n this?.shadowRoot?.querySelector('#feedback')?.addEventListener('change', (event: any) => {\n const element = event?.target;\n const feedback: string = element?.value;\n element.value = this.i18n.translate('sending') + '...';\n setTimeout(() => {\n element.value = '';\n }, 1000);\n if (this._incident) {\n this._apiService.postIncidentQualityFeedback(this._incident.id, feedback);\n }\n });\n }\n }\n\n override shouldUpdate(changedProperties: PropertyValues): boolean {\n console.debug('shouldUpdate');\n return super.shouldUpdate(changedProperties);\n }\n\n override update(changedProperties: PropertyValues) {\n console.debug('update');\n return super.update(changedProperties);\n }\n\n override updated(changedProperties: PropertyValues) {\n console.debug('updated');\n return super.updated(changedProperties);\n }\n\n override render() {\n console.debug('render');\n return html`\n <div class=\"guess-the-year-container\">\n ${this.renderRefreshButton()}\n ${this._incidentsTask.render({\n pending: () => html`Loading data...`,\n complete: () => html`${this.renderTiles(this._incident)}`,\n })}\n ${this.renderSubmitPossibility()}\n ${this.renderFeedbackPossibility()}\n ${this.renderHintTile(this._hint)}\n ${this.renderTheSolution()}\n ${this.renderSources()}\n </div>\n `;\n }\n\n async setupNewGame(): Promise<void> {\n console.log('new game!');\n this._incident = undefined;\n this._hint = undefined;\n const response: { incident: Incident | undefined, sources: string[] } = await this._apiService.fetchOneIncident(\n this.country,\n this.category,\n this.emotion,\n this.impact,\n this.date,\n this.from,\n this.to,\n '40'\n )\n this._startTime = new Date();\n this._endTime = new Date();\n this._incident = response.incident;\n this.sources = response.sources;\n this._tries = this.maxTries;\n this._solution = Number((response.incident?.yearplusmonth || '').substring(0, 4));\n this._displaySolution = false;\n this._intervalsPassed = 0;\n this._answer = '';\n this.colorElement('#answer', BLACK);\n const answerInputElement = this?.shadowRoot?.querySelector('#answer');\n if (answerInputElement) {\n (answerInputElement as HTMLInputElement).value = '';\n if (this.autoFocus) {\n (answerInputElement as HTMLElement).focus();\n }\n }\n clearInterval(this._intervalHandler);\n this._intervalHandler = setInterval(async () => {\n this._intervalsPassed += 1;\n if (this._intervalsPassed <= this.maxHints) {\n console.log(`${new Date().getTime()} - ${this._uuid} (${this._intervalsPassed}): get hint for year ${this._solution}`);\n const response: { incident: Incident | undefined, sources: string[] } = await this._apiService.fetchOneIncident(\n this.country,\n Util.shuffleArray(Categories).shift(),\n undefined,\n undefined,\n '',\n `${this._solution}-01-01`,\n `${this._solution}-12-31`,\n undefined\n )\n this._hint = response.incident;\n }\n else {\n this._hint = undefined;\n this._displaySolution = true;\n clearInterval(this._intervalHandler);\n }\n }, this.hintIntervalSecs * 1000);\n\n this.requestUpdate();\n }\n\n renderRefreshButton(): TemplateResult {\n return html`<div class=\"refresh\" id=\"refresh\" @click=\"${this.setupNewGame}\"><span>${unsafeHTML(RefreshIconSVG)}</span></div>`;\n }\n\n\n renderFeedbackPossibility(): TemplateResult {\n if (this.showFeedback) {\n return html`<div class=\"feedback-possibility\">\n <input type=\"text\" id=\"feedback\" size=\"15\" placeholder=\"${this.i18n.translate('your-feedback')}\"/>\n </div>`;\n }\n else {\n return html``;\n }\n }\n\n renderSubmitPossibility(): TemplateResult {\n return html`<div class=\"submit-possibility\">\n <input type=\"text\" id=\"answer\" size=\"15\" ?disabled=${this._displaySolution} placeholder=\"${this.i18n.translate('your-answer')}\"/>\n ${this.renderTries()}\n </div>`;\n }\n\n renderTries(): TemplateResult {\n const i18nKey = this._tries > 1 ? 'tries-left' : 'try-left';\n if (this._tries && !this._displaySolution) {\n return html`<span class=\"tries\">${this.i18n.translate(i18nKey).replace('__TRIES__', '' + this._tries)}</span>`;\n }\n return html``;\n }\n\n renderTheSolution(): TemplateResult {\n if (this._displaySolution) {\n return html`<div class=\"solution\">${this._solution}</div>\n ${this.renderTheDuration()}\n `;\n }\n return html``;\n }\n\n renderTheDuration(): TemplateResult {\n const duration = Math.round(new Date(this._endTime.getTime() - this._startTime.getTime()).getTime() / 1000);\n const i18nKey = duration > 1 ? 'in-x-seconds' : 'in-one-second';\n if (this.showDuration && this._answeredCorrectly) {\n return html`<div class=\"timer\">${this.i18n.translate(i18nKey).replace('__SECONDS__', '' + duration)}</div>`;\n }\n return html``;\n }\n\n renderTiles(incident: Incident | undefined) {\n console.debug('renderTiles');\n if (!incident) {\n return '';\n }\n return html`${this.renderTile(incident)}`;\n }\n\n private _tileShouldDisplayAnImage(incident: Incident): boolean {\n const hasImage = !!incident.image;\n const displayImages = !this.suppressImages;\n return hasImage && displayImages;\n }\n\n renderTile(incident: Incident): TemplateResult {\n console.debug('renderTile');\n const tileContent: TemplateResult = this.renderTileContent(incident);\n if (this._tileShouldDisplayAnImage(incident)) {\n return html`<div class=\"guess-the-year-tile with-image\">\n ${tileContent}\n </div>`;\n }\n\n return html`<div class=\"guess-the-year-tile\">${tileContent}</div>`;\n }\n\n renderTileContent(incident: Incident): TemplateResult {\n console.debug('renderTileContent');\n return html`<div class=\"guess-the-year-tile-content\">\n ${this.renderTileTitle(incident)}\n ${this.renderTileImage(incident)}\n ${this.renderTileTextContent(incident)}\n </div>`;\n }\n\n private _generateHintText(hintIncident: Incident): string {\n let hint = '';\n const hintTemplates = this.i18n.HintTemplates[hintIncident.category];\n switch (hintIncident.category) {\n case 'newsItem':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || '').replace(/__TITLE__/, hintIncident.title);\n break;\n case 'radioSong':\n // The title property of radioSongs always follow this pattern: track - artist\n const track = hintIncident.title.replace(/(.*?)\\s+\\-.*/, '$1');\n const artist = hintIncident.title.replace(/.*\\-(.*)/, '$1');\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__ARTIST__/, artist).replace(/__TRACK__/, track);\n break;\n case 'cinemaMovie':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'tech':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'newsPresenter':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n case 'sports':\n hint = (hintTemplates[Math.round(Math.random() * hintTemplates.length)] || hintTemplates[0]).replace(/__TITLE__/, hintIncident.title);\n break;\n }\n return hint;\n }\n\n renderHintTile(hint: Incident | undefined): TemplateResult {\n if (hint) {\n console.debug('renderHint');\n return html`<div class=\"guess-the-year-hint-tile\">\n <h1 class=\"title\">Hint ${this._intervalsPassed} <br/> ${this._generateHintText(hint)}</h1>\n ${this.renderTileTextContent(hint)}\n </div>`;\n }\n return html``;\n }\n\n renderTileTitle(incident: Incident): TemplateResult {\n console.debug('renderTileTitle');\n if (incident.title) {\n return html`<h1 class=\"guess-the-year-tile-title\">${incident.title}</h1>`;\n }\n return html``;\n }\n\n renderTileImage(incident: Incident): TemplateResult {\n console.debug('renderTileImage');\n if (this._tileShouldDisplayAnImage(incident)) {\n return html`<img\n @error=${this._handleImageLoadError}\n src=${incident.image}\n />`;\n }\n return html``;\n }\n\n renderTileTextContent(incident: Incident): TemplateResult {\n console.debug('renderTileTextContent');\n if (incident.text) {\n return html`<p class=\"hint-text\">${incident.text}</p>`;\n }\n return html``;\n }\n\n renderSources(): TemplateResult {\n console.debug('renderSources');\n if (!this.sources.length) {\n return html``;\n }\n return html`\n <div class=\"guess-the-year-sources\">Source: ${this.sources.join(', ')}</div>\n `;\n }\n\n private _incidentsTask: Task = new Task(this, {\n task: async ([]) => {\n console.debug('incidentsTask');\n if (!this.loading) {\n this.loading = true;\n await this.setupNewGame();\n this.loading = false;\n }\n },\n args: () => [\n this.country,\n this.category,\n this.emotion,\n this.impact,\n this.date,\n this.from,\n this.to,\n ],\n });\n\n _handleImageLoadError = (evt: Event) => {\n console.debug(`Error loading image: ${evt}`, evt);\n // grab the image element that triggered the error\n const targetImage = evt.target as HTMLImageElement;\n\n // find out which no image source needs to be used\n const noImageSrc = this.noImageSrc || NoImageImg;\n\n // don't try to set the image source if it\n // has already been set\n if (targetImage.src == noImageSrc) {\n return;\n }\n\n // report broken images back to the server if set.\n // Assume we show only one incident.\n if (this.reportBrokenImages) {\n if (this._incident) {\n this._apiService.postAttributeQualityFeedback(this._incident.id, 'image', targetImage.src, 'image url is broken');\n }\n }\n\n // wait a bit before setting the image\n // so we don't hammer the no image server\n setTimeout(() => {\n targetImage.src = noImageSrc;\n }, 250);\n\n return false;\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'guess-the-year': GuessTheYear;\n }\n}\n"]}