Merge pull request #4 from placeAtlas/initial

web/_js/config.js

@@ -18,29 +18,39 @@ const pageTitle = "The 2023 r/place Atlas"
 window.pageTitle = pageTitle
 
 const canvasSize = {
- x: 2000,
+ x: 1000,
  y: 2000
 }
 window.canvasSize = canvasSize
 
+const canvasOffset = {
+ x: -500,
+ y: -1000
+}
+window.canvasOffset = canvasOffset
+
 const canvasCenter = {
- x: canvasSize.x/2,
- y: canvasSize.y/2
+ x: canvasSize.x/2 + canvasOffset.x,
+ y: canvasSize.y/2 + canvasOffset.y
 }
 window.canvasCenter = canvasCenter
 
 const variationsConfig = {
  default: {
  name: "r/place",
  code: "",
- default: 0,
- drawablePeriods: [0, 0],
+ default: 4,
+ drawablePeriods: [1, 4],
  drawableRegions: [
- [[0, 0], [0, 0, 2000, 2000]],
+ [[0, 4], [-500, -500, 499, 499]],
  ],
  // expansions: [],
  versions: [
- { "timestamp": 1687478400, "url": ["./_img/canvas/main-ex/start.png"] },
+ { "timestamp": 1689858000, "url": ["./_img/canvas/main-ex/start.png"] },
+ { "timestamp": 1689859449, "url": ["./_img/canvas/main/1689859449.png"] },
+ { "timestamp": 1689861680, "url": ["./_img/canvas/main/1689861680.png"] },
+ { "timestamp": 1689863453, "url": ["./_img/canvas/main/1689863453.png"] },
+ { "timestamp": 1689865307, "url": ["./_img/canvas/main/1689865307.png"] },
  ],
  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>'
  },

web/_js/main/draw.js

@@ -145,8 +145,8 @@ function initDraw() {
  y -= container.offsetTop
 
  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
+ ~~((x - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0])) / zoom) + 0.5 + canvasOffset.x,
+ ~~((y - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1])) / zoom) + 0.5 + canvasOffset.y
  ]
 
  if (shiftPressed && path.length > 0) {
@@ -498,11 +498,11 @@ function initDraw() {
  backgroundContext.beginPath()
 
  if (path[0]) {
- backgroundContext.moveTo(path[0][0], path[0][1])
+ backgroundContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
  }
 
  for (let p = 1; p < path.length; p++) {
- backgroundContext.lineTo(path[p][0], path[p][1])
+ backgroundContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
  }
 
  backgroundContext.closePath()
@@ -530,11 +530,11 @@ function initDraw() {
  highlightContext.beginPath()
 
  if (path[0]) {
- highlightContext.moveTo(path[0][0], path[0][1])
+ highlightContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
  }
 
  for (let i = 1; i < path.length; i++) {
- highlightContext.lineTo(path[i][0], path[i][1])
+ highlightContext.lineTo(path[i][0] - canvasOffset.x, path[i][1] - canvasOffset.y)
  }
 
  highlightContext.closePath()

web/_js/main/infoblock.js

@@ -155,7 +155,7 @@ function createInfoBlock(entry, isPreview) {
  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>r/place Wiki Article`
+ wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i> r/place Wiki Article`
  wikiGroupElement.appendChild(wikiLinkElement)
  })
  }

web/_js/main/main.js

@@ -39,13 +39,13 @@ function applyView() {
  //console.log(zoomOrigin, scaleZoomOrigin)
  //console.log(scaleZoomOrigin[0])
 
- scaleZoomOrigin[0] = Math.max(-canvasCenter.x, Math.min(canvasCenter.x, scaleZoomOrigin[0]))
- scaleZoomOrigin[1] = Math.max(-canvasCenter.y, Math.min(canvasCenter.y, scaleZoomOrigin[1]))
+ scaleZoomOrigin[0] = Math.max(-canvasCenter.x + canvasOffset.x, Math.min(canvasCenter.x - canvasOffset.x, scaleZoomOrigin[0]))
+ scaleZoomOrigin[1] = Math.max(-canvasCenter.y + canvasOffset.y, Math.min(canvasCenter.y - canvasOffset.y, scaleZoomOrigin[1]))
 
  zoomOrigin = [scaleZoomOrigin[0] * zoom, scaleZoomOrigin[1] * zoom]
 
- innerContainer.style.height = (~~(zoom * canvasSize.x)) + "px"
- innerContainer.style.width = (~~(zoom * canvasSize.y)) + "px"
+ innerContainer.style.width = (~~(zoom * canvasSize.x)) + "px"
+ innerContainer.style.height = (~~(zoom * canvasSize.y)) + "px"
 
  innerContainer.style.left = ~~(container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft) + "px"
  innerContainer.style.top = ~~(container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop) + "px"
@@ -412,8 +412,6 @@ async function init() {
 
  function touchmove(e) {
 
- updateLines()
-
  if (e.touches.length === 1) {
 
  mousemove(e.touches[0].clientX, e.touches[0].clientY)

web/_js/main/view.js

@@ -229,8 +229,8 @@ function updateLines() {
  )
  }
  linesContext.lineTo(
- ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft,
- ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
+ ~~((hovered[i].center[0] - canvasOffset.x) * zoom) + innerContainer.offsetLeft,
+ ~~((hovered[i].center[1] - canvasOffset.y) * zoom) + innerContainer.offsetTop
  )
  linesContext.stroke()
  }
@@ -259,8 +259,8 @@ function updateLines() {
  )
  }
  linesContext.lineTo(
- ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft,
- ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
+ ~~((hovered[i].center[0] - canvasOffset.x) * zoom) + innerContainer.offsetLeft,
+ ~~((hovered[i].center[1] - canvasOffset.y) * zoom) + innerContainer.offsetTop
  )
  linesContext.stroke()
  }
@@ -287,12 +287,12 @@ function renderBackground(atlas) {
 
  if (path[0]) {
  //backgroundContext.moveTo(path[0][0]*zoom, path[0][1]*zoom)
- backgroundContext.moveTo(path[0][0], path[0][1])
+ backgroundContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
  }
 
  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.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
  }
 
  backgroundContext.closePath()
@@ -498,12 +498,12 @@ async function render() {
 
  if (path[0]) {
  //context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
- highlightContext.moveTo(path[0][0], path[0][1])
+ highlightContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
  }
 
  for (let p = 1; p < path.length; p++) {
  //context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
- highlightContext.lineTo(path[p][0], path[p][1])
+ highlightContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
  }
 
  highlightContext.closePath()
@@ -547,12 +547,12 @@ async function render() {
 
  if (path[0]) {
  //context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
- highlightContext.moveTo(path[0][0], path[0][1])
+ highlightContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
  }
 
  for (let p = 1; p < path.length; p++) {
  //context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
- highlightContext.lineTo(path[p][0], path[p][1])
+ highlightContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
  }
 
  highlightContext.closePath()
@@ -583,8 +583,8 @@ function updateHovering(e, tapped) {
  if (dragging || (fixed && !tapped)) return
 
  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
+ (e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom + canvasOffset.x,
+ (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom + canvasOffset.y
  ]
  const coordsEl = document.getElementById("coords_p")
 
@@ -595,8 +595,8 @@ function updateHovering(e, tapped) {
  coordsEl.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
  }
 
- if (!(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100)) return
-
+ if (!(pos[0] <= canvasSize.x + canvasOffset.x + 200 && pos[0] >= canvasOffset.x - 200 && pos[1] <= canvasSize.y + canvasOffset.y + 200 && pos[1] >= canvasOffset.x - 200)) return
+ 
  const newHovered = []
  for (const entry of atlasDisplay) {
  if (pointIsInPolygon(pos, entry.path)) newHovered.push(entry)