Forráskód Böngészése

added random board generator; separated styling

Brandon Wong 7 éve%!(EXTRA string=óta)
szülő
commit
ad10fe85a1
3 módosított fájl, 45 hozzáadás és 24 törlés
  1. 21 24
      Main.elm
  2. 3 0
      index.html
  3. 21 0
      style.css

+ 21 - 24
Main.elm

@@ -6,6 +6,7 @@ import Html.Events exposing (..)
 import Html.Attributes exposing (id, class, classList, style)
 
 import Array
+import Random
 import Time exposing (Time, second)
 
 
@@ -17,19 +18,14 @@ type alias Board = Array.Array (Array.Array Cell)
 type alias Rule = Int -> Cell -> Cell
 
 type alias Model =
-    { width : Int
-    , height : Int
-    , board : Board
+    { board : Board
     , rule : Rule
     }
 
-initModel : Int -> Int -> Model
-initModel w h =
-    { width = w
-    , height = h
-    --, board = Array.repeat h <| Array.repeat w Dead
-    --, board = modify 3 2 Alive <| Array.repeat h <| Array.repeat w Dead
-    , board = modify 4 4 Alive <| modify 4 3 Alive <| modify 3 4 Alive <| modify 3 2 Alive <| Array.repeat h <| Array.repeat w Dead
+initModel : Model
+initModel =
+    { board = Array.empty
+    --, board = modify 4 4 Alive <| modify 5 5 Alive <| modify 6 5 Alive <| modify 6 4 Alive <| modify 6 3 Alive <| Array.repeat h <| Array.repeat w Dead
     , rule = (\livingNeighbours cell ->
         case cell of
             Alive ->
@@ -48,6 +44,7 @@ initModel w h =
 type Msg
     = NoOp
     | Step
+    | SetBoard Board
 
 
 viewRow row =
@@ -58,19 +55,15 @@ viewRow row =
         <|
         Array.map (\c ->
             let
-                colour =
+                cellClass =
                     case c of
-                        Alive ->
-                            "yellow"
-                        Dead ->
-                            "grey"
+                        Alive -> "alive"
+                        Dead -> "dead"
             in
                 td
-                [ style
-                    [ ("background-color", colour)
-                    ]
+                [ class ("cell " ++ cellClass)
                 ]
-                [text (toString c)]
+                []
         ) row
 
 viewBoard : Board -> Html Msg
@@ -87,8 +80,7 @@ view model =
     div
         [ onClick Step
         ]
-        [ text "cellular-elm"
-        , viewBoard model.board
+        [ viewBoard model.board
         ]
 
 modify : Int -> Int -> Cell -> Board -> Board
@@ -136,7 +128,6 @@ replaceRow rule board rn row =
     in
         Array.indexedMap
         (\cn cell ->
-            --TODO: insert rules
             rule (surroundings rn cn board) cell
         ) row
 
@@ -149,18 +140,24 @@ update msg model =
     case msg of
         Step ->
             ( { model | board = step model.rule model.board }, Cmd.none )
+        SetBoard board ->
+            ( { model | board = board }, Cmd.none )
         _ ->
             ( model, Cmd.none )
 
+generateRandom : Int -> Int -> Random.Generator Board
+generateRandom nr nc =
+    Random.map Array.fromList <| Random.list nr <| Random.map Array.fromList <| Random.list nc <| Random.map (\n -> if n == 1 then Alive else Dead) (Random.int 1 4)
+
 subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
-        [ Time.every second (\_ -> Step)
+        [ Time.every (second*3) (\_ -> Step)
         ]
 
 main =
     Html.program
-        { init = ((initModel 20 10), Cmd.none)
+        { init = (initModel, Random.generate SetBoard (generateRandom 50 100))
         , view = view
         , update = update
         , subscriptions = subscriptions

+ 3 - 0
index.html

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

+ 21 - 0
style.css

@@ -0,0 +1,21 @@
+
+#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;
+}
+