<commit_before>module View exposing (view)

import Array
import Browser
import Css exposing (..)
import Css.Global exposing (global, selector)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
import Html.Styled.Events exposing (onClick)
import Model exposing (..)
import Msg exposing (..)


theme =
    { bgColor = hex "#000030"
    , fgColor = hex "#904010"
    }


gameField : Model -> Html Msg
gameField model =
    div []
        [ text ("Moves: " ++ String.fromInt model.numMoves)
        , div []
            (Array.map (piece model) model.cells |> Array.toList)
        ]


piece : Model -> Cell -> Html Msg
piece model cell =
    div []
        [ text
            (case cell.part of
                Number num ->
                    let
                        ( x, y ) =
                            cell.pos
                    in
                    String.fromInt num ++ "(" ++ String.fromInt x ++ "," ++ String.fromInt y ++ ")"

                Empty ->
                    ""
            )
        ]


view : Model -> Browser.Document Msg
view model =
    { title = "Shift Puzzle"
    , body =
        List.map toUnstyled
            [ global
                [ selector "body"
                    [ backgroundColor theme.bgColor
                    , color theme.fgColor
                    ]
                ]
            , gameField model
            ]
    }



-- import Styles.PuzzleCss as PuzzleCss
-- debug =
--     Debug.log "CSS Compile Warnings" compiledStyles.warnings<commit_msg>style refactor WIP<commit_after>module View exposing (view)

import Array
import Browser
import Css exposing (..)
import Css.Global exposing (global, selector)
import Css.Transitions exposing (easeOut, transition)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src, style)
import Html.Styled.Events exposing (onClick)
import Model exposing (..)
import Msg exposing (..)


colors =
    { navy = hex "#001F3F"
    , blue = hex "#0074D9"
    , aqua = hex "#7FDBFF"
    , teal = hex "#39CCCC"
    , olive = hex "#3D9970"
    , green = hex "#2ECC40"
    , lime = hex "#01FF70"
    , yellow = hex "#FFDC00"
    , orange = hex "#FF851B"
    , red = hex "#FF4136"
    , maroon = hex "#85144B"
    , fuchsia = hex "#F012BE"
    , purple = hex "#B10DC9"
    , black = hex "#111111"
    , gray = hex "#AAAAAA"
    , silver = hex "#DDDDDD"
    , white = hex "#FFFFFF"
    }


theme =
    { bgColor = colors.navy
    , fgColor = colors.orange
    }


styles =
    { puzzlePiece =
        Css.batch
            [ display inlineBlock
            , boxSizing borderBox
            , position absolute
            , margin (pct 1)
            , width (pct 23)
            , height (pct 23)
            , fontSize (vmin 13)
            , lineHeight (vmin 20)
            , textAlign center
            , borderRadius (pct 5)
            , transition
                [ Css.Transitions.left3 100 0 easeOut
                , Css.Transitions.top3 100 0 easeOut
                , Css.Transitions.color3 100 0 easeOut
                , Css.Transitions.backgroundColor3 100 0 easeOut
                ]
            ]
    , puzzlePieceCorrect =
        Css.batch
            [ backgroundColor colors.orange
            , color colors.yellow
            ]
    , puzzlePieceWrong =
        Css.batch
            [ backgroundColor colors.gray
            , color colors.silver
            ]
    , puzzlePieceEmpty =
        Css.batch
            [ backgroundColor transparent
            , color colors.gray
            ]
    , puzzleField =
        Css.batch
            [ display inlineBlock
            , width (vmin 80)
            , height (vmin 80)
            , margin2 zero (px 20)
            , position relative
            ]
    }


gameField : Model -> Html Msg
gameField model =
    div [ css [ styles.puzzleField ] ]
        [ text ("Moves: " ++ String.fromInt model.numMoves)
        , div []
            (Array.map (piece model) model.cells |> Array.toList)
        ]


piece : Model -> Cell -> Html Msg
piece model cell =
    let
        scale =
            100.0 / toFloat model.size

        ( x, y ) =
            cell.pos

        posStyles =
            Css.batch
                [ top (pct <| toFloat y * scale)
                , left (pct <| toFloat x * scale)
                ]

        statusStyle =
            if cell.pos == cell.origin then
                styles.puzzlePieceCorrect

            else
                styles.puzzlePieceWrong

        cssClasses =
            [ css [ styles.puzzlePiece ]
            , css [ posStyles ]
            , css [ statusStyle ]
            ]
    in
    case cell.part of
        Number num ->
            div
                cssClasses
                [ text (String.fromInt num) ]

        Empty ->
            div
                [ css [ styles.puzzlePiece ]
                , css [ styles.puzzlePieceEmpty ]
                , css [ posStyles ]
                ]
                [ text "😒" ]


view : Model -> Browser.Document Msg
view model =
    { title = "Shift Puzzle"
    , body =
        List.map toUnstyled
            [ global
                [ selector "body"
                    [ backgroundColor theme.bgColor
                    , color theme.fgColor
                    ]
                ]
            , gameField model
            ]
    }



-- import Styles.PuzzleCss as PuzzleCss
-- debug =
--     Debug.log "CSS Compile Warnings" compiledStyles.warnings
{'fraction_non_alphanumeric': 0.09443538154794272, 'fraction_numerical': 0.018669566793547216, 'mean_word_length': 1.3510864933958244, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3042558', 'n_tokens_mistral': 1725, 'n_tokens_neox': 1554, 'n_words': 414}