From 9ea0f050dfa4df48a5496880391dcc6bf65bcafe Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Mon, 3 Oct 2016 17:55:40 -0600
Subject: [PATCH] Add nearby players list

---
 www/screens/menu.html   | 13 +++++----
 www/screens/nearby.html | 60 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 www/screens/nearby.html

diff --git a/www/screens/menu.html b/www/screens/menu.html
index 48fc210..5bf27ff 100644
--- a/www/screens/menu.html
+++ b/www/screens/menu.html
@@ -19,7 +19,8 @@
 
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" role="tablist" id="menutablist">
-        <li role="presentation" class="active"><a href="#inventory" aria-controls="inventory" role="tab" data-toggle="tab" id="inventory-tab"><i class="fa fa-fw fa-cube"></i> Inventory</a></li>
+        <li role="presentation" class="active"><a href="#nearby" aria-controls="nearby" role="tab" data-toggle="tab" id="nearby-tab"><i class="fa fa-fw fa-users"></i> Nearby</a></li>
+        <li role="presentation"><a href="#inventory" aria-controls="inventory" role="tab" data-toggle="tab" id="inventory-tab"><i class="fa fa-fw fa-cube"></i> Inventory</a></li>
         <li role="presentation"><a href="#shop" aria-controls="shop" role="tab" data-toggle="tab" id="shop-tab"><i class="fa fa-fw fa-money"></i> Shop</a></li>
         <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" id="profile-tab"><i class="fa fa-fw fa-user"></i> Profile</a></li>
         <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" id="settings-tab"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
@@ -27,10 +28,11 @@
 
     <!-- Tab panes -->
     <div class="tab-content" id="menutabcontent">
-        <div role="tabpanel" class="tab-pane active" id="inventory">...</div>
-        <div role="tabpanel" class="tab-pane" id="shop"></div>
-        <div role="tabpanel" class="tab-pane" id="profile"></div>
-        <div role="tabpanel" class="tab-pane" id="settings">...</div>
+        <div role="tabpanel" class="tab-pane active" id="nearby">Loading...</div>
+        <div role="tabpanel" class="tab-pane" id="inventory">Loading...</div>
+        <div role="tabpanel" class="tab-pane" id="shop">Loading...</div>
+        <div role="tabpanel" class="tab-pane" id="profile">Loading...</div>
+        <div role="tabpanel" class="tab-pane" id="settings">Loading...</div>
     </div>
 
 </div>
@@ -49,4 +51,5 @@
     $('#menutabcontent #shop').load("screens/shop.html");
     $('#menutabcontent #settings').load("screens/settings.html");
     $('#menutabcontent #inventory').load("screens/inventory.html");
+    $('#menutabcontent #nearby').load("screens/nearby.html");
 </script>
\ No newline at end of file
diff --git a/www/screens/nearby.html b/www/screens/nearby.html
new file mode 100644
index 0000000..5035bb1
--- /dev/null
+++ b/www/screens/nearby.html
@@ -0,0 +1,60 @@
+<!--
+    TerranQuest - Augmented Reality fantasy game
+
+    Copyright 2016 Netsyms Technologies
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="scrollable-box">
+    <h4>Players</h4>
+    <div class="list-group" id="nearby-people-list">
+        <div class="list-group-item">
+            <i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
+        </div>
+    </div>
+</div>
+
+<script>
+    function getpeoplehtmlfromjson(person) {
+        var peoplehtml = "<div class='list-group-item nearby-item' id='nearby-person-" + person.uuid + "'>"
+                + "<h4 class='nearbyname'>" + person.name + "</h4>"
+                + "<p class='nearbyteam' style='color: #" + getTeamColorFromId(person.team) + ";'>" + getTeamNameFromId(person.team) + "</p>"
+                + "</div>";
+        return peoplehtml;
+    }
+
+    function loadnearby() {
+        $.getJSON(mkApiUrl('nearby'), {
+            lat: latitude,
+            long: longitude
+        }, function (data) {
+            var content = "";
+            if (data.status === 'OK') {
+                var people = data.people;
+                people.forEach(function (person) {
+                    if (person.name !== username) {
+                        content += getpeoplehtmlfromjson(person);
+                    }
+                });
+            } else {
+                content = "<div class='list-group-item'>An error occurred.</div>";
+            }
+            if (content == '') {
+                content = "<div class='list-group-item'>There's nobody else here...</div>";
+            }
+            $('#nearby-people-list').html(content);
+        });
+    }
+
+    loadnearby();
+</script>
\ No newline at end of file