add rot

src/Game/Library.fs

@@ -3,12 +3,17 @@
 type direction =
     | NS
     | EW
+    | NE
+    | NW
+    | SE
+    | SW
     | Corner
 
 type env =
    | Wall of direction
    | Floor
    | Trap
+   | Player
 
 
 let envToString e =
@@ -17,10 +22,19 @@ let envToString e =
             match d with
                 | NS -> "|"
                 | EW -> "-"
+                | NE -> "\\"
+                | NW -> "/"
+                | SE -> "/"
+                | SW -> "\\"
                 | Corner -> "+"
-        | Floor -> "#"
+        | Floor -> "."
         | Trap -> "!"
+        | Player -> "@"
 
 let rowToString = List.fold (fun r e -> r + envToString e) ""
 
 let floorToString = List.fold (fun f r -> f + rowToString r + "\n") ""
+
+let rowToStringList = List.map (fun e -> envToString e)
+
+let floorToStringLists = List.map rowToStringList

src/Server/Program.fs

@@ -6,6 +6,8 @@ open Microsoft.AspNetCore.Builder
 open Microsoft.AspNetCore.Cors.Infrastructure
 open Microsoft.AspNetCore.Hosting
 open Microsoft.Extensions.Logging
+open Microsoft.AspNetCore.Http
+open FSharp.Control.Tasks.V2.ContextInsensitive
 open Microsoft.Extensions.DependencyInjection
 open Giraffe
 
@@ -34,17 +36,24 @@ module Views =
                 link [ _rel "stylesheet"
                        _type "text/css"
                        _href "/main.css" ]
+                script [ _src "//cdnjs.cloudflare.com/ajax/libs/rot.js/0.6.0/rot.js" ] []
+                script [ _src "//unpkg.com/vue" ] []
+                script [ _src "//unpkg.com/axios/dist/axios.min.js" ] []
+                script [ _src "/main.js"; _async ] []
             ]
             body [] content
         ]
 
     let partial() =
-        h1 [] [ encodedText "Server" ]
+        h1 [] [ encodedText "Dis my dumb game" ]
 
-    let index (model : Message) =
+    let display() =
+        div [ _id "game" ] []
+
+    let index () =
         [
             partial()
-            pre [] [ encodedText model.Text ]
+            display()
         ] |> layout
 
 // ---------------------------------
@@ -52,21 +61,31 @@ module Views =
 // ---------------------------------
 
 let indexHandler (name: string) =
-    let floor = [
-        [ Wall Corner; Wall EW; Wall Corner ];
-        [ Wall NS; Floor; Wall NS ];
-        [ Wall Corner; Wall EW; Wall Corner ]
-    ]
-    let model     = { Text = floorToString floor }
-    let view      = Views.index model
+    let view = Views.index ()
     htmlView view
 
+type mapResponse =
+    {
+        view: string
+    }
+
+let mapHandler() =
+    let floor = [
+        [ Wall Corner; Wall EW; Wall EW; Wall EW; Wall Corner ];
+        [ Wall NS; Floor; Floor; Floor; Wall NS ];
+        [ Wall NS; Floor; Player; Floor; Wall NS ];
+        [ Wall NS; Floor; Floor; Floor; Wall NS ];
+        [ Wall Corner; Wall EW; Wall EW; Wall EW; Wall Corner ]
+    ]
+    json (floorToString floor)
+
 let webApp =
     choose [
         GET >=>
             choose [
                 route "/" >=> indexHandler "world"
                 routef "/hello/%s" indexHandler
+                route "/map" >=> mapHandler()
             ]
         setStatusCode 404 >=> text "Not Found" ]
 

src/Server/WebRoot/main.js

@@ -0,0 +1,32 @@
+let app = new Vue({
+    el: "#game" ,
+    data: {
+        display: null,
+        board: [],
+        err: ""
+    },
+    mounted() {
+        let options = {
+            forceSquareRatio:true
+        };
+        this.display = new ROT.Display(options);
+        document.getElementById("game").appendChild(this.display.getContainer());
+        this.getData();
+    },
+    methods: {
+        draw: function(board) {
+            console.log("drawing board:\n", this.board);
+            // let str = "Using a regular grid\n@....%b{blue}#%b{}##.%b{red}.%b{}.$$$";
+            this.display.drawText(0,  0, this.board);
+        },
+        getData: function() {
+            axios.get("/map")
+                .then(resp => {
+                    console.log("Got data:\n", resp);
+                    this.board = resp.data;
+                    this.draw();
+                })
+                .catch(err => this.err = err);
+        }
+    }
+});