Initial Release

Tunguso4ka · Aug 12, 2024 · 3143c76 · 3143c76
commit 3143c76
Show file tree

Hide file tree

Showing 10 changed files with 270 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# Tunguso4ka's SS14 Map Viewer
+### (actually Image Viewer, but who cares?)
+
+### English
+
+TODO
+
+### Українською
diff --git a/css/dark_theme.css b/css/dark_theme.css
@@ -0,0 +1,65 @@
+body, html {
+  background-color: #011627;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+
+  background-color: #011627;
+  color: #D8D8F6;
+  /*border: none;*/
+  border: 0.1em solid #D8D8F6;
+  border-radius: 0.25em;
+  font-size: 1.3em;
+  margin: 0em 0.2em 0em 0em;
+
+  cursor: pointer;
+
+  min-width: 1.5em;
+  height: 1.5em;
+  padding: 0;
+}
+
+button:hover {
+  background-color: #D8D8F6;
+  color: #011627;
+}
+
+div {
+  left: 1%;
+  position: absolute;
+  display: flex;
+
+  justify-content: center;
+  vertical-align: middle;
+}
+
+[hidden]{
+  display:none;
+}
+
+.toolbar {
+  top: 2%;
+}
+
+#mapsbar {
+  bottom: 2%;
+}
+
+.selector {
+  padding: 0em 2em;
+  margin: 0em 0.3em 0em 0em;
+}
+
+#canvas {
+  overflow: hidden;
+  height: 99vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  image-rendering: pixelated;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Map Viewer</title>
+    <link rel="icon" type="image/x-icon" href="resources/icon.ico">
+    <link rel="stylesheet" type="text/css" href="css/dark_theme.css"/>
+    <script src="scripts/logic.js"></script>
+  </head>
+  <body>
+    <canvas id="canvas">
+    </canvas>
+
+    <div class="toolbar">
+      <button
+        title="Show/Hide Maps"
+        onclick="toggleMapsbarHidden()"
+        >#</button>
+      <button
+        title="Zoom in"
+        id="zoom_in"
+        onclick="adjustZoom(-0.3)"
+        >+</button>
+      <button
+        id="zoom_out"
+        title="Zoom out"
+        onclick="adjustZoom(0.3)"
+        >-</button>
+    </div>
+    <div id="mapsbar" hidden>
+      <button class="selector" onclick="map_path='maps/Savannah-0.png'">Savannah</button>
+      <button class="selector" onclick="map_path='maps/Solaris-0.png'">Solaris</button>
+      <button class="selector" onclick="map_path='maps/Shiva-0.png'">Shiva</button>
+      <button class="selector" onclick="map_path='maps/Prison-0.png'">Fiorina</button>
+    </div>
+  <body/>
+</html>
diff --git a/maps/Prison-0.png b/maps/Prison-0.png
diff --git a/maps/Savannah-0.png b/maps/Savannah-0.png
diff --git a/maps/Shiva-0.png b/maps/Shiva-0.png
diff --git a/maps/Solaris-0.png b/maps/Solaris-0.png
diff --git a/resources/icon.ico b/resources/icon.ico
diff --git a/scripts/logic.js b/scripts/logic.js
@@ -0,0 +1,160 @@
+//
+// Original pan and zoom code from https://codepen.io/chengarda/pen/wRxoyB
+//
+
+// TODO rewrite it all, add more comments, add map buttons from json file
+
+var map_path = "maps/Solaris-0.png";
+
+let canvas;
+let ctx;
+
+window.onload = () =>
+{
+  canvas = document.getElementById("canvas")
+  ctx = canvas.getContext('2d')
+
+  canvas.addEventListener('mousedown', onPointerDown)
+  canvas.addEventListener('touchstart', (e) => handleTouch(e, onPointerDown))
+  canvas.addEventListener('mouseup', onPointerUp)
+  canvas.addEventListener('touchend',  (e) => handleTouch(e, onPointerUp))
+  canvas.addEventListener('mousemove', onPointerMove)
+  canvas.addEventListener('touchmove', (e) => handleTouch(e, onPointerMove))
+  canvas.addEventListener( 'wheel', (e) => adjustZoom(e.deltaY*SCROLL_SENSITIVITY))
+
+  draw()
+}
+
+let cameraOffset = { x: window.innerWidth/2, y: window.innerHeight/2 }
+let cameraZoom = 1
+let MAX_ZOOM = 3
+let MIN_ZOOM = 0.05
+let SCROLL_SENSITIVITY = 0.002
+
+function draw()
+{
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+
+  // Translate to the canvas centre before zooming - so you'll always zoom on what you're looking directly at
+  ctx.translate( window.innerWidth / 2, window.innerHeight / 2 )
+  ctx.scale(cameraZoom, cameraZoom)
+  ctx.translate( -window.innerWidth / 2 + cameraOffset.x, -window.innerHeight / 2 + cameraOffset.y )
+  ctx.clearRect(0,0, window.innerWidth, window.innerHeight)
+
+  ctx.imageSmoothingEnabled = false;
+
+  var image = new Image();
+
+  image.src = map_path;
+
+  ctx.drawImage(image, 0, 0);
+
+  requestAnimationFrame( draw )
+}
+
+// Gets the relevant location from a mouse or single touch event
+function getEventLocation(e)
+{
+    if (e.touches && e.touches.length == 1)
+    {
+        return { x:e.touches[0].clientX, y: e.touches[0].clientY }
+    }
+    else if (e.clientX && e.clientY)
+    {
+        return { x: e.clientX, y: e.clientY }        
+    }
+}
+
+let isDragging = false
+let dragStart = { x: 0, y: 0 }
+
+function onPointerDown(e)
+{
+    isDragging = true
+    dragStart.x = getEventLocation(e).x/cameraZoom - cameraOffset.x
+    dragStart.y = getEventLocation(e).y/cameraZoom - cameraOffset.y
+}
+
+function onPointerUp(e)
+{
+    isDragging = false
+    initialPinchDistance = null
+    lastZoom = cameraZoom
+}
+
+function onPointerMove(e)
+{
+    if (isDragging)
+    {
+        cameraOffset.x = getEventLocation(e).x/cameraZoom - dragStart.x
+        cameraOffset.y = getEventLocation(e).y/cameraZoom - dragStart.y
+    }
+}
+
+function handleTouch(e, singleTouchHandler)
+{
+    if ( e.touches.length == 1 )
+    {
+        singleTouchHandler(e)
+    }
+    else if (e.type == "touchmove" && e.touches.length == 2)
+    {
+        isDragging = false
+        handlePinch(e)
+    }
+}
+
+let initialPinchDistance = null
+let lastZoom = cameraZoom
+
+function handlePinch(e)
+{
+    e.preventDefault()
+
+    let touch1 = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    let touch2 = { x: e.touches[1].clientX, y: e.touches[1].clientY }
+
+    // This is distance squared, but no need for an expensive sqrt as it's only used in ratio
+    let currentDistance = (touch1.x - touch2.x)**2 + (touch1.y - touch2.y)**2
+
+    if (initialPinchDistance == null)
+    {
+        initialPinchDistance = currentDistance
+    }
+    else
+    {
+        adjustZoom( null, currentDistance/initialPinchDistance )
+    }
+}
+
+function adjustZoom(zoomAmount, zoomFactor)
+{
+  if (isDragging)
+  {
+    return
+  }
+
+  // TODO make it smooth
+  if (zoomAmount)
+  {
+    cameraZoom -= zoomAmount
+  }
+  else if (zoomFactor)
+  {
+    console.log(zoomFactor)
+    cameraZoom = zoomFactor*lastZoom
+  }
+
+  cameraZoom = Math.min( cameraZoom, MAX_ZOOM )
+  cameraZoom = Math.max( cameraZoom, MIN_ZOOM )
+
+  console.log(zoomAmount, cameraZoom)
+}
+
+function toggleMapsbarHidden()
+{
+  button = document.getElementById("mapsbar");
+  console.log(button.hidden)
+  button.hidden = ! button.hidden;
+}