added more bindings, on mouse, and on key

gleam.toml

@@ -5,10 +5,10 @@ target = "javascript"
 # Fill out these fields if you intend to generate HTML documentation or publish
 # your project to the Hex package manager.
 #
-# description = ""
-# licences = ["Apache-2.0"]
-# repository = { type = "github", user = "username", repo = "project" }
-# links = [{ title = "Website", href = "https://gleam.run" }]
+description = "A simple game library providing p5.js bindings for Gleam to make basic games and animations"
+licences = ["MIT"]
+repository = { type = "github", user = "Acepie", repo = "p5js_gleam" }
+links = [{ title = "P5.js", href = "https://p5js.org/" }]
 #
 # For a full reference of all the available options, you can have a look at
 # https://gleam.run/writing-gleam/gleam-toml/.

scripts/generate_p5.ts

@@ -1,45 +1,106 @@
 const elements = {
-  createCanvas: ["width: Int", "height: Int"],
+  createCanvas: ["width: Float", "height: Float"],
   background: ["gray_scale: Int"],
-  ellipse: ["x_center: Int", "y_center: Int", "width: Int", "height: Int"],
+  ellipse: [
+    "x_center: Float",
+    "y_center: Float",
+    "width: Float",
+    "height: Float",
+  ],
+  circle: ["x_center: Float", "y_center: Float", "radius: Float"],
+  rectangle: [
+    "top_left_x: Float",
+    "top_left_y: Float",
+    "width: Float",
+    "height: Float",
+  ],
+  square: ["top_left_x: Float", "top_left_y: Float", "side_length: Float"],
+  line: [
+    "point1_x: Float",
+    "point1_y: Float",
+    "point2_x: Float",
+    "point2_y: Float",
+  ],
+  quad: [
+    "p1_x: Float",
+    "p1_y: Float",
+    "p2_x: Float",
+    "p2_y: Float",
+    "p3_x: Float",
+    "p3_y: Float",
+    "p4_x: Float",
+    "p4_y: Float",
+  ],
+  fill: ["color_hex: String"],
+  stroke: ["color_hex: String"],
+  strokeWeight: ["weight: Int"],
 };
 
 const camelToSnakeCase = (str: string) =>
   str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
 
 const js = (name: string) =>
   `export function ${name}(p, ...args) {
-  return p.${name}(...args);
+  p.${name}(...args);
+  return p;
 }
 
 `;
 
 const gleam = (name: string, args: string[]) =>
   `@external(javascript, "../p5js_ffi.mjs", "${name}")
 pub fn ${camelToSnakeCase(name)}(p: P5${args.length ? ", " : ""}${args.join(
-    ", "
-  )}) -> Nil
+    ", ",
+  )}) -> P5
 
 `;
 
-let outGleam = `pub type P5
+let outGleam = `import gleam/option.{type Option}
+
+pub type P5
+
+pub type SketchConfig(model) {
+  SketchConfig(
+    init: fn(P5) -> model,
+    draw: fn(P5, model) -> Nil,
+    on_tick: Option(fn(model) -> model),
+    on_key: Option(fn(String, model) -> model),
+    on_mouse: Option(fn(Float, Float, model) -> model),
+  )
+}
 
 @external(javascript, "../p5js_ffi.mjs", "startSketch")
