MasterGordon
/
FactoryMaster
mirror of https://github.com/MasterGordon/FactoryMaster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

made boxes better

This commit is contained in:
MasterGordon 2018-03-17 14:55:37 +01:00
parent 0c40c66c00
commit 682f176fc4
5 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -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;
}

16
index.html
View File

@ -18,18 +18,10 @@
<body>
<canvas id="screen">
</canvas>
<div id="build">
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
<img src="images/tiles/conveyorbelt00.png"></img>
</div>
<div id="info">
</div>
<canvas id="itemcount">
</canvas>
<canvas id="info">
</canvas>
</body>
</html>

14
js/game.js
View File

@ -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
}

49
js/resize.js
View File

@ -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 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
}
}

4
lang/en.json Normal file
View File

@ -0,0 +1,4 @@
{
"more": "show more..."
}