Tijdlijn Tegelen

Tijdlijn Tegelen is een webcomponent die je kunt gebruiken om een historisch spel aan je website toe te voegen.

Usage

Load the component

First load the javascript magic that defines our web component:

<script defer="defer" src="https://www.unpkg.com/[email protected]"></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
• max-hints : the maximum amount of hints that will be displayed
• suppress-images : do not display incident images

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-intro-background-color: the background color of the intro paragraphs
• --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

Requires Node LTS / Iron (v20). If not available use node version manager to install and manage different node versions on yout device.

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