Interactive ESM Template

Prev Next

The ShuffleGame template is a fun example of how to write a large interactive brain-twister-game to show off what can be achieved in a HTML template.

  1. The game has two modes. One where the goal is to move the red tile to a highlighed area on the board and the other, a number-sorting game, where the goal is to end up with the numbered tiles ordered and the blank space in the lower right cell.
  2. The code-design is strictly Object Oriented.
  3. In modern browsers, (e.g. Chrome 61+), the template can be hosted without bundling, but we are including examples of bundling using either of ESBuild or WebPack. The ESBuild is done by command-line args, while a generic webpack_config.js is used for WebPack. This can be re-used for any template. Both output to "template.js" which is the same as TS-bundling would do for a classic (namespaced, non-module) template. This means the same script can be used for zip'ing both.