new levels, added board port diagrams

dist/less/board-component.less

@@ -41,7 +41,6 @@
         }
 
         & #screen-background {
-            fill: #8AF85B;
         }
 
         & #screen-border {

dist/less/default.less

@@ -131,4 +131,14 @@ span.green { color: @green }
     & #title {
         font-size: 20px;
     }
+}
+
+.clearfix {
+  overflow: auto;
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
 }

dist/less/fonts.less

@@ -1,15 +1,4 @@
 @font-face {
   font-family: monogram;
   src: url(./fonts/monogram.ttf);
-}
-
-@font-face {
-  font-family: retro-computer;
-  src: url(./fonts/retro_computer_personal_use.ttf);
-}
-
-
-@font-face {
-  font-family: boxxy;
-  src: url(./fonts/boxxy.bdf);
 }

dist/less/sidebar-component.less

@@ -1,4 +1,10 @@
 #sidebar-component {
+    & > * {
+        display: inline-flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+
     & .port { color:red; }
     & .direction { color:darkgoldenrod; }
 
@@ -10,7 +16,49 @@
 
         & > div  {
             border: lightgray 2px solid;
-            //padding: lightgray 2px solid;
         }
     }
+
+    & .completion-status {
+        height: 100px;
+    }
+}
+
+
+.board-port-diagram {
+    @red: #f85b5b;
+    @green: #8af85b;
+    @grey: #8c7777;
+
+    width: 100px;
+    stroke: black;
+    fill: black;
+    flex: none;
+
+
+
+
+    & g[data-port-mismatch='port-expected'] {
+        stroke: @grey;
+        fill: @grey;
+        marker { fill: @grey; }
+    }
+
+    & g[data-port-mismatch='no-port-expected'], g[data-port-mismatch='incorrect-port-type'] {
+        stroke: @red;
+        fill: @red;
+        marker { fill: @red; }
+    }
+
+    & g[data-port-mismatch='incorrect-capacity'] {
+        & text {
+            stroke: @red;
+        }
+    }
+
+    & g[data-port-mismatch='no-mismatch'] {
+        stroke: @green;
+        fill: @green;
+        marker { fill: @green; }
+    }
 }

package.json

@@ -7,7 +7,7 @@
     "compile-css-watch": "nodemon --watch dist/less/* --exec 'npm run compile-css'",
     "build": "spago bundle-app --main Main --to dist/abed.js",
     "build-watch": "npm run compile-css-watch & npm run build -- --watch",
-    "build-prod": "spago -x prod.dhall build && purs-backend-es bundle-app --no-build --minify --to dist/abed.js && npm run compile-css", 
+    "build-prod": "spago -x prod.dhall build && purs-backend-es bundle-app --no-build --minify --to dist/abed.js && npm run compile-css",
     "test": "spago -x test.dhall test --purs-args '-g sourcemaps'",
     "test-watch": "npm run test -- --watch"
   },
@@ -16,9 +16,10 @@
     "less": "^4.2.0",
     "nodemon": "^3.0.1",
     "purescript": "^0.15.14",
-    "spago": "^0.21.0",
-    "purs-backend-es": "^1.4.2"
+    "purs-backend-es": "^1.4.2",
+    "spago": "^0.21.0"
   },
   "dependencies": {
+    "driver.js": "^1.3.1"
   }
 }

packages.dhall

@@ -103,4 +103,4 @@ let upstream =
         sha256:f91d36c7e4793fe4d7e042c57fef362ff3f9e9ba88454cd38686701e30bf545a
 in  upstream
   with halogen-svg-elems.repo = "https://github.com/MitchStevens/purescript-halogen-svg-elems.git"
-  with halogen-svg-elems.version = "a3ad0435165c483f04e8bbbeb604f98d938947e3"
+  with halogen-svg-elems.version = "df7b35f"

src/Component/Board.purs

@@ -54,7 +54,7 @@ import Debug (trace)
 import Effect.Aff.Class (class MonadAff)
 import Effect.Class (class MonadEffect, liftEffect)
 import Effect.Class.Console (log, logShow)
-import Game.Board (Board(..), _pieces, _size, addBoardPath, addPiece, buildEvaluableBoard, capacityRipple, decreaseSize, evalBoardM, evalWithPortInfo, getBoardPort, getPieceInfo, increaseSize, pieceDropped, removePiece, rotatePieceBy, runEvaluableM, toLocalInputs)
+import Game.Board (Board(..), _pieces, _size, addBoardPath, addPiece, buildEvaluableBoard, capacityRipple, decreaseSize, evalBoardM, evalWithPortInfo, getBoardPortEdge, getPieceInfo, increaseSize, pieceDropped, removePiece, rotatePieceBy, runEvaluableM, toLocalInputs)
 import Game.Capacity (maxValue)
 import Game.Direction (CardinalDirection, allDirections)
 import Game.Direction as Direction
@@ -218,7 +218,7 @@ component = mkComponent { eval , initialState , render }
         --updateStore (BoardEvent (RemovedPiece loc (name piece)))
       pure Nothing
     GetMouseOverLocation f -> do
-      maybeDst <- gets (_.mouseOverLocation)
+      maybeDst <- gets (_.isMouseOverLocation)
       pure (f <$> maybeDst)
     SetGoalPorts boardPorts -> do
       lift $ debug (tag "boardPorts" (show boardPorts)) "Set goal ports on board"
@@ -258,7 +258,7 @@ component = mkComponent { eval , initialState , render }
     PieceOutput (Piece.Dropped src) -> do
       lift $ debug M.empty ("Piece dropped at " <> show src)
       -- when a piece is dropped, it can be dropped over a new location or outside the game board 
