mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 12:39:18 +02:00
Fix no-var problems (ESLint), run formatter on JS
This commit is contained in:
Hans5958
parent
4be8a36839
commit
2e728ef20f
9 changed files with 920 additions and 920 deletions
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
window.addEventListener("error", function (e) {
|
||||
console.log(e);
|
||||
var errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
let errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
errorMessage += "<p class=\"errorBody\">" + e.message + "</p>";
|
||||
errorMessage += "<p class=\"errorBody\">on line " + e.lineno + "</p>";
|
||||
errorMessage += "<p class=\"error\">If this keeps happening, feel free to tell us on <a href=\"https://discord.gg/pJkm23b2nA\">our Discord server</a>.</p>";
|
||||
|
|
@ -36,24 +36,24 @@ const areaMap = new Map();
|
|||
|
||||
// Modified from https://stackoverflow.com/a/33670691
|
||||
function calcPolygonArea(vertices) {
|
||||
var hit = areaMap.get(vertices);
|
||||
const hit = areaMap.get(vertices);
|
||||
if (hit != null) {
|
||||
return hit;
|
||||
}
|
||||
|
||||
var total = 0;
|
||||
let total = 0;
|
||||
|
||||
for (var i = 0, l = vertices.length; i < l; i++) {
|
||||
var addX = vertices[i][0];
|
||||
var addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1];
|
||||
var subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0];
|
||||
var subY = vertices[i][1];
|
||||
for (let i = 0, l = vertices.length; i < l; i++) {
|
||||
const addX = vertices[i][0];
|
||||
const addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1];
|
||||
const subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0];
|
||||
const subY = vertices[i][1];
|
||||
|
||||
total += (addX * addY * 0.5);
|
||||
total -= (subX * subY * 0.5);
|
||||
}
|
||||
|
||||
var area = Math.floor(Math.abs(total));
|
||||
const area = Math.floor(Math.abs(total));
|
||||
areaMap.set(vertices, area);
|
||||
|
||||
return area;
|
||||
|
|
|
|||
102
web/_js/draw.js
102
web/_js/draw.js
|
|
@ -13,38 +13,38 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
var finishButton = document.getElementById("finishButton");
|
||||
var resetButton = document.getElementById("resetButton");
|
||||
var undoButton = document.getElementById("undoButton");
|
||||
var redoButton = document.getElementById("redoButton");
|
||||
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||
var entryId = 0
|
||||
const finishButton = document.getElementById("finishButton");
|
||||
const resetButton = document.getElementById("resetButton");
|
||||
const undoButton = document.getElementById("undoButton");
|
||||
const redoButton = document.getElementById("redoButton");
|
||||
const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||
let entryId = 0
|
||||
|
||||
var objectInfoBox = document.getElementById("objectInfo");
|
||||
var hintText = document.getElementById("hint");
|
||||
const objectInfoBox = document.getElementById("objectInfo");
|
||||
const hintText = document.getElementById("hint");
|
||||
|
||||
var periodsStatus = document.getElementById('periodsStatus')
|
||||
var periodGroups = document.getElementById('periodGroups')
|
||||
var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
|
||||
var periodsAdd = document.getElementById('periodsAdd')
|
||||
const periodsStatus = document.getElementById('periodsStatus')
|
||||
const periodGroups = document.getElementById('periodGroups')
|
||||
const periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
|
||||
const periodsAdd = document.getElementById('periodsAdd')
|
||||
|
||||
var exportButton = document.getElementById("exportButton");
|
||||
var cancelButton = document.getElementById("cancelButton");
|
||||
const exportButton = document.getElementById("exportButton");
|
||||
const cancelButton = document.getElementById("cancelButton");
|
||||
|
||||
var exportOverlay = document.getElementById("exportOverlay");
|
||||
var exportCloseButton = document.getElementById("exportCloseButton");
|
||||
var exportBackButton = document.getElementById("exportBackButton")
|
||||
const exportOverlay = document.getElementById("exportOverlay");
|
||||
const exportCloseButton = document.getElementById("exportCloseButton");
|
||||
const exportBackButton = document.getElementById("exportBackButton")
|
||||
|
||||
var path = [];
|
||||
var center = [1000, 1000];
|
||||
let path = [];
|
||||
let center = [1000, 1000];
|
||||
|
||||
var pathWithPeriods = []
|
||||
var periodGroupElements = []
|
||||
let pathWithPeriods = []
|
||||
let periodGroupElements = []
|
||||
|
||||
var disableDrawingOverride = false
|
||||
var drawing = true;
|
||||
let disableDrawingOverride = false
|
||||
let drawing = true;
|
||||
|
||||
var periodClipboard = {
|
||||
const periodClipboard = {
|
||||
"index": null,
|
||||
"path": null
|
||||
}
|
||||
|
|
@ -64,22 +64,22 @@ function initDraw(){
|
|||
window.renderBackground = renderBackground
|
||||
window.updateHovering = updateHovering
|
||||
|
||||
// var startPeriodField = document.getElementById('startPeriodField')
|
||||
// var endPeriodField = document.getElementById('endPeriodField')
|
||||
// var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
|
||||
// let startPeriodField = document.getElementById('startPeriodField')
|
||||
// let endPeriodField = document.getElementById('endPeriodField')
|
||||
// let periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
|
||||
|
||||
var rShiftPressed = false;
|
||||
var lShiftPressed = false;
|
||||
var shiftPressed = false;
|
||||
let rShiftPressed = false;
|
||||
let lShiftPressed = false;
|
||||
let shiftPressed = false;
|
||||
|
||||
var highlightUncharted = true;
|
||||
let highlightUncharted = true;
|
||||
|
||||
renderBackground();
|
||||
applyView();
|
||||
|
||||
container.style.cursor = "crosshair";
|
||||
|
||||
var undoHistory = [];
|
||||
let undoHistory = [];
|
||||
|
||||
render(path);
|
||||
|
||||
|
|
@ -94,13 +94,13 @@ function initDraw(){
|
|||
x = x - container.offsetLeft;
|
||||
y = y - container.offsetTop;
|
||||
|
||||
var pos = [
|
||||
const pos = [
|
||||
~~((x - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0])) / zoom) + 0.5,
|
||||
~~((y - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1])) / zoom) + 0.5
|
||||
];
|
||||
|
||||
if (shiftPressed && path.length > 0) {
|
||||
var previous = path[path.length-1];
|
||||
const previous = path[path.length - 1];
|
||||
|
||||
if (Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0])) {
|
||||
pos[0] = previous[0];
|
||||
|
|
@ -117,7 +117,7 @@ function initDraw(){
|
|||
|
||||
if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing) {
|
||||
|
||||
var coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
|
||||
path.push(coords);
|
||||
render(path);
|
||||
|
|
@ -138,7 +138,7 @@ function initDraw(){
|
|||
|
||||
if (!dragging && drawing && path.length > 0) {
|
||||
|
||||
var coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
render(path.concat([coords]));
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ function initDraw(){
|
|||
});
|
||||
|
||||
function exportJson() {
|
||||
var exportObject = {
|
||||
const exportObject = {
|
||||
id: entryId,
|
||||
name: document.getElementById("nameField").value,
|
||||
description: document.getElementById("descriptionField").value,
|
||||
|
|
@ -269,13 +269,13 @@ function initDraw(){
|
|||
if (inputWebsite.length) exportObject.links.website = inputWebsite
|
||||
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit
|
||||
|
||||
var jsonString = JSON.stringify(exportObject, null, "\t");
|
||||
var textarea = document.getElementById("exportString");
|
||||
let jsonString = JSON.stringify(exportObject, null, "\t");
|
||||
const textarea = document.getElementById("exportString");
|
||||
jsonString = jsonString.split("\n");
|
||||
jsonString = jsonString.join("\n ");
|
||||
jsonString = " " + jsonString;
|
||||
textarea.value = jsonString;
|
||||
var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
|
||||
let directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent(document.getElementById("exportString").value);
|
||||
if (jsonString.length > 7493) {
|
||||
directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent(" " + JSON.stringify(exportObject));
|
||||
}
|
||||
|
|
@ -352,9 +352,9 @@ function initDraw(){
|
|||
backgroundContext.fillStyle = "rgba(0, 0, 0, 1)";
|
||||
//backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
for (let i = 0; i < atlas.length; i++) {
|
||||
|
||||
var path = atlas[i].path;
|
||||
const path = atlas[i].path;
|
||||
|
||||
backgroundContext.beginPath();
|
||||
|
||||
|
|
@ -362,7 +362,7 @@ function initDraw(){
|
|||
backgroundContext.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var p = 1; p < path.length; p++){
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
backgroundContext.lineTo(path[p][0], path[p][1]);
|
||||
}
|
||||
|
||||
|
|
@ -392,7 +392,7 @@ function initDraw(){
|
|||
context.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var i = 1; i < path.length; i++){
|
||||
for (let i = 1; i < path.length; i++) {
|
||||
context.lineTo(path[i][0], path[i][1]);
|
||||
}
|
||||
|
||||
|
|
@ -410,11 +410,11 @@ function initDraw(){
|
|||
|
||||
function updateHovering(e, tapped) {
|
||||
if (!dragging && (!fixed || tapped)) {
|
||||
var pos = [
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom
|
||||
, (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
];
|
||||
var coords_p = document.getElementById("coords_p");
|
||||
const coords_p = document.getElementById("coords_p");
|
||||
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||
}
|
||||
}
|
||||
|
|
@ -478,7 +478,7 @@ function initDraw(){
|
|||
|
||||
function calculateCenter(path) {
|
||||
|
||||
var area = 0,
|
||||
let area = 0,
|
||||
i,
|
||||
j,
|
||||
point1,
|
||||
|
|
@ -613,10 +613,10 @@ function initPeriodGroups() {
|
|||
|
||||
function updatePeriodGroups() {
|
||||
// console.log('updatePeriodGroups')
|
||||
var pathToActive = []
|
||||
var lastActivePathIndex
|
||||
var currentActivePathIndex
|
||||
var currentActivePathIndexes = []
|
||||
let pathToActive = []
|
||||
let lastActivePathIndex
|
||||
let currentActivePathIndex
|
||||
const currentActivePathIndexes = []
|
||||
|
||||
periodGroupElements.forEach((elements, index) => {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ function createInfoBlock(entry) {
|
|||
return entryParagraphPositionElement;
|
||||
}
|
||||
|
||||
var element = document.createElement("div");
|
||||
const element = document.createElement("div");
|
||||
element.className = "object";
|
||||
|
||||
const headerElement = document.createElement("h2");
|
||||
|
|
|
|||
|
|
@ -15,27 +15,27 @@
|
|||
|
||||
const prodDomain = "place-atlas.stefanocoding.me"
|
||||
|
||||
var innerContainer = document.getElementById("innerContainer");
|
||||
var container = document.getElementById("container");
|
||||
var canvas = document.getElementById("highlightCanvas");
|
||||
var context = canvas.getContext("2d");
|
||||
const innerContainer = document.getElementById("innerContainer");
|
||||
const container = document.getElementById("container");
|
||||
const canvas = document.getElementById("highlightCanvas");
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
var zoom = 1;
|
||||
let zoom = 1;
|
||||
|
||||
if (window.devicePixelRatio) {
|
||||
zoom = 1 / window.devicePixelRatio;
|
||||
}
|
||||
|
||||
var maxZoom = 128;
|
||||
var minZoom = 0.1;
|
||||
const maxZoom = 128;
|
||||
const minZoom = 0.1;
|
||||
|
||||
var zoomOrigin = [0, 0];
|
||||
var scaleZoomOrigin = [0, 0];
|
||||
let zoomOrigin = [0, 0];
|
||||
let scaleZoomOrigin = [0, 0];
|
||||
|
||||
var dragging = false;
|
||||
var lastPosition = [0, 0];
|
||||
let dragging = false;
|
||||
let lastPosition = [0, 0];
|
||||
|
||||
var viewportSize = [0, 0];
|
||||
const viewportSize = [0, 0];
|
||||
|
||||
document.getElementById("entriesListDonate").addEventListener("click", function (e) {
|
||||
document.getElementById("donateOverlay").style.display = "flex";
|
||||
|
|
@ -63,9 +63,9 @@ function applyView(){
|
|||
|
||||
}
|
||||
|
||||
var atlas = null;
|
||||
let atlas = null;
|
||||
window.atlas = atlas
|
||||
var atlasAll = null
|
||||
let atlasAll = null
|
||||
window.atlasAll = atlasAll
|
||||
|
||||
if (document.location.host !== prodDomain) document.body.dataset.dev = ""
|
||||
|
|
@ -97,17 +97,17 @@ async function init(){
|
|||
zoomOrigin = [0, 0];
|
||||
applyView();
|
||||
|
||||
var initialPinchDistance = 0;
|
||||
var initialPinchZoom = 0;
|
||||
var initialPinchZoomOrigin = [0, 0];
|
||||
let initialPinchDistance = 0;
|
||||
let initialPinchZoom = 0;
|
||||
let initialPinchZoomOrigin = [0, 0];
|
||||
|
||||
var desiredZoom;
|
||||
var zoomAnimationFrame;
|
||||
let desiredZoom;
|
||||
let zoomAnimationFrame;
|
||||
|
||||
var mode = "view";
|
||||
let mode = "view";
|
||||
|
||||
var args = window.location.search;
|
||||
var params = new URLSearchParams(args)
|
||||
const args = window.location.search;
|
||||
const params = new URLSearchParams(args)
|
||||
if (args) {
|
||||
mode = params.get("mode")
|
||||
if (!mode) {
|
||||
|
|
@ -200,8 +200,8 @@ async function init(){
|
|||
window.cancelAnimationFrame(zoomAnimationFrame);
|
||||
}*/
|
||||
|
||||
var x = container.clientWidth/2;
|
||||
var y = container.clientHeight/2;
|
||||
const x = container.clientWidth / 2;
|
||||
const y = container.clientHeight / 2;
|
||||
|
||||
initialPinchZoomOrigin = [
|
||||
scaleZoomOrigin[0],
|
||||
|
|
@ -224,8 +224,8 @@ async function init(){
|
|||
window.cancelAnimationFrame(zoomAnimationFrame);
|
||||
}*/
|
||||
|
||||
var x = container.clientWidth/2;
|
||||
var y = container.clientHeight/2;
|
||||
const x = container.clientWidth / 2;
|
||||
const y = container.clientHeight / 2;
|
||||
|
||||
initialPinchZoomOrigin = [
|
||||
scaleZoomOrigin[0],
|
||||
|
|
@ -254,8 +254,8 @@ async function init(){
|
|||
window.cancelAnimationFrame(zoomAnimationFrame);
|
||||
}*/
|
||||
|
||||
var x = e.clientX - container.offsetLeft;
|
||||
var y = e.clientY - container.offsetTop;
|
||||
const x = e.clientX - container.offsetLeft;
|
||||
const y = e.clientY - container.offsetTop;
|
||||
|
||||
initialPinchZoomOrigin = [
|
||||
scaleZoomOrigin[0],
|
||||
|
|
@ -288,8 +288,8 @@ async function init(){
|
|||
window.cancelAnimationFrame(zoomAnimationFrame);
|
||||
}*/
|
||||
|
||||
var x = e.clientX - container.offsetLeft;
|
||||
var y = e.clientY - container.offsetTop;
|
||||
const x = e.clientX - container.offsetLeft;
|
||||
const y = e.clientY - container.offsetTop;
|
||||
|
||||
initialPinchZoomOrigin = [
|
||||
scaleZoomOrigin[0],
|
||||
|
|
@ -407,8 +407,8 @@ async function init(){
|
|||
|
||||
function mousemove(x, y) {
|
||||
if (dragging) {
|
||||
var deltaX = x - lastPosition[0];
|
||||
var deltaY = y - lastPosition[1];
|
||||
const deltaX = x - lastPosition[0];
|
||||
const deltaY = y - lastPosition[1];
|
||||
lastPosition = [x, y];
|
||||
|
||||
zoomOrigin[0] += deltaX;
|
||||
|
|
@ -435,15 +435,15 @@ async function init(){
|
|||
|
||||
} else if (e.touches.length == 2) {
|
||||
|
||||
var newPinchDistance = Math.sqrt(
|
||||
const newPinchDistance = Math.sqrt(
|
||||
Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
|
||||
+ Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
|
||||
);
|
||||
|
||||
zoom = initialPinchZoom * newPinchDistance / initialPinchDistance;
|
||||
|
||||
var x = (e.touches[0].clientX + e.touches[1].clientX)/2 - container.offsetLeft;
|
||||
var y = (e.touches[0].clientY + e.touches[1].clientY)/2 - container.offsetTop;
|
||||
const x = (e.touches[0].clientX + e.touches[1].clientX) / 2 - container.offsetLeft;
|
||||
const y = (e.touches[0].clientY + e.touches[1].clientY) / 2 - container.offsetTop;
|
||||
|
||||
applyZoom(x, y, zoom);
|
||||
|
||||
|
|
@ -453,11 +453,11 @@ async function init(){
|
|||
|
||||
function applyZoom(x, y, zoom) {
|
||||
|
||||
var deltaX = x - lastPosition[0];
|
||||
var deltaY = y - lastPosition[1];
|
||||
const deltaX = x - lastPosition[0];
|
||||
const deltaY = y - lastPosition[1];
|
||||
|
||||
var pinchTranslateX = (x - container.clientWidth/2 - deltaX);
|
||||
var pinchTranslateY = (y - container.clientHeight/2 - deltaY);
|
||||
const pinchTranslateX = (x - container.clientWidth / 2 - deltaX);
|
||||
const pinchTranslateY = (y - container.clientHeight / 2 - deltaY);
|
||||
|
||||
scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX / zoom + pinchTranslateX / zoom - pinchTranslateX / initialPinchZoom;
|
||||
scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY / zoom + pinchTranslateY / zoom - pinchTranslateY / initialPinchZoom;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ function initOverlap(){
|
|||
|
||||
window.renderBackground = renderBackground
|
||||
|
||||
var hovered = [];
|
||||
const hovered = [];
|
||||
|
||||
buildObjectsList(null, null);
|
||||
renderBackground(atlas);
|
||||
|
|
@ -45,9 +45,9 @@ function initOverlap(){
|
|||
backgroundContext.fillStyle = "rgba(255, 255, 255, 1)";
|
||||
backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
for (let i = 0; i < atlas.length; i++) {
|
||||
|
||||
var path = atlas[i].path;
|
||||
const path = atlas[i].path;
|
||||
|
||||
backgroundContext.beginPath();
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ function initOverlap(){
|
|||
backgroundContext.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var p = 1; p < path.length; p++){
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
backgroundContext.lineTo(path[p][0], path[p][1]);
|
||||
}
|
||||
|
||||
|
|
@ -65,10 +65,10 @@ function initOverlap(){
|
|||
backgroundContext.fill();
|
||||
}
|
||||
|
||||
var pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data;
|
||||
var blank = 0;
|
||||
const pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data;
|
||||
let blank = 0;
|
||||
|
||||
for(var i = 0; i < pixels.length; i+=4){
|
||||
for (let i = 0; i < pixels.length; i += 4) {
|
||||
if (pixels[i] == 255) {
|
||||
blank++;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,17 +28,17 @@ function pointIsInPolygon (point, polygon) {
|
|||
// ray-casting algorithm based on
|
||||
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
|
||||
|
||||
var x = point[0], y = point[1];
|
||||
const x = point[0], y = point[1];
|
||||
|
||||
var inside = false;
|
||||
for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||
var xi = polygon[i][0], yi = polygon[i][1];
|
||||
var xj = polygon[j][0], yj = polygon[j][1];
|
||||
let inside = false;
|
||||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||
const xi = polygon[i][0], yi = polygon[i][1];
|
||||
const xj = polygon[j][0], yj = polygon[j][1];
|
||||
|
||||
var intersect = ((yi > y) != (yj > y))
|
||||
const intersect = ((yi > y) != (yj > y))
|
||||
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
|
||||
if (intersect) inside = !inside;
|
||||
}
|
||||
|
||||
return inside;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
var areasSum = 0;
|
||||
var areas = [];
|
||||
let areasSum = 0;
|
||||
const areas = [];
|
||||
|
||||
for(var q = 0; q < atlas.length; q++){
|
||||
for (let q = 0; q < atlas.length; q++) {
|
||||
|
||||
var path = atlas[q].path;
|
||||
const path = atlas[q].path;
|
||||
|
||||
var area = 0,
|
||||
let area = 0,
|
||||
i,
|
||||
j,
|
||||
point1,
|
||||
|
|
@ -64,19 +64,19 @@ atlas.sort(function(a, b){
|
|||
return 0;
|
||||
});
|
||||
|
||||
var el = document.createElement("canvas");
|
||||
const el = document.createElement("canvas");
|
||||
el.style.position = "absolute";
|
||||
el.style.top = "0px";
|
||||
el.style.zIndex = "10000";
|
||||
var ctx = el.getContext("2d");
|
||||
const ctx = el.getContext("2d");
|
||||
el.width = 1600;
|
||||
el.height = 500;
|
||||
var steps = 150;
|
||||
var max = 1500;
|
||||
const steps = 150;
|
||||
const max = 1500;
|
||||
|
||||
var largerThanMax = 0;
|
||||
let largerThanMax = 0;
|
||||
|
||||
for(var i in areas){
|
||||
for (const i in areas) {
|
||||
if (areas[i] > max) {
|
||||
largerThanMax++;
|
||||
}
|
||||
|
|
@ -85,14 +85,14 @@ for(var i in areas){
|
|||
console.log("There are " + largerThanMax + " entries larger than " + max + ", accounting for " + (largerThanMax / areas.length * 100) + "% of all entries.");
|
||||
console.log("The largest entry has an area of " + areas[areas.length - 1] + " pixels.");
|
||||
|
||||
var counts = [0];
|
||||
var brackets = [max/steps];
|
||||
const counts = [0];
|
||||
const brackets = [max / steps];
|
||||
|
||||
var bracket = 0;
|
||||
let bracket = 0;
|
||||
|
||||
var mostCounts = 0;
|
||||
let mostCounts = 0;
|
||||
|
||||
for(var i in areas){
|
||||
for (const i in areas) {
|
||||
if (areas[i] > (bracket + 1) * (max / steps)) {
|
||||
mostCounts = Math.max(mostCounts, counts[bracket]);
|
||||
bracket++;
|
||||
|
|
@ -117,9 +117,9 @@ ctx.font = "15px sans";
|
|||
ctx.textAlign = "right";
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
var linesDistance = 1;
|
||||
let linesDistance = 1;
|
||||
|
||||
for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){
|
||||
for (let i = 0; i <= Math.ceil((mostCounts / linesDistance) / 5) * 5; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
50
|
||||
|
|
@ -135,7 +135,7 @@ for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){
|
|||
ctx.strokeStyle = "#333333";
|
||||
linesDistance = 5;
|
||||
|
||||
for(var i = 0; i <= Math.ceil(mostCounts/linesDistance); i++){
|
||||
for (let i = 0; i <= Math.ceil(mostCounts / linesDistance); i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
50
|
||||
|
|
@ -154,16 +154,16 @@ for(var i = 0; i <= Math.ceil(mostCounts/linesDistance); i++){
|
|||
);
|
||||
}
|
||||
|
||||
var skip = 2;
|
||||
const skip = 2;
|
||||
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "hanging";
|
||||
ctx.font = "10px sans";
|
||||
|
||||
var a = 0;
|
||||
for(var i=0; i <= counts.length; i++){
|
||||
let a = 0;
|
||||
for (let i = 0; i <= counts.length; i++) {
|
||||
if (i % skip == 0) {
|
||||
var y = 0;
|
||||
let y = 0;
|
||||
if (a % 2 == 0) {
|
||||
y = ~~(el.height - 30) + 0.5;
|
||||
} else {
|
||||
|
|
@ -192,7 +192,7 @@ for(var i=0; i <= counts.length; i++){
|
|||
ctx.fillStyle = "#FF0000";
|
||||
ctx.strokeStyle = "#CC0000";
|
||||
|
||||
for(var i = 0; i < counts.length; i++){
|
||||
for (let i = 0; i < counts.length; i++) {
|
||||
if (i % 2 == 0) {
|
||||
ctx.fillStyle = "#FF0000";
|
||||
} else {
|
||||
|
|
@ -234,12 +234,12 @@ console.log("Median area: "+areas[~~(areas.length/2)]);
|
|||
|
||||
console.log("Average area: " + (areasSum / atlas.length));
|
||||
|
||||
var topCount = 50;
|
||||
const topCount = 50;
|
||||
console.log("The " + topCount + " largest entries:");
|
||||
|
||||
var outstring = "";
|
||||
let outstring = "";
|
||||
|
||||
for(var i = 0; i < topCount; i++){
|
||||
for (let i = 0; i < topCount; i++) {
|
||||
outstring += ((i + 1) + "|[" + atlas[atlas.length - i - 1].name + "](http://place-atlas.stefanocoding.me/?id=" + atlas[atlas.length - i - 1].id + ")|" + ~~atlas[atlas.length - i - 1].area + "|" + Math.round(atlas[atlas.length - i - 1].area / 100) / 100 + "%\n");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ timelineSlider.addEventListener("input", (event) => {
|
|||
clearTimeout(updateTimeout)
|
||||
updateTimeout = setTimeout(() => {
|
||||
updateTime(parseInt(event.target.value), currentVariation)
|
||||
}, 100)
|
||||
}, 10)
|
||||
})
|
||||
|
||||
variantsEl.addEventListener("input", (event) => {
|
||||
|
|
@ -221,7 +221,7 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
|
|||
[configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation)
|
||||
|
||||
atlas = []
|
||||
for ( var atlasIndex in atlasAll ) {
|
||||
for (const atlasIndex in atlasAll) {
|
||||
let pathChosen, centerChosen, chosenIndex
|
||||
|
||||
const validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
|
||||
|
|
@ -266,7 +266,7 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
|
|||
}
|
||||
|
||||
function updateTooltip(newPeriod, newVariation) {
|
||||
var configObject = variationsConfig[newVariation].versions[newPeriod]
|
||||
const configObject = variationsConfig[newVariation].versions[newPeriod]
|
||||
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp * 1000).toUTCString()
|
||||
else tooltip.querySelector('p').textContent = configObject.timestamp
|
||||
tooltip.style.left = Math.max(((timelineSlider.offsetWidth) * (timelineSlider.value >= 1 ? timelineSlider.value - 1 : 0) / (timelineSlider.max - 1)) - tooltip.offsetWidth / 2, 0) + "px"
|
||||
|
|
@ -290,7 +290,7 @@ function parsePeriod(periodString) {
|
|||
periodString = split[1]
|
||||
}
|
||||
if (periodString.search('-') + 1) {
|
||||
var [start, end] = periodString.split('-').map(i => parseInt(i))
|
||||
const [start, end] = periodString.split('-').map(i => parseInt(i))
|
||||
return [start, end, variation]
|
||||
} else {
|
||||
const periodNew = parseInt(periodString)
|
||||
|
|
|
|||
114
web/_js/view.js
114
web/_js/view.js
|
|
@ -13,34 +13,34 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
var linesCanvas = document.getElementById("linesCanvas");
|
||||
var linesContext = linesCanvas.getContext("2d");
|
||||
var hovered = [];
|
||||
const linesCanvas = document.getElementById("linesCanvas");
|
||||
const linesContext = linesCanvas.getContext("2d");
|
||||
let hovered = [];
|
||||
|
||||
var previousZoomOrigin = [0, 0];
|
||||
var previousScaleZoomOrigin = [0, 0];
|
||||
let previousZoomOrigin = [0, 0];
|
||||
let previousScaleZoomOrigin = [0, 0];
|
||||
|
||||
var backgroundCanvas = document.createElement("canvas");
|
||||
const backgroundCanvas = document.createElement("canvas");
|
||||
backgroundCanvas.width = 2000;
|
||||
backgroundCanvas.height = 2000;
|
||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
||||
const backgroundContext = backgroundCanvas.getContext("2d");
|
||||
|
||||
var wrapper = document.getElementById("wrapper");
|
||||
const wrapper = document.getElementById("wrapper");
|
||||
|
||||
var objectsContainer = document.getElementById("objectsList");
|
||||
var closeObjectsListButton = document.getElementById("closeObjectsListButton");
|
||||
const objectsContainer = document.getElementById("objectsList");
|
||||
const closeObjectsListButton = document.getElementById("closeObjectsListButton");
|
||||
|
||||
var filterInput = document.getElementById("searchList");
|
||||
const filterInput = document.getElementById("searchList");
|
||||
|
||||
var entriesList = document.getElementById("entriesList");
|
||||
var hideListButton = document.getElementById("hideListButton");
|
||||
var entriesListShown = false;
|
||||
const entriesList = document.getElementById("entriesList");
|
||||
const hideListButton = document.getElementById("hideListButton");
|
||||
let entriesListShown = false;
|
||||
|
||||
var sortedAtlas;
|
||||
let sortedAtlas;
|
||||
|
||||
var entriesLimit = 50;
|
||||
var entriesOffset = 0;
|
||||
var moreEntriesButton = document.createElement("button");
|
||||
const entriesLimit = 50;
|
||||
let entriesOffset = 0;
|
||||
const moreEntriesButton = document.createElement("button");
|
||||
moreEntriesButton.innerHTML = "Show " + entriesLimit + " more";
|
||||
moreEntriesButton.id = "moreEntriesButton";
|
||||
moreEntriesButton.onclick = function () {
|
||||
|
|
@ -49,12 +49,12 @@ moreEntriesButton.onclick = function(){
|
|||
render();
|
||||
};
|
||||
|
||||
var defaultSort = "shuffle";
|
||||
let defaultSort = "shuffle";
|
||||
document.getElementById("sort").value = defaultSort;
|
||||
|
||||
var lastPos = [0, 0];
|
||||
let lastPos = [0, 0];
|
||||
|
||||
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
||||
let fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
||||
|
||||
if (document.documentElement.clientWidth > 2000) {
|
||||
entriesListShown = true;
|
||||
|
|
@ -139,7 +139,7 @@ objectsContainer.addEventListener("scroll", function(e){
|
|||
window.addEventListener("resize", function (e) {
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
||||
var viewportWidth = document.documentElement.clientWidth;
|
||||
let viewportWidth = document.documentElement.clientWidth;
|
||||
|
||||
if (document.documentElement.clientWidth > 2000 && viewportWidth <= 2000) {
|
||||
entriesListShown = true;
|
||||
|
|
@ -168,8 +168,8 @@ function updateLines(){
|
|||
linesContext.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6);
|
||||
linesContext.strokeStyle = "#000000";
|
||||
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
var element = hovered[i].element;
|
||||
for (let i = 0; i < hovered.length; i++) {
|
||||
const element = hovered[i].element;
|
||||
|
||||
if (element.getBoundingClientRect().left != 0) {
|
||||
|
||||
|
|
@ -191,8 +191,8 @@ function updateLines(){
|
|||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
|
||||
linesContext.strokeStyle = "#FFFFFF";
|
||||
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
var element = hovered[i].element;
|
||||
for (let i = 0; i < hovered.length; i++) {
|
||||
const element = hovered[i].element;
|
||||
|
||||
if (element.getBoundingClientRect().left != 0) {
|
||||
|
||||
|
|
@ -222,9 +222,9 @@ function renderBackground(atlas){
|
|||
backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)";
|
||||
backgroundContext.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
|
||||
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
for (let i = 0; i < atlas.length; i++) {
|
||||
|
||||
var path = atlas[i].path;
|
||||
const path = atlas[i].path;
|
||||
|
||||
backgroundContext.beginPath();
|
||||
|
||||
|
|
@ -233,14 +233,14 @@ function renderBackground(atlas){
|
|||
backgroundContext.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var p = 1; p < path.length; p++){
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
//backgroundContext.lineTo(path[p][0]*zoom, path[p][1]*zoom);
|
||||
backgroundContext.lineTo(path[p][0], path[p][1]);
|
||||
}
|
||||
|
||||
backgroundContext.closePath();
|
||||
|
||||
var bgStrokeStyle;
|
||||
let bgStrokeStyle;
|
||||
switch (atlas[i].diff) {
|
||||
case "add":
|
||||
bgStrokeStyle = "rgba(0, 255, 0, 1)";
|
||||
|
|
@ -300,7 +300,7 @@ function buildObjectsList(filter = null, sort = null){
|
|||
|
||||
//console.log(sort);
|
||||
|
||||
var sortFunction;
|
||||
let sortFunction;
|
||||
|
||||
//console.log(sort);
|
||||
|
||||
|
|
@ -383,7 +383,7 @@ function buildObjectsList(filter = null, sort = null){
|
|||
sortedAtlas.sort(sortFunction);
|
||||
}
|
||||
|
||||
for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
|
||||
for (let i = entriesOffset; i < entriesOffset + entriesLimit; i++) {
|
||||
|
||||
if (i >= sortedAtlas.length) {
|
||||
break;
|
||||
|
|
@ -391,7 +391,7 @@ function buildObjectsList(filter = null, sort = null){
|
|||
|
||||
|
||||
// console.log(sortedAtlas[i])
|
||||
var element = createInfoBlock(sortedAtlas[i]);
|
||||
const element = createInfoBlock(sortedAtlas[i]);
|
||||
|
||||
element.entry = sortedAtlas[i];
|
||||
|
||||
|
|
@ -495,9 +495,9 @@ function buildObjectsList(filter = null, sort = null){
|
|||
|
||||
function shuffle() {
|
||||
//console.log("shuffled atlas");
|
||||
for (var i = sortedAtlas.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = sortedAtlas[i];
|
||||
for (let i = sortedAtlas.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
const temp = sortedAtlas[i];
|
||||
sortedAtlas[i] = sortedAtlas[j];
|
||||
sortedAtlas[j] = temp;
|
||||
}
|
||||
|
|
@ -529,10 +529,10 @@ async function render(){
|
|||
}
|
||||
|
||||
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
for (let i = 0; i < hovered.length; i++) {
|
||||
|
||||
|
||||
var path = hovered[i].path;
|
||||
const path = hovered[i].path;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
|
|
@ -541,7 +541,7 @@ async function render(){
|
|||
context.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var p = 1; p < path.length; p++){
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
//context.lineTo(path[p][0]*zoom, path[p][1]*zoom);
|
||||
context.lineTo(path[p][0], path[p][1]);
|
||||
}
|
||||
|
|
@ -580,9 +580,9 @@ async function render(){
|
|||
}
|
||||
}
|
||||
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
for (let i = 0; i < hovered.length; i++) {
|
||||
|
||||
var path = hovered[i].path;
|
||||
const path = hovered[i].path;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
|
|
@ -591,7 +591,7 @@ async function render(){
|
|||
context.moveTo(path[0][0], path[0][1]);
|
||||
}
|
||||
|
||||
for(var p = 1; p < path.length; p++){
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
//context.lineTo(path[p][0]*zoom, path[p][1]*zoom);
|
||||
context.lineTo(path[p][0], path[p][1]);
|
||||
}
|
||||
|
|
@ -600,7 +600,7 @@ async function render(){
|
|||
|
||||
context.globalCompositeOperation = "source-over";
|
||||
|
||||
var hoverStrokeStyle;
|
||||
let hoverStrokeStyle;
|
||||
switch (hovered[i].diff) {
|
||||
case "add":
|
||||
hoverStrokeStyle = "rgba(0, 155, 0, 1)";
|
||||
|
|
@ -622,25 +622,25 @@ async function render(){
|
|||
function updateHovering(e, tapped) {
|
||||
|
||||
if (!dragging && (!fixed || tapped)) {
|
||||
var pos = [
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom
|
||||
, (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
];
|
||||
var coords_p = document.getElementById("coords_p");
|
||||
const coords_p = document.getElementById("coords_p");
|
||||
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||
|
||||
if (pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100) {
|
||||
var newHovered = [];
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
const newHovered = [];
|
||||
for (let i = 0; i < atlas.length; i++) {
|
||||
if (pointIsInPolygon(pos, atlas[i].path)) {
|
||||
newHovered.push(atlas[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var changed = false;
|
||||
let changed = false;
|
||||
|
||||
if (hovered.length == newHovered.length) {
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
for (let i = 0; i < hovered.length; i++) {
|
||||
if (hovered[i].id != newHovered[i].id) {
|
||||
changed = true;
|
||||
break;
|
||||
|
|
@ -657,8 +657,8 @@ function updateHovering(e, tapped){
|
|||
|
||||
objectsContainer.innerHTML = "";
|
||||
|
||||
for(var i in hovered){
|
||||
var element = createInfoBlock(hovered[i]);
|
||||
for (const i in hovered) {
|
||||
const element = createInfoBlock(hovered[i]);
|
||||
|
||||
objectsContainer.appendChild(element);
|
||||
|
||||
|
|
@ -682,11 +682,11 @@ window.addEventListener("hashchange", highlightEntryFromUrl);
|
|||
|
||||
function highlightEntryFromUrl() {
|
||||
|
||||
var objectsContainer = document.getElementById("objectsList");
|
||||
const objectsContainer = document.getElementById("objectsList");
|
||||
|
||||
var id = window.location.hash.substring(1); //Remove hash prefix
|
||||
const id = window.location.hash.substring(1); //Remove hash prefix
|
||||
|
||||
var entries = atlas.filter(function(e){
|
||||
const entries = atlas.filter(function (e) {
|
||||
return e.id === id;
|
||||
});
|
||||
|
||||
|
|
@ -695,7 +695,7 @@ function highlightEntryFromUrl(){
|
|||
|
||||
document.title = entry.name + " on the 2022 /r/place Atlas";
|
||||
|
||||
var infoElement = createInfoBlock(entry);
|
||||
const infoElement = createInfoBlock(entry);
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.appendChild(infoElement);
|
||||
|
||||
|
|
@ -763,11 +763,11 @@ function initExplore(){
|
|||
|
||||
function updateHovering(e, tapped) {
|
||||
if (!dragging && (!fixed || tapped)) {
|
||||
var pos = [
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom
|
||||
, (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
];
|
||||
var coords_p = document.getElementById("coords_p");
|
||||
const coords_p = document.getElementById("coords_p");
|
||||
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue