Add some colors

franckverrot · Feb 24, 2017 · 74d6f2e · 74d6f2e
1 parent 0d92898
commit 74d6f2e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)