@hattrickltd/hattrick-components

Web components for Hattrick.org.

Usage no npm install needed!

<script type="module">
  import hattrickltdHattrickComponents from 'https://cdn.skypack.dev/@hattrickltd/hattrick-components';
</script>

README

Built With Stencil

Hattrick Components

This project contains a bunch of web components that we use on Hattrick.org and Hattrick Mobile. However, all of these components works independently of Hattrick, so if you want to use them on your site as well, go right ahead!

Using Hattrick Components

Script tag

  • Put a script tag like this (with the correct version) <script src="https://unpkg.com/hattrick-components@1.0.0/dist/hattrick-components.js"></script> in the head of your index.html.
  • Then you can use the element anywhere in your template, JSX, html etc.

Node Modules

  • Run npm install hattrick-components --save.
  • Put a script tag similar to this <script src="node_modules/hattrick-components/dist/hattrick-components.js"></script> in the head of your index.html.
  • Then you can use the element anywhere in your template, JSX, html etc.

If you're using these components in Angular, don't forget to add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your @NgModule.

Available components

These are the currently available Hattrick Components. For more details on how to use each component, see the respective readme.md linked in the table below.

From NPM, first go to Hattrick Components on GitHub for correct links.

Component Description
Avatar Used to display avatar in various styles by providing a JSON representation of the avatar parts.
Bar Used to display various bars, e.g. skill bars or formation experiences (not to be mistaken with sliders!).
Flip Used to display an element with both a front and a back which you can toggle vertically or horizontally.
Match clock A match clock which counts down during halftime and overtime breaks, also counts down if the match hasn't started yet.
Progress-arc Used to display circular progress meters, or in Hattrick used to display stamina.
Rating Used to display a Hattrick rating. Uses progress-arc to display stamina.
Timer A simple timer to display hh:mm:ss, optionally it can also start counting upwards if the deadline has passed.
Tooltip Provides a relatively customizable tooltip for custom mouseover titles that also supports HTML.

Hattrick Components <3 Stencil

Hattrick Components is built using Stencil.

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.