Emi
/
yes-no-maybe-kink-tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Color floating tile according to which section it's hovering

This commit is contained in:
Emi Simpson 2023-07-04 18:03:28 -04:00
parent 17cc6ffb7f
commit 5d5ac77d41
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Main.elm
View File

@ -129,11 +129,12 @@ view {windowW, windowH, columns, heldTile, mousePos} =
|> Browser.Document "meow!"
viewFloatyTile : (Int, Int) -> HeldTile -> Html Msg
viewFloatyTile (mouseX, mouseY) { tile } =
viewFloatyTile (mouseX, mouseY) { tile, hoveredColumnIndex } =
div
[ style "top" (mouseY |> String.fromInt |> flip (++) "px")
, style "left" (mouseX |> String.fromInt |> flip (++) "px")
, id "floaty-tile"
, class ((++) "hovering-" <| String.fromInt <| 1 + hoveredColumnIndex)
]
[ viewTile False -1 -1 tile ]

13
style.sass
View File

@ -102,8 +102,19 @@ input
#floaty-tile
position: absolute
&.hovering-1 > .tile
background-color: #e5eed4
&.hovering-2 > .tile
background-color: #d3f3f2
&.hovering-3 > .tile
background-color: #eddef3
&.hovering-4 > .tile
background-color: #f9e5db
& > .tile
background-color: grey
position: relative
top: -40px
left: -40px