$(window).resize(function() { style(); }) $(document).ready(function() { style(); document.addEventListener('mousemove', onDocumentMouseMove, false); $('body').on("contextmenu", function() { return false; }) clickEvents() }) function style() { var screenMarginTop = window.innerHeight - 912 var screenMarginLeft = (window.innerWidth - 1200) / 2 var itemCountMarginTop = screenMarginTop + 624 var infoMarginLeft = screenMarginLeft + 768 $('#screen').css('margin-top', screenMarginTop) $('#screen').css('margin-left', screenMarginLeft) $('#buildselect').css('margin-top', screenMarginTop) $('#buildselect').css('margin-left', screenMarginLeft) $('#info').css('margin-top', itemCountMarginTop) $('#info').css('margin-left', infoMarginLeft) $('#infoDesc').css('margin-top', itemCountMarginTop + 51) $('#infoDesc').css('margin-left', infoMarginLeft + 5) $('#itemcount').css('margin-top', itemCountMarginTop) $('#itemcount').css('margin-left', screenMarginLeft) screenleftpos = screenMarginLeft screentoppos = screenMarginTop infoleftpos = infoMarginLeft itemcounttoppos = itemCountMarginTop } function pxToInt(px) { return parseInt(px.substring(0, px.length - 2)) } //SELECTION UND BOX TRACKING var screenleftpos = 0 var screentoppos = 0 var infoleftpos = 0 var itemcounttoppos = 0 var cursorScreenX = -1 var cursorScreenY = -1 var cursorItemCountX = -1 var cursorItemCountY = -1 var cursorInfoX = -1 var cursorInfoY = -1 var isCursorInScreen = true var isCursorInItemCount = true var isCursorInInfo = true function onDocumentMouseMove(event) { var mX = event.clientX - screenleftpos; var mY = event.clientY - screentoppos; if (mX < 0 || mX > 1200 || mY < 0 || mY > 576) { cursorScreenX = -1 cursorScreenY = -1 mX = event.clientX - screenleftpos; mY = event.clientY - itemcounttoppos; if (mX < 0 || mX > 720 || mY < 0 || mY > 240) { cursorItemCountX = -1 cursorItemCountY = -1 mX = event.clientX - infoleftpos; mY = event.clientY - itemcounttoppos; if (mX < 0 || mX > 432 || mY < 0 || mY > 240) { cursorInfoX = -1 cursorInfoY = -1 } else { cursorInfoX = Math.floor(mX / 48); cursorInfoY = Math.floor(mY / 48); } } else { cursorItemCountX = Math.floor(mX / 48); cursorItemCountY = Math.floor(mY / 48); } } else { cursorScreenX = Math.floor(mX / 48); cursorScreenY = Math.floor(mY / 48); } if (cursorScreenX != -1 && cursorScreenY != -1) { isCursorInScreen = true } else { isCursorInScreen = false } if (cursorItemCountX != -1 && cursorItemCountY != -1) { isCursorInItemCount = true } else { isCursorInItemCount = false } if (cursorInfoX != -1 && cursorInfoY != -1) { isCursorInInfo = true } else { isCursorInInfo = false } } function clickEvents() { $('#info').click(function() { if (cursorInfoY == 0) { switch (cursorInfoX) { case 0: //BUILD BUTTON if (mode == "none") { $('#buildselect').fadeIn(200) mode = "selectbuilding" } else { closeUi() } break case 1: //MOVE BUTTON if (mode == "none") { mode = "move" } else { closeUi() } break case 2: //ROTATE BUTTON if (mode == "none") { mode = "rotate" } else { closeUi() } break } } }) } var toBuild = 0 var moveFromX = 0 var moveFromY = 0 var moveFromCX = -1 var moveFromCY = -1 function buildEvents() { $('img').click(function() { var id = $(this).attr("id"); if (id.startsWith("build_")) { id = parseInt(id.substr(6)) toBuild = tileClasses[id] mode = "build" $('#buildselect').fadeOut(200) } }) $('#screen').click(function() { if (mode == "rotate") { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) { factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].rotate() } } if (mode == "build") { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) { factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY) } } if (mode == "move") { if (isCursorInScreen) { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) { moveFromCX = cursorScreenX moveFromCY = cursorScreenY } else if (moveFromCX != -1) { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) { factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = factorys[currentFactory].tiles[moveFromCX][moveFromCY] factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].x = cursorScreenX factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].y = cursorScreenY factorys[currentFactory].tiles[moveFromCX][moveFromCY] = 0 } else { moveFromCX = cursorScreenX moveFromCY = cursorScreenY } moveFromCX = -1 moveFromCY = -1 } } } if ((mode == "none") && isCursorInScreen) { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) { selectedTile = factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] } else { selectedTile = 0 } }else if(mode!="build"){ selectedTile = 0 } }) $('img').hover( function() { //ENTER var id = $(this).attr("id"); if (id.startsWith("build_")) { id = parseInt(id.substr(6)) selectedTile = new tileClasses[id]() } }, function() { //LEAVE selectedTile = 0 } ); $('body').mousedown(function() { if (mode == "move") { if (isCursorInScreen) { moveFromX = cursorScreenX moveFromY = cursorScreenY } } }) $('body').mouseup(function() { if (mode == "move") { if (isCursorInScreen && moveFromX != -1) { if (moveFromX != cursorScreenX || moveFromY != cursorScreenY) { if (factorys[currentFactory].tiles[moveFromX][moveFromY] != 0 && factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) { factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = factorys[currentFactory].tiles[moveFromX][moveFromY] factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].x = cursorScreenX factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].y = cursorScreenY factorys[currentFactory].tiles[moveFromX][moveFromY] = 0 } moveFromX = -1 moveFromY = -1 } } } }) $('body').on("contextmenu", function() { closeUi() }) } function closeUi() { selectedTile = 0 if (mode == "build") { mode = "none" toBuild = 0 return false } if (mode == "selectbuilding") { mode = "none" $('#buildselect').fadeOut(200) return false } if (mode == "move") { mode = "none" return false } if (mode == "rotate") { mode = "none" return false } }