init

client/app.js

@@ -0,0 +1,200 @@
+const canvasContainer = document.getElementById('canvas-container');
+let zoomLevel = 0.15
+let stageX = 0
+let stageY = 0
+let myWindow
+
+// Create a Konva stage, which will be the entire w x h of the screen
+const stage = new Konva.Stage({
+  container: 'canvas-container',
+  width: window.innerWidth,
+  height: window.innerHeight,
+  draggable: true,
+});
+
+// Create a Konva layer
+// This acts as a layer to add various shapes, images, groups to
+const layer = new Konva.Layer();
+
+// Create a Konva image
+const image = new Konva.Image({
+  draggable: false,
+  shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
+  shadowBlur: 20, // Blur radius
+  shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
+  shadowOpacity: 0, // Shadow opacity
+});
+
+// Load the PNG image
+const imageURL = 'map.png'; // Replace with the path to your PNG image
+const imageObj = new Image();
+
+imageObj.onload = function () {
+  // Set the image dimensions and center it in the stage
+  image.width(imageObj.width);
+  image.height(imageObj.height);
+
+  // Set the image source
+  image.image(imageObj);
+
+  // Add the image to the layer
+  layer.add(image);
+
+  const clickableRect = new Konva.Rect({
+	id: 'public/test/lol',
+    x: 2635, // Adjust position as needed
+    y: 441, // Adjust position as needed
+    width: 655,
+    height: 45,
+    fill: 'rgba(255, 0, 0, 0.0)', // Red with 50% opacity
+    draggable: false,
+	shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
+	shadowBlur: 20, // Blur radius
+	shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
+	shadowOpacity: 1, // Shadow opacity
+  });
+
+  // Attach a click event listener to the rectangle
+  clickableRect.on('click', () => {
+    // console.log(clickableRect.id())
+	// // Data to send with the POST request
+	// const postData = {
+	// 	rectangleId: clickableRect.id()
+	//   };
+	
+	//   // Send POST request to the server
+	//   fetch('http://localhost:3000/api/change-directory', {
+	// 	method: 'POST',
+	// 	headers: {
+	// 	  'Content-Type': 'application/json',
+	// 	},
+	// 	body: JSON.stringify(postData),
+	//   })
+	// 	.then(response => response.json())
+	// 	.then(data => {
+	// 	  console.log('Server response:', data);
+	// 	})
+	// 	.catch(error => {
+	// 	  console.error('Error sending POST request:', error);
+	// 	});
+	let linkName = ''
+	// Check if the window is already open
+	if (myWindow && !myWindow.closed) {
+        // Reuse the existing window
+        myWindow.location.href = 'http://localhost:3000/' + linkName;
+      } else {
+        // Open a new window and assign a unique name
+        myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
+      }
+  });
+
+  // Change cursor on hover
+clickableRect.on('mouseenter', () => {
+	document.body.style.cursor = 'pointer';
+  });
+  
+  clickableRect.on('mouseleave', () => {
+	document.body.style.cursor = 'default';
+  });
+
+  // Add the clickable rectangle to the layer
+layer.add(clickableRect);
+
+//   stage.scaleX(0.05)
+//   stage.scaleY(0.05)
+  // Center the stage initially
+//   stage.x((stage.width() - image.width()) / 2);
+//   stage.y((stage.height() - image.height()) / 2);
+
+stage.x((stage.width()/2) - (image.width()/2) * 0.15)
+stage.y((stage.height()/2) - (image.height()/2) * 0.15)
+
+  
+
+  stageX = stage.x()
+  stageY = stage.y()
+
+  stage.scaleX(0.15)
+  stage.scaleY(0.15)
+
+  // Add the layer to the stage
+  stage.add(layer);
+
+  layer.batchDraw();
+};
+
+imageObj.src = imageURL;
+
+// Add the image to the layer
+layer.add(image);
+
+// Add the layer to the stage
+stage.add(layer);
+
+
+// Handle zoom in and zoom out
+window.addEventListener('wheel', (e) => {
+	e.preventDefault();
+
+  const oldScale = stage.scaleX();
+
+  // Calculate the new scale based on the wheel delta
+  zoomLevel += e.deltaY * -0.001;
+  zoomLevel = Math.max(0.15, Math.min(0.8, zoomLevel));
+  console.log(zoomLevel)
+
+  // Calculate the new scale factor
+  const scale = zoomLevel / oldScale;
+
+  // Calculate the cursor position relative to the stage
+  const pointer = stage.getPointerPosition();
+  const pointerX = pointer.x - stageX;
+  const pointerY = pointer.y - stageY;
+
+  // Adjust the stage position to zoom around the cursor
+  stageX -= pointerX * (scale - 1);
+  stageY -= pointerY * (scale - 1);
+
+  // Set the new scale and position of the stage
+  stage.scaleX(zoomLevel);
+  stage.scaleY(zoomLevel);
+  stage.x(stageX);
+  stage.y(stageY);
+
+  layer.batchDraw();
+}, { passive: false });
+
+// Slow down dragging based on the current scale
+const dragSpeedFactor = 0.5; // Adjust this value to control the drag speed
+
+// Reset stage position on drag
+stage.on('dragstart', () => {
+	stageX = stage.x();
+	stageY = stage.y();
+  });
+  
+  stage.on('dragmove', (e) => {
+	// Calculate drag speed factor based on scale
+	
+	const dragSpeedFactor = 0.5 + (1-stage.scaleX()) * 1; // Adjust the multiplier as needed
+  
+	const offsetX = e.evt.movementX * dragSpeedFactor * stage.scaleX();
+	const offsetY = e.evt.movementY * dragSpeedFactor * stage.scaleY();
+  
+	stageX += offsetX;
+	stageY += offsetY;
+  
+	stage.x(stageX);
+	stage.y(stageY);
+  
+	layer.batchDraw();
+  });
+  
+  stage.on('dragend', () => {
+	stageX = stage.x();
+	stageY = stage.y();
+  });
+
+  document.addEventListener('contextmenu', event => {
+    event.preventDefault();
+});

