refactor a bit

src/Game/Library.fs

@@ -14,7 +14,26 @@ type env =
    | Floor
    | Trap
    | Player
+   
+type cast = {
+    spell: string
+    direction: direction
+}
+type command =
+    | Move of direction
+    | Refresh
+    | Cast of cast
 
+type location =
+    {
+        x: int
+        y: int
+    }
+type state =
+    {
+        board: string
+        playerLocation: location
+    }
 
 let envToString e =
     match e with

src/Server/Controllers.fs

@@ -0,0 +1,2 @@
+module Server.Controllers
+

src/Server/Program.fs

@@ -1,5 +1,7 @@
 module Server.App
 
+open Views
+
 open System
 open System.IO
 open Microsoft.AspNetCore.Builder
@@ -7,77 +9,41 @@ 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 FSharp.Control.Tasks.V2.ContextInsensitive
 open Giraffe
 
 open Game.Game
 
-// ---------------------------------
-// Models
-// ---------------------------------
-
-type Message =
-    {
-        Text: string
-    }
-
-// ---------------------------------
-// Views
-// ---------------------------------
-
-module Views =
-    open GiraffeViewEngine
-
-    let layout (content: XmlNode list) =
-        html [] [
-            head [] [
-                title [] [ encodedText "Server" ]
-                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 "Dis my dumb game" ]
-
-    let display() =
-        div [ _id "game" ] []
-
-    let index () =
-        [
-            partial()
-            display()
-        ] |> layout
-
 // ---------------------------------
 // Web app
 // ---------------------------------
 
 let indexHandler (name: string) =
-    let view = Views.index ()
+    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 NS; Floor; Floor; Floor; Wall NS ];
         [ Wall Corner; Wall EW; Wall EW; Wall EW; Wall Corner ]
     ]
-    json (floorToString floor)
+    let state = {
+        board = floorToString floor
+        playerLocation = { x = 1; y = 1 }
+    }
+    json state
+
+type Direction = string
+
+let moveHandler (next: HttpFunc) (ctx: HttpContext) =
+    task {
+        let! direction = ctx.BindJsonAsync<Direction>()
+        return! (mapHandler()) next ctx
+    }
 
 let webApp =
     choose [
@@ -87,6 +53,10 @@ let webApp =
                 routef "/hello/%s" indexHandler
                 route "/map" >=> mapHandler()
             ]
+        POST >=>
+            choose [
+                route "/move" >=> moveHandler
+            ]
         setStatusCode 404 >=> text "Not Found" ]
 
 // ---------------------------------

src/Server/Server.fsproj

@@ -15,6 +15,8 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Compile Include="Views.fs" />
+    <Compile Include="Controllers.fs" />
     <Compile Include="Program.fs" />
   </ItemGroup>
 

src/Server/Views.fs

@@ -0,0 +1,38 @@
+namespace Server
+
+open Giraffe
+open GiraffeViewEngine
+
+// ---------------------------------
+// Views
+// ---------------------------------
+
+module Views =
+    let layout (content: XmlNode list) =
+        html [] [
+            head [] [
+                title [] [ encodedText "Server" ]
+                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 "Dis my dumb game" ]
+
+    let display() =
+        div [ _id "app" ] [
+            div [ _id "game" ] []
+        ]
+
+    let index() =
+        [
+            partial()
+            display()
+        ] |> layout

src/Server/WebRoot/main.js

@@ -1,32 +1,45 @@
 let app = new Vue({
-    el: "#game" ,
+    el: "#app",
     data: {
         display: null,
-        board: [],
+        state: {board: ""},
         err: ""
     },
     mounted() {
         let options = {
-            forceSquareRatio:true
+            forceSquareRatio: true
         };
         this.display = new ROT.Display(options);
-        document.getElementById("game").appendChild(this.display.getContainer());
+        document.getElementById("game").replaceWith(this.display.getContainer());
         this.getData();
     },
     methods: {
-        draw: function(board) {
+        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.state.board);
-            this.display.drawText(0,  0, this.board);
+            if (this.state.playerLocation) {
+                this.display.drawText(this.state.playerLocation.x, this.state.playerLocation.y, "@")
+            }
         },
-        getData: function() {
+        getData: function () {
             axios.get("/map")
                 .then(resp => {
                     console.log("Got data:\n", resp);
-                    this.board = resp.data;
+                    this.state = resp.data;
                     this.draw();
                 })
                 .catch(err => this.err = err);
+        },
+        // sendCommand will be wired to the various keybinds
+        // each binding should send the game command expected
+        sendCommand: function (cmd) {
+            axios.post("/cmd")
+                .then(resp => {
+                    console.log("Got data from cmd:\n", resp)
+                    this.board = resp.data;
+                    this.draw()
+                })
+                .catch(err => this.err = err);
         }
     }
 });