Created
February 8, 2019 22:13
-
-
Save dmitryshelomanov/5daf77088a33273575b4eeaafa1f033e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
open Webapi.Dom; | |
open Webapi.Canvas.Canvas2d; | |
open Webapi.Canvas.CanvasElement; | |
type position = (float, float); | |
type shape('s, 'a) = { | |
state: 's, | |
reducer: ('a, 's) => 's, | |
render: (shape('s, 'a)) => unit | |
}; | |
let getPositionByCenterOfMass = (~r: float, pos: position): position => { | |
let (x, y) = pos; | |
(x +. r, y +. r); | |
}; | |
type state = { | |
position, | |
radius: float, | |
}; | |
type action = | |
| Move(position); | |
let makeShape = (~pos, ~r, ctx: t) => { | |
state: { | |
position: pos, | |
radius: r, | |
}, | |
reducer: (action, state) => | |
switch (action) { | |
| Move(position) => ({ ...state, position }) | |
}, | |
render: (self) => { | |
let (x, y) = getPositionByCenterOfMass(~r=self.state.radius, self.state.position); | |
beginPath(ctx); | |
arc( | |
~x, | |
~y, | |
~r=self.state.radius, | |
~startAngle=0.0, | |
~endAngle=Js.Math._PI *. 2.0, | |
~anticw=false, | |
ctx, | |
); | |
fill(ctx); | |
} | |
}; | |
let main = () => { | |
let canvas = | |
switch (Document.getElementById("app", document)) { | |
| Some(element) => element | |
| None => failwith("canvas not found") | |
}; | |
let ctx = getContext2d(canvas); | |
let player = makeShape(~pos=(0.0, 0.0), ~r=10.0, ctx); | |
player.render(player); | |
}; | |
main(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment