Commit e43df972 authored by Joris's avatar Joris

Display the game at fullscreen

parent b654acd2
......@@ -13,10 +13,10 @@ import Update.Update exposing (update)
import Input exposing (getInput)
import View.Page exposing (pageView)
import View.Game exposing (renderGame)
main : Signal Html
main = Signal.map pageView game
main = Signal.map renderGame game
game : Signal Game
game =
......
......@@ -4,7 +4,6 @@ module Model.Point
, pointSize
, pointSpeed
, pointSpawnDist
, pointAwayDist
) where
import Model.Vec2 exposing (..)
......@@ -28,7 +27,4 @@ pointSpeed : Float -> Float
pointSpeed dt = dt / 20
pointSpawnDist : Vec2 -> Float
pointSpawnDist boardSize = (boardDiagonal boardSize) * 3 / 5
pointAwayDist : Vec2 -> Float
pointAwayDist boardSize = (boardDiagonal boardSize) * 3 / 4
pointSpawnDist boardSize = (boardDiagonal boardSize) * 2.5 / 5 + pointSize
......@@ -51,10 +51,9 @@ cloudUpdate time boardSize seed player {points, spawn, lastSpawn} =
presentPoints : Float -> Vec2 -> List Point -> List Point
presentPoints time boardSize points =
let isPresent point = (distance (pointMove point time) originVec) < (pointAwayDist boardSize)
let isPresent point = (distance (pointMove point time) originVec) < (pointSpawnDist boardSize)
in List.filter isPresent points
getNewPoint : Float -> Vec2 -> Seed -> (Point, Seed)
getNewPoint time boardSize seed =
let (initPos, seed') = pointInitPos boardSize seed
......@@ -74,7 +73,7 @@ pointInitPos : Vec2 -> Seed -> (Vec2, Seed)
pointInitPos boardSize seed =
let (rand, seed') = generate floatGen seed
angle = rand * (degrees 360)
dist = (boardDiagonal boardSize) * 3 / 5
dist = pointSpawnDist boardSize
in (polarToCartesian angle dist, seed')
pointDestination : Vec2 -> Seed -> (Vec2, Seed)
......
module View.Game
( render
( renderGame
) where
import Html exposing (Html)
......@@ -18,32 +18,96 @@ import Model.Round exposing (..)
import View.Round exposing (roundView)
render : Game -> Html
render game =
let renderPoints config = List.map (renderPoint game.time config) (game.cloud.points config)
renderGame : Game -> Html
renderGame game =
let renderPoints config = List.map (renderPoint game.boardSize game.time config) (game.cloud.points config)
in svg
[ width (toString game.boardSize.x)
, height (toString game.boardSize.y)
[ width "100%"
, height "100%"
, Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";")
, viewBox ("0 0 " ++ (toString game.boardSize.x) ++ " " ++ (toString (game.boardSize.y + headerHeight)))
]
[ renderBoard
, renderPlayer game.player
, renderPlayer game.boardSize game.player
, g [] (renderPoints White)
, g [] (renderPoints Black)
, renderScore game.boardSize game.time game.rounds game.currentScore
, hideNewPoints game.boardSize
, renderHeader game
]
headerHeight : Float
headerHeight = 115
renderHeader : Game -> Svg
renderHeader game =
g
[]
[ rect
[ width "100%"
, height (toString headerHeight)
, fill "#1B203F"
]
[]
, text'
[ x "10"
, y "45"
, fontSize "36"
, fill "white"
, fontWeight "bold"
]
[ text "cAtchVoid" ]
, text'
[ fill "white"
, fontSize "12"
, fontStyle "italic"
]
[ tspan
[ x (toString (game.boardSize.x / 2))
, y "75"
, textAnchor "middle"
]
[ text "Catch the points of your color, avoid the other points." ]
, tspan
[ x (toString (game.boardSize.x / 2))
, y "92"
, textAnchor "middle"
]
[ text "Use the arrow keys to move and 'e' to change your color." ]
]
, ( case maybeBestRound game.rounds of
Nothing ->
text ""
Just bestRound ->
text'
[ fill "yellow"
, x "355"
, y "38"
, fontSize "13"
]
[ tspan
[ textAnchor "middle" ]
[ text ("Top: " ++ roundView bestRound) ]
]
)
]
backgroundColor : String
backgroundColor = "#1B203F"
renderBoard : Svg
renderBoard =
rect
[ width "100%"
[ y (toString headerHeight)
, width "100%"
, height "100%"
, fill "#677BF4"
]
[]
renderPlayer : Player -> Svg
renderPlayer player =
renderCircle player.pos playerSize (playerColor player.config)
renderPlayer : Vec2 -> Player -> Svg
renderPlayer boardSize player =
renderCircle boardSize player.pos playerSize (playerColor player.config)
playerColor : Config -> String
playerColor config =
......@@ -51,10 +115,10 @@ playerColor config =
White -> "#F0F0F0"
Black -> "#0E1121"
renderPoint : Float -> Config -> Point -> Svg
renderPoint time config point =
renderPoint : Vec2 -> Float -> Config -> Point -> Svg
renderPoint boardSize time config point =
let pos = pointMove point time
in renderCircle pos pointSize (playerColor config)
in renderCircle boardSize pos pointSize (playerColor config)
pointColor : Config -> String
pointColor config =
......@@ -62,15 +126,13 @@ pointColor config =
White -> "white"
Black -> "black"
renderCircle : Vec2 -> Float -> String -> Svg
renderCircle pos size color =
renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg
renderCircle boardSize pos size color =
circle
[ cx (toString (pos.x + 250))
, cy (toString (-1 * pos.y + 250))
[ cx (toString (pos.x + boardSize.x / 2))
, cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
, r (toString size)
, fill color
, stroke "#222222"
, strokeWidth "1"
]
[]
......@@ -84,17 +146,17 @@ renderScore boardSize currentRoundTime rounds score =
then
case List.head rounds of
Just round ->
renderText scorePos (roundView round)
renderText boardSize scorePos (roundView round)
Nothing ->
renderText scorePos (toString score)
renderText boardSize scorePos (toString score)
else
renderText scorePos (toString score)
renderText boardSize scorePos (toString score)
renderText : Vec2 -> String -> Svg
renderText pos content =
renderText : Vec2 -> Vec2 -> String -> Svg
renderText boardSize pos content =
text'
[ x (toString (250 + pos.x))
, y (toString (-1 * pos.y + 250))
[ x (toString (pos.x + boardSize.x / 2))
, y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
, fontFamily "calibri"
, fontSize "24"
, color "#0E1121"
......@@ -104,3 +166,40 @@ renderText pos content =
[ textAnchor "middle" ]
[ text content ]
]
hideNewPoints : Vec2 -> Svg
hideNewPoints boardSize =
let size =
(pointSpawnDist boardSize) + pointSize - (Basics.max boardSize.x boardSize.y) / 2
|> toString
in g
[]
[ rect
[ x ("-" ++ size)
, width size
, height "100%"
, fill backgroundColor
]
[]
, rect
[ x (toString boardSize.x)
, width size
, height "100%"
, fill backgroundColor
]
[]
, rect
[ y ("-" ++ size)
, width "100%"
, height size
, fill backgroundColor
]
[]
, rect
[ y (toString (boardSize.y + headerHeight))
, width "100%"
, height size
, fill backgroundColor
]
[]
]
module View.Page
( pageView
) where
import List
import String exposing (append)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Attributes as A
import Json.Encode exposing (string)
import Model.Game exposing (Game)
import Model.Round exposing (..)
import View.Game exposing (render)
import View.Round exposing (roundView)
pageView : Game -> Html
pageView game =
div
[]
[ h1 [] [ text "cAtchVoid" ]
, div
[ id "game" ]
[ render 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." ]
, ( case maybeBestRound game.rounds of
Nothing ->
div [ class "bestScore" ] []
Just bestRound ->
p
[ class "bestScore isDefined" ]
[ roundView bestRound
|> append "Best score: "
|> text
]
)
, 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")
]
[]
]
]
body {
margin: 0;
background-color: #05060c;
font-family: calibri;
}
h1 {
font-weight: bold;
background-color: #1b203f;
min-width: 500px;
color: white;
margin: 0;
font-size: 36px;
text-align: center;
line-height: 100px;
height: 100px;
}
#game {
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 10px dashed #222222;
border-bottom: 10px dashed #222222;
width: 500px;
height: 500px;
}
p {
text-align: center;
color: #eeeeee;
font-style: italic;
font-size: 17px;
}
.bestScore {
position: absolute;
top: 100px;
left: 0px;
padding: 0 20px;
background-color: #222222;
color: rgba(0, 0, 0, 0);
height: 0px;
line-height: 0px;
margin: 0;
}
.isDefined {
animation: reveal 1s ease;
height: 50px;
line-height: 50px;
color: white;
}
@keyframes reveal {
0% {
height: 0px;
line-height: 0px;
color: rgba(0, 0, 0, 0);
}
30% {
color: rgba(0, 0, 0, 0);
}
100% {
height: 50px;
line-height: 50px;
color: white;
}
body { margin: 0; }
body > div {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment