Tijdlijn Tegelen
npm install guess-the-year-web-componentTijdlijn Tegelen is een webcomponent die je kunt gebruiken om een historisch spel aan je website toe te voegen.
$3
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.
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.$3
#### Set attributes statically
The guess-the-year element accepts parameters to control it's behaviour:
: 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
* : 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
$3
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 textDevelopment
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`