add a basic terrain layout

2025-01-19 00:59:17 +09:00
parent 0b949683a6
commit 0a4853aff9
6 changed files with 2291 additions and 41 deletions
@@ -0,0 +1,92 @@
+<html>
+  <head>
+    <title>Terrain Creator</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html, body {
+        background-color: black;
+        font-family: sans-serif;
+      }
+
+      html {
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      #map {
+        background-color: white;
+        background-image: url('./background.png');
+        background-size: cover;
+      }
+
+      .point {
+        position: absolute;
+        border-radius: 50%;
+        margin-top: -5px;
+        margin-left: -5px;
+        width: 10px;
+        height: 10px;
+        background-color: red;
+        border: 1px solid white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script>
+      var width = null
+      var height = null
+      var scale = null
+      var points = []
+
+      window.addEventListener('load', () => {
+        const params = Object.fromEntries(new URLSearchParams(window.location.search).entries())
+        width = params.width
+        height = params.height
+        scale = params.scale
+        if (width == null) {
+          width = prompt('Width: ')
+        }
+        if (height == null) {
+          height = prompt('Height: ')
+        }
+        if (scale == null) {
+          scale = prompt('Scale: ')
+        }
+
+        const map = document.getElementById('map')
+        map.style.width = `${width / scale}px`
+        map.style.height = `${height / scale}px`
+
+        map.addEventListener('contextmenu', (event) => event.preventDefault())
+        map.addEventListener('mousedown', (event) => {
+          if (event.button == 2) {
+            console.log(`\n\n[\n` + points.map((p) => `  new Vector2(${p.x}, ${p.y}),`).join(`\n`) + `\n],\n`)
+            points = []
+            map.innerHTML = ''
+            return
+          }
+
+          if (event.button == 0) {
+            const x = Math.floor(event.pageX * scale)
+            const y = Math.floor(height - (event.pageY * scale))
+            points.push({ x, y })
+            
+            const point = document.createElement('div')
+            point.classList.add('point')
+            point.style.left = event.pageX
+            point.style.top = event.pageY
+            map.appendChild(point)
+            return
+          }
+        })
+      })
+    </script>
+  </body>
+</html>