From 8f8df67f3795b02c6918d7df832580e9de7d0802 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sat, 7 Mar 2015 12:16:32 +0100 Subject: Generate html with elm --- index.html | 32 ++++++-------------------------- src/Display.elm | 41 ++++++++++++++++++++++++++++++++++++++--- src/Main.elm | 3 ++- src/Step.elm | 4 +--- style.css | 1 - 5 files changed, 47 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 00ff90a..6985fae 100644 --- a/index.html +++ b/index.html @@ -10,32 +10,12 @@ - -

cAtchVoid

- -

- Catch the points of your color, avoid the other points. -

- -

- Use the arrow keys to move and 'e' to change your color. -

- - - - -

- + + 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 diff --git a/src/Main.elm b/src/Main.elm index fcafbda..9286ed9 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -3,6 +3,7 @@ module Main where import Signal import Random import Graphics.Element (Element) +import Html (Html) import Game (Game, initialGame) import Display (display) @@ -10,7 +11,7 @@ import Step (step) import Input (getInput) import Vec2 (originVec) -main : Signal Element +main : Signal Html main = Signal.map display game game : Signal Game diff --git a/src/Step.elm b/src/Step.elm index 3310339..e2b7fa7 100644 --- a/src/Step.elm +++ b/src/Step.elm @@ -16,8 +16,6 @@ import CloudStep (cloudStep) import Config (otherConfig) import Input (Input) -import Debug - step : Input -> Game -> Game step {dir, inputKeysDown, delta} {time, keysDown, score, player, cloud, bestScore, seed} = let hostilePoints = cloud.points (otherConfig player.config) @@ -29,7 +27,7 @@ step {dir, inputKeysDown, delta} {time, keysDown, score, player, cloud, bestScor newPlayer = playerStep delta dir (newKeyCode keysDown inputKeysDown) player (newCloud, addScore, newSeed) = cloudStep time seed newPlayer cloud in { time = newTime - , keysDown = Debug.log "keysdown" inputKeysDown + , keysDown = inputKeysDown , score = score + addScore , player = newPlayer , cloud = newCloud diff --git a/style.css b/style.css index 9fad024..a32951d 100644 --- a/style.css +++ b/style.css @@ -32,4 +32,3 @@ p { font-style: italic; font-size: 17px; } - -- cgit v1.2.3