diff --git a/css/main.css b/css/main.css
index 3b037b9..a953d85 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,18 +1,18 @@
#screen {
position: fixed;
- border: 1px, solid , black;
+ border: 1px, solid, black;
border: solid;
border-color: white;
background-image: url(../images/fliesen.png);
}
body {
- background-image: url("../images/wool.jpg");
+ background-image: url("../images/wool.jpg");
}
#itemcount {
position: fixed;
- border: 1px, solid , black;
+ border: 1px, solid, black;
border: solid;
border-color: white;
background-image: url(../images/fliesen.png);
@@ -20,7 +20,7 @@ body {
#info {
position: fixed;
- border: 1px, solid , black;
+ border: 1px, solid, black;
border: solid;
border-color: white;
background-image: url(../images/infobg.png);
@@ -28,7 +28,7 @@ body {
#buildselect {
position: fixed;
- border: 1px, solid , black;
+ border: 1px, solid, black;
border: solid;
border-color: yellow;
background-image: url(../images/infobg.png);
@@ -38,6 +38,26 @@ body {
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 {
width: 48;
height: 48;
@@ -45,8 +65,9 @@ body {
}
/* Custom Scrollbar */
+
::-webkit-scrollbar {
- width: 24;
+ width: 12;
}
::-webkit-scrollbar-track {
diff --git a/index.html b/index.html
index 0c69a3a..de7e5f0 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,8 @@
Factory
+
+
@@ -22,6 +24,10 @@
+
diff --git a/js/game.js b/js/game.js
index 115b8e0..362e12b 100644
--- a/js/game.js
+++ b/js/game.js
@@ -11,11 +11,14 @@ var infoCtx = {}
var currentFactory = 0
var fulltime = 0
+var lang = {}
+
var mode = "none"
$(document).ready(function() {
loadGameData()
loadItems()
+ loadLang()
prepairRender()
requestAnimationFrame(loop)
})
@@ -33,6 +36,15 @@ function loadItems() {
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) {
//Check Gametick Rate
if (timestamp < lastFrameTimeMs + (1000 / 48)) {
@@ -194,6 +206,7 @@ var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "
var infoGlowOpacity = 0
var infoGlowOpacityD = 0.03
+var selectedTile = 0
function drawInfoBar() {
infoCtx.clearRect(0, 0, innerWidth, innerHeight)
@@ -228,4 +241,14 @@ function drawInfoBar() {
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("")
+ }
}
diff --git a/js/tiles.js b/js/tiles.js
index dfa35c6..b1ce7a8 100644
--- a/js/tiles.js
+++ b/js/tiles.js
@@ -5,7 +5,7 @@ var tileClasses = []
class Conveyorbelt extends Tile {
constructor(x, y) {
super(x, y)
- this.name = "conveyorbelt"
+ this.name = "conveyorbelt"
this.texture = {
"0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"],
"1": []
diff --git a/js/userinterface.js b/js/userinterface.js
index ae7f779..7dd8ec4 100644
--- a/js/userinterface.js
+++ b/js/userinterface.js
@@ -23,6 +23,8 @@ function style() {
$('#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
@@ -138,7 +140,7 @@ function clickEvents() {
})
}
-var toBuild = {}
+var toBuild = 0
var moveFromX = 0
var moveFromY = 0
var moveFromCX = -1
@@ -155,7 +157,7 @@ function buildEvents() {
}
})
$('#screen').click(function() {
- if(mode == "rotate"){
+ if (mode == "rotate") {
if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) {
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() {
if (mode == "move") {
if (isCursorInScreen) {
@@ -220,8 +245,10 @@ function buildEvents() {
}
function closeUi() {
+ selectedTile = 0
if (mode == "build") {
mode = "none"
+ toBuild = 0
return false
}
if (mode == "selectbuilding") {
diff --git a/js/util.js b/js/util.js
index cb63902..eef41ca 100644
--- a/js/util.js
+++ b/js/util.js
@@ -31,3 +31,11 @@ function drawRotatedImage(image, x, y, angle) {
ctx.drawImage(image, -(image.width / 2), -(image.height / 2));
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();
+}
diff --git a/lang/en.json b/lang/en.json
index 4c679ee..bceaca9 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -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..."
-
}