Merge pull request #739 from asivery/master

Some website improvements
This commit is contained in:
Stefano 2022-04-06 09:20:36 -07:00 committed by GitHub
commit 0a1815b2af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 90 deletions

View file

@ -29,86 +29,30 @@ window.addEventListener("error", function (e) {
document.getElementById("loadingContent").innerHTML = errorMessage;
});
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];
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];
var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
//console.log("There are "+atlas.length+" entries in the Atlas.");
/*
atlas.sort(function(a, b) {
if (a.id < b.id) {
return -1;
}
if (a.id > b.id) {
return 1;
}
// a must be equal to b
return 0;
});
for(var i = 0; i < atlas.length; i++) {
if(atlas[i-1]){
if(atlas[i-1].id == atlas[i].id) {
console.log(atlas[i-1].id + ": "+ atlas[i-1].name);
console.log(atlas[i ].id + ": "+ atlas[i ].name);
}
function getPositionOfEntry(entry){
let startX = 2000, startY = 2000;
for(let [x, y] of entry.path){
startX = Math.min(x, startX);
startY = Math.min(y, startY)
}
if(startX === 2000 || startY === 2000) return null;
return [parseInt(startX), parseInt(startY)];
}
console.log("biggest id: "+atlas[atlas.length-1].id + ", " + atlas[atlas.length-1].name);
*/
/*
for(var i = 0; i < atlas.length; i++) {
if(typeof atlas[i].website == "undefined") {
console.log(atlas[i].name);
} else if(atlas[i].website.trim() != "") {
if(atlas[i].website.trim().substring(0, 4) != "http") {
console.log(atlas[i].name + ": " + atlas[i].website);
}
}
}
*/
// Modified from https://stackoverflow.com/a/33670691
function calcPolygonArea(vertices) {
var total = 0;
// sort by center.y, so that lines will overlap less
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];
/*
total += (addX * addY * 0.5);
total -= (subX * subY * 0.5);
}
// Populate with test data
for(var i = 0; i < 10000; i++) {
var x = ~~(Math.random() * 1000)+0.5;
var y = ~~(Math.random() * 1000)+0.5;
var w = ~~(Math.random()*100);
var h = ~~(Math.random()*100);
atlas.push( {
"id": 5,
"name": "test"+(i+3),
"website": "",
"subreddit": "",
"center": [0, 0],
"path":[
[x, y],
[x+w, y],
[x+w, y+h],
[x, y+h]
]
});
}
*/
return Math.floor(Math.abs(total));
}

View file

@ -1,4 +1,16 @@
function createInfoBlock(entry) {
function createInfoParagraph(name, value){
let entryParagraphPositionElement = document.createElement("p");
let nameElement = document.createElement("span");
nameElement.style.fontWeight = "bold";
nameElement.innerText = name;
let valueElement = document.createElement("span");
valueElement.innerText = value;
entryParagraphPositionElement.appendChild(nameElement);
entryParagraphPositionElement.appendChild(valueElement);
return entryParagraphPositionElement;
}
var element = document.createElement("div");
element.className = "object";
@ -15,6 +27,15 @@ function createInfoBlock(entry) {
descElement.innerText = entry.description;
element.appendChild(descElement);
}
let [x, y] = entry.center;
element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}x${Math.floor(y)}`));
if(entry.path){
let area = calcPolygonArea(entry.path);
element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
}
if (entry.website) {
let websiteLinkElement = document.createElement("a");
websiteLinkElement.target = "_blank";
@ -39,9 +60,8 @@ function createInfoBlock(entry) {
element.appendChild(subredditLinkElement);
}
}
let idElement = document.createElement("p");
let idElement = createInfoParagraph("ID: ", entry.id);
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
idElement.innerText = "id: " + entry.id;
element.appendChild(idElement);
return element;

View file

@ -21,13 +21,6 @@ for(var q = 0; q < atlas.length; q++){
area = Math.abs(area/2);
if(atlas[q].name == "Companion Cube"){
var w = atlas[q].path[1][0] - atlas[q].path[0][0];
var h = atlas[q].path[2][1] - atlas[q].path[1][1];
console.log(w, h, w*h);
console.log(area, Math.sqrt(area));
}
areasSum += area;
areas.push(area);

View file

@ -273,12 +273,12 @@ function initView(){
//var id = parseInt(window.location.hash.substring(3));
var entry = atlas.filter(function(e){
var entries = atlas.filter(function(e){
return e.id === id;
});
if (entry.length === 1){
entry = entry[0];
if (entries.length === 1){
let entry = entries[0];
document.title = entry.name + " on the 2022 /r/place Atlas";
@ -532,7 +532,6 @@ function initView(){
applyView();
}
if(document.documentElement.clientWidth < 500){
objectsContainer.innerHTML = "";
entriesListShown = false;
@ -591,7 +590,7 @@ function initView(){
}
}
function render(){
async function render(){
context.clearRect(0, 0, canvas.width, canvas.height);
@ -636,6 +635,29 @@ function initView(){
context.globalCompositeOperation = "source-out";
context.drawImage(backgroundCanvas, 0, 0);
if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){
let undisputableHovered = hovered[0];
// Find the left-topmost point of all the paths
let entryPosition = getPositionOfEntry(undisputableHovered);
if(entryPosition){
const [startX, startY] = entryPosition;
let overrideImage = new Image();
const loadingPromise = new Promise((res, rej) => {
overrideImage.onerror = rej;
overrideImage.onload = res;
});
overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage;
try{
await loadingPromise;
context.globalCompositeOperation = "source-over";
context.drawImage(overrideImage, startX, startY);
}catch(ex){
console.log("Cannot override image.");
console.log(ex);
}
}
}
for(var i = 0; i < hovered.length; i++){
var path = hovered[i].path;