guess-the-year-web-component v2.1.0

Guess the year

Guess the year is a webcomponent you can use to add a historic game to your website.

Usage

Load the component

First load the javascript magic that defines our web component:

<script defer="defer" src="https://www.unpkg.com/guess-the-year-web-component@1.0.2"></script>

Use the new html tag

After this you can use a HTML element called 'guess-the-year' in your html page in which the incidents of a certain date (or date range) will be displayed. E.g.

<guess-the-year date="1993-03-03"></guess-the-year>

The guess-the-year element will use all the space it has been granted. To control this you can use css styling on the guess-the-year element itself or wrap it in a container that has controlled dimensions:

Please refer to index.html of this repo for a complete example.

Control the behaviour

Set attributes statically

The guess-the-year element accepts parameters to control it's behaviour:

• date : a specific date you want to retrieve incidents for. Format: yyyy-mm-dd or mm-dd (for 'on this date' capabilities)
• from and to : a period you want to retrieve incidents for. Format: yyyy-mm-dd
• country : fetch incidents that where newsworhty in this country(ies). Reference https://swagger.tee-e.com for a list of supported countries.
• category : fetch incidents for this category(ies). Reference https://swagger.tee-e.com for a list of supported categories.
• emotion : fetch incidents that match this emotion(s). Reference https://swagger.tee-e.com for a list of supported emotions.
• impact : fetch incidents had this impact(s). Reference https://swagger.tee-e.com for a list of supported emotions.
• no-image-src : what image should be shown when an incident's image is broken. Use a url or base64 encoded image
• report-broken-images : report broken images back to the server so that they can be repaired
• hint-interval-length : the time (in seconds) waited before the first tip is displayed and the time between the tips
• max-hints : the maximum amount of hints that will be displayed
• auto-focus : set the focus on the answer input element
• max-tries : maximum number of tries before the game stops. If not specified then the amount of tries will not be displayed
• show-duration : display the amount of seconds that it took to answer correctly
• show-feedback : display a feedback input field at the top right of the component

Adjust the styling

The guess-the-year element accepts css parameters to specify (significant parts of) it's styling:

• --guess-the-year-font-family : the font of the tile
• --guess-the-year-title-color : the text color of the title of the tile
• --guess-the-year-title-background-color: the background color of the title of the tile
• --guess-the-year-title-font-size : the font size of the title text of the tile
• --guess-the-year-text-color : the color of the content text of the tile
• --guess-the-year-text-background-color : the color of the background of the content of the tile
• --guess-the-year-text-font-size : the size of the title text of the tile
• --guess-the-year-text-max-height : the maximum height of the text of the tile
• --guess-the-year-background-color : the color of the background of the tile
• --guess-the-year-tile-min-height : the minimum height of the tile
• --guess-the-year-tile-max-height : the maximum height of the tile
• --guess-the-year-ruler-color : the color of the ruler that is displayed between two incidents vertically
• --guess-the-year-icon-color : the color of the incident's category icon
• --guess-the-year-attribution-font-size : the font size of the list of attributions / sources
• --guess-the-year-attribution-font-color : the font color of the list of attributions / sources
• --guess-the-year-solution-color : the color of the solution
• --guess-the-year-hint-title-background-color : color of hint title
• --guess-the-year-hint-text-background-color : color of hint text

Development

Fetch all packages: npm ci
Run the application: npm run develop
Navigate to http://localhost:8000

Publication

Fetch all packages: npm ci
Version the application: npm version major|minor|patch
Build the application: npm run build:prod
Logon at npmjs.org: npm login
Publish the application: npm publish
Fix access tokens in npmjs.org in case of 403

Runtime

Needs permissions for:

• attribute-yearplusmonth
• filter-seed
• filter-maxlasted