-pub fn start_sketch(init: fn(P5) -> model, draw: fn(P5, model) -> Nil, on_tick: fn(model) -> model) -> Nil
+pub fn start_sketch(config: SketchConfig(model)) -> Nil
 
 `;
 
-let outJs = `export const startSketch = (setup, draw, tick) => {
+let outJs = `import { is_some, unwrap } from "../gleam_stdlib/gleam/option.mjs";
+
+export const startSketch = (config) => {
   let model;
   new p5(function (p) {
     p.setup = function () {
-      model = setup(p);
+      model = config.init(p);
     };
 
     p.draw = function () {
-      draw(p, model);
-      model = tick(model);
+      config.draw(p, model);
+      if (is_some(config.on_tick)) {
+        model = unwrap(config.on_tick)(model);
+      }
     };
+
+    if (is_some(config.on_key)) {
+      p.keyPressed = function () {
+        model = unwrap(config.on_key)(p.key, model);
+      }
+    }
+
+    if (is_some(config.on_mouse)) {
+      p.mouseClicked = function () {
+        model = unwrap(config.on_mouse)(p.pmouseX, p.pmouseY, model);
+      }
+    }
   });
 };
 

src/gen/p5js_gleam.gleam

@@ -1,23 +1,82 @@
+import gleam/option.{type Option}
+
 pub type P5
 
+pub type SketchConfig(model) {
+  SketchConfig(
+    init: fn(P5) -> model,
+    draw: fn(P5, model) -> Nil,
+    on_tick: Option(fn(model) -> model),
+    on_key: Option(fn(String, model) -> model),
+    on_mouse: Option(fn(Float, Float, model) -> model),
+  )
+}
+
 @external(javascript, "../p5js_ffi.mjs", "startSketch")
-pub fn start_sketch(
-  init: fn(P5) -> model,
-  draw: fn(P5, model) -> Nil,
-  on_tick: fn(model) -> model,
-) -> Nil
+pub fn start_sketch(config: SketchConfig(model)) -> Nil
 
 @external(javascript, "../p5js_ffi.mjs", "createCanvas")
-pub fn create_canvas(p: P5, width: Int, height: Int) -> Nil
+pub fn create_canvas(p: P5, width: Float, height: Float) -> P5
 
 @external(javascript, "../p5js_ffi.mjs", "background")
-pub fn background(p: P5, gray_scale: Int) -> Nil
+pub fn background(p: P5, gray_scale: Int) -> P5
 
 @external(javascript, "../p5js_ffi.mjs", "ellipse")
 pub fn ellipse(
   p: P5,
-  x_center: Int,
-  y_center: Int,
-  width: Int,
-  height: Int,
-) -> Nil
+  x_center: Float,
+  y_center: Float,
+  width: Float,
+  height: Float,
+) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "circle")
+pub fn circle(p: P5, x_center: Float, y_center: Float, radius: Float) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "rectangle")
+pub fn rectangle(
+  p: P5,
+  top_left_x: Float,
+  top_left_y: Float,
+  width: Float,
+  height: Float,
+) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "square")
+pub fn square(
+  p: P5,
+  top_left_x: Float,
+  top_left_y: Float,
+  side_length: Float,
+) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "line")
+pub fn line(
+  p: P5,
+  point1_x: Float,
+  point1_y: Float,
+  point2_x: Float,
+  point2_y: Float,
+) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "quad")
+pub fn quad(
+  p: P5,
+  p1_x: Float,
+  p1_y: Float,
+  p2_x: Float,
+  p2_y: Float,
+  p3_x: Float,
+  p3_y: Float,
+  p4_x: Float,
+  p4_y: Float,
+) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "fill")
+pub fn fill(p: P5, color_hex: String) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "stroke")
+pub fn stroke(p: P5, color_hex: String) -> P5
+
+@external(javascript, "../p5js_ffi.mjs", "strokeWeight")
+pub fn stroke_weight(p: P5, weight: Int) -> P5

src/p5js_ffi.mjs

@@ -1,26 +1,85 @@
-export const startSketch = (setup, draw, tick) => {
+import { is_some, unwrap } from "../gleam_stdlib/gleam/option.mjs";
+
+export const startSketch = (config) => {
   let model;
   new p5(function (p) {
     p.setup = function () {
-      model = setup(p);
+      model = config.init(p);
     };
 
     p.draw = function () {
-      draw(p, model);
-      model = tick(model);
+      config.draw(p, model);
+      if (is_some(config.on_tick)) {
+        model = unwrap(config.on_tick)(model);
+      }
     };
+
+    if (is_some(config.on_key)) {
+      p.keyPressed = function () {
+        model = unwrap(config.on_key)(p.key, model);
+      }
+    }
+
+    if (is_some(config.on_mouse)) {
+      p.mouseClicked = function () {
+        model = unwrap(config.on_mouse)(p.pmouseX, p.pmouseY, model);
+      }
+    }
   });
 };
 
 export function createCanvas(p, ...args) {
-  return p.createCanvas(...args);
+  p.createCanvas(...args);
+  return p;
 }
 
 export function background(p, ...args) {
-  return p.background(...args);
+  p.background(...args);
+  return p;
 }
 
 export function ellipse(p, ...args) {
-  return p.ellipse(...args);
+  p.ellipse(...args);
+  return p;
+}
+
+export function circle(p, ...args) {
+  p.circle(...args);
+  return p;
+}
+
+export function rectangle(p, ...args) {
+  p.rectangle(...args);
+  return p;
+}
+
+export function square(p, ...args) {
+  p.square(...args);
+  return p;
+}
+
+export function line(p, ...args) {
+  p.line(...args);
+  return p;
+}
+
+export function quad(p, ...args) {
+  p.quad(...args);
+  return p;
+}
+
+export function fill(p, ...args) {
+  p.fill(...args);
+  return p;
+}
+
+export function stroke(p, ...args) {
+  p.stroke(...args);
+  return p;
+}
+
+export function strokeWeight(p, ...args) {
+  p.strokeWeight(...args);
+  return p;
 }