diff --git a/index.html b/index.html index 3c31e99..e0a2e61 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,18 @@ - - - - - - - Fabrika Hrádek Tour - - - - - - - - - 4 - - + + + + + + + Fabrika Hrádek Tour + + + + + + +
+ +
+ \ No newline at end of file diff --git a/res/panorama/script.js b/res/panorama/script.js index 77d4596..ade25b3 100644 --- a/res/panorama/script.js +++ b/res/panorama/script.js @@ -1,86 +1,86 @@ -//CONSTANTS -const WIDTH = 1000; -let ASPECT_RATIO = 4/3; //yes constant -const MOVE_PIECES = 1/32; - -//CANVAS SHIT -let ctx; -let canvas; -let img; //THE PANORAMA IMAGE -let img_url = ""; - -//CURRENT IMAGE STATE -let x1 = WIDTH / 2; -let x2; //TODO? Unused -let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT - -function load_panorama() -{ - check_param(); - - ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB - - canvas = document.getElementById('panorama'); - ctx = canvas.getContext('2d'); - img = new Image(); //IMAGE - - ctx.canvas.height = WIDTH * ASPECT_RATIO; //TODO! Possible shit happening - ctx.canvas.width = WIDTH / 2; //USER WILL SEE A 1/2 OF THE PANORAMA AT THE TIME - - img.onload = function() - { - x2 = img.width; - ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img - }; - - img.src = img_url; -} - -function turn_left() -{ - if (turn < 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) - { - //ctx.drawImage(img, x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1), img.height, 0 - x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1) * WIDTH/img.width, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img //TODO - return; - } - - //MOVE AN 8th TO LEFT - x1 -= WIDTH * MOVE_PIECES; - x2 -= WIDTH * MOVE_PIECES; - - ctx.drawImage(img, x1, 0, img.width - WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW - - turn--; -} - -function turn_right() -{ - if (turn > 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) - { - //ctx.drawImage(img, img.width - WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), 0, img.width, img.height, 0, 0, WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), WIDTH * ASPECT_RATIO); //DRAW RIGHT PART ON THE LEFT SIDE //TODO - - return; - } - - //MOVE AN 8th TO LEFT - x1 += WIDTH * MOVE_PIECES; - x2 += WIDTH * MOVE_PIECES; - - ctx.drawImage(img, x1, 0, img.width + WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW - - turn++; -} - -function check_param() -{ - let params = new URLSearchParams(window.location.search); - img_url = params.get("img"); - - if (img_url == null) - { - alert("This link seems to be corrupted!"); - open("../index.html", "_self"); - } - - img_url = './img/' + img_url + '.jpg'; //TODO: Change +//CONSTANTS +const WIDTH = 1000; +let ASPECT_RATIO = 4/3; //yes constant +const MOVE_PIECES = 1/32; + +//CANVAS SHIT +let ctx; +let canvas; +let img; //THE PANORAMA IMAGE +let img_url = ""; + +//CURRENT IMAGE STATE +let x1 = WIDTH / 2; +let x2; //TODO? Unused +let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT + +function load_panorama() +{ + check_param(); + + ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB + + canvas = document.getElementById('panorama'); + ctx = canvas.getContext('2d'); + img = new Image(); //IMAGE + + ctx.canvas.height = WIDTH * ASPECT_RATIO; //TODO! Possible shit happening + ctx.canvas.width = WIDTH / 2; //USER WILL SEE A 1/2 OF THE PANORAMA AT THE TIME + + img.onload = function() + { + x2 = img.width; + ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img + }; + + img.src = img_url; +} + +function turn_left() +{ + if (turn < 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) + { + //ctx.drawImage(img, x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1), img.height, 0 - x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1) * WIDTH/img.width, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img //TODO + return; + } + + //MOVE AN 8th TO LEFT + x1 -= WIDTH * MOVE_PIECES; + x2 -= WIDTH * MOVE_PIECES; + + ctx.drawImage(img, x1, 0, img.width - WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW + + turn--; +} + +function turn_right() +{ + if (turn > 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) + { + //ctx.drawImage(img, img.width - WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), 0, img.width, img.height, 0, 0, WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), WIDTH * ASPECT_RATIO); //DRAW RIGHT PART ON THE LEFT SIDE //TODO + + return; + } + + //MOVE AN 8th TO LEFT + x1 += WIDTH * MOVE_PIECES; + x2 += WIDTH * MOVE_PIECES; + + ctx.drawImage(img, x1, 0, img.width + WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW + + turn++; +} + +function check_param() +{ + let params = new URLSearchParams(window.location.search); + img_url = params.get("img"); + + if (img_url == null) + { + alert("This link seems to be corrupted!"); + open("../index.html", "_self"); + } + + img_url = 'http://207.180.212.190/fht/fabrika_imgs/' + img_url + '.jpg'; //TODO: Change } \ No newline at end of file diff --git a/res/script.js b/res/script.js index fe74906..bc5f632 100644 --- a/res/script.js +++ b/res/script.js @@ -1,4 +1,45 @@ -function open_panorama() -{ - open("./res/panorama.html?img=" + document.getElementById("text_test").value, "_self"); +const points = +[ + [1240, 625, "1;2"] +]; + +const tolerance = 3; + +window.onload = function() +{ + document.querySelector("img").onclick = (e) => + { + let x = e.pageX - e.target.offsetLeft; + let y = e.pageY - e.target.offsetTop; + + for (let i = 0; i < points.length; i++) + { + if + ( + (Math.abs(x - points[i][0]) <= tolerance || -Math.abs(x - points[i][0]) >= tolerance) && + (Math.abs(y - points[i][1]) <= tolerance || -Math.abs(y - points[i][1]) >= tolerance) + ) + { + move(points[i][2]); + break; + } + } + } +} + +function open_panorama(img) +{ + open("./res/panorama.html?img=" + img, "_self"); +} + +function move(img) +{ + if (!img.includes(";")) + { + open_panorama(img); + } else + { + let imgs = img.split(";"); + open_panorama(imgs[Math.floor(Math.random() * imgs.length)]); + } } \ No newline at end of file diff --git a/res/style.css b/res/style.css index 367de72..54b6af2 100644 --- a/res/style.css +++ b/res/style.css @@ -1,12 +1,18 @@ -img -{ - width: 50%; - display: block; - margin-left: auto; - margin-top: auto; -} - -area -{ - fill: blue; +* +{ + margin: 0; + padding: 0; +} + +.imgbox +{ + display: grid; + height: 100%; +} + +.center-fit +{ + max-width: 100%; + max-height: 100vh; + margin: auto; } \ No newline at end of file