Added grid and formatted messages
This commit is contained in:
parent
d031961a84
commit
b1282cc639
3 changed files with 68 additions and 7 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue