From e43df972c82c8b5926f76658c7588074e6a15069 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 14 Nov 2015 17:10:20 +0100 Subject: Display the game at fullscreen --- src/Main.elm | 4 +- src/Model/Point.elm | 6 +- src/Update/CloudUpdate.elm | 5 +- src/View/Game.elm | 153 +++++++++++++++++++++++++++++++++++++-------- src/View/Page.elm | 59 ----------------- style.css | 76 +++------------------- 6 files changed, 139 insertions(+), 164 deletions(-) delete mode 100644 src/View/Page.elm diff --git a/src/Main.elm b/src/Main.elm index 8083e97..f141fcc 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -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 = diff --git a/src/Model/Point.elm b/src/Model/Point.elm index 9084c1b..a465e40 100644 --- a/src/Model/Point.elm +++ b/src/Model/Point.elm @@ -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 diff --git a/src/Update/CloudUpdate.elm b/src/Update/CloudUpdate.elm index ecbce8b..f509a5f 100644 --- a/src/Update/CloudUpdate.elm +++ b/src/Update/CloudUpdate.elm @@ -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) diff --git a/src/View/Game.elm b/src/View/Game.elm index abe7a15..af7c8de 100644 --- a/src/View/Game.elm +++ b/src/View/Game.elm @@ -1,5 +1,5 @@ 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 + ] + [] + ] diff --git a/src/View/Page.elm b/src/View/Page.elm deleted file mode 100644 index a4e0ba0..0000000 --- a/src/View/Page.elm +++ /dev/null @@ -1,59 +0,0 @@ -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") - ] - [] - ] - ] diff --git a/style.css b/style.css index 6499535..4281b43 100644 --- a/style.css +++ b/style.css @@ -1,69 +1,9 @@ -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; } -- cgit v1.2.3