client/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>transmediale</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="canvas-container"></div>
+  <script src="https://unpkg.com/konva@9/konva.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

client/links.json

@@ -0,0 +1,47 @@
+{
+	"sections": [
+	  {
+		"section_name": "Adorability-Fundementalism",
+		"links": [
+		  {
+			"id": "Title",
+			"width": 665,
+			"height": 45,
+			"x": 2635,
+			"y": 440,
+			"url": "adorability-fundementalism"
+		  },
+		  {
+			"id": "HistoryKawaii",
+			"width": 370,
+			"height": 45,
+			"x": 2525,
+			"y": 593,
+			"url": "history-of-kawaii"
+		  },
+		  {
+			"id": "CuteFactor",
+			"width": 285,
+			"height": 45,
+			"x": 2475,
+			"y": 1346,
+			"url": "cute-factor"
+		  }
+		]
+	  },
+	  {
+		"section_name": "Kawaii-ASMR",
+			"links": [
+				{
+				"id": "Title",
+				"width": 266,
+				"height": 45,
+				"x": 4137,
+				"y": 447,
+				"url": "kawaii-asmr"
+				}
+			]
+			}
+
+	]
+}

client/styles.css

@@ -0,0 +1,23 @@
+body {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	overflow: hidden;
+	background-color: #F4F4F5;
+	/* background-image:
+      linear-gradient(45deg, #cccccc 25%, transparent 25%), 
+      linear-gradient(135deg, #ccc 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ccc 75%),
+      linear-gradient(135deg, transparent 75%, #ccc 75%);
+    background-size:25px 25px; /* Must be a square */
+    /* background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; Must be half of one side of the square */
+  }
+  
+  #canvas-container {
+	width: 100%;
+	height: 100%;
+  }
+