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

Added Infodesc + google font

This commit is contained in:
MasterGordon 2018-03-23 20:52:42 +01:00
parent 5782dad45d
commit ef2a2c54df
7 changed files with 100 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css
View File

@ -1,18 +1,18 @@
#screen { #screen {
position: fixed; position: fixed;
border: 1px, solid , black; border: 1px, solid, black;
border: solid; border: solid;
border-color: white; border-color: white;
background-image: url(../images/fliesen.png); background-image: url(../images/fliesen.png);
} }
body { body {
background-image: url("../images/wool.jpg"); background-image: url("../images/wool.jpg");
} }
#itemcount { #itemcount {
position: fixed; position: fixed;
border: 1px, solid , black; border: 1px, solid, black;
border: solid; border: solid;
border-color: white; border-color: white;
background-image: url(../images/fliesen.png); background-image: url(../images/fliesen.png);
@ -20,7 +20,7 @@ body {
#info { #info {
position: fixed; position: fixed;
border: 1px, solid , black; border: 1px, solid, black;
border: solid; border: solid;
border-color: white; border-color: white;
background-image: url(../images/infobg.png); background-image: url(../images/infobg.png);
@ -28,7 +28,7 @@ body {
#buildselect { #buildselect {
position: fixed; position: fixed;
border: 1px, solid , black; border: 1px, solid, black;
border: solid; border: solid;
border-color: yellow; border-color: yellow;
background-image: url(../images/infobg.png); background-image: url(../images/infobg.png);
@ -38,6 +38,26 @@ body {
padding: 4; padding: 4;
} }
#infoDesc {
position: fixed;
width: 240;
height: 192;
font-family: 'Electrolize', sans-serif;
direction: rtl;
}
#infoDesc h1 {
font-size: 26px;
direction: ltr;
}
#infoDesc p {
font-size: 19px;
overflow-y: auto;
direction: ltr;
height: 166;
}
.buildtile { .buildtile {
width: 48; width: 48;
height: 48; height: 48;
@ -45,8 +65,9 @@ body {
} }
/* Custom Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 24; width: 12;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {

6
index.html
View File

@ -2,6 +2,8 @@
<head> <head>
<title>Factory</title> <title>Factory</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/cssreset.css"> <link rel="stylesheet" type="text/css" href="css/cssreset.css">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Libs --> <!-- Libs -->
@ -22,6 +24,10 @@
</canvas> </canvas>
<canvas id="info"> <canvas id="info">
</canvas> </canvas>
<div id="infoDesc">
<h1></h1>
<p></p>
</div>
<div id="buildselect"> <div id="buildselect">
</div> </div>
</body> </body>

23
js/game.js
View File

@ -11,11 +11,14 @@ var infoCtx = {}
var currentFactory = 0 var currentFactory = 0
var fulltime = 0 var fulltime = 0
var lang = {}
var mode = "none" var mode = "none"
$(document).ready(function() { $(document).ready(function() {
loadGameData() loadGameData()
loadItems() loadItems()
loadLang()
prepairRender() prepairRender()
requestAnimationFrame(loop) requestAnimationFrame(loop)
}) })
@ -33,6 +36,15 @@ function loadItems() {
items = json.items items = json.items
} }
function loadLang() {
var langCode = "en"
var langRequest = new XMLHttpRequest();
langRequest.open('GET', 'lang/' + langCode + '.json', false)
langRequest.send(null)
var json = JSON.parse(langRequest.responseText)
lang = json
}
function loopp(timestamp) { function loopp(timestamp) {
//Check Gametick Rate //Check Gametick Rate
if (timestamp < lastFrameTimeMs + (1000 / 48)) { if (timestamp < lastFrameTimeMs + (1000 / 48)) {
@ -194,6 +206,7 @@ var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "
var infoGlowOpacity = 0 var infoGlowOpacity = 0
var infoGlowOpacityD = 0.03 var infoGlowOpacityD = 0.03
var selectedTile = 0
function drawInfoBar() { function drawInfoBar() {
infoCtx.clearRect(0, 0, innerWidth, innerHeight) infoCtx.clearRect(0, 0, innerWidth, innerHeight)
@ -228,4 +241,14 @@ function drawInfoBar() {
infoCtx.drawImage(img, i * 48, 0, 48, 48); infoCtx.drawImage(img, i * 48, 0, 48, 48);
} }
} }
if(toBuild!=0){
selectedTile = new toBuild()
}
if(selectedTile != 0){
$('#infoDesc h1').text(lang.tiles[selectedTile.name].name)
$('#infoDesc p').text(lang.tiles[selectedTile.name].description)
}else{
$('#infoDesc h1').text("")
$('#infoDesc p').text("")
}
} }

2
js/tiles.js
View File

@ -5,7 +5,7 @@ var tileClasses = []
class Conveyorbelt extends Tile { class Conveyorbelt extends Tile {
constructor(x, y) { constructor(x, y) {
super(x, y) super(x, y)
this.name = "conveyorbelt" this.name = "conveyorbelt"
this.texture = { this.texture = {
"0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"], "0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"],
"1": [] "1": []

31
js/userinterface.js
View File

@ -23,6 +23,8 @@ function style() {
$('#buildselect').css('margin-left', screenMarginLeft) $('#buildselect').css('margin-left', screenMarginLeft)
$('#info').css('margin-top', itemCountMarginTop) $('#info').css('margin-top', itemCountMarginTop)
$('#info').css('margin-left', infoMarginLeft) $('#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-top', itemCountMarginTop)
$('#itemcount').css('margin-left', screenMarginLeft) $('#itemcount').css('margin-left', screenMarginLeft)
screenleftpos = screenMarginLeft screenleftpos = screenMarginLeft
@ -138,7 +140,7 @@ function clickEvents() {
}) })
} }
var toBuild = {} var toBuild = 0
var moveFromX = 0 var moveFromX = 0
var moveFromY = 0 var moveFromY = 0
var moveFromCX = -1 var moveFromCX = -1
@ -155,7 +157,7 @@ function buildEvents() {
} }
}) })
$('#screen').click(function() { $('#screen').click(function() {
if(mode == "rotate"){ if (mode == "rotate") {
if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) { if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) {
factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].rotate() factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].rotate()
} }
@ -185,8 +187,31 @@ function buildEvents() {
} }
} }
} }
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() { $('body').mousedown(function() {
if (mode == "move") { if (mode == "move") {
if (isCursorInScreen) { if (isCursorInScreen) {
@ -220,8 +245,10 @@ function buildEvents() {
} }
function closeUi() { function closeUi() {
selectedTile = 0
if (mode == "build") { if (mode == "build") {
mode = "none" mode = "none"
toBuild = 0
return false return false
} }
if (mode == "selectbuilding") { if (mode == "selectbuilding") {

8
js/util.js
View File

@ -31,3 +31,11 @@ function drawRotatedImage(image, x, y, angle) {
ctx.drawImage(image, -(image.width / 2), -(image.height / 2)); ctx.drawImage(image, -(image.width / 2), -(image.height / 2));
ctx.restore(); ctx.restore();
} }
function infoDrawRotatedImage(image, x, y, angle) {
infoCtx.save();
infoCtx.translate(x, y);
infoCtx.rotate(angle * TO_RADIANS);
infoCtx.drawImage(image, -(image.width / 2), -(image.height / 2));
infoCtx.restore();
}

7
lang/en.json
View File

@ -1,4 +1,9 @@
{ {
"tiles": {
"conveyorbelt": {
"name": "Conveyorbelt",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}
},
"more": "show more..." "more": "show more..."
} }