Hello World!Second Scroll1.2.11.8.2 goes here1.13.3 goes here1.4.14.31.5.4 goes here1.5.31.6.31.5.6 goes here1.7.51.8.38.51.10.31.10.51.13.31.16.131.24.15Message for you, mortrix <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/api/v2/select?p=basic&c=2.2.2/2.2.2/2.2.3&f=style.css">
<script src="/api/v2/select?p=basic&c=2.2.2/2.2.2/2.2.2&f=main.js" defer></script>
</head>
<body>
<div id="grid-container">
<div id="grid"></div>
</div>
<div id="instructions-display">
<ul>
<li>Double-tap to create a scroll.</li>
<li>Tap on a scroll to edit or delete it.</li>
<li>Drag on the grid to move around.</li>
</ul>
</div>
<div id="coordinates-display"></div>
<div id="modal-overlay"></div>
<div id="scroll-modal">
<div id="scroll-coordinates"></div>
<textarea id="scroll-content" rows="20" cols="110"></textarea>
<div class="modal-buttons">
<button onclick="delete_scroll()" class="danger">Delete</button>
<button onclick="close_modal()">Cancel</button>
<button onclick="save_scroll()" class="primary">Save</button>
</div>
</div>
</body>
</html>
const GRID_SIZE = 1000;
const CELL_SIZE = 150;
let grid_offset = { x: 0, y: 0 };
let is_dragging = false;
let start_pos = { x: 0, y: 0 };
let scrolls = new Map();
let current_scroll = null;
function dgid(id) {
return document.getElementById(id);
}
const grid = dgid('grid');
const container = dgid('grid-container');
const modal = dgid('scroll-modal');
const modal_overlay = dgid('modal-overlay');
const coordinates_display = dgid('coordinates-display');
const scroll_content = dgid('scroll-content');
function initialize_grid() {
grid_offset.x = 0;
grid_offset.y = 0;
grid.style.transform = `translate(${grid_offset.x}px, ${grid_offset.y}px)`;
render_visible_cells();
}
function update_grid_position() {
grid.style.transform = `translate(${grid_offset.x}px, ${grid_offset.y}px)`;
}
function render_visible_cells() {
grid.innerHTML = '';
const start_x = Math.floor(-grid_offset.x / CELL_SIZE);
const start_y = Math.floor(-grid_offset.y / CELL_SIZE);
const end_x = start_x + Math.ceil(window.innerWidth / CELL_SIZE) + 1;
const end_y = start_y + Math.ceil(window.innerHeight / CELL_SIZE) + 1;
for (let x = Math.max(start_x, 0); x < Math.min(end_x, GRID_SIZE); x++) {
for (let y = Math.max(start_y, 0); y < Math.min(end_y, GRID_SIZE); y++) {
const scroll_content = scrolls.get(`${x + 1},${y + 1}`);
if (scroll_content) {
render_scroll(x, y, scroll_content);
}
}
}
}
function render_scroll(x, y, content) {
const scroll = document.createElement('div');
scroll.className = 'scroll';
scroll.style.left = `${x * CELL_SIZE}px`;
scroll.style.top = `${y * CELL_SIZE}px`;
scroll.textContent = content;
scroll.onclick = (e) => {
e.stopPropagation();
open_modal(x + 1, y + 1, content);
};
grid.appendChild(scroll);
}
function open_modal(x, y, content = '') {
current_scroll = { x, y };
dgid('scroll-coordinates').innerHTML = `<span style="color: #888">1.1.1/1.1.1/1.</span>${x}.${y}`;
scroll_content.value = content;
if (content.length == 0) {
fetchScroll(x, y);
} else {
modal.style.display = 'block';
modal_overlay.style.display = 'block';
scroll_content.focus();
}
}
async function fetchScroll(x, y) {
try
{
const coordinate = `1.1.1/1.1.1/1.${x}.${y}`;
const select_url = `/api/v2/select?p=basic&c=${coordinate}`;
const response = await fetch(select_url);
const content = await response.text();
console.log(`Content: ${content}`);
scroll_content.value = content;
modal.style.display = 'block';
modal_overlay.style.display = 'block';
scroll_content.focus();
} catch (error) {}
}
function close_modal() {
modal.style.display = 'none';
modal_overlay.style.display = 'none';
current_scroll = null;
}
function save_scroll() {
const content = dgid('scroll-content').value.trim();
if (content && current_scroll) {
scrolls.set(`${current_scroll.x},${current_scroll.y}`, content);
const coordinate = `1.1.1/1.1.1/1.${current_scroll.x}.${current_scroll.y}`;
const push_url = `/api/v2/update?p=basic&c=${coordinate}&s=${content}`;
fetch(push_url);
render_visible_cells();
}
close_modal();
}
function delete_scroll() {
if (current_scroll) {
scrolls.delete(`${current_scroll.x},${current_scroll.y}`);
render_visible_cells();
}
close_modal();
}
container.addEventListener('mousedown', (e) => {
if (e.target === container || e.target === grid) {
is_dragging = true;
container.classList.add('grabbing');
start_pos = {
x: e.clientX - grid_offset.x,
y: e.clientY - grid_offset.y
};
}
});
container.addEventListener('dblclick', (e) => {
if (e.target === container || e.target === grid) {
const rect = container.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left - grid_offset.x) / CELL_SIZE);
const y = Math.floor((e.clientY - rect.top - grid_offset.y) / CELL_SIZE);
if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
open_modal(x + 1, y + 1);
}
}
});
window.addEventListener('mousemove', (e) => {
if (is_dragging) {
grid_offset.x = e.clientX - start_pos.x;
grid_offset.y = e.clientY - start_pos.y;
const min_x = -GRID_SIZE * CELL_SIZE + window.innerWidth;
const min_y = -GRID_SIZE * CELL_SIZE + window.innerHeight;
grid_offset.x = Math.min(0, Math.max(min_x, grid_offset.x));
grid_offset.y = Math.min(0, Math.max(min_y, grid_offset.y));
update_grid_position();
render_visible_cells();
}
});
window.addEventListener('mouseup', () => {
is_dragging = false;
container.classList.remove('grabbing');
});
window.addEventListener('resize', () => {
render_visible_cells();
});
container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left - grid_offset.x) / CELL_SIZE);
const y = Math.floor((e.clientY - rect.top - grid_offset.y) / CELL_SIZE);
if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
coordinates_display.innerHTML = `<span style="color: #888">1.1.1/1.1.1/1.</span>${x + 1}.${y + 1}`;
} else {
coordinates_display.textContent = 'Out of bounds';
}
});
container.addEventListener('touchstart', (e) => {
if (e.target === container || e.target === grid) {
is_dragging = true;
container.classList.add('grabbing');
const touch = e.touches[0];
start_pos = {
x: touch.clientX - grid_offset.x,
y: touch.clientY - grid_offset.y
};
}
});
container.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
if (is_dragging) {
grid_offset.x = touch.clientX - start_pos.x;
grid_offset.y = touch.clientY - start_pos.y;
const min_x = -GRID_SIZE * CELL_SIZE + window.innerWidth;
const min_y = -GRID_SIZE * CELL_SIZE + window.innerHeight;
grid_offset.x = Math.min(0, Math.max(min_x, grid_offset.x));
grid_offset.y = Math.min(0, Math.max(min_y, grid_offset.y));
update_grid_position();
render_visible_cells();
}
});
let last_tap = 0;
container.addEventListener('touchend', (e) => {
const current_time = new Date().getTime();
const tap_length = current_time - last_tap;
if (tap_length < 500 && tap_length > 0) {
if (e.target === container || e.target === grid) {
const touch = e.changedTouches[0];
const rect = container.getBoundingClientRect();
const x = Math.floor((touch.clientX - rect.left - grid_offset.x) / CELL_SIZE);
const y = Math.floor((touch.clientY - rect.top - grid_offset.y) / CELL_SIZE);
if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
open_modal(x + 1, y + 1);
}
}
}
last_tap = current_time;
is_dragging = false;
container.classList.remove('grabbing');
});
container.addEventListener('touchcancel', () => {
is_dragging = false;
container.classList.remove('grabbing');
});
initialize_grid();
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
ul {
margin: 0;
padding-left: 1rem;
}
#grid-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
cursor: grab;
background: #242429;
}
#grid-container.grabbing {
cursor: grabbing;
}
#grid {
position: absolute;
transform-origin: 0 0;
width: 150000px; /* GRID_SIZE * CELL_SIZE */
height: 150000px;
background-image:
linear-gradient(to right, #eee 1px, transparent 1px),
linear-gradient(to bottom, #eee 1px, transparent 1px);
background-size: 150px 150px;
background-position: -1px -1px;
user-select: none;
}
.scroll {
position: absolute;
width: 280px;
height: 280px;
background: #f9f3e6;
border: 1px solid #dcc;
border-radius: 5px;
padding: 5px;
cursor: pointer;
overflow: hidden;
word-break: break-all;
box-sizing: border-box;
margin: 2px;
}
#scroll-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
#scroll-content {
overflow-y: scroll;
resize: none;
padding: .5rem;
font-family: inherit;
font-size: 1.5em;
}
#modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.modal-buttons {
margin-top: 1rem;
display: flex;
gap: .5rem;
justify-content: flex-end;
}
button {
padding: .5rem 1.5rem;
border-radius: .2rem;
border: none;
cursor: pointer;
}
button.primary {
background: #4a90e2;
color: #fff;
}
button.danger {
background: #e74c3c;
color: #fff;
}
#instructions-display, #coordinates-display {
position: fixed;
background: rgba(255,255,255,0.8);
padding: .5rem 1rem;
border-radius: 4px;
}
#instructions-display {
bottom: 1rem;
left: 1rem;
}
#coordinates-display {
top: 1rem;
left: 1rem;
}