diff --git a/css/main.css b/css/main.css index 926e352..7c30dda 100644 --- a/css/main.css +++ b/css/main.css @@ -10,13 +10,12 @@ body { background-image: url("../images/wool.jpg"); } -#build { +#itemcount { position: fixed; border: 1px, solid , black; border: solid; border-color: white; background-image: url(../images/fliesen.png); - overflow-y: auto; } #info { @@ -25,5 +24,4 @@ body { border: solid; border-color: white; background-image: url(../images/fliesen.png); - overflow-y: auto; } diff --git a/index.html b/index.html index f948f34..4fa1630 100644 --- a/index.html +++ b/index.html @@ -18,18 +18,10 @@ -
- - - - - - - -
-
- -
+ + + + diff --git a/js/game.js b/js/game.js index 52fc97c..edc930a 100644 --- a/js/game.js +++ b/js/game.js @@ -114,6 +114,12 @@ function render() { drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree) } } + //DRAW CURSOR BOX + if(isCursorInScreen){ + ctx.globalAlpha = 0.4 + ctx.fillRect(cursorScreenX*48,cursorScreenY*48,48,48) + ctx.globalAlpha = 1 + } } function getItemFormId(id) { @@ -125,8 +131,14 @@ function getItemFormId(id) { } function prepairRender() { - var canvas = $('canvas')[0]; + var canvas = $('#screen')[0]; ctx = canvas.getContext('2d') canvas.width = 1200 canvas.height = 576 + canvas = $('#itemcount')[0]; + canvas.width = 720 + canvas.height = 240 + canvas = $('#info')[0]; + canvas.width = 432 + canvas.height = 240 } diff --git a/js/resize.js b/js/resize.js index 517d27a..5a01afa 100644 --- a/js/resize.js +++ b/js/resize.js @@ -4,20 +4,51 @@ $(window).resize(function() { $(document).ready(function() { style(); + document.addEventListener('mousemove', onDocumentMouseMove, false); }) +var screenleftpos = 0 +var screentoppos = 0 + +var cursorScreenX = -1 +var cursorScreenY = -1 + +var isCursorInScreen = true + function style() { - $('#screen').css("margin-left", (window.innerWidth - 1200) / 2); - $('#screen').css("margin-top", (window.innerHeight - 576) / 3); - $('#build').css("width", (1200/2)-8) - var topp = $('#screen').css("margin-top").substring(0,$('#screen').css("margin-top").length-2) - $('#build').css("height", window.innerHeight-topp-576-32) - $('#build').css("margin-left", $('#screen').css("margin-left")); - $('#build').css("margin-top", (parseInt(topp)+576+16)); - $('#info').copyCSS('#build', ['height','margin-top','width']) - $('#info').css("margin-left", pxToInt($('#screen').css("margin-left"))+16+(1200/2)-8) + 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) + $('#info').css('margin-top', itemCountMarginTop) + $('#info').css('margin-left', infoMarginLeft) + $('#itemcount').css('margin-top', itemCountMarginTop) + $('#itemcount').css('margin-left', screenMarginLeft) + screenleftpos = pxToInt($('#screen').css("margin-left")) + screentoppos = pxToInt($('#screen').css("margin-top")) } -function pxToInt(px){ - return parseInt(px.substring(0,px.length-2)) +function pxToInt(px) { + return parseInt(px.substring(0, px.length - 2)) +} + +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 + } else { + cursorScreenX = Math.floor(mX / 48); + cursorScreenY = Math.floor(mY / 48); + } + if (cursorScreenX != -1 && cursorScreenY != -1) { + isCursorInScreen = true + } else { + isCursorInScreen = false + } } diff --git a/lang/en.json b/lang/en.json new file mode 100644 index 0000000..4c679ee --- /dev/null +++ b/lang/en.json @@ -0,0 +1,4 @@ +{ + "more": "show more..." + +}