Add a primitive system for shifting tiles around the mouse

elm.json

@@ -14,6 +14,7 @@
             "elm/url": "1.0.0",
             "elm-community/array-extra": "2.6.0",
             "elm-community/html-extra": "3.4.0",
+            "elm-community/maybe-extra": "5.3.0",
             "elm-community/string-extra": "4.0.1"
         },
         "indirect": {

src/Main.elm

@@ -9,12 +9,13 @@ import Browser
 import Browser.Dom exposing (focus, getViewport, Viewport)
 import Browser.Navigation exposing (Key)
 import Browser.Events exposing (onResize)
-import Html exposing (button, div, h3, input, Html, section, text)
+import Html exposing (Attribute, button, div, h3, input, Html, section, text)
 import Html.Attributes exposing (class, id, style, value)
-import Html.Attributes.Extra exposing (attributeIf)
-import Html.Events exposing (onBlur, onClick, onInput)
+import Html.Attributes.Extra as Attributes exposing (attributeIf)
+import Html.Events exposing (onBlur, onClick, onInput, onMouseEnter)
 import Json.Decode as D
 import List exposing (map, singleton)
+import Maybe.Extra exposing (isJust)
 import String exposing (fromInt, isEmpty)
 import String.Extra exposing (isBlank)
 import Svg exposing (Svg, svg)
@@ -39,11 +40,13 @@ type Msg
   | SetTileText Int Int String
   | AddTile Int
   | TileDeselected Int
+  | HeldOverNewTile Int Int
 
 type alias Model =
   { windowW: Int
   , windowH: Int
   , columns: Array Column
+  , cardDrop: Maybe (Int, Int)
   }
 
 type alias Column =
@@ -81,6 +84,7 @@ init flags url browserKey =
       }
     ]
     |> Array.fromList
+  , cardDrop = Just (0, 0)
   }
     |> withCmd (
       getViewport
@@ -88,30 +92,46 @@ init flags url browserKey =
     )
 
 view : Model -> Browser.Document Msg
-view {windowW, windowH, columns} =
+view {windowW, windowH, columns, cardDrop} =
   section
     [ class "columns"
     ]
-    ( Array.indexedMap viewColumn columns
+    ( Array.indexedMap (viewColumn cardDrop) columns
         |> Array.toList
     )
     |> singleton
     |> Browser.Document "meow!"
 
-viewColumn : Int -> Column -> Html Msg
-viewColumn columnIndex {name, tiles} =
-  div
-    [ class "column"
-    ]
-    ( ( h3
-         []
-         [text name]
-      ) :: (Array.indexedMap (viewTile columnIndex) tiles |> Array.toList)
-        ++ [ viewAddTile columnIndex ]
-    )
+viewHoverTile = div [id "hover-tile"] []
 
-viewTile : Int -> Int -> Tile -> Html Msg
-viewTile columnIndex tileIndex tile =
+viewColumn : Maybe (Int, Int) -> Int -> Column -> Html Msg
+viewColumn heldOverTile columnIndex {name, tiles} =
+  let
+      onlyTrueActivityTiles = Array.indexedMap (viewTile (isJust heldOverTile) columnIndex) tiles
+      trueActivityTilesPlusHoverTile = case heldOverTile of
+        Nothing -> onlyTrueActivityTiles
+        Just (heldOverColumnIndx, heldOverTileIndx) ->
+          if heldOverColumnIndx == columnIndex
+            then
+              Array.insertAt
+                heldOverTileIndx
+                viewHoverTile
+                onlyTrueActivityTiles
+            else onlyTrueActivityTiles
+      tilesList = Array.toList trueActivityTilesPlusHoverTile
+  in
+    div
+      [ class "column"
+      ]
+      ( ( h3
+           []
+           [text name]
+        ) :: tilesList
+          ++ [ viewAddTile columnIndex ]
+      )
+
+viewTile : Bool -> Int -> Int -> Tile -> Html Msg
+viewTile isTileHeld columnIndex tileIndex tile =
   div
     [ class "tile"
     , on "click" <| (
@@ -125,6 +145,7 @@ viewTile columnIndex tileIndex tile =
       , onInput (SetTileText columnIndex tileIndex)
       , onBlur (TileDeselected columnIndex)
       , attributeIf (isBlank tile.text) (id "new-tile")
+      , attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex)
       ]
       []
     , svg
@@ -207,4 +228,15 @@ update msg model = case Debug.log "UPDATE" msg of
     modColumnInPage columnIndex
       pruneTiles
       model
-      |> withoutCmd
+      |> withoutCmd
+  HeldOverNewTile columnIndex tileIndex -> case model.cardDrop of
+    Nothing -> model |> withoutCmd
+    Just (oldColumnIndex, oldTileIndex) ->
+      let
+        newTileIndex =
+          if oldTileIndex == tileIndex
+            then tileIndex + 1
+            else tileIndex
+      in
+        { model | cardDrop = Debug.log "newModel" <| Just (columnIndex, newTileIndex) }
+          |> withoutCmd

style.sass

@@ -43,6 +43,10 @@ input
 		h3
 			text-align: center
 
+		#hover-tile
+			height: 110px
+			margin-top: -15px
+
 		.tile
 			position: relative
 			height: 80px