diff options
| author | Joris Guyonvarch | 2015-03-07 12:16:32 +0100 |
|---|---|---|
| committer | Joris Guyonvarch | 2015-03-07 12:16:32 +0100 |
| commit | 8f8df67f3795b02c6918d7df832580e9de7d0802 (patch) | |
| tree | e8788ff319b0b18f7cf3bead073a8e90a36608ee | |
| parent | 1b23d8adcd01345eb4a2e7299e07b1f37fee7e8a (diff) | |
Generate html with elm
| -rw-r--r-- | index.html | 32 | ||||
| -rw-r--r-- | src/Display.elm | 41 | ||||
| -rw-r--r-- | src/Main.elm | 3 | ||||
| -rw-r--r-- | src/Step.elm | 4 | ||||
| -rw-r--r-- | style.css | 1 |
5 files changed, 47 insertions, 34 deletions
@@ -10,32 +10,12 @@ </head> <body> - - <h1>cAtchVoid</h1> - - <div id="game"></div> - - <p> - Catch the points of your color, avoid the other points. - </p> - - <p> - Use the arrow keys to move and 'e' to change your color. - </p> - - <script type="text/javascript"> - var input = { - initialTime: new Date().getTime() - }; - Elm.embed(Elm.Main, document.getElementById('game'), input); - </script> - - <a href="https://github.com/guyonvarch/catchvoid"> - <img style="position: absolute; top: 0; right: 0; border: 0;" - src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" - alt="Fork me on GitHub" - data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"> - </a> </body> + <script> + Elm.fullscreen(Elm.Main, { + initialTime: new Date().getTime() + }); + </script> + </html> 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 @@ -32,4 +32,3 @@ p { font-style: italic; font-size: 17px; } - |