playground elm

|> Playground-elm

Mon terrain de jeu que j'utilise pour jouer avec des technologies fantaisistes et passionnantes. Celui-ci est pour l'orme.

But

Le but de ce terrain de jeu est d'explorer, d'étudier et d'évaluer la langue de l'orme - un langage délicieux pour les webapps fiables.

Les vitrines sont destinées à être:

• Simple : assez simple et compréhensible. Chaque vitrine est implémentée dans un seul fichier ELM.
• Exploratoire :
  • Mettez en évidence certains aspects du langage ELM, comme l'immuabilité, la réactivité, la performance et l'interopérabilité avec d'autres bibliothèques JS et des cadres CSS.
  • Explorez certains modèles architecturaux / design autour du spa statique / sans serveur réactif
• Playable : autant que possible, offre un contenu utile et agréable.

? Vitrines

Visiter le? site de démonstration et jouez dans votre navigateur.

La démo est un SPA pur (application au bord du client 100%) écrit en orme.

Liste des vitrines:

• GLSL: un effet d'électricité WebGL dynamique créé avec des shaders GLSL, avec une rotation 3D interactive avec une inertie lisse.

• Soundwave Toggle: Un bouton à bascule à ondes sonores simple rendu dans SVG.

• DAPP: Une application décentralisée simple (DAPP) qui interface avec divers portefeuilles, en utilisant EIP-6963.

• Astéroïdes: un simple clone des astéroïdes de jeu classique, implémenté dans l'ELM à l'aide du motif du système des composants d'entité (ECS), rendu avec SVG.

• Terme: un terminal Web qui évalue le code JavaScript à l'aide de ports ELM pour l'interactivité.

• Physique: un moteur physique simple utilisant l'algorithme d'intégration Verlet, rendu sur une toile HTML5.

• Maze: un générateur de labyrinthe fabriqué en utilisant l'algorithme récursif de retour de retour.

• Horloge numérique: une démo d'horloge numérique, représentée visuellement à l'aide de SVG.

• Lissajous: Animation des figures de Lissajous, représentée dans SVG.

• CALC: Une calculatrice de base conçue pour des opérations arithmétiques simples.

? Bâtiment et course

Elm 0,19

Elm 0.19 m'a brisé autant d'autres codeurs, en raison de nombreux changements sur les sujets que j'ai utilisés dans ce projet avec la version précédente:

• fichier elm.json
• Décodage JSON
• Conversions String / Int / Float
• Application du navigateur, routage
• Gestion de l'URL
• Date d'heure ( Posix , Zone )
• Beaucoup de packages incompatibles
• ...

J'ai finalement réussi à migrer vers cette nouvelle version, mais les instabilités peuvent cependant être remarquées.

Condition préalable

Assurez-vous d'installer correctement les suivants:

• Node.js v18.17 (hydrogène)
• PNPM v8.3

Construire

Le projet s'appuie désormais sur ParcelJS, un bundler d'application Web qui gère l'ELM construit gratuitement.

Au début, tous les packages de nœuds dont dépend ce projet doit être installé localement. Cela peut être fait avec la commande suivante:

pnpm install

La construction peut être lancée avec:

pnpm build

Ensuite, ouvrez ./dist/index.html Fichier dans votre navigateur.

Si vous préférez, le site peut être publié par un serveur HTTP local. Dans ce mode, si une modification est détectée, la construction du projet sera recommencé et le site est automatiquement mis à jour dans le navigateur; Ce qui est bien pendant les phases de développement.

La publication est lancée avec la commande suivante:

pnpm serve

Le site est accessible via le "/ point de terminaison.

? Technologies

• elm : Elm

  Avec les forfaits suivants (principaux et non exhaustifs):

  • Vector Chadtech / Elm
  • AVH4 / ELM-Color
  • Cuducos / Elm-Format-Number
  • Elm-Explorations / Marqueur
  • simonh1000 / elm-colorpicker
  • Joakin / Elm-Canvas
  • wsowens / terme
  • MacCasouTreach / Graphicsvg
  • Harboschloo / Elm-ECS
  • Brianhicks / Elm-particule
  • Elm-Explorations / Webgl
  • NPHOLLON / GEO3D

• parceljs : Bundler d'application Web

• bulma : le cadre CSS moderne

Licence

MIT © Chris Camel