diff --git a/build/app.js b/build/app.js index afd22e1..e72b17f 100644 --- a/build/app.js +++ b/build/app.js @@ -8941,16 +8941,6 @@ var _rtfeldman$elm_css_helpers$Html_CssHelpers$Namespace = F4( return {$class: a, classList: b, id: c, name: d}; }); -var _user$project$CssTypes$indexNamespace = _rtfeldman$elm_css_helpers$Html_CssHelpers$withNamespace('index'); -var _user$project$CssTypes$ResetButton = {ctor: 'ResetButton'}; -var _user$project$CssTypes$DeadEndMessage = {ctor: 'DeadEndMessage'}; -var _user$project$CssTypes$Footer = {ctor: 'Footer'}; -var _user$project$CssTypes$Container = {ctor: 'Container'}; -var _user$project$CssTypes$GithubLink = {ctor: 'GithubLink'}; -var _user$project$CssTypes$Header = {ctor: 'Header'}; -var _user$project$CssTypes$Box = {ctor: 'Box'}; -var _user$project$CssTypes$Page = {ctor: 'Page'}; - var _user$project$Player$show = function (player) { var _p0 = player; switch (_p0.ctor) { @@ -8966,6 +8956,19 @@ var _user$project$Player$Unclaimed = {ctor: 'Unclaimed'}; var _user$project$Player$B = {ctor: 'B'}; var _user$project$Player$A = {ctor: 'A'}; +var _user$project$CssTypes$indexNamespace = _rtfeldman$elm_css_helpers$Html_CssHelpers$withNamespace('index'); +var _user$project$CssTypes$PlayerColor = function (a) { + return {ctor: 'PlayerColor', _0: a}; +}; +var _user$project$CssTypes$ResetButton = {ctor: 'ResetButton'}; +var _user$project$CssTypes$DeadEndMessage = {ctor: 'DeadEndMessage'}; +var _user$project$CssTypes$Footer = {ctor: 'Footer'}; +var _user$project$CssTypes$Container = {ctor: 'Container'}; +var _user$project$CssTypes$GithubLink = {ctor: 'GithubLink'}; +var _user$project$CssTypes$Header = {ctor: 'Header'}; +var _user$project$CssTypes$Box = {ctor: 'Box'}; +var _user$project$CssTypes$Page = {ctor: 'Page'}; + var _user$project$Model$initialModel = { boxes: A2(_elm_lang$core$Array$repeat, 9, _user$project$Player$Unclaimed), currentPlayer: _user$project$Player$A, @@ -9382,38 +9385,40 @@ var _user$project$View$view = function (model) { _1: {ctor: '[]'} }); }; - var showBox = F2( - function (index, model) { - return _user$project$Player$show( - A2( - _elm_lang$core$Maybe$withDefault, - _user$project$Player$Unclaimed, - A2(_elm_lang$core$Array$get, index, model.boxes))); - }); - var box = function (i) { - return A2( - _elm_lang$html$Html$button, - { - ctor: '::', - _0: _elm_lang$html$Html_Events$onClick( - _user$project$MyEvent$Clicked(i)), - _1: { + var box = function (index) { + return function (currentBox) { + return A2( + _elm_lang$html$Html$button, + { ctor: '::', - _0: _user$project$View$class( - { - ctor: '::', - _0: _user$project$CssTypes$Box, - _1: {ctor: '[]'} - }), + _0: _elm_lang$html$Html_Events$onClick( + _user$project$MyEvent$Clicked(index)), + _1: { + ctor: '::', + _0: _user$project$View$class( + { + ctor: '::', + _0: _user$project$CssTypes$Box, + _1: { + ctor: '::', + _0: _user$project$CssTypes$PlayerColor(currentBox), + _1: {ctor: '[]'} + } + }), + _1: {ctor: '[]'} + } + }, + { + ctor: '::', + _0: _elm_lang$html$Html$text( + _user$project$Player$show(currentBox)), _1: {ctor: '[]'} - } - }, - { - ctor: '::', - _0: _elm_lang$html$Html$text( - A2(showBox, i, model)), - _1: {ctor: '[]'} - }); + }); + }( + A2( + _elm_lang$core$Maybe$withDefault, + _user$project$Player$Unclaimed, + A2(_elm_lang$core$Array$get, index, model.boxes))); }; var boxes = function () { var _p1 = model.winner; diff --git a/index.css b/index.css index 1d16777..407671c 100644 --- a/index.css +++ b/index.css @@ -39,6 +39,18 @@ outline: none; } +.indexPlayerColor-A { + background-color: #FF4136; +} + +.indexPlayerColor-B { + background-color: #0074D9; +} + +.indexPlayerColor-Unclaimed { + background-color: #AAAAAA; +} + .indexResetButton { display: inline-block; width: 100%; diff --git a/src/CssTypes.elm b/src/CssTypes.elm index 850a6d1..e7bba57 100644 --- a/src/CssTypes.elm +++ b/src/CssTypes.elm @@ -3,6 +3,7 @@ module CssTypes exposing ( Classes(..) , indexNamespace) import Html.CssHelpers exposing (withNamespace) +import Player exposing (..) type Classes = Box @@ -12,6 +13,7 @@ type Classes | Footer | DeadEndMessage | ResetButton + | PlayerColor Player type Ids = Page diff --git a/src/View.elm b/src/View.elm index c6b2988..e4bf02c 100644 --- a/src/View.elm +++ b/src/View.elm @@ -16,14 +16,12 @@ import Player exposing (..) view : Model -> Html MyEvent view model = let - showBox : Int -> Model -> String - showBox index model = get index model.boxes - |> Maybe.withDefault Unclaimed - |> Player.show - - box i = button - [ onClick (Clicked i), class [ Box ] ] - [ (text (showBox i model)) ] + box index = get index model.boxes + |> Maybe.withDefault Unclaimed + |> \currentBox -> + button + [ onClick (Clicked index), class [ Box, (PlayerColor currentBox) ] ] + [ (text <| Player.show currentBox) ] showPlayer player = div [ class [ Footer ] ] diff --git a/src/css/MyCss.elm b/src/css/MyCss.elm index ac50940..96c4ceb 100644 --- a/src/css/MyCss.elm +++ b/src/css/MyCss.elm @@ -5,6 +5,7 @@ import Css.Colors exposing (..) import Css.Elements exposing (body, li) import Css.Namespace exposing (namespace) import CssTypes exposing (..) +import Player exposing (..) css = (stylesheet << namespace indexNamespace.name) @@ -50,6 +51,18 @@ css = , cursor pointer , outline none ] + , class (PlayerColor A) + [ + backgroundColor red + ] + , class (PlayerColor B) + [ + backgroundColor blue + ] + , class (PlayerColor Unclaimed) + [ + backgroundColor gray + ] , class ResetButton [ display inlineBlock , width (pct 100)