module View exposing ( view ) import Html exposing (Html) import Svg exposing (..) import Svg.Attributes exposing (..) import List import Color as Color exposing (Color) import Time exposing (Time) import Model exposing (Model) import Model.Vec2 exposing (Vec2) import Model.Player exposing (..) import Model.Point exposing (..) import Model.Config exposing (..) import Model.Round exposing (..) import Model.Level exposing (..) import View.Round exposing (roundView) view : Model -> Html msg view model = let renderPoints config = List.map (renderPoint model.boardSize model.elapsedTime config) (model.cloud.points config) in svg [ width "100%" , height "100%" , Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";") , viewBox ("0 0 " ++ (toString model.boardSize.x) ++ " " ++ (toString (model.boardSize.y + headerHeight))) ] [ renderBoard model.currentScore , renderPlayer model.boardSize model.player (getPlayerSize model.currentScore) , g [] (renderPoints White) , g [] (renderPoints Black) , renderScore model.boardSize model.elapsedTime model.rounds model.currentScore , hideNewPoints model.boardSize , renderHeader model ] headerHeight : Float headerHeight = 115 renderHeader : Model -> Svg msg renderHeader model = g [] [ rect [ width "100%" , height (toString headerHeight) , fill "#1B203F" ] [] , text' [ x "10" , y "45" , fontSize "36" , fill "white" , fontWeight "bold" ] [ text "cAtchVoid" ] , text' [ fill "white" , fontSize "12" , fontStyle "italic" ] [ tspan [ x (toString (model.boardSize.x / 2)) , y "75" , textAnchor "middle" ] [ text "Catch the points of your color, avoid the other points." ] , tspan [ x (toString (model.boardSize.x / 2)) , y "92" , textAnchor "middle" ] [ text "Use the arrow keys to move and 'e' to change your color." ] ] , ( case maybeBestRound model.rounds of Nothing -> text "" Just bestRound -> text' [ fill "yellow" , x "355" , y "38" , fontSize "13" ] [ tspan [ textAnchor "middle" ] [ text ("Top: " ++ roundView bestRound) ] ] ) ] backgroundColor : String backgroundColor = "#1B203F" renderBoard : Int -> Svg msg renderBoard currentScore = rect [ y (toString headerHeight) , width "100%" , height "100%" , fill (colorRgba (progressiveColor currentScore)) ] [] colorRgba : Color -> String colorRgba color = let c = Color.toRgb color in "rgba(" ++ (toString c.red) ++ ", " ++ (toString c.green) ++ ", " ++ (toString c.blue) ++ "," ++ (toString c.alpha) ++ ")" renderPlayer : Vec2 -> Player -> Float -> Svg msg renderPlayer boardSize player playerSize = renderCircle boardSize player.pos playerSize (playerColor player.config) playerColor : Config -> String playerColor config = case config of White -> "#F0F0F0" Black -> "#0E1121" renderPoint : Vec2 -> Float -> Config -> Point -> Svg msg renderPoint boardSize elapsedTime config point = let pos = pointMove point elapsedTime in renderCircle boardSize pos pointSize (playerColor config) pointColor : Config -> String pointColor config = case config of White -> "white" Black -> "black" renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg msg renderCircle boardSize pos size color = circle [ cx (toString (pos.x + boardSize.x / 2)) , cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight)) , r (toString size) , fill color ] [] renderScore : Vec2 -> Time -> List Round -> Int -> Svg msg renderScore boardSize elapsedTime rounds score = let scorePos = { x = 0.0 , y = boardSize.y / 2 - 35 } scoreText = "L" ++ (toString << currentLevelNumber <| score) ++ " - " ++ (toString score) in if elapsedTime < 5000 then case List.head rounds of Just round -> renderText boardSize scorePos (roundView round) Nothing -> renderText boardSize scorePos scoreText else renderText boardSize scorePos scoreText renderText : Vec2 -> Vec2 -> String -> Svg msg renderText boardSize pos content = text' [ x (toString (pos.x + boardSize.x / 2)) , y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight)) , fontFamily "calibri" , fontSize "24" , color "#0E1121" , fontWeight "bold" ] [ tspan [ textAnchor "middle" ] [ text content ] ] hideNewPoints : Vec2 -> Svg msg hideNewPoints boardSize = let size = (pointAwayDist boardSize) + pointSize - (Basics.max boardSize.x boardSize.y) / 2 |> toString in g [] [ rect [ x ("-" ++ size) , width size , height "100%" , fill backgroundColor ] [] , rect [ x (toString boardSize.x) , width size , height "100%" , fill backgroundColor ] [] , rect [ y ("-" ++ size) , width "100%" , height size , fill backgroundColor ] [] , rect [ y (toString (boardSize.y + headerHeight)) , width "100%" , height size , fill backgroundColor ] [] ]