playground elm

|> playground-elm

สนามเด็กเล่นของฉันฉันใช้สำหรับการเล่นด้วยเทคโนโลยีแฟนซีและน่าตื่นเต้น อันนี้สำหรับ Elm

วัตถุประสงค์

จุดประสงค์ของสนามเด็กเล่นนี้คือการสำรวจศึกษาและประเมินภาษา Elm ซึ่งเป็นภาษาที่น่ายินดีสำหรับ WebApps ที่เชื่อถือได้

ภาพแสดงมีวัตถุประสงค์เพื่อ:

• เรียบง่าย : ค่อนข้างเรียบง่ายและเข้าใจได้ การแสดงทุกรายการจะถูกนำไปใช้ในไฟล์ ELM เดียว
• สำรวจ :
  • เน้น บางแง่มุมของภาษาเอล์มเช่นความไม่สามารถเปลี่ยนแปลงได้ปฏิกิริยาการทำงานและการทำงานร่วมกันกับไลบรารี JS อื่น ๆ และเฟรมเวิร์ก CSS
  • สำรวจ รูปแบบสถาปัตยกรรม/การออกแบบรอบ ๆ สปาแบบคงที่/แบบไม่มีเซิร์ฟเวอร์
• เล่นได้ : ให้มากที่สุดให้เนื้อหาที่มีประโยชน์และสนุกสนาน

- การแสดง

เยี่ยมชม? เว็บไซต์สาธิตและเล่นในเบราว์เซอร์ของคุณ

การสาธิตเป็นสปาบริสุทธิ์ (แอปพลิเคชันลูกค้า 100%) ที่เขียนใน Elm

รายการโชว์ผลงาน:

• GLSL: เอฟเฟกต์ไฟฟ้า WebGL แบบไดนามิกที่สร้างขึ้นด้วย Shaders GLSL ซึ่งมีการหมุน 3D แบบโต้ตอบด้วยความเฉื่อยที่ราบรื่น

• Soundwave Toggle: ปุ่มสลับคลื่นเสียงง่าย ๆ ที่แสดงใน SVG

• DAPP: แอปพลิเคชันกระจายอำนาจที่ตรงไปตรงมา (DAPP) ที่เชื่อมต่อกับกระเป๋าเงินต่าง ๆ ใช้ EIP-6963

• Asteroids: โคลนอย่างง่ายของเกม Asteroids คลาสสิกที่ใช้ใน ELM โดยใช้รูปแบบระบบองค์ประกอบเอนทิตี (ECS) แสดงด้วย SVG

• คำศัพท์: เทอร์มินัลบนเว็บที่ประเมินรหัส JavaScript โดยใช้พอร์ต ELM สำหรับการโต้ตอบ

• ฟิสิกส์: เครื่องยนต์ฟิสิกส์ที่ตรงไปตรงมาโดยใช้อัลกอริทึมการรวม Verlet ซึ่งแสดงบนผืนผ้าใบ HTML5

• เขาวงกต: เครื่องกำเนิดไฟฟ้าเขาวงกตที่สร้างขึ้นโดยใช้อัลกอริทึมการย้อนกลับแบบเรียกซ้ำ

• นาฬิกาดิจิตอล: การสาธิตนาฬิกาดิจิตอลแสดงภาพโดยใช้ SVG

• Lissajous: แอนิเมชั่นของตัวเลข Lissajous ซึ่งปรากฎใน SVG

• CALL: เครื่องคิดเลขพื้นฐานที่ออกแบบมาสำหรับการดำเนินการทางคณิตศาสตร์อย่างง่าย

- การสร้างและวิ่ง

Elm 0.19

Elm 0.19 ทำให้ฉันเป็นผู้เขียนโค้ดอื่น ๆ อีกมากมายเนื่องจากมีการเปลี่ยนแปลงมากมายในหัวข้อที่ฉันใช้ในโครงการนี้ด้วยเวอร์ชันก่อนหน้า:

• ไฟล์ elm.json
• การถอดรหัส JSON
• การแปลงสตริง / int / ลอย
• แอปพลิเคชันเบราว์เซอร์การกำหนดเส้นทาง
• การจัดการ URL
• เวลาวันที่ ( Posix , Zone )
• แพ็คเกจที่เข้ากันไม่ได้มากมาย
• -

ในที่สุดฉันก็สามารถโยกย้ายไปยังเวอร์ชันใหม่นี้ได้ แต่สามารถสังเกตเห็นความไม่แน่นอนได้

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าได้ติดตั้งอย่างถูกต้องต่อไปนี้:

• node.js v18.17 (ไฮโดรเจน)
• PNPM v8.3

สร้าง

ตอนนี้โครงการขึ้นอยู่กับ Parceljs ซึ่งเป็นเว็บแอปพลิเคชัน Bundler ซึ่งจัดการกับ Elm สร้างได้ฟรี

ในตอนแรกแพ็คเกจโหนดทั้งหมดโครงการนี้ขึ้นอยู่กับจะต้องติดตั้งในเครื่อง สามารถทำได้ด้วยคำสั่งต่อไปนี้:

pnpm install

บิลด์สามารถเปิดตัวได้ด้วย:

pnpm build

จากนั้นเปิดไฟล์ ./dist/index.html ในเบราว์เซอร์ของคุณ

หากคุณต้องการเว็บไซต์สามารถเผยแพร่โดยเซิร์ฟเวอร์ HTTP ในเครื่อง ในโหมดนี้หากตรวจพบการเปลี่ยนแปลงใด ๆ การสร้างโครงการจะเริ่มต้นอีกครั้งและเว็บไซต์อัปเดตโดยอัตโนมัติในเบราว์เซอร์ ซึ่งเป็นสิ่งที่ดีในระหว่างขั้นตอนการพัฒนา

สิ่งพิมพ์จะเปิดตัวด้วยคำสั่งต่อไปนี้:

pnpm serve

ไซต์สามารถเข้าถึงได้ผ่าน "/ จุดสิ้นสุด

- เทคโนโลยี

• elm : Elm

  ด้วยแพ็คเกจ (หลักและไม่ครบถ้วนสมบูรณ์) ต่อไปนี้:

  • Chadtech/Elm-Vector
  • AVH4/Elm-color
  • cuducos/elm-format-number
  • Elm-Explorations/Markdown
  • Simonh1000/Elm-Colorpicker
  • Joakin/Elm-Canvas
  • WSOWENS/เทอม
  • maccasoutreach/graphicsvg
  • Harmboschloo/Elm-ECS
  • Brianhicks/Elm-particle
  • Elm-Explorations/WebGL
  • nphollon/geo3d

• parceljs : เว็บแอปพลิเคชัน Bundler

• bulma : กรอบ CSS ที่ทันสมัย

ใบอนุญาต

MIT © Chris Camel