MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-07 22:09:19 +02:00
Code Issues Projects Releases Wiki Activity

Minor Improvements

Browse source 
Minor improvements with the files, shortening of colour codes and removal of all "0px" instances from the CSS file, removing excess whitespace from .html and .js files.

Added a link to Roland Rytz's Atlas Map to the author division where previously it was just href="/" which took you to the root directory of the site.
This commit is contained in:
Aeywoo 2022-04-05 01:35:40 +09:30
parent 1230376b38
commit 216f29cbcd
4 changed files with 343 additions and 418 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

609
web/_css/style.css
View file

File diff suppressed because one or more lines are too long

63
web/_js/atlas.js
View file

@ -1,6 +1,3 @@
/*
========================================================================
The /r/place Atlas
@ -23,9 +20,6 @@
========================================================================
*/
window.addEventListener("error", function (e) {
console.log(e);
var errorMessage = "<p class=\"error\">An error has occurred:</p>";
@ -36,22 +30,21 @@ window.addEventListener("error", function (e) {
});
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;
// 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;
};
var atlas = [
@ -165,13 +158,12 @@ var atlas = [
{"id":107,"name":"Critical Role","description":"Emblem of the actual-play Dungeons and Dragons series","website":"https://critrole.com/","subreddit":"r/CriticalRole","center":[526.5,977.5],"path":[[513.5,963.5],[538.5,963.5],[538.5,991.5],[513.5,991.5]]},
{"id":108,"name":"Palico","description":"An iconic character from the popular game series, Monster Hunter","website":"","subreddit":"r/MonsterHunter","center":[761.5,621.5],"path":[[748.5,608.5],[748.5,635.5],[769.5,635.5],[776.5,620.5],[776.5,608.5]]},
{"id":109,"name":"Portugal","description":"The flag of Portugal and depictions of portuguese poet Luís de Camões, Pena National Palace, celebrity Fernando Mendes, statue of Afonso Henriques (1st King of Portugal), Bridge 25th of April, and finally, a Caravel. ","website":"","subreddit":"/r/portugal","center":[984.5,336.5],"path":[[865.5,308.5],[865.5,360.5],[856.5,360.5],[856.5,371.5],[922.5,370.5],[923.5,367.5],[960.5,367.5],[960.5,360.5],[1099.5,360.5],[1109.5,352.5],[1121.5,347.5],[1121.5,325.5],[1113.5,325.5],[1113.5,313.5],[1113.5,308.5],[865.5,308.5]]},
];
//console.log("There are "+atlas.length+" entries in the Atlas.");
/*
atlas.sort(function(a, b){
atlas.sort(function(a, b) {
if (a.id < b.id) {
return -1;
}
@ -182,9 +174,9 @@ atlas.sort(function(a, b){
return 0;
});
for(var i = 0; i < atlas.length; i++){
for(var i = 0; i < atlas.length; i++) {
if(atlas[i-1]){
if(atlas[i-1].id == atlas[i].id){
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);
}
@ -194,13 +186,12 @@ for(var i = 0; i < atlas.length; i++){
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"){
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"){
} else if(atlas[i].website.trim() != "") {
if(atlas[i].website.trim().substring(0, 4) != "http") {
console.log(atlas[i].name + ": " + atlas[i].website);
}
}
@ -219,19 +210,16 @@ atlas.sort(function (a, b) {
return 0;
});
/*
// Populate with test data
for(var i = 0; i < 10000; i++){
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({
atlas.push( {
"id": 5,
"name": "test"+(i+3),
"website": "",
@ -246,5 +234,4 @@ for(var i = 0; i < 10000; i++){
});
}
*/
*/

39
web/about.html
View file

@ -1,4 +1,3 @@
<!--
========================================================================
The /r/place Atlas
@ -21,23 +20,20 @@
========================================================================
-->
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
The /r/place Atlas
</title>
<meta charset="UTF-8">
<title>The /r/place Atlas</title>
<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
<meta name="author" content="Roland Rytz">
<meta name="keywords" content="reddit, /r/place, april">
<meta name="application-name" content="/r/place Atlas">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link href="./_css/style.css?version=1.0.32" rel="stylesheet" type="text/css" media="all">
</head>
<body>
@ -53,11 +49,11 @@ <h1>The /r/place Atlas</h1>
<a id="aboutLink" href="./about.html">About</a>
</nav-->
</header>
<div id="author" style="right: 25px;">
<div id="author" style="right:25px">
Code by <a href="/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.
</div>
<div class="overlay" id="bitcoinOverlay">
<div id="bitcoinWindow">
<h2>My Bitcoin Address</h2>
@ -67,7 +63,7 @@ <h2>My Bitcoin Address</h2>
<button id="closeBitcoinButton">Close</button>
</div>
</div>
<div id="aboutContainer">
<a id="aboutBackButton" href="./">&lt; Back to the Atlas</a>
<div id="about">
@ -88,7 +84,7 @@ <h2>r/placeAtlas2 (Current) Contributors</h2>
<p>Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.</p>
<div id="contributors">
<a href="https://reddit.com/user/TCOOfficiall" target="_blank">TCOOfficiall (Current Maintainer)</a>
<a href="https://reddit.com/user/TCOOfficiall" target="_blank">prosto_sanja (Provided Images)</a> - <a href="https://place.thatguyalex.com/" target="_blank">Website</a>
<a href="https://reddit.com/user/prosto_sanja" target="_blank">prosto_sanja (Provided Images)</a> - <a href="https://place.thatguyalex.com/" target="_blank">Website</a>
<h2>r/placeAtlas Contributors</h2>
<p>The (original) Atlas would not have been possible without the help of the following 775 reddit users.</p>
@ -873,21 +869,14 @@ <h2>r/placeAtlas Contributors</h2>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("closeBitcoinButton").addEventListener("click", function(e){
document.getElementById("closeBitcoinButton").addEventListener("click", function(e) {
document.getElementById("bitcoinOverlay").style.display = "none";
});
document.getElementById("bitcoinButton").addEventListener("click", function(e){
document.getElementById("bitcoinButton").addEventListener("click", function(e) {
document.getElementById("bitcoinOverlay").style.display = "flex";
});
</script>
</body>
</html>
</html>

50
web/index.html
View file

@ -1,4 +1,3 @@
<!--
========================================================================
The /r/place Atlas
@ -21,28 +20,25 @@
========================================================================
-->
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
The /r/place Atlas
</title>
<meta charset="UTF-8">
<title>The /r/place Atlas</title>
<meta name="description" content="An interactive map of Reddit's /r/place, with information to each artwork of the canvas.">
<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
<meta name="keywords" content="reddit, /r/place 2022">
<meta name="application-name" content="The /r/place Atlas 2022">
<meta name="robots" content="index, follow">
<meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss" />
<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<link href="./_css/style.css?version=1.0.32" rel="stylesheet" type="text/css" media="all">
<script type="application/ld+json">
{
"@context": "http://schema.org",
@ -73,7 +69,6 @@
"description": "An interactive map of Reddit's /r/place, with information to each artwork of the canvas. Originally created by Roland Rytz (2022 by Stefano#7366)..",
}
</script>
</head>
<body>
<div id="wrapper">
@ -176,33 +171,31 @@ <h1 id="title">The /r/place Atlas</h1>
<p>Click anywhere on the image to start drawing a shape.
When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
<p>You can then add more information about your object.</p>
<div style="background-color: #666666; padding:20px">
<div style="background-color:#666; padding:20px">
<p><b>Handy with GitHub?</b></p>
<p>You can contribute directly with a Pull Request <a href="https://github.com/Codixer/place-atlas/blob/master/web/_js/atlas.js">here!</a></p>
</div>
</div>
</div>
<button class="hidden" id="closeObjectsListButton"></button>
<div id="objectsList">
</div>
<div id="exportOverlay" class="overlay">
<div id="exportWindow">
<p>Please copy the text below and submit it as a<br>
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
<p>I will then check it and add it to the atlas.</p>
<div style="background-color: #666666; padding:5px">
<div style="background-color:#666; padding:5px">
<p><b>Handy with GitHub?</b></p>
<p>You can contribute directly with a Pull Request <a href="https://github.com/Codixer/place-atlas/blob/master/web/_js/atlas.js">here!</a></p>
</div>
<textarea cols="50" rows="5" id="exportString"></textarea>
<div style="display:flex;flex-direction:column;align-items: center;">
<div style="display:flex; flex-direction:column;align-items:center">
<a href="_blank" id="exportDirectPost">Post Direct to Reddit</a>
<button id="exportCloseButton">Done</button>
</div>
</div>
</div>
@ -223,27 +216,18 @@ <h2>His Bitcoin Address</h2>
<br>
<button id="closeBitcoinButton">Close</button>
<br>
</div>
</div>
<div id="author">
Code by <a href="/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Image's provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Image's provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
</div>
</div>
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
<script type="text/javascript" src="./_js/view.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script>
<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script>
<!--
<script type="text/javascript" src="./_js/stats.js?version=1.0.0"></script>
@ -251,8 +235,4 @@ <h2>His Bitcoin Address</h2>
<script type="text/javascript" src="./_js/minified.js?version=1.0.102"></script>
-->
</body>
</html>
</html>