|> playground-elm

My playground I use for playing with fancy and exciting technologies. This one's for elm.

🎯 Purpose

The purpose of this playground is to explore, study and assess the elm language — a delightful language for reliable webapps.

The showcases are intended to be:

• simple: Fairly simple and understandable. Every showcase is implemented in a single elm file.
• exploratory:
  • Highlight some aspects of the elm language, like immutability, reactiveness, performance and interoperability with other JS libraries and CSS frameworks.
  • Explore some architectural/design patterns around reactive static/serverless SPA
• playable: As much as possible, provides a useful and enjoyable content.

🍿 Showcases

Visit the 🔹 demo site and play in your browser. The demo is a pure SPA (100% clientside application) written in elm.

Calc

Calc is a very simple and basic calculator.

Links:
Play | Code

Digital clock

Simple digital clock using SVG.

💡 Demonstrates some capabilities of elm for displaying SVG content.

Links:
Play | Code

Lissajous

Animated Lissajous figures using SVG.

💡 Demonstrates how elm can deal with some basic mathematical and handle animated SVG rendering using MacCASOutreach/graphicsvg fantastic library.

Links:
Play | Code

Maze generator

Maze generator using a recursive backtracking algorithm with control of the generation process.

Links:
Play | Code

Physics Verlet engine

Very simple physics engine using Verlet Integration algorithm and rendered through an HTML5 canvas.

💡 Demonstrates how elm can deal with some basic mathematical and physical calculations, as well as basic rendering of objects in an HTML canvas, using elementary functions from the fantastic joakin/elm-canvas package.

ℹ️ Implementation is inspired from Making a Verlet Physics Engine in Javascript.

Links:
Play | Code

Term

A basic terminal (wsowens/term) which simply executes Javascript commands.

💡 Shows interoperability between elm environment and JavaScript through ports.

Links:
Play | Code

Asteroids Game

Pure and basic elm Asteroids game.

💡 Demonstrates how elm can deal with game development using SVG rendering and the ECS (Entity Component System) pattern provided by the awesome harmboschloo/elm-ecs package. Moreover, the explosion effects are generated by the fantastic BrianHicks/elm-particle package.

🚧 Under construction. Missing: the management of the collision of the spaceship with the asteroids, the management of the lives, the counting of the points, etc.

Links:
Play | Code

🛠 Building and Running

Elm 0.19

Elm 0.19 broke me as many other coders, due to a lot of changes on topics I used in this project with previous version:

• elm.json file
• JSON decoding
• String / Int / Float conversions
• Browser application, routing
• Url management
• date time (Posix, Zone)
• lots of incompatible packages
• ...

I finally managed to migrate to this new version but instabilities can be noticed though.

Prerequisites

Be sure to have the following properly installed:

• Node.js v18.17 (hydrogen)
• pnpm v8.3

Build

The project now relies on parceljs, a web application bundler which handles elm builds at free.

At first, all the node packages this project depends on must be installed locally. This can be done with the following command:

pnpm install

The build can be launched with:

pnpm build

Then, open ./dist/index.html file in your browser.

If you prefer, the site can be published by a local HTTP server. In this mode, if any change is detected, the build of the project will be started again, and the site automatically updated in the browser; which is nice during the development phases.

The publication is launched with the following command:

pnpm serve

The site is accessible through the http://localhost:1234/ endpoint.

🔋 Technologies

• elm: ELM

  With the following (main and non exhaustive) packages:

  • Chadtech/elm-vector
  • avh4/elm-color
  • cuducos/elm-format-number
  • elm-explorations/markdown
  • simonh1000/elm-colorpicker
  • joakin/elm-canvas
  • wsowens/term
  • MacCASOutreach/graphicsvg
  • harmboschloo/elm-ecs
  • BrianHicks/elm-particle

• parceljs: Web application bundler

• bootstrap: Free and open-source CSS framework

📜 License

MIT © Chris Camel