Skip to content

Instantly share code, notes, and snippets.

@irskep

irskep/slicebook.html Secret

Created Jan 31, 2020
Embed
What would you like to do?
<!doctype html>
<html>
<head>
<style>
html, body {
background: black;
margin: 0;
padding: 0;
}
#page {
position: absolute;
}
#image {
position: absolute;
transform: scale(0.33, 0.33);
transform-origin: 0% 0%;
}
#mousebox, .rect {
box-sizing: border-box;
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="outer">
<div id="page">
<img id="image">
<div id="rects"></div>
<div id="mousebox"></div>
</div>
</div>
<script>
const PAGE_SIZE = {x: 973.5, y: 1270.5};
// keys are key codes lol
const boxSizes = {
49: {width: 0.33, height: 0.06},
50: {width: 0.45, height: 0.066},
51: {width: 0.78, height: 0.066},
52: {width: 0.78, height: 0.10},
53: {width: 0.38, height: 0.066},
54: {width: 0.54, height: 0.066},
55: {width: 0.36, height: 0.06},
56: {width: 0.57, height: 0.06},
57: {width: 0.6, height: 0.07},
};
if (!localStorage.data) {
localStorage.data = '{"pages": [], "page": 0}';
}
let {page, pages} = JSON.parse(localStorage.data);
const save = () => {
localStorage.data = JSON.stringify({page, pages});
};
console.log(page, pages);
const pageEl = document.querySelector("#page");
const imageEl = document.querySelector("#image");
let boxSize = boxSizes[49];
let x = 0
let y = 0
/* fns */
const updateRects = () => {
const rectsEl = document.querySelector("#rects");
while (rectsEl.children.length > 0) {
rectsEl.removeChild(rectsEl.children[0]);
}
const rects = pages[page];
if (!rects) return;
for (const r of rects) {
const newEl = document.createElement('div');
newEl.className = 'rect';
newEl.style.transform = `translate(${r.x * PAGE_SIZE.x}px, ${r.y * PAGE_SIZE.y}px)`
newEl.style.width = r.w * PAGE_SIZE.x + "px";
newEl.style.height = r.h * PAGE_SIZE.y + "px";
rectsEl.appendChild(newEl);
}
};
const updateImage = () => {
imageEl.src = `/book/OSCILLATOR-${page}.png`;
updateRects();
};
const updateBoxSize = (keyCode) => {
boxSize = boxSizes[keyCode];
document.querySelector("#mousebox").style.width = boxSize.width * PAGE_SIZE.x + "px";
document.querySelector("#mousebox").style.height = boxSize.height * PAGE_SIZE.y + "px";
}
const updateMouseBox = (x, y) => {
document.querySelector("#mousebox").style.transform = `translate(${x}px, ${y}px)`;
};
document.body.addEventListener('mousemove', (e) => {
x = e.x;
y = e.y;
updateMouseBox(e.x, e.y);
});
document.body.addEventListener('click', (e) => {
while (pages.length <= page) {
pages.push([]);
}
const rects = pages[page];
let newX = e.x / PAGE_SIZE.x;
let newY = e.y / PAGE_SIZE.y;
if (newX + boxSize.w > 1) return;
for (const r of rects) {
if (Math.abs(r.x - newX) < 0.01) {
newX = r.x;
}
if (Math.abs(r.y - newY) < 0.01) {
newY = r.y;
}
}
rects.push({x: newX, y: newY, w: boxSize.width, h: boxSize.height});
console.log(rects);
updateRects();
save();
});
document.body.addEventListener('keydown', (e) => {
console.log(e);
if (boxSizes[e.keyCode]) {
updateBoxSize(e.keyCode);
return;
}
switch (e.key) {
case "ArrowRight":
page += 1;
updateImage();
save();
break;
case "ArrowLeft":
page -= 1;
updateImage();
save();
break;
case "Backspace":
pages[page].splice(-1, 1);
updateRects();
save();
break;
}
});
/* init */
updateImage();
updateRects();
updateBoxSize(49);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment