Generate html with elm

1 files changed, 38 insertions, 3 deletions

diff --git a/src/Display.elm b/src/Display.elm
index acbc15e..48e6cd6 100644
--- a/src/Display.elm
+++ b/src/Display.elm
@@ -7,16 +7,51 @@ import Graphics.Element (Element)
 import Color (..)
 import Text (..)
 import Text
+import Html (..)
+import Html.Attributes (..)
+import Html.Attributes as A
+import Json.Encode (string)
 
-import Vec2 (..)
+import Vec2 (Vec2)
 import Player (..)
 import Game (Game)
 import Point (..)
 import Board (boardSize)
 import Config (..)
 
-display : Game -> Element
-display {time, score, player, cloud, bestScore} =
+display : Game -> Html
+display game =
+  div
+    []
+    [ h1 [] [ text "cAtchVoid" ]
+    , div
+        [ id "game" ]
+        [ fromElement << displayGame <| game ]
+    , p
+        []
+        [ text "Catch the points of your color, avoid the other points." ]
+    , p
+        []
+        [ text "Use the arrow keys to move and 'e' to change your color." ]
+    , a
+        [ href "https://github.com/guyonvarch/catchvoid" ]
+        [ img
+            [ A.style
+                [ ("position", "absolute")
+                , ("top", "0")
+                , ("right", "0")
+                , ("border", "0")
+                ]
+            , src "https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
+            , alt "Fork me on GitHub"
+            , property "data-canonical-src" (string "https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png")
+            ]
+            []
+        ]
+    ]
+
+displayGame : Game -> Element
+displayGame {time, score, player, cloud, bestScore} =
   let whitePointForms = List.map (pointForm time (configColor White)) (cloud.points White)
       blackPointForms = List.map (pointForm time (configColor Black)) (cloud.points Black)
       forms = boardForms