-- https://package.elm-lang.org/packages/elm/svg/latest/ module RenderSVG exposing (renderSVG) import Array exposing (Array) import Bucket exposing(..) import Html exposing (Html) import Html.Events exposing (onClick) import Model exposing(..) import Svg exposing (..) import Svg.Attributes exposing (..) renderSVG : Model -> Html msg renderSVG model = svg [ width "600" , height "400" , viewBox "0 0 600 400" , class "tetris" ] -- TODO move array -> list conversion to bucket (Bucket.bucket2Lists) ( (Array.toList (Array.indexedMap (rows 0 0) model.bucket)) ++ (Array.toList (Array.indexedMap (rows 11 0) model.preview)) ++ statistics ) -- render a bucket of rows rows : Int -> Int -> Int -> Row -> Svg msg rows x y rowIndex line = g [ transform (String.join "" ["translate(", (String.fromInt(x * 16)), ", ", (String.fromInt(rowIndex * 16)), ")" ]) ] -- TODO partial application and pass rowIndex to cells (Array.toList (Array.indexedMap cells line)) -- render a row of cells cells : Int -> Color -> Svg msg cells column cell = rect [ x (String.fromInt (16 * column)) , y "0" , rx "3" , ry "3" , width "16" , height "16" , class (colorToString cell) ] [ ] statistics : List (Svg msg) statistics = [ text_ [ x "200" , y "120" , class "label" ] [ text "Score" ] , text_ [ x "200" , y "140" ] [ text "9001" ] , text_ [ x "200" , y "180" , class "label" ] [ text "Lines" ] , text_ [ x "200" , y "200" ] [ text "15" ] ]