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

Merge remote-tracking branch 'origin' into cleanup

Browse source
This commit is contained in:
AnonymousRandomPerson 2023-04-23 11:56:54 -04:00
parent 2adb80d06c 4d5f716dee
commit ff65622215
9 changed files with 140 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/_css/style.css
View file

@ -119,22 +119,21 @@ @media (prefers-reduced-motion: reduce) {
}
}
#image {
#innerContainer > * {
position: absolute;
height: 100%;
width: 100%;
z-index: -1500;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
user-select: none;
}
#image {
z-index: -1500;
}
#highlightCanvas {
z-index: -1200;
position: absolute;
height: 100%;
width: 100%;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
#atlasSize:empty {

3
web/_js/about.js
View file

@ -11,8 +11,7 @@ fetch('all-authors.txt')
.then(text => text.trim().split('\n').sort())
.then(contributors => {
document.querySelector('#reddit-contributors-count').textContent = contributors.length
for (const index in contributors) {
contributor = contributors[index]
for (const contributor of contributors) {
const userEl = document.createElement('a')
userEl.href = 'https://reddit.com/user/' + contributor
userEl.textContent = contributor

4
web/_js/main/draw.js
View file

@ -111,7 +111,7 @@ function initDraw() {
let highlightUncharted = true
renderBackground()
renderBackground(atlas)
applyView()
container.style.cursor = "crosshair"
@ -772,7 +772,7 @@ function initDraw() {
setView(center[0], center[1])
document.addEventListener('timeupdate', () => {
renderBackground()
renderBackground(atlas)
updatePeriodGroups()
})

62
web/_js/main/infoblock.js
View file

@ -102,65 +102,61 @@ function createInfoBlock(entry, isPreview) {
}
}
if (entry.links.subreddit?.length) {
if (entry.links?.subreddit?.length) {
const subredditGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(subredditGroupElement)
entry.links.subreddit.forEach(subreddit => {
if (subreddit) {
subreddit = "r/" + subreddit
const subredditLinkElement = baseLinkElement.cloneNode()
subredditLinkElement.href = "https://reddit.com/" + subreddit
subredditLinkElement.innerHTML = `<i class="bi bi-reddit" aria-hidden="true"></i> ${subreddit}`
subredditGroupElement.appendChild(subredditLinkElement)
}
if (!subreddit) return
subreddit = "r/" + subreddit
const subredditLinkElement = baseLinkElement.cloneNode()
subredditLinkElement.href = "https://reddit.com/" + subreddit
subredditLinkElement.innerHTML = `<i class="bi bi-reddit" aria-hidden="true"></i> ${subreddit}`
subredditGroupElement.appendChild(subredditLinkElement)
})
}
if (entry.links.website?.length) {
if (entry.links?.website?.length) {
const websiteGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(websiteGroupElement)
entry.links.website.forEach(link => {
if (link) {
const websiteLinkElement = baseLinkElement.cloneNode()
websiteLinkElement.href = link
try {
const urlObject = new URL(link)
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace(/^www./, "")}`
} catch (e) {
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> Website`
}
websiteGroupElement.appendChild(websiteLinkElement)
if (!link) return
const websiteLinkElement = baseLinkElement.cloneNode()
websiteLinkElement.href = link
try {
const urlObject = new URL(link)
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace(/^www./, "")}`
} catch (e) {
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> Website`
}
websiteGroupElement.appendChild(websiteLinkElement)
})
}
if (entry.links.discord?.length) {
if (entry.links?.discord?.length) {
const discordGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(discordGroupElement)
entry.links.discord.forEach(link => {
if (link) {
const discordLinkElement = baseLinkElement.cloneNode()
discordLinkElement.href = "https://discord.gg/" + link
discordLinkElement.innerHTML = `<i class="bi bi-discord" aria-hidden="true"></i> ${link}`
discordGroupElement.appendChild(discordLinkElement)
}
if (!link) return
const discordLinkElement = baseLinkElement.cloneNode()
discordLinkElement.href = "https://discord.gg/" + link
discordLinkElement.innerHTML = `<i class="bi bi-discord" aria-hidden="true"></i> ${link}`
discordGroupElement.appendChild(discordLinkElement)
})
}
if (entry.links.wiki?.length) {
if (entry.links?.wiki?.length) {
const wikiGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(wikiGroupElement)
entry.links.wiki.forEach(link => {
if (link) {
const wikiLinkElement = baseLinkElement.cloneNode()
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_')
wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i> Wiki Article`
wikiGroupElement.appendChild(wikiLinkElement)
}
if (!link) return
const wikiLinkElement = baseLinkElement.cloneNode()
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_')
wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i> Wiki Article`
wikiGroupElement.appendChild(wikiLinkElement)
})
}

49
web/_js/main/main.js
View file

@ -73,27 +73,21 @@ if (document.location.host !== prodDomain) document.body.dataset.dev = ""
init()
async function init() {
const args = window.location.search
const params = new URLSearchParams(args)
// For Reviewing Reddit Changes
//let resp = await fetch("../tools/temp-atlas.json")
const resp = await fetch("./atlas.json")
atlas = await resp.json()
atlas.sort(function (a, b) {
if (a.center[1] < b.center[1]) {
return -1
}
if (a.center[1] > b.center[1]) {
return 1
}
// a must be equal to b
return 0
})
// const atlasRef = '../tools/temp-atlas.json'
const atlasRef = params.get('atlas') || './atlas.json'
const atlasResp = await fetch(atlasRef)
atlas = await atlasResp.json()
atlas.sort((a, b) => a.center[1] - b.center[1])
atlasAll = updateAtlasAll(atlas)
let mode = "view"
const args = window.location.search
const params = new URLSearchParams(args)
if (args) {
mode = params.get("mode") || "view"
@ -147,11 +141,12 @@ async function init() {
initExplore()
} else if (mode.startsWith("diff")) {
try {
const liveResp = await fetch(`https://${prodDomain}/atlas.json`)
let liveJson = await liveResp.json()
liveJson = updateAtlasAll(liveJson)
const liveAtlasRef = params.get('liveatlas') || `https://${prodDomain}/atlas.json`
const liveAtlasResp = await fetch(liveAtlasRef)
let liveAtlas = await liveAtlasResp.json()
liveAtlas = updateAtlasAll(liveAtlas)
const liveAtlasReduced = liveJson.reduce(function (a, c) {
const liveAtlasReduced = liveAtlas.reduce(function (a, c) {
a[c.id] = c
return a
}, {})
@ -170,7 +165,7 @@ async function init() {
a[c.id] = c
return a
}, {})
const removedEntries = liveJson.filter(entry =>
const removedEntries = liveAtlas.filter(entry =>
atlasReduced[entry.id] === undefined
).map(entry => {
entry.diff = "delete"
@ -505,25 +500,25 @@ async function init() {
}
function updateAtlasAll(atlas = atlasAll) {
for (const atlasIndex in atlas) {
const currentLinks = atlas[atlasIndex].links
atlas[atlasIndex].links = {
for (const entry of atlas) {
const currentLinks = entry.links
entry.links = {
website: [],
subreddit: [],
discord: [],
wiki: [],
...currentLinks
}
const currentPath = atlas[atlasIndex].path
const currentCenter = atlas[atlasIndex].center
const currentPath = entry.path
const currentCenter = entry.center
for (const key in currentPath) {
currentPath[key] = currentPath[key].map(point => point.map(int => int + 0.5))
}
for (const key in currentCenter) {
currentCenter[key] = currentCenter[key].map(int => int + 0.5)
}
atlas[atlasIndex].path = currentPath
atlas[atlasIndex].center = currentCenter
entry.path = currentPath
entry.center = currentCenter
}
return atlas
}

4
web/_js/main/overlap.js
View file

@ -16,9 +16,9 @@ function initOverlap() {
render()
document.addEventListener('timeupdate', () => {
sortedAtlas = atlas.concat()
atlasDisplay = atlas.slice()
resetEntriesList(null, null)
renderBackground(sortedAtlas)
renderBackground(atlasDisplay)
render()
})

10
web/_js/main/stats.js
View file

@ -48,11 +48,7 @@ el.height = 500
const steps = 150
const max = 1500
let largerThanMax = 0
for (const area of areas) {
if (area > max) largerThanMax++
}
let largerThanMax = areas.reduce((total, area) => total + (area > max), 0)
console.info("There are " + largerThanMax + " entries larger than " + max + ", accounting for " + (largerThanMax / areas.length * 100) + "% of all entries.")
console.info("The largest entry has an area of " + areas[areas.length - 1] + " pixels.")
@ -64,8 +60,8 @@ let bracket = 0
let mostCounts = 0
for (const i in areas) {
if (areas[i] > (bracket + 1) * (max / steps)) {
for (const area of areas) {
if (area > (bracket + 1) * (max / steps)) {
mostCounts = Math.max(mostCounts, counts[bracket])
bracket++
if (bracket >= steps) break

22
web/_js/main/time.js
View file

@ -42,14 +42,10 @@ timelineList.children[0].value = defaultPeriod
timelineSlider.addEventListener("input", e => timelineParser(e.target.value))
timelineSlider.addEventListener("wheel", e => {
if (e.deltaY < 0) {
this.valueAsNumber += 1;
timelineParser(this.value)
} else {
this.value -= 1;
timelineParser(this.value)
}
e.stopPropagation();
if (e.deltaY < 0) e.target.valueAsNumber += 1
else e.target.value -= 1
timelineParser(e.target.value)
e.stopPropagation()
}, { passive: true })
function timelineParser(value) {
@ -166,10 +162,10 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
await updateBackground(newPeriod, newVariation)
atlas = []
for (const atlasIndex in atlasAll) {
for (const entry of atlasAll) {
let chosenIndex
const validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
const validPeriods2 = Object.keys(entry.path)
for (const i in validPeriods2) {
const validPeriods = validPeriods2[i].split(', ')
@ -184,13 +180,13 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
}
if (chosenIndex === undefined) continue
const pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
const centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
const pathChosen = Object.values(entry.path)[chosenIndex]
const centerChosen = Object.values(entry.center)[chosenIndex]
if (pathChosen === undefined) continue
atlas.push({
...atlasAll[atlasIndex],
...entry,
path: pathChosen,
center: centerChosen,
})

127
web/_js/main/view.js
View file

@ -43,7 +43,7 @@ objectEditNav.className = "btn btn-outline-primary"
objectEditNav.id = "objectEditNav"
objectEditNav.textContent = "Edit"
let sortedAtlas
let atlasDisplay
const entriesLimit = 50
let entriesOffset = 0
@ -52,13 +52,22 @@ moreEntriesButton.innerHTML = "Show " + entriesLimit + " more"
moreEntriesButton.type = "button"
moreEntriesButton.className = "btn btn-primary d-block mb-2 mx-auto"
moreEntriesButton.id = "moreEntriesButton"
moreEntriesButton.onclick = function () {
moreEntriesButton.addEventListener('click', () => {
buildObjectsList(null, null)
renderBackground()
renderBackground(atlas)
render()
}
})
const moreEntriesObserver = new IntersectionObserver((entries, observer) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue
moreEntriesButton.click()
break
}
})
moreEntriesObserver.observe(moreEntriesButton)
let defaultSort = "shuffle"
document.getElementById("sort").value = defaultSort
@ -74,7 +83,7 @@ filterInput.addEventListener("input", function () {
if (this.value === "") {
document.getElementById("relevantOption").disabled = true
sortedAtlas = atlas.concat()
atlasDisplay = atlas.slice(0)
buildObjectsList(null, null)
} else {
document.getElementById("relevantOption").disabled = false
@ -90,29 +99,29 @@ document.getElementById("sort").addEventListener("input", function () {
resetEntriesList(filterInput.value.toLowerCase(), this.value)
})
offcanvasDraw.addEventListener('show.bs.offcanvas', function () {
offcanvasDraw.addEventListener('show.bs.offcanvas', () => {
wrapper.classList.remove('listHidden')
wrapper.classList.add('listTransitioning')
applyView()
})
offcanvasDraw.addEventListener('shown.bs.offcanvas', function () {
offcanvasDraw.addEventListener('shown.bs.offcanvas', () => {
wrapper.classList.remove('listTransitioning')
applyView()
})
offcanvasDraw.addEventListener('hide.bs.offcanvas', function () {
offcanvasDraw.addEventListener('hide.bs.offcanvas', () => {
wrapper.classList.add('listHidden')
wrapper.classList.add('listTransitioning')
applyView()
})
offcanvasDraw.addEventListener('hidden.bs.offcanvas', function () {
offcanvasDraw.addEventListener('hidden.bs.offcanvas', () => {
wrapper.classList.remove('listTransitioning')
applyView()
})
offcanvasList.addEventListener('show.bs.offcanvas', function () {
offcanvasList.addEventListener('show.bs.offcanvas', () => {
wrapper.classList.remove('listHidden')
wrapper.classList.add('listTransitioning')
applyView()
@ -127,7 +136,7 @@ offcanvasList.addEventListener('shown.bs.offcanvas', e => {
updateLines()
})
offcanvasList.addEventListener('hide.bs.offcanvas', function () {
offcanvasList.addEventListener('hide.bs.offcanvas', () => {
wrapper.classList.add('listHidden')
wrapper.classList.add('listTransitioning')
applyView()
@ -144,7 +153,7 @@ offcanvasList.addEventListener('hidden.bs.offcanvas', e => {
closeObjectsListButton.addEventListener("click", clearObjectsList)
bottomBar.addEventListener("mouseover", function () {
bottomBar.addEventListener("mouseover", () => {
if (!fixed) clearObjectsList()
})
@ -180,11 +189,11 @@ window.addEventListener("mousemove", updateLines)
window.addEventListener("dblClick", updateLines)
window.addEventListener("wheel", updateLines)
objectsContainer.addEventListener("scroll", function () {
objectsContainer.addEventListener("scroll", () => {
updateLines()
})
window.addEventListener("resize", e => {
window.addEventListener("resize", () => {
applyView()
render()
@ -312,36 +321,31 @@ function renderBackground(atlas) {
}
}
function buildObjectsList(filter = null, sort = null) {
function buildObjectsList(filter, sort = defaultSort) {
if (entriesList.contains(moreEntriesButton)) {
entriesList.removeChild(moreEntriesButton)
}
if (!sortedAtlas) {
sortedAtlas = atlas.concat()
document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries."
}
atlasDisplay ||= atlas.slice()
if (filter) {
sortedAtlas = atlas.filter(entry => {
atlasDisplay = atlas.filter(entry => {
return (
entry.name.toLowerCase().includes(filter.toLowerCase())
|| entry.description.toLowerCase().includes(filter.toLowerCase())
|| entry.description?.toLowerCase().includes(filter.toLowerCase())
|| Object.values(entry.links).flat().some(str => str.toLowerCase().includes(filter))
|| entry.id === filter
)
})
document.getElementById("atlasSize").innerHTML = "Found " + sortedAtlas.length + " entries."
document.getElementById("atlasSize").innerHTML = "Found " + atlasDisplay.length + " entries."
} else {
document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries."
document.getElementById("atlasSize").innerHTML = "The Atlas contains " + atlasDisplay.length + " entries."
}
if (sort === null) {
sort = defaultSort
}
sort ||= defaultSort
renderBackground(sortedAtlas)
renderBackground(atlasDisplay)
render()
document.getElementById("sort").value = sort
@ -390,17 +394,15 @@ function buildObjectsList(filter = null, sort = null) {
}
if (sortFunction) {
sortedAtlas.sort(sortFunction)
atlasDisplay.sort(sortFunction)
}
for (let i = entriesOffset; i < entriesOffset + entriesLimit; i++) {
if (i >= sortedAtlas.length) {
break
}
if (i >= atlasDisplay.length) break
const element = createInfoBlock(sortedAtlas[i])
const entry = sortedAtlas[i]
const element = createInfoBlock(atlasDisplay[i])
const entry = atlasDisplay[i]
element.addEventListener("mouseenter", function () {
if (fixed || dragging) return
@ -425,7 +427,7 @@ function buildObjectsList(filter = null, sort = null) {
applyView()
})
element.addEventListener("mouseleave", function () {
element.addEventListener("mouseleave", () => {
if (fixed || dragging) return
scaleZoomOrigin = [...previousScaleZoomOrigin]
@ -445,19 +447,19 @@ function buildObjectsList(filter = null, sort = null) {
entriesOffset += entriesLimit
if (sortedAtlas.length > entriesOffset) {
moreEntriesButton.innerHTML = "Show " + Math.min(entriesLimit, sortedAtlas.length - entriesOffset) + " more"
if (atlasDisplay.length > entriesOffset) {
moreEntriesButton.innerHTML = "Show " + Math.min(entriesLimit, atlasDisplay.length - entriesOffset) + " more"
entriesList.appendChild(moreEntriesButton)
}
}
function shuffle() {
//console.log("shuffled atlas")
for (let i = sortedAtlas.length - 1; i > 0; i--) {
for (let i = atlasDisplay.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = sortedAtlas[i]
sortedAtlas[i] = sortedAtlas[j]
sortedAtlas[j] = temp
const temp = atlasDisplay[i]
atlasDisplay[i] = atlasDisplay[j]
atlasDisplay[j] = temp
}
}
@ -584,22 +586,20 @@ function updateHovering(e, tapped) {
(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
]
const coords_p = document.getElementById("coords_p")
const coordsEl = document.getElementById("coords_p")
// Displays coordinates as zero instead of NaN
if (isNaN(pos[0]) === true) {
coords_p.textContent = "0, 0"
if (isNaN(pos[0])) {
coordsEl.textContent = "0, 0"
} else {
coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
coordsEl.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
}
if (!(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100)) return
const newHovered = []
for (let i = 0; i < atlas.length; i++) {
if (pointIsInPolygon(pos, atlas[i].path)) {
newHovered.push(atlas[i])
}
for (const entry of atlasDisplay) {
if (pointIsInPolygon(pos, entry.path)) newHovered.push(entry)
}
let changed = false
@ -623,15 +623,15 @@ function updateHovering(e, tapped) {
objectsContainer.replaceChildren()
for (const i in hovered) {
const element = createInfoBlock(hovered[i])
for (const entry of hovered) {
const element = createInfoBlock(entry)
objectsContainer.appendChild(element)
hovered[i].element = element
entry.element = element
}
if (hovered.length > 0) {
if (hovered.length) {
document.getElementById("timeControlsSlider").blur()
closeObjectsListButton.classList.remove("d-none")
if ((objectsContainer.scrollHeight > objectsContainer.clientHeight) && !tapped) {
@ -655,14 +655,18 @@ function highlightEntryFromUrl() {
let [id, period] = hash.split('/')
// Handle zzz and 0.. prefix
let newId = id.replace(/^zzz([a-z0-9]{7})$/g, "$1").replace(/^0+/, '')
if (id !== newId) history.replaceState({}, "", `./#${[newId, period].filter(e => e).join('/')}`)
id = newId
let newId = id.replace(/^zzz([a-z0-9]{8,})$/g, "$1").replace(/^0+/, '')
if (id !== newId) {
id = newId
const newLocation = new URL(window.location)
newLocation.hash = '#' + [newId, period].join('/')
history.replaceState({}, "", newLocation)
}
let targetPeriod, targetVariation
if (period) {
[, targetPeriod, targetVariation] = parsePeriod(period)
[targetPeriod, , targetVariation] = parsePeriod(period)
} else {
targetPeriod = defaultPeriod
targetVariation = defaultVariation
@ -734,7 +738,7 @@ function initView() {
render()
document.addEventListener('timeupdate', () => {
sortedAtlas = atlas.concat()
atlasDisplay = atlas.slice()
resetEntriesList(null, null)
})
@ -754,7 +758,7 @@ function initView() {
function initExplore() {
window.updateHovering = updateHovering
window.render = function () { }
window.render = () => { }
function updateHovering(e, tapped) {
if (dragging || (fixed && !tapped)) return
@ -790,8 +794,9 @@ function initGlobal() {
document.addEventListener('timeupdate', event => {
let hashData = window.location.hash.substring(1).split('/')
const targetHash = formatHash(hashData[0], event.detail.period, event.detail.period, event.detail.variation)
if (location.hash !== targetHash) history.replaceState({}, "", `./${targetHash}`)
const newLocation = new URL(window.location)
newLocation.hash = formatHash(hashData[0], event.detail.period, event.detail.period, event.detail.variation)
if (location.hash !== newLocation.hash) history.replaceState({}, "", newLocation)
})
}