guess-the-year-web-component
v2.3.0
Published
Guess the year
Downloads
24
Maintainers
Readme
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/[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
ormm-dd
(for 'on this date' capabilities)from
andto
: 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 imagereport-broken-images
: report broken images back to the server so that they can be repairedhint-interval-length
: the time (in seconds) waited before the first tip is displayed and the time between the tipsmax-hints
: the maximum amount of hints that will be displayedauto-focus
: set the focus on the answer input elementmax-tries
: maximum number of tries before the game stops. If not specified then the amount of tries will not be displayedshow-duration
: display the amount of seconds that it took to answer correctlyshow-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