leaned[k]); removeImageFromBoard("upperConnectors_1x5"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_1x6"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_2x3"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_2x4"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_2x5"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_2x6"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_3x4"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_3x5"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_3x6"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_4x5"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_4x6"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_5x6"+redrawListCleaned[k]); removeImageFromBoard("upperConnectors_6x1"+redrawListCleaned[k]); } } */ var globalZoom = 1; var camZoomAdjustment = 1; function zoomMapOut() { if (globalZoom > .4) { //var centerPosX = (howManyHorizontalTiles*200)+(vw/2); // The parentcontainer is left and top off screen 1 full board. So we have to add that to the center of the viewport to figure out the center point to zoom around. The parent container and viewport are fixed positions. only boardmc slides around within. //var centerPosY = (howManyVerticalTiles*150)+(vw*.5625/2); //var tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; //gsap.to("#parentContainer", {duration: 1, scale:"-=.2", transformOrigin:tempOrigin, ease: "power2.inOut", onComplete:zoomFinish}); var board = document.querySelector('#board'); var boardWidth = board.offsetWidth; var boardHeight = board.offsetHeight; var mapScaleAdj = boardWidth / 1600; // base scale of board. To show 8 tiles no matter what size screen they have. Will be fraction like .67 var centerPosX = (howManyHorizontalTiles*200)+(boardWidth/2); // The parentcontainer is left and top off screen 1 full board. So we have to add that to the center of the viewport to figure out the center point to zoom around. The parent container and viewport are fixed positions. only boardmc slides around within. var centerPosY = (howManyVerticalTiles*150)+(boardHeight/2); var tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; console.log("boardWidth is:"+boardWidth+" mapScaleAdj:"+mapScaleAdj); howManyTilesWidthOnScreen = 12; // this is default howManyTilesHeightOnScreen = 9; if (globalZoom == 1) { globalZoom = .8; camZoomAdjustment = 1; // This is used when evalavuating tiles around the camera to show. It needs to show more tiles when zoomed out. howManyTilesWidthOnScreen = 13; howManyTilesHeightOnScreen = 10; mapScaleAdj = mapScaleAdj*.8; } else if (globalZoom == .8) { globalZoom = .6; camZoomAdjustment = 2; howManyTilesWidthOnScreen = 14; howManyTilesHeightOnScreen = 11; mapScaleAdj = mapScaleAdj*.6; } else if (globalZoom == .6) { globalZoom = .4; camZoomAdjustment = 4; howManyTilesWidthOnScreen = 20; howManyTilesHeightOnScreen = 16; mapScaleAdj = mapScaleAdj*.4; } else if (globalZoom == 1.2) { globalZoom = 1; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj; } else if (globalZoom == 1.4) { globalZoom = 1.2; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj*1.2; } else if (globalZoom == 1.6) { globalZoom = 1.4; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj*1.4; } updateTileGraphicsAroundCamera(); // do this before map zooms out so you dont see tiles pop into view around edges. console.log("map zoomed out to globalZoom:"+globalZoom); gsap.to("#parentContainer", {duration: 1, scale:mapScaleAdj, transformOrigin:tempOrigin, ease: "power2.inOut"}); } } function zoomMapIn() { if (globalZoom < 1.6) { //var centerPosX = (howManyHorizontalTiles*200)+(vw/2); //var centerPosY = (howManyVerticalTiles*150)+(vw*.5625/2); //var tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; //gsap.to("#parentContainer", {duration: 1, scale:"+=.2", transformOrigin:tempOrigin, ease: "power2.inOut", onComplete:zoomFinish}); var board = document.querySelector('#board'); var boardWidth = board.offsetWidth; var boardHeight = board.offsetHeight; var mapScaleAdj = boardWidth / 1600; // base scale of board. To show 8 tiles no matter what size screen they have. Will be fraction like .67 var centerPosX = (howManyHorizontalTiles*200)+(boardWidth/2); // The parentcontainer is left and top off screen 1 full board. So we have to add that to the center of the viewport to figure out the center point to zoom around. The parent container and viewport are fixed positions. only boardmc slides around within. var centerPosY = (howManyVerticalTiles*150)+(boardHeight/2); var tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; console.log("boardWidth is:"+boardWidth+" mapScaleAdj:"+mapScaleAdj); howManyTilesWidthOnScreen = 12; // this is default howManyTilesHeightOnScreen = 9; if (globalZoom == .4) { globalZoom = .6; camZoomAdjustment = 2; howManyTilesWidthOnScreen = 14; // this is default howManyTilesHeightOnScreen = 11; mapScaleAdj = mapScaleAdj*.6; } else if (globalZoom == .6) { globalZoom = .8; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 13; // this is default howManyTilesHeightOnScreen = 10; mapScaleAdj = mapScaleAdj*.8; } else if (globalZoom == .8) { globalZoom = 1; camZoomAdjustment = 1; } else if ((globalZoom == 1) && (boardWidth < 1600)) { // will let you zoom in further if screen size allows it without showing artifacts. globalZoom = 1.2; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; // this is default howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj*1.2; } else if ((globalZoom == 1.2) && (boardWidth < 1200)) { // will let you zoom in further if screen size allows it without showing artifacts. globalZoom = 1.4; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj*1.4; } else if ((globalZoom == 1.4) && (boardWidth < 1000)) { // will let you zoom in further if screen size allows it without showing artifacts. globalZoom = 1.6; camZoomAdjustment = 1; howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; mapScaleAdj = mapScaleAdj*1.6; } console.log("map zoomed in to globalZoom:"+globalZoom); gsap.to("#parentContainer", {duration: 1, scale:mapScaleAdj, transformOrigin:tempOrigin, ease: "power2.inOut", onComplete:zoomFinish}); } } function zoomFinish() { updateTileGraphicsAroundCamera(); } $(window).resize(function() { resizeScreen(); }); $( window ).on( "orientationchange", function( event ) { resizeScreen(); }); $(document).ready(function(){ resizeScreen(); }); var board = document.querySelector('#board'); var boardWidth = board.offsetWidth; var boardHeight = board.offsetHeight; var mapScaleAdj = boardWidth / 1600; // will be fraction like .67 var centerPosX = (howManyHorizontalTiles*200)+(boardWidth/2); // The parentcontainer is left and top off screen 1 full board. So we have to add that to the center of the viewport to figure out the center point to zoom around. The parent container and viewport are fixed positions. only boardmc slides around within. var centerPosY = (howManyVerticalTiles*150)+(boardHeight/2); var tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; function resizeScreen() { console.log("tile centered on camera:"+tempCurrentTileCenteredOnCameraglobal); //vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); // Set initial vw and vh sizes for javascript. Gets recalculated everytime after //vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); //evalvw = vw; //evalvh = vw*.5625; //howManyTilesWidthOnScreen = Math.floor(evalvw/200); // find how many tiles left right to evaluate that are on screen //howManyTilesHeightOnScreen = Math.floor(evalvh/150); // find how many tiles top down to evaluate that are on screen //console.log("vw ="+vw+" vh="+vh); if ((currentBattle == "battleB1") || (currentBattle.indexOf("enemy") >= 0)) { // If they are in a battle. } else if (currentBattle == "0") { // If they have a map loaded board = document.querySelector('#board'); boardWidth = board.offsetWidth; boardHeight = board.offsetHeight; mapScaleAdj = boardWidth / 1600; // will be fraction like .67 //howManyTilesWidthOnScreen = Math.floor(boardWidth/200); // find how many tiles left right to evaluate that are on screen //howManyTilesHeightOnScreen = Math.floor(boardHeight/150); // find how many tiles top down to evaluate that are on screen // resize map so we see about 8 tiles wide no matter what screen size. // scale is at 1 by default. we need to figure out how much bigger or smaller the scale should be. console.log("boardWidth is:"+boardWidth+" mapScaleAdj:"+mapScaleAdj); howManyTilesWidthOnScreen = 12; // this is default howManyTilesHeightOnScreen = 9; if (globalZoom == .8) { //zoomMapOut(); console.log("trying to zoom .8"); camZoomAdjustment = 1; // This is used when evalavuating tiles around the camera to show. It needs to show more tiles when zoomed out. //gsap.to("#parentContainer", {duration: 1, scale:"-=.2", transformOrigin:tempOrigin, ease: "power2.inOut"}); mapScaleAdj = mapScaleAdj*.8; howManyTilesWidthOnScreen = 13; howManyTilesHeightOnScreen = 10; } else if (globalZoom == .6) { //zoomMapOut(); console.log("trying to zoom .6"); camZoomAdjustment = 2; mapScaleAdj = mapScaleAdj*.6; howManyTilesWidthOnScreen = 14; howManyTilesHeightOnScreen = 10; //gsap.to("#parentContainer", {duration: 1, scale:"-=.4", transformOrigin:tempOrigin, ease: "power2.inOut"}); } else if (globalZoom == .4) { //zoomMapOut(); camZoomAdjustment = 4; console.log("trying to zoom .4"); mapScaleAdj = mapScaleAdj*.4; howManyTilesWidthOnScreen = 20; howManyTilesHeightOnScreen = 15; //gsap.to("#parentContainer", {duration: 1, scale:"-=.6", transformOrigin:tempOrigin, ease: "power2.inOut"}); } else if (globalZoom == 1.2) { //zoomMapOut(); camZoomAdjustment = 1; console.log("trying to zoom 1.2"); mapScaleAdj = mapScaleAdj*1.2; //gsap.to("#parentContainer", {duration: 1, scale:"-=.6", transformOrigin:tempOrigin, ease: "power2.inOut"}); howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; } else if (globalZoom == 1.4) { //zoomMapOut(); camZoomAdjustment = 1; mapScaleAdj = mapScaleAdj*1.4; console.log("trying to zoom .4"); //gsap.to("#parentContainer", {duration: 1, scale:"-=.6", transformOrigin:tempOrigin, ease: "power2.inOut"}); howManyTilesWidthOnScreen = 12; howManyTilesHeightOnScreen = 9; } gsap.to("#parentContainer", {duration: .5, scale:mapScaleAdj, transformOrigin:tempOrigin, onUpdate:changeOrigin, ease: "power2.inOut", onComplete:updateTileGraphicsAroundCamera}); //board = document.querySelector('#parentContainer'); //console.log("parentContainer transformOrigin:"+board.style.transformOrigin); //board = document.querySelector('#parentContainer'); //console.log("parentContainer transform:"+board.style.transform); //board = document.querySelector('#boardMC'); //console.log("boardMC transform:"+board.style.transform); function changeOrigin() { centerPosX = (howManyHorizontalTiles*200)+(boardWidth/2); // The parentcontainer is left and top off screen 1 full board. So we have to add that to the center of the viewport to figure out the center point to zoom around. The parent container and viewport are fixed positions. only boardmc slides around within. centerPosY = (howManyVerticalTiles*150)+(boardHeight/2); tempOrigin = centerPosX.toString() + "px " + centerPosY.toString() + "px"; } updateTileGraphicsAroundCamera(); } }