WIP

app/frontend/packs/App/App.purs

@@ -6,9 +6,6 @@ import App.Api.Client as Api
 import App.Command.Command as Command
 import App.Command.CommandManager as CommandManager
 import App.Drawer.PieceActor as PieceActor
-import App.EaselJS.Rectangle (Rectangle)
-import App.EaselJS.Rectangle as Rectangle
-import App.EaselJS.Ticker as Ticker
 import App.Firestore (FirebaseToken(..))
 import App.Firestore as Firestore
 import App.GameManager (GameManager)
@@ -22,6 +19,9 @@ import App.Interactor.TouchInteractor as TouchInteractor
 import App.Logger as Logger
 import App.Model.Game (Game(..), GameId(..))
 import App.Model.Puzzle (Puzzle, PuzzleId(..))
+import App.Pixi.Rectangle (Rectangle)
+import App.Pixi.Rectangle as Rectangle
+import App.Pixi.Ticker as Ticker
 import App.Utils as Utils
 import Data.Argonaut (jsonParser)
 import Data.Array as Array
@@ -42,15 +42,17 @@ import Web.DOM.NodeList as NodeList
 import Web.DOM.ParentNode (QuerySelector(..), querySelector, querySelectorAll)
 import Web.Event.Event (EventType(..))
 import Web.Event.EventTarget (addEventListener, eventListener)
+import Web.HTML (HTMLCanvasElement)
 import Web.HTML as HTML
