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
 
@@ -17,7 +19,7 @@ open Game.Game
 
 type Message =
     {
-        Text : string
+        Text: string
     }
 
 // ---------------------------------
@@ -30,43 +32,60 @@ module Views =
     let layout (content: XmlNode list) =
         html [] [
             head [] [
-                title []  [ encodedText "Server" ]
+                title [] [ encodedText "Server" ]
-                link [ _rel  "stylesheet"
+                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 () =
+    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
 
 // ---------------------------------
 // Web app
 // ---------------------------------
 
-let indexHandler (name : string) =
+let indexHandler (name: string) =
-    let floor = [
+    let view = Views.index ()
-        [ 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
     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" ]
 
@@ -74,7 +93,7 @@ let webApp =
 // Error handler
 // ---------------------------------
 
-let errorHandler (ex : Exception) (logger : ILogger) =
+let errorHandler (ex: Exception) (logger: ILogger) =
     logger.LogError(ex, "An unhandled exception has occurred while executing the request.")
     clearResponse >=> setStatusCode 500 >=> text ex.Message
 
@@ -82,27 +101,27 @@ let errorHandler (ex : Exception) (logger : ILogger) =
 // Config and Main
 // ---------------------------------
 
-let configureCors (builder : CorsPolicyBuilder) =
+let configureCors (builder: CorsPolicyBuilder) =
     builder.WithOrigins("http://localhost:8080")
            .AllowAnyMethod()
            .AllowAnyHeader()
            |> ignore
 
-let configureApp (app : IApplicationBuilder) =
+let configureApp (app: IApplicationBuilder) =
     let env = app.ApplicationServices.GetService<IHostingEnvironment>()
     (match env.IsDevelopment() with
-    | true  -> app.UseDeveloperExceptionPage()
+    | true -> app.UseDeveloperExceptionPage()
     | false -> app.UseGiraffeErrorHandler errorHandler)
         .UseHttpsRedirection()
         .UseCors(configureCors)
         .UseStaticFiles()
         .UseGiraffe(webApp)
 
-let configureServices (services : IServiceCollection) =
+let configureServices (services: IServiceCollection) =
-    services.AddCors()    |> ignore
+    services.AddCors() |> ignore
     services.AddGiraffe() |> ignore
 
-let configureLogging (builder : ILoggingBuilder) =
+let configureLogging (builder: ILoggingBuilder) =
     builder.AddFilter(fun l -> l.Equals LogLevel.Error)
            .AddConsole()
            .AddDebug() |> ignore
@@ -110,7 +129,7 @@ let configureLogging (builder : ILoggingBuilder) =
 [<EntryPoint>]
 let main _ =
     let contentRoot = Directory.GetCurrentDirectory()
-    let webRoot     = Path.Combine(contentRoot, "WebRoot")
+    let webRoot = Path.Combine(contentRoot, "WebRoot")
     WebHostBuilder()
         .UseKestrel()
         .UseContentRoot(contentRoot)

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);
+        }
+    }
+});