aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJoris Guyonvarch2015-03-07 12:16:32 +0100
committerJoris Guyonvarch2015-03-07 12:16:32 +0100
commit8f8df67f3795b02c6918d7df832580e9de7d0802 (patch)
treee8788ff319b0b18f7cf3bead073a8e90a36608ee
parent1b23d8adcd01345eb4a2e7299e07b1f37fee7e8a (diff)
downloadcatchvoid-8f8df67f3795b02c6918d7df832580e9de7d0802.tar.gz
catchvoid-8f8df67f3795b02c6918d7df832580e9de7d0802.tar.bz2
catchvoid-8f8df67f3795b02c6918d7df832580e9de7d0802.zip
Generate html with elm
-rw-r--r--index.html32
-rw-r--r--src/Display.elm41
-rw-r--r--src/Main.elm3
-rw-r--r--src/Step.elm4
-rw-r--r--style.css1
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 @@
</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
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;
}
-