Added Infodesc + google font
This commit is contained in:
parent
5782dad45d
commit
ef2a2c54df
33
css/main.css
33
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 {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
<head>
|
||||
<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/main.css">
|
||||
<!-- Libs -->
|
||||
|
|
@ -22,6 +24,10 @@
|
|||
</canvas>
|
||||
<canvas id="info">
|
||||
</canvas>
|
||||
<div id="infoDesc">
|
||||
<h1></h1>
|
||||
<p></p>
|
||||
</div>
|
||||
<div id="buildselect">
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
23
js/game.js
23
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("")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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") {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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..."
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue