Browse Source

solved sizing issues; styled

Brandon Wong 7 years ago
parent
commit
9db55d0785
5 changed files with 68 additions and 35 deletions
  1. 34 8
      Main.elm
  2. 27 0
      cellular.css
  3. 2 1
      elm-package.json
  4. 5 5
      index.html
  5. 0 21
      style.css

+ 34 - 8
Main.elm

@@ -7,8 +7,12 @@ import Html.Attributes exposing (id, class, classList, style)
 
 import Array
 import Random
+import Window
+import Task
 import Time exposing (Time, second)
 
+cellSize : Int
+cellSize = 10 + 2
 
 type Cell
     = Alive
@@ -20,6 +24,7 @@ type alias Rule = Int -> Cell -> Cell
 type alias Model =
     { board : Board
     , rule : Rule
+    , info : String
     }
 
 initModel : Model
@@ -38,6 +43,7 @@ initModel =
                     Alive
                 else
                     Dead)
+    , info = ""
     }
 
 
@@ -45,6 +51,7 @@ type Msg
     = NoOp
     | Step
     | SetBoard Board
+    | InitializeBoard Window.Size
 
 
 viewRow row =
@@ -68,12 +75,21 @@ viewRow row =
 
 viewBoard : Board -> Html Msg
 viewBoard board =
-    table
-        []
-        <|
-        Array.toList
-        <|
-        Array.map (\r -> viewRow r) board
+    let
+        numCols =
+            Array.length <| Maybe.withDefault Array.empty <| Array.get 0 board
+        calculatedWidth = numCols * cellSize
+        tableWidth = (toString calculatedWidth) ++ "px"
+    in
+        table
+            [ style
+                [ ("width", tableWidth)
+                ]
+            ]
+            <|
+            Array.toList
+            <|
+            Array.map (\r -> viewRow r) board
 
 view : Model -> Html Msg
 view model =
@@ -81,6 +97,9 @@ view model =
         [ onClick Step
         ]
         [ viewBoard model.board
+        , div
+            []
+            [ text model.info ]
         ]
 
 modify : Int -> Int -> Cell -> Board -> Board
@@ -142,6 +161,12 @@ update msg model =
             ( { model | board = step model.rule model.board }, Cmd.none )
         SetBoard board ->
             ( { model | board = board }, Cmd.none )
+        InitializeBoard size ->
+            let
+                numRows = size.height // cellSize
+                numCols = size.width // cellSize
+            in
+                ( model, Random.generate SetBoard (generateRandom numRows numCols) )
         _ ->
             ( model, Cmd.none )
 
@@ -152,12 +177,13 @@ generateRandom nr nc =
 subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
-        [ Time.every (second*3) (\_ -> Step)
+        [ Time.every (second/3) (\_ -> Step)
+        , Window.resizes InitializeBoard
         ]
 
 main =
     Html.program
-        { init = (initModel, Random.generate SetBoard (generateRandom 50 100))
+        { init = (initModel, Task.perform InitializeBoard Window.size)
         , view = view
         , update = update
         , subscriptions = subscriptions

+ 27 - 0
cellular.css

@@ -0,0 +1,27 @@
+
+body {
+    margin:0px;
+}
+
+#background {
+    width:100%;
+    height:100%;
+    overflow:hidden;
+    position:absolute;
+    background-color:#222222;
+}
+
+.cell {
+    width:10px;
+    height:10px;
+}
+
+.alive {
+    //background-color:#000000;
+    background-color:orange;
+}
+.dead {
+    //background-color:#cccccc;
+    background-color:#333333;
+}
+

+ 2 - 1
elm-package.json

@@ -9,7 +9,8 @@
     "exposed-modules": [],
     "dependencies": {
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+        "elm-lang/html": "2.0.0 <= v < 3.0.0",
+        "elm-lang/window": "1.0.1 <= v < 2.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

+ 5 - 5
index.html

@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>where to live</title>
-    <link rel="stylesheet" href="style.css">
+    <title>cellular</title>
+    <link rel="stylesheet" href="cellular.css">
 </head>
 <body>
-    <!--<div id="background"></div>-->
+    <div id="background"></div>
     <script src="client.js"></script>
-    <script>Elm.Cellular.fullscreen();</script>
-    <!--<script>Elm.Cellular.embed(document.getElementById('background'));</script>-->
+    <!--<script>Elm.Cellular.fullscreen();</script>-->
+    <script>Elm.Cellular.embed(document.getElementById('background'));</script>
 </body>
 </html>

+ 0 - 21
style.css

@@ -1,21 +0,0 @@
-
-#background {
-    width:500px;
-    height:200px;
-    overflow:hidden;
-}
-
-.cell {
-    width:10px;
-    height:10px;
-}
-
-.alive {
-    //background-color:#000000;
-    background-color:lightblue;
-}
-.dead {
-    //background-color:#cccccc;
-    background-color:yellow;
-}
-