Room map WIP

game/begin.coffee

@@ -68,18 +68,22 @@ actlink = (content, ref) ->
 sysroom = (name, options) ->
   options.canSave = false
   options.enter = () ->
-    $("#inventory").hide()
+    $(".action").hide()
   options.exit = () ->
     salet.view.clearContent('#current-room')
-    $("#inventory").show()
+    $(".action").show()
   options.dsc = () ->
-    return @text.fcall()+"\n\n"+"""
+    return @text.fcall()
+  ###
+      +"\n\n"
+      +"""
     <div class="center"><a href="./exit"><button class="btn btn-lg btn-outline-primary">Go back</button></a></div>
     """
   options.actions = {
     exit: () ->
       return salet.goBack()
   }
+  ###
   return room(name, options)
 
 croom = (name, spec) ->
@@ -122,3 +126,44 @@ sysroom "settings",
 
       <button onclick="TogetherJS(this); return false;" class="btn btn-outline-primary">#{"multiplayer".l()}</button>
     """
+
+sysroom "map",
+  text: () ->
+    return "<div id='map'></div>"
+  after: () ->
+    data = {
+      edges: []
+      nodes: []
+    }
+    edges = []
+    for name, room of salet.rooms
+      if room.canSave == false or name == "start"
+        continue
+      data.nodes.push({
+        "id": name
+        "label": room.title()
+        "size": 5
+        "color": "#000"
+        "x": Math.random()
+        "y": Math.random()
+      })
+      if room.ways? and room.ways.length > 0
+        for way in room.ways
+          id = "edge_"+name+"_"+way
+          # we don't want to display a two-way link twice
+          if edges.indexOf("edge_"+way+"_"+name) == -1
+            edges.push(id)
+            data.edges.push({
+              "id": id
+              "source": room.name
+              "target": way
+              "size": 1
+              "color": "#ccc"
+            })
+    console.log data
+    s = new sigma({
+      graph: data,
+      container: 'map'
+    })
+    console.log(s)
+    return ""

html/en.html

@@ -62,6 +62,7 @@
     <!-- CDN JS Libraries -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js" crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.0/sigma.min.js" integrity="sha256-SRRubnX77KKxTl1/uluP1zGweVqx3pTO7aEaTecZB4g=" crossorigin="anonymous"></script>
     <script src="https://togetherjs.com/togetherjs-min.js"></script>
     <script type="text/javascript" src="game/salet.min.js"></script>
 

sass/main.scss

@@ -177,4 +177,8 @@ hr {
     background: darken($body-bg, 15); 
   }
 }
-
+#map {
+  max-width: 400px;
+  height: 400px;
+  margin: auto;
+}