guess-the-year-web-component 1.0.1

package/LICENSE.md

@@ -0,0 +1 @@
+This software is licensed under [Creative Commons Attribution 4.0](https://creativecommons.org/licenses/by/4.0/).

package/README.md

@@ -0,0 +1,66 @@
+# 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@1.0.0"></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
+* `delay` : the time (in seconds) waited before the first tip is displayed and the time between the tips
+
+
+### Adjust the styling
+The guess-the-year element accepts css parameters to specify (significant parts of) it's styling:
+* `--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-image-min-height` : the minimum height of the image
+* `--guess-the-year-image-max-height` : the maximum height of the image
+* `--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
+
+## 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`