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
|
def get_network(lat, lon) do
|
||||||
[lat + 0.0, lon + 0.0]
|
[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.map(fn coord -> Float.to_string coord, decimals: @accuracy end)
|
||||||
|> Enum.join("x")
|
|> Enum.join("x")
|
||||||
end
|
end
|
||||||
|
|
|
@ -5,7 +5,7 @@ defmodule Proxichat.NetworkChannel do
|
||||||
|
|
||||||
def join("networks:" <> network_id, %{"user_id" => id, "lat" => lat, "lon" => lon}, socket) do
|
def join("networks:" <> network_id, %{"user_id" => id, "lat" => lat, "lon" => lon}, socket) do
|
||||||
send self, {:after_join, id, {lat, lon}}
|
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
|
end
|
||||||
|
|
||||||
def handle_in("new_msg", %{"body" => body, "user_id" => id}, socket) do
|
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
|
// Finally, pass the token on connect as below. Or remove it
|
||||||
// from connect if you don't care about authentication.
|
// 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();
|
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 current_loc = start_loc;
|
||||||
|
|
||||||
let user_id = null;
|
let user_id = null;
|
||||||
|
@ -63,6 +76,10 @@ let text_input = document.getElementById('chat_text_field');
|
||||||
let input_form = document.getElementById('chat_form');
|
let input_form = document.getElementById('chat_form');
|
||||||
let chat_log = document.getElementById('chat_log');
|
let chat_log = document.getElementById('chat_log');
|
||||||
let other_locs = {};
|
let other_locs = {};
|
||||||
|
let boxes = [];
|
||||||
|
|
||||||
|
let map = null;
|
||||||
|
let marker = null;
|
||||||
|
|
||||||
input_form.addEventListener('submit', e => {
|
input_form.addEventListener('submit', e => {
|
||||||
network_out(text_input.value);
|
network_out(text_input.value);
|
||||||
|
@ -81,6 +98,9 @@ lobby_channel.join()
|
||||||
console.log('Joined successfully', resp);
|
console.log('Joined successfully', resp);
|
||||||
|
|
||||||
user_id = resp.user_id;
|
user_id = resp.user_id;
|
||||||
|
|
||||||
|
print_log('You shall henceforth be known as ' + user_id + '.');
|
||||||
|
|
||||||
window.userToken = resp.token;
|
window.userToken = resp.token;
|
||||||
join_network(resp.goto);
|
join_network(resp.goto);
|
||||||
})
|
})
|
||||||
|
@ -105,7 +125,6 @@ function connect_network() {
|
||||||
.receive('ok', resp => {
|
.receive('ok', resp => {
|
||||||
print_log('Joined network ' + network + '.');
|
print_log('Joined network ' + network + '.');
|
||||||
text_input.disabled = false;
|
text_input.disabled = false;
|
||||||
network_in(resp);
|
|
||||||
})
|
})
|
||||||
.receive('error', resp => {
|
.receive('error', resp => {
|
||||||
throw new Error('Could not join network!');
|
throw new Error('Could not join network!');
|
||||||
|
@ -229,9 +248,6 @@ function join_network(new_network) {
|
||||||
connect_network();
|
connect_network();
|
||||||
}
|
}
|
||||||
|
|
||||||
let map = null;
|
|
||||||
let marker = null;
|
|
||||||
|
|
||||||
function init_map() {
|
function init_map() {
|
||||||
var myOptions = {
|
var myOptions = {
|
||||||
zoom: 12,
|
zoom: 12,
|
||||||
|
@ -249,6 +265,51 @@ function init_map() {
|
||||||
current_loc = [evt.latLng.lat(), evt.latLng.lng()];
|
current_loc = [evt.latLng.lat(), evt.latLng.lng()];
|
||||||
update_loc(current_loc[0], current_loc[1]);
|
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);
|
google.maps.event.addDomListener(window, 'load', init_map);
|
||||||
|
|
Loading…
Reference in a new issue