diff --git a/elm.json b/elm.json index 605eae4..e66b72c 100644 --- a/elm.json +++ b/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": { diff --git a/src/Main.elm b/src/Main.elm index b23b58e..d9fe140 100644 --- a/src/Main.elm +++ b/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 \ No newline at end of file + |> 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 \ No newline at end of file diff --git a/style.sass b/style.sass index f785a8a..6038554 100644 --- a/style.sass +++ b/style.sass @@ -43,6 +43,10 @@ input h3 text-align: center + #hover-tile + height: 110px + margin-top: -15px + .tile position: relative height: 80px