updated with bootstrap

Started tmp.ts for algorithm
dpalay · Sep 11, 2019 · be1e6f3 · be1e6f3
1 parent decc20b
commit be1e6f3
Show file tree

Hide file tree

Showing 10 changed files with 454 additions and 90 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,27 @@
+ {
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "typescript",
+            "tsconfig": "tsconfig.json",
+            "problemMatcher": [
+                "$tsc"
+            ],
+            "group": "build"
+        },
+        {
+            "type": "typescript",
+            "tsconfig": "tsconfig.json",
+            "option": "watch",
+            "problemMatcher": [
+                "$tsc-watch"
+            ],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}
diff --git a/bin/data.js b/bin/data.js
diff --git a/bin/tmp.js b/bin/tmp.js
@@ -0,0 +1,32 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var data_1 = __importDefault(require("./data"));
+var slope = function (anchor, point) {
+    return (point.lat - anchor.lat) / (point.lng - anchor.lng);
+};
+var sortedList = data_1["default"].sort(function (a, b) { return Math.abs(b.coordinates.lng) - Math.abs(a.coordinates.lng); });
+var anchor = sortedList.shift(); // removes the Anchor from the list of portals to check
+console.log("Using " + anchor.title + " as the Anchor!");
+console.log(sortedList
+    // calculates the slope and adds it to the portal
+    .map(function (portal) {
+    return __assign(__assign({}, portal), { slopeFromAnchor: slope(anchor.coordinates, portal.coordinates) });
+})
+    // sorts based on the slope
+    .sort(function (a, b) { return a.slopeFromAnchor - b.slopeFromAnchor; })
+    // extracts just the bits we want to see
+    .map(function (portal) { return "from " + portal.title; }));
diff --git a/data.json b/data.json
diff --git a/data.ts b/data.ts
diff --git a/index.html b/index.html
@@ -15,12 +15,53 @@
             background-color: #FAFAFA;
         }
     </style>
+    <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+<script
+  src="https://code.jquery.com/jquery-3.4.1.min.js"
+  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+  crossorigin="anonymous"></script>
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
 
 <body translate="no">
 
-    <div class="container centered">
-        <div id="graph-container"></div>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Ingress Field Map</a>
+          </div>
+          <div id="navbar" class="navbar-collapse collapse">
+          </div><!--/.navbar-collapse -->
+        </div>
+      </nav>
+      <div class="container-fluid">
+          <div class="row">
+
+              <div class="col-md-2" id="portalList">
+                  <ul>
+
+                </ul>
+            </div>
+            <div class="col-md-10">
+                <div class="sticky-top">
+
+                    <div id="graph-container"></div>
+                </div>
+            </div>
+        </div>
     </div>
     <script src="libs/d3.v5.js"></script>
     <script src="scripts/d3script.js"></script>
@@ -33,25 +74,27 @@
                 bottom: 30,
                 left: 40
             },
-            width = 860 - margin.left - margin.right,
+            width = 1280 - margin.left - margin.right,
             height = 900 - margin.top - margin.bottom;
         let x = d3.scaleLinear()
             .range([0, width]);
         let y = d3.scaleLinear()
             .range([height, 0]);
-
-        let svg = d3.select("body").append("svg")
+        let container = d3.select("#graph-container")
+        let svg = container.append("svg")
             .attr("width", width + margin.left + margin.right)
             .attr("height", height + margin.top + margin.bottom)
             .append("g")
             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
         d3.json('data.json')
             .then(data => {
+                console.log(data)
                 let cleanData = data.map(datum => {
                     return {
                         x: +datum.coordinates.lng,
-                        y: +datum.coordinates.lat
+                        y: +datum.coordinates.lat,
+                        name: datum.title
                     }
                 })
                 console.log(cleanData)
@@ -81,6 +124,23 @@
                     .attr("cx", d => x(d.x))
                     .attr("cy", d => y(d.y))
                     .attr("r", 2)
+                    .attr("label", d => d.name)
+
+                d3.select("#portalList")
+                    .selectAll("li")
+                    .data(cleanData)
+                    .enter()
+                    .append("li")
+                    .text(d => d.name)
+
+                svg.append("g")
+                    .attr("class", "labels")
+                    .selectAll("text")
+                    .data(cleanData)
+                    .enter().append("text")
+                    .attr("dx", d => x(d.x))
+                    .attr("dy", d => y(d.y))
+                    .text(d =>  d.name );
 
 
                 /*.append("path")

diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "portaldisplay",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "tsc": "^1.20150623.0",
+    "typescript": "^3.6.3"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dpalay/PortalDisplay.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dpalay/PortalDisplay/issues"
+  },
+  "homepage": "https://github.com/dpalay/PortalDisplay#readme"
+}
diff --git a/tmp.ts b/tmp.ts
@@ -0,0 +1,22 @@
+import data from './data'
+
+
+const slope = (anchor: {lat: number, lng: number}, point: {lat: number, lng: number}): number => 
+(point.lat - anchor.lat)/(point.lng - anchor.lng)
+
+let sortedList = data.sort((a,b) => Math.abs(b.coordinates.lng) - Math.abs(a.coordinates.lng))
+let anchor = sortedList.shift() // removes the Anchor from the list of portals to check
+console.log(`Using ${anchor.title} as the Anchor!`)
+console.log(
+
+    sortedList
+    // calculates the slope and adds it to the portal
+    .map((portal) => {  
+        return {...portal, slopeFromAnchor: slope(anchor.coordinates, portal.coordinates)}
+})
+// sorts based on the slope
+.sort((a,b) => a.slopeFromAnchor - b.slopeFromAnchor)
+
+// extracts just the bits we want to see
+.map(portal => `from ${portal.title}`)
+);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compileOnSave": true,
+    "compilerOptions": {
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "outDir": "./bin"
+            }
+}