+import Web.HTML.HTMLCanvasElement as HTMLCanvasElement
 import Web.HTML.HTMLDocument (toDocument, toParentNode)
 import Web.HTML.HTMLMediaElement as HTMLMediaElement
 import Web.HTML.Window as Window
 
 type App =
   { playboard :: Element
-  , baseCanvas :: Element
-  , activeCanvas :: Element
+  , baseCanvas :: HTMLCanvasElement
+  , activeCanvas :: HTMLCanvasElement
   , picture :: Element
   , sounds :: Element
   , log :: Element
@@ -67,8 +69,14 @@ init = do
 
   doc <- Window.document =<< HTML.window
   playboard <- query "#playboard"
-  baseCanvas <- query "#base-canvas"
-  activeCanvas <- query "#active-canvas"
+  baseCanvas <-
+    query "#base-canvas"
+    >>= HTMLCanvasElement.fromElement
+    >>> throwOnNothing "Not Canvas element"
+  activeCanvas <-
+    query "#active-canvas"
+    >>= HTMLCanvasElement.fromElement
+    >>> throwOnNothing "Not Canvas element"
   picture <- query "#picture"
   sounds <- query "#sounds"
   log <- query "#log"
@@ -194,11 +202,11 @@ setupLogger app = do
 
 setupUi :: GameManager -> App -> Effect Unit
 setupUi manager app = do
-  Ticker.onTick do
-    fps <- Ticker.getMeasuredFPS
-    query "#info .fps"
-      >>= Element.toNode
-      >>> Node.setTextContent (show $ Int.round fps)
+  -- Ticker.onTick do
+  --   fps <- Ticker.getMeasuredFPS
+  --   query "#info .fps"
+  --     >>= Element.toNode
+  --     >>> Node.setTextContent (show $ Int.round fps)
 
   Utils.fadeInSlow app.activeCanvas
   Utils.fadeInSlow app.baseCanvas

app/frontend/packs/App/Command/Command.purs

@@ -9,8 +9,8 @@ import App.Command.RotateCommand as RotateCommand
 import App.Command.TranslateCommand (TranslateCommand)
 import App.Command.TranslateCommand as TranslateCommand
 import App.Drawer.Transform (Transform)
-import App.EaselJS.Point (Point)
-import App.EaselJS.Point as Point
+import App.Pixi.Point (Point)
+import App.Pixi.Point as Point
 import App.GameManager (GameManager)
 import Data.Argonaut (class DecodeJson, class EncodeJson, Json, decodeJson, encodeJson, (.:))
 

app/frontend/packs/App/Command/RotateCommand.purs

@@ -3,12 +3,13 @@ module App.Command.RotateCommand where
 import AppPrelude
 
 import App.Drawer.PieceActor as PieceActor
-import App.EaselJS.Matrix2D as Matrix2D
-import App.EaselJS.Point (Point)
-import App.EaselJS.Point as Point
 import App.GameManager (GameManager)
 import App.GameManager as GameManager
+import App.Pixi.Matrix as Matrix
+import App.Pixi.Point (Point)
+import App.Pixi.Point as Point
 import Effect.Ref as Ref
+import Math as Math
 
 
 type RotateCommand =
@@ -33,14 +34,14 @@ create piece_id center degree =
 execute :: GameManager -> RotateCommand -> Effect Unit
 execute game cmd = do
   let mtx =
-        Matrix2D.create
-        # Matrix2D.translate cmd.center.x cmd.center.y
-        # Matrix2D.rotate cmd.degree
-        # Matrix2D.translate (-cmd.center.x) (-cmd.center.y)
+        Matrix.create
+        # Matrix.translate (-cmd.center.x) (-cmd.center.y)
+        # Matrix.rotate (cmd.degree * Math.pi / 180.0)
+        # Matrix.translate cmd.center.x cmd.center.y
   actor <- GameManager.findPieceActor game cmd.piece_id
   actor.transform # Ref.modify_ \{ position, rotation } ->
-    { position: Matrix2D.apply position mtx
-    , rotation: rotation + cmd.degree
+    { position: Matrix.apply position mtx
+    , rotation: rotation + cmd.degree * Math.pi / 180.0
     }
 
 

app/frontend/packs/App/Command/TranslateCommand.purs

@@ -3,8 +3,8 @@ module App.Command.TranslateCommand where
 import AppPrelude
 
 import App.Drawer.PieceActor as PieceActor
-import App.EaselJS.Point (Point)
-import App.EaselJS.Point as Point
+import App.Pixi.Point (Point)
+import App.Pixi.Point as Point
 import App.GameManager (GameManager)
 import App.GameManager as GameManager
 import Effect.Ref as Ref

app/frontend/packs/App/Drawer/PieceActor.purs

@@ -3,14 +3,14 @@ module App.Drawer.PieceActor where
 import AppPrelude
 
 import App.Drawer.Transform (Transform)
-import App.EaselJS.Container as Container
-import App.EaselJS.DisplayObject as DisplayObject
-import App.EaselJS.Matrix2D as Matrix2D
-import App.EaselJS.Point as Point
-import App.EaselJS.Rectangle (Rectangle)
-import App.EaselJS.Rectangle as Rectangle
-import App.EaselJS.Shape as Shape
-import App.EaselJS.Type (Container, Shape, DisplayObject)
+import App.Pixi.Container as Container
+import App.Pixi.DisplayObject as DisplayObject
+import App.Pixi.Matrix as Matrix
+import App.Pixi.Point as Point
+import App.Pixi.Rectangle (Rectangle)
+import App.Pixi.Rectangle as Rectangle
+import App.Pixi.Shape as Shape
+import App.Pixi.Type (Container, Shape, DisplayObject)
 import App.Model.Piece (Piece)
 import App.Model.Piece as Piece
 import Data.Array as Array
@@ -63,18 +63,18 @@ getBoundary actor = do
   boundary <- Ref.read actor.localBoundary
   { position, rotation } <- Ref.read actor.transform
   let mtx =
-        Matrix2D.create
-        # Matrix2D.translate position.x position.y
-        # Matrix2D.rotate rotation
+        Matrix.create
+        # Matrix.rotate rotation
+        # Matrix.translate position.x position.y
   pure
     $ Array.foldr Rectangle.addPoint Rectangle.empty
-    $ (\pt -> Matrix2D.apply pt mtx) <$> Rectangle.cornerPoints boundary
+    $ (\pt -> Matrix.apply pt mtx) <$> Rectangle.cornerPoints boundary
 
 
 updateFace :: PieceActor -> Effect Unit
 updateFace actor = do
   t <- Ref.read actor.transform
-  DisplayObject.update t =<< getFace actor
+  DisplayObject.update { position: t.position, rotation: t.rotation } =<< getFace actor
 
 
 merge :: PieceActor -> PieceActor -> Effect Unit

app/frontend/packs/App/Drawer/PieceDrawer.purs

@@ -3,12 +3,12 @@ module App.Drawer.PieceDrawer where
 import AppPrelude
 
 import App.Drawer.PieceActor (PieceActor)
-import App.EaselJS.DisplayObject as DisplayObject
-import App.EaselJS.Graphics (Graphics)
-import App.EaselJS.Graphics as G
-import App.EaselJS.Point (Point)
-import App.EaselJS.Rectangle as Rectangle
-import App.EaselJS.Shape as Shape
+import App.Pixi.DisplayObject as DisplayObject
+import App.Pixi.Graphics (Graphics)
+import App.Pixi.Graphics as G
+import App.Pixi.Point (Point)
+import App.Pixi.Rectangle as Rectangle
+import App.Pixi.Shape as Shape
 import App.Model.Piece (Loop)
 import Data.Array as Array
 import Effect.Ref as Ref
@@ -40,49 +40,41 @@ draw actor drawer = do
   let g = actor.shape.graphics
   G.clear g
 
-  bool
-    (G.beginFill "rgba(127, 191, 255, 0.5)")
-    (maybe (G.beginFill "#f33") G.beginBitmapFill drawer.image)
-    drawer.drawsImage g
+  -- bool
+  --   (G.beginFill "rgba(127, 191, 255, 0.5)")
+  --   (maybe (G.beginFill "#f33") G.beginBitmapFill drawer.image)
+  --   drawer.drawsImage g
+  G.beginFill (G.rgb 127 191 255) 0.5 g
 
   when drawer.drawsStroke do
-    G.setStrokeStyle 2.0 g
-    G.beginStroke "#faf" g
+    G.setLineStyle { width: 2.0, color: G.rgb 255 125 255 } g
 
   traverse_ (\loop -> drawCurve loop g) actor.body.loops
 
   G.endFill g
-  G.endStroke g
+  G.closePath g
 
   when drawer.drawsBoundary do
     rect <- Ref.read actor.localBoundary
-    G.setStrokeStyle 2.0 g
-    G.beginStroke "#0f0" g
+    G.setLineStyle { width: 1.0, color: G.rgb 0 255 0 } g
     G.drawRect rect g
-    G.endStroke g
+    G.closePath g
 
   when drawer.drawsControlLine do
-    G.setStrokeStyle 1.0 g
-    G.beginStroke "#663" g
+    G.setLineStyle { width: 1.0, color: G.rgb 80 80 40 } g
     traverse_ (\loop -> drawPolyline loop g) actor.body.loops
-    G.endStroke g
+    G.closePath g
 
   when drawer.drawsCenter do
     pt <- Rectangle.center <$> Ref.read actor.localBoundary
-    G.setStrokeStyle 2.0 g
-    G.beginFill "#3f9" g
+    G.setLineStyle { width: 0.0 } g
+    G.beginFill (G.rgb 40 255 124) 0.8 g
     G.drawCircle pt 8.0 g
     G.endFill g
 
   when drawer.createsHitArea do
     rect <- Ref.read actor.localBoundary
-    shape <- Shape.create
-    let g' = shape.graphics
-    G.beginFill "#000" g'
-    G.drawRect rect g'
-    G.endFill g'
-
-    DisplayObject.setHitArea (Shape.toDisplayObject shape)
+    DisplayObject.setHitArea rect
       $ Shape.toDisplayObject actor.shape
 
 

app/frontend/packs/App/Drawer/PuzzleActor.purs

@@ -2,9 +2,9 @@ module App.Drawer.PuzzleActor where
 
 import AppPrelude
 
-import App.EaselJS.Container as Container
-import App.EaselJS.Shape as Shape
-import App.EaselJS.Type (Container, Shape)
+import App.Pixi.Container as Container
+import App.Pixi.Shape as Shape
+import App.Pixi.Type (Container, Shape)
 import App.Model.Puzzle (Puzzle)
 
 

app/frontend/packs/App/Drawer/PuzzleDrawer.purs

@@ -3,9 +3,10 @@ module App.Drawer.PuzzleDrawer where
 import AppPrelude
 
 import App.Drawer.PuzzleActor (PuzzleActor)
-import App.EaselJS.Graphics (Graphics)
-import App.EaselJS.Graphics as G
-import App.EaselJS.Point as Point
+import App.Pixi.Graphics (Graphics)
+import App.Pixi.Graphics as G
+import App.Pixi.Point as Point
+import App.Pixi.Rectangle as Rectangle
 import Data.Array as Array
 import Data.Int as Int
 
@@ -16,21 +17,29 @@ type PuzzleDrawer =
 draw :: PuzzleActor -> PuzzleDrawer -> Effect Unit
 draw actor drawer = do
   let g = actor.shape.graphics
-  G.clear g
+  g # G.clear
   when drawer.drawsGuide $ drawGuide g
 
 drawGuide :: Graphics -> Effect Unit
 drawGuide g = do
-  G.setStrokeStyle 1.0 g
-  G.beginStroke "rgba(127,255,255,0.7)" g
-  G.beginFill "rgba(127,255,255,0.5)" g
-  G.drawCircle Point.zero 5.0 g
+  g # G.setLineStyle { width: 1.0, color: G.rgb 0 255 0 }
+  g # G.beginFill (G.rgb 127 255 127) 0.5
+  g # G.drawCircle Point.zero 5.0
+  g # G.endFill
 
-  G.setStrokeStyle 1.0 g
-  G.beginStroke "rgba(127,255,255,0.7)" g
-  for_ (Array.range (-5) 5) \i -> do
+  g # G.setLineStyle { width: 1.0, color: G.rgb 255 255 100 }
+  g # G.drawRect (Rectangle.create (-547.5) (-730.0) 2190.0 2190.0)
+  g # G.drawCircle (Point.create 547.5 365.0) 5.0
+
+  let n0 = (-10)
+  let n1 = 10
+  for_ (Array.range n0 n1) \i -> do
     let f = Int.toNumber i
-    G.moveTo (Point.create (-500.0) (f * 100.0)) g
-    G.lineTo (Point.create 500.0 (f * 100.0)) g
-    G.moveTo (Point.create (f * 100.0) (-500.0)) g
-    G.lineTo (Point.create (f * 100.0) 500.0) g
+    g # G.setLineStyle
+      { width: bool 1.0 2.0 (i == 0)
+      , color: bool (G.rgb 155 255 100) (G.rgb 80 255 50) (i == 0)
+      }
+    g # G.moveTo (Point.create (Int.toNumber n0 * 100.0) (f * 100.0))
+    g # G.lineTo (Point.create (Int.toNumber n1 * 100.0) (f * 100.0))
+    g # G.moveTo (Point.create (f * 100.0) (Int.toNumber n0 * 100.0))
+    g # G.lineTo (Point.create (f * 100.0) (Int.toNumber n1 * 100.0))

app/frontend/packs/App/Drawer/Transform.purs

@@ -2,19 +2,19 @@ module App.Drawer.Transform where
 
 import AppPrelude
 
-import App.EaselJS.Matrix2D (Matrix2D)
-import App.EaselJS.Matrix2D as Matrix2D
-import App.EaselJS.Point (Point)
+import App.Pixi.Matrix (Matrix)
+import App.Pixi.Matrix as Matrix
+import App.Pixi.Point (Point)
 
 
 type Transform =
   { position :: Point
   , rotation :: Number
   }
 
-toMatrix :: Transform -> Matrix2D
+toMatrix :: Transform -> Matrix
 toMatrix t =
-  Matrix2D.create
-  # Matrix2D.translate t.position.x t.position.y
-  # Matrix2D.rotate t.rotation
+  Matrix.create
+  # Matrix.translate t.position.x t.position.y
+  # Matrix.rotate t.rotation