-      maybeDst <- gets (_.mouseOverLocation)
+      maybeDst <- gets (_.isMouseOverLocation)
       eitherPiece <- liftBoardM (pieceDropped src maybeDst)
       case eitherPiece of
         Left boardError -> do
@@ -343,14 +343,14 @@ component = mkComponent { eval , initialState , render }
     -- can these events be simplified? do we need all of them?
     LocationOnDragEnter loc dragEvent -> do
       liftEffect $ preventDefault (toEvent dragEvent)
-      modify_ (_ { mouseOverLocation = Just loc } )
+      modify_ (_ { isMouseOverLocation = Just loc } )
     LocationOnDragOver loc dragEvent -> do
       liftEffect $ preventDefault (toEvent dragEvent)
     LocationOnDrop loc dragEvent -> do
-      modify_ (_ { mouseOverLocation = Just loc } )
+      modify_ (_ { isMouseOverLocation = Just loc } )
       liftEffect $ preventDefault (toEvent dragEvent)
     LocationOnDragLeave _ -> do
-      modify_ (_ { mouseOverLocation = Nothing } )
+      modify_ (_ { isMouseOverLocation = Nothing } )
     GlobalOnKeyDown ke -> do
       case key ke of
         "z" -> when (ctrlKey ke) (handleAction Undo)
@@ -363,7 +363,7 @@ component = mkComponent { eval , initialState , render }
 
     BoardPortOnMouseEnter dir -> do
       modify_ (_ { isMouseOverBoardPort = Just dir })
-      relativeEdge <- evalState (getBoardPort dir) <$> use _board
+      relativeEdge <- evalState (getBoardPortEdge dir) <$> use _board
       signals <- gets (_.lastEvalWithPortInfo)
       let focus = { info: _, relativeEdge } <$> M.lookup relativeEdge signals
       tell slot.multimeter unit (\_ -> Multimeter.NewFocus focus)

src/Component/Board/Types.purs

@@ -33,7 +33,7 @@ import Data.TraversableWithIndex (forWithIndex)
 import Data.Tuple (Tuple(..))
 import Data.Zipper (Zipper)
 import Data.Zipper as Z
-import Game.Board (Board(..), BoardError, BoardM, RelativeEdge, getBoardPort, runBoardM, standardBoard)
+import Game.Board (Board(..), BoardError, BoardM, RelativeEdge, getBoardPortEdge, runBoardM, standardBoard)
 import Game.Direction (CardinalDirection)
 import Game.Location (Location(..))
 import Game.Piece (Piece(..))
@@ -46,11 +46,10 @@ import Web.HTML.Event.DragEvent (DragEvent)
 import Web.UIEvent.KeyboardEvent (KeyboardEvent)
 import Web.UIEvent.MouseEvent (MouseEvent)
 
-type Input = Maybe Board
+type Input = { board ::Board }
 
 type State = 
   { boardHistory :: Zipper Board -- todo: limit the number of boards in this data structure
-  , mouseOverLocation :: Maybe Location
   , inputs :: Map CardinalDirection Signal
   , outputs :: Map CardinalDirection Signal
   , lastEvalWithPortInfo :: Map RelativeEdge PortInfo
@@ -60,6 +59,7 @@ type State =
     , locations :: Array Location
     }
   , isMouseOverBoardPort :: Maybe CardinalDirection
+  , isMouseOverLocation :: Maybe Location
   }
 
 data Query a
@@ -105,14 +105,14 @@ type Slots =
   )
 
 initialState :: Input -> State
-initialState maybeBoard = 
-  { boardHistory: Z.singleton (fromMaybe standardBoard maybeBoard)
-  , mouseOverLocation: Nothing
+initialState { board } = 
+  { boardHistory: Z.singleton board
   , boardPorts: M.empty
   , inputs: M.empty
   , outputs: M.empty
   , lastEvalWithPortInfo: M.empty
   , isCreatingWire: Nothing
+  , isMouseOverLocation: Nothing
   , isMouseOverBoardPort: Nothing
   }
 
@@ -138,7 +138,7 @@ boardPortInfo = do
   boardPorts <- gets (_.boardPorts)
   board <- use _board
   forWithIndex boardPorts \dir port -> do
-    let relEdge = evalState (getBoardPort dir) board
+    let relEdge = evalState (getBoardPortEdge dir) board
     gets (_.lastEvalWithPortInfo >>> M.lookup relEdge >>> fromMaybe { connected: false, port, signal: Signal 0})
 
 liftBoardM :: forall m a. MonadState State m => BoardM a -> m (Either BoardError (Tuple a Board))

src/Component/Lesson/Tutorial.js

@@ -0,0 +1,18 @@
+import { driver } from "driver.js";
+
+export const addPieceLesson = () => {
+    const idPiece = document.querySelector("div[data-avilable-piece='id-piece']")
+    const pieceLocation = document.querySelector("div[data-location='(0,1)']")
+
+    const driver = driver({
+        steps:
+            [ { element: idPiece, popover: { title: "Mouse down on the piece" }}
+            , { element: pieceLocation, popover: { title: "Drag the piece to the board" }}
+            ]
+    })
+
+    idPiece.addEventListener("mousedown", () => driver.moveNext(), { once: true})
+    pieceLocation.addEventListener("onDrop", () => driver.moveNext(), { once: true})
+
+    return driver.drive() 
+}

src/Component/Lesson/Tutorial.purs

@@ -0,0 +1,25 @@
+module Component.Lesson.Tutorial where
+
+import Prelude
+
+import Effect (Effect)
+
+{-
+  lessons:
+    addPiece
+    removePiece
+    movePiece
+    create path
+    using multimeter
+    changing capacity
+    toggleing input ports
+    increasing/decreasing input ports
+    runnning tests
+
+    undo/redo
+
+
+-}
+
+
+foreign import addPieceLesson :: Effect Unit