irskep/slicebook.html Secret

## slicebook.html
<!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>
	<!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>