From b1282cc639721b36df33ceb44e954c91462889f0 Mon Sep 17 00:00:00 2001
From: Mikko Ahlroth <mikko.ahlroth@gmail.com>
Date: Sun, 29 Nov 2015 13:14:33 +0200
Subject: [PATCH] Added grid and formatted messages

---
 lib/proxichat/network_utils.ex  |  2 +-
 web/channels/network_channel.ex |  2 +-
 web/static/js/socket.js         | 71 ++++++++++++++++++++++++++++++---
 3 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/lib/proxichat/network_utils.ex b/lib/proxichat/network_utils.ex
index ebe9e54..f0cd89c 100644
--- a/lib/proxichat/network_utils.ex
+++ b/lib/proxichat/network_utils.ex
@@ -3,7 +3,7 @@ defmodule Proxichat.NetworkUtils do
 
   def get_network(lat, lon) do
     [lat + 0.0, lon + 0.0]
-    |> Enum.map(fn coord -> Float.round coord, @accuracy end)
+    |> Enum.map(fn coord -> Float.floor coord, @accuracy end)
     |> Enum.map(fn coord -> Float.to_string coord, decimals: @accuracy end)
     |> Enum.join("x")
   end
diff --git a/web/channels/network_channel.ex b/web/channels/network_channel.ex
index fa31ed0..370ffa7 100644
--- a/web/channels/network_channel.ex
+++ b/web/channels/network_channel.ex
@@ -5,7 +5,7 @@ defmodule Proxichat.NetworkChannel do
 
   def join("networks:" <> network_id, %{"user_id" => id, "lat" => lat, "lon" => lon}, socket) do
     send self, {:after_join, id, {lat, lon}}
-    {:ok, %{body: "Welcome to network #{network_id}, traveller! You shall henceforth be known as #{id}."}, socket}
+    {:ok, socket}
   end
 
   def handle_in("new_msg", %{"body" => body, "user_id" => id}, socket) do
diff --git a/web/static/js/socket.js b/web/static/js/socket.js
index 94813d0..148a9d7 100644
--- a/web/static/js/socket.js
+++ b/web/static/js/socket.js
@@ -51,9 +51,22 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 // Finally, pass the token on connect as below. Or remove it
 // from connect if you don't care about authentication.
 
+let math_funcs = ['round', 'floor', 'ceil'];
+math_funcs.forEach(function(funcName) {
+  Math['_' + funcName] = Math[funcName];
+  Math[funcName] = function(number, precision)
+  {
+    precision = Math.abs(parseInt(precision)) || 0;
+    var coefficient = Math.pow(10, precision);
+    return Math['_' + funcName](number*coefficient)/coefficient;
+  }
+});
+
 socket.connect();
 
-let start_loc = [61.2, 24.6];
+let decimal_places = 1;
+let accuracy = 1 / (10 * decimal_places);
+let start_loc = [61.20234, 24.62655];
 let current_loc = start_loc;
 
 let user_id = null;
@@ -63,6 +76,10 @@ let text_input = document.getElementById('chat_text_field');
 let input_form = document.getElementById('chat_form');
 let chat_log = document.getElementById('chat_log');
 let other_locs = {};
+let boxes = [];
+
+let map = null;
+let marker = null;
 
 input_form.addEventListener('submit', e => {
   network_out(text_input.value);
@@ -81,6 +98,9 @@ lobby_channel.join()
     console.log('Joined successfully', resp);
 
     user_id = resp.user_id;
+
+    print_log('You shall henceforth be known as ' + user_id + '.');
+
     window.userToken = resp.token;
     join_network(resp.goto);
   })
@@ -105,7 +125,6 @@ function connect_network() {
     .receive('ok', resp => {
       print_log('Joined network ' + network + '.');
       text_input.disabled = false;
-      network_in(resp);
     })
     .receive('error', resp => {
       throw new Error('Could not join network!');
@@ -229,9 +248,6 @@ function join_network(new_network) {
   connect_network();
 }
 
-let map = null;
-let marker = null;
-
 function init_map() {
   var myOptions = {
     zoom: 12,
@@ -249,6 +265,51 @@ function init_map() {
     current_loc = [evt.latLng.lat(), evt.latLng.lng()];
     update_loc(current_loc[0], current_loc[1]);
   });
+
+  google.maps.event.addListener(map, 'bounds_changed', evt => {
+    clear_boxes();
+
+    let bounds = map.getBounds();
+
+    let ne = bounds.getNorthEast();
+    let sw = bounds.getSouthWest();
+
+    for (let lat = snap_coord(sw.lat() - 5 * accuracy); lat <= snap_coord(ne.lat() + 5 * accuracy); lat += accuracy) {
+      for (let lon = snap_coord(sw.lng() - 5 * accuracy); lon <= snap_coord(ne.lng() + 5 * accuracy); lon += accuracy) {
+        draw_box(lat, lon);
+      }
+    }
+  });
+}
+
+function snap_coord(coord) {
+  return Math.floor(coord, decimal_places);
+}
+
+function clear_boxes() {
+  for (let i = 0; i < boxes.length; ++i) {
+    boxes[i].setMap(null);
+  }
+
+  boxes = [];
+}
+
+function draw_box(lat, lon) {
+  let box = new google.maps.Polyline({
+    map: map,
+    path: [
+      new google.maps.LatLng(lat, lon),
+      new google.maps.LatLng(lat - accuracy, lon),
+      new google.maps.LatLng(lat - accuracy, lon + accuracy),
+      new google.maps.LatLng(lat, lon + accuracy),
+      new google.maps.LatLng(lat, lon)
+    ],
+    strokeColor: '#ff0000',
+    strokeOpacity: 1,
+    strokeWeight: 2
+  });
+
+  boxes.push(box);
 }
 
 google.maps.event.addDomListener(window, 'load', init_map);