New BG + fixes

This commit is contained in:
MasterGordon 2018-06-19 17:53:31 +02:00
parent 3e708f5696
commit 2ac2fb94fd
14 changed files with 250 additions and 32 deletions

View File

@ -1,5 +1,5 @@
body { body {
background-image: url("../images/wool.jpg"); background: #310609;
} }
#login { #login {

View File

@ -7,7 +7,7 @@
} }
body { body {
background-image: url("../images/wool.jpg"); background: #310609;
} }
#itemcount { #itemcount {
@ -27,6 +27,43 @@ body {
background-image: url(../images/infobg.png); background-image: url(../images/infobg.png);
} }
#oretiers {
position: fixed;
border: 1px, solid, black;
border: solid;
border-color: yellow;
background-image: url(../images/infobg.png);
width: 1192;
height: 568;
overflow-y: scroll;
padding: 4;
}
#oretiers h1 {
font-size: 40px;
display: inline;
font-family: 'Electrolize', sans-serif;
}
#help {
width: 1200;
height: 864;
position: fixed;
z-index: 100;
background-image: url(../images/helpoverlay.png);
}
#oretiers h2 {
font-size: 31px;
display: inline;
font-family: 'Electrolize', sans-serif;
padding-left: 6px;
padding-top: 4.5px;
padding-right: 6px;
display: inline;
height: 40px;
}
#buildselect { #buildselect {
position: fixed; position: fixed;
border: 1px, solid, black; border: 1px, solid, black;
@ -224,8 +261,8 @@ width: 100%
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
text-align: center; text-align: center;
background-image: url(../images/moneybg.png);
z-index: -1; z-index: -1;
color: floralwhite;
} }
.itemBig { .itemBig {

View File

@ -13,7 +13,9 @@
<script src="js/libs/js.cookie.js"></script> <script src="js/libs/js.cookie.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script> <script src="jquery-ui/jquery-ui.min.js"></script>
<script src="js/libs/seedrandom.min.js"></script> <script src="js/libs/seedrandom.min.js"></script>
<script src="js/libs/particles.min.js"></script>
<!-- Own scripts--> <!-- Own scripts-->
<script src="js/background.js"></script>
<script src="js/userinterface.js"></script> <script src="js/userinterface.js"></script>
<script src="js/util.js"></script> <script src="js/util.js"></script>
<script src="js/baseclasses.js"></script> <script src="js/baseclasses.js"></script>
@ -23,7 +25,7 @@
</head> </head>
<body> <body id="body">
<div id="all" hidden> <div id="all" hidden>
<canvas id="screen"> <canvas id="screen">
@ -38,11 +40,14 @@
</div> </div>
<div id="buildselect"> <div id="buildselect">
</div> </div>
<div id="oretiers">
</div>
<div id="inventoryBig"> <div id="inventoryBig">
<span id="clickToSell"></span> <span id="clickToSell"></span>
<div id="itemsScroll"> <div id="itemsScroll">
</div> </div>
</div> </div>
<div id="help"></div>
<div id="selectItem"> <div id="selectItem">
</div> </div>
<div id="options"> <div id="options">

BIN
images/helpoverlay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
images/ui/help.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 B

View File

@ -11,11 +11,13 @@
<script src="js/libs/jquery.js"></script> <script src="js/libs/jquery.js"></script>
<script src="js/libs/copyCSS.js"></script> <script src="js/libs/copyCSS.js"></script>
<script src="js/libs/js.cookie.js"></script> <script src="js/libs/js.cookie.js"></script>
<script src="js/libs/particles.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script> <script src="jquery-ui/jquery-ui.min.js"></script>
<!-- Own scripts--> <!-- Own scripts-->
<script src="js/background.js"></script>
</head> </head>
<body> <body id="body">
<div id="login"> <div id="login">
<img class="logo" draggable="false" src="images/logo.svg"><br><br> <img class="logo" draggable="false" src="images/logo.svg"><br><br>
<p>Username:</p><input class="form" id="login_username"></input><br><br> <p>Username:</p><input class="form" id="login_username"></input><br><br>

3
js/background.js Normal file
View File

@ -0,0 +1,3 @@
particlesJS.load('body', 'js/particles.json', function() {
console.log('callback - particles.js config loaded');
});

View File

@ -32,6 +32,7 @@ var renderItems = true
var playername = "Player" var playername = "Player"
var lastsave = 0 var lastsave = 0
var saving = false
$(document).ready(function() { $(document).ready(function() {
$("#forcesave").click(function() { $("#forcesave").click(function() {
@ -64,6 +65,7 @@ $(window).on("beforeunload", function() {
}) })
function save() { function save() {
console.log("saving...")
game = {} game = {}
game.money = money game.money = money
game.gametime = gametime game.gametime = gametime
@ -114,6 +116,7 @@ function save() {
console.log(result) console.log(result)
if (JSON.parse(result).status == "succes") { if (JSON.parse(result).status == "succes") {
lastsave = new Date().getTime() lastsave = new Date().getTime()
saving = false
} }
} }
}); });
@ -239,7 +242,8 @@ function gametick(timestep) {
tick = tick.splice(1) tick = tick.splice(1)
$("#speed").html("Game Speed: " + ((tick[47] - tick[0] + 30) / 10) + "%<br>" + version) $("#speed").html("Game Speed: " + ((tick[47] - tick[0] + 30) / 10) + "%<br>" + version)
} }
if (Math.round((new Date().getTime() - lastsave) / 60000) > 5 && lastsave != 0) { if (!saving && Math.round((new Date().getTime() - lastsave) / 60000) > 5 && lastsave != 0) {
saving = true
save() save()
} }
} }
@ -393,7 +397,20 @@ function prepairRender() {
tilesLoaded++ tilesLoaded++
} }
console.log(tilesLoaded + "/" + tileClasses.length + " Tiles Loaded!") console.log(tilesLoaded + "/" + tileClasses.length + " Tiles Loaded!")
console.log("Loading Oretiers")
for(var i = 1;i<9;i++){
$('#oretiers').append("<h1>"+lang.depth+" "+i+":</h1>");
for(var j=0;j<minerals.nameFromId.length;j++){
if(minerals[minerals.nameFromId[j]].depth==i){
$('#oretiers').append("<h2>"+lang.minerals[j]+"</h2>");
}
}
$('#oretiers').append("<br>");
}
$('#buildselect').hide() $('#buildselect').hide()
$('#oretiers').hide()
$('#help').hide()
$('#inventoryBig').hide() $('#inventoryBig').hide()
$('#selectItem').hide() $('#selectItem').hide()
$('#options').hide() $('#options').hide()
@ -422,6 +439,7 @@ function prepairRender() {
function() { function() {
//ENTER //ENTER
var id = $(this).attr("id"); var id = $(this).attr("id");
if (id != undefined)
if (id.startsWith("itemBig_") || id.startsWith("itemSel_")) { if (id.startsWith("itemBig_") || id.startsWith("itemSel_")) {
id = parseInt(id.substr(8)) id = parseInt(id.substr(8))
if ($(this).attr("id").startsWith("itemBig_")) if ($(this).attr("id").startsWith("itemBig_"))
@ -442,11 +460,13 @@ function prepairRender() {
$('canvas').click( $('canvas').click(
function() { function() {
var id = $(this).attr("id"); var id = $(this).attr("id");
if (id != undefined)
if (id.startsWith("itemBig_")) { if (id.startsWith("itemBig_")) {
id = parseInt(id.substr(8)) id = parseInt(id.substr(8))
if (id < itemId.length) { if (id < itemId.length) {
var idd = itemId[id]
if (inventory.take(itemId[id], 1)) { if (inventory.take(itemId[id], 1)) {
money += items[itemId[id]].value money += items[idd].value
} }
} }
} }
@ -464,7 +484,7 @@ function prepairRender() {
} }
} }
var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "factorys.png"] var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "help.png", "info.png", null, "factorys.png"]
var infoBarIconsImg = [] var infoBarIconsImg = []
var infoGlowOpacity = 0 var infoGlowOpacity = 0

View File

@ -245,14 +245,14 @@
"oreid": 15 "oreid": 15
}, },
"diamonds": { "diamonds": {
"depth": 8 "depth": 7
}, },
"iron": { "iron": {
"depth": 1, "depth": 1,
"oreid": 16 "oreid": 16
}, },
"naturalgas": { "naturalgas": {
"depth": 6, "depth": 5,
"liquid": true "liquid": true
}, },
"oil": { "oil": {
@ -307,7 +307,7 @@
"depth": 1 "depth": 1
}, },
"rubies": { "rubies": {
"depth": 9 "depth": 8
}, },
"silver": { "silver": {
"depth": 4, "depth": 4,

8
js/libs/particles.min.js vendored Normal file

File diff suppressed because one or more lines are too long

110
js/particles.json Normal file
View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": true,
"speed": 5,
"size_min": 0.2,
"sync": true
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1.4
},
"move": {
"enable": true,
"speed": 1.4,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 60,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

View File

@ -1315,11 +1315,11 @@ class FertilizerMixer extends Tile {
work() { work() {
//Items für ein Pank //Items für ein Pank
if (this.input.countOf(39) >= 30) { if (this.input.countOf(34) >= 20) {
if (this.currentwork == this.maxwork) { if (this.currentwork == this.maxwork) {
this.input.take(39, 30, this.factory) this.input.take(34, 20, this.factory)
for (var i = 0; i < 10; i++) { for (var i = 0; i < 10; i++) {
var item = new Item(42, this.x * 48, this.y * 48) var item = new Item(43, this.x * 48, this.y * 48)
this.factory.items.push(item) this.factory.items.push(item)
item.setDFromDirection(this.direction) item.setDFromDirection(this.direction)
this.currentwork = 0 this.currentwork = 0

View File

@ -25,6 +25,10 @@ function style() {
$('#screen').css('margin-left', screenMarginLeft) $('#screen').css('margin-left', screenMarginLeft)
$('#buildselect').css('margin-top', screenMarginTop) $('#buildselect').css('margin-top', screenMarginTop)
$('#buildselect').css('margin-left', screenMarginLeft) $('#buildselect').css('margin-left', screenMarginLeft)
$('#help').css('margin-top', screenMarginTop)
$('#help').css('margin-left', screenMarginLeft)
$('#oretiers').css('margin-top', screenMarginTop)
$('#oretiers').css('margin-left', screenMarginLeft)
$('#selectFactory').css('margin-top', screenMarginTop) $('#selectFactory').css('margin-top', screenMarginTop)
$('#selectFactory').css('margin-left', screenMarginLeft) $('#selectFactory').css('margin-left', screenMarginLeft)
$('#selectItem').css('margin-top', screenMarginTop) $('#selectItem').css('margin-top', screenMarginTop)
@ -199,6 +203,24 @@ function clickEvents() {
closeUi() closeUi()
} }
break break
case 5:
//selectFactory BUTTON
if (mode == "none") {
mode = "help"
$('#help').fadeIn(200)
} else {
closeUi()
}
break
case 6:
//selectFactory BUTTON
if (mode == "none") {
mode = "oretiers"
$('#oretiers').fadeIn(200)
} else {
closeUi()
}
break
case 8: case 8:
//selectFactory BUTTON //selectFactory BUTTON
if (mode == "none") { if (mode == "none") {
@ -514,6 +536,16 @@ function closeUi() {
$('#selectFactory').fadeOut(200) $('#selectFactory').fadeOut(200)
return false return false
} }
if (mode == "oretiers") {
mode = "none"
$('#oretiers').fadeOut(200)
return false
}
if (mode == "help") {
mode = "none"
$('#help').fadeOut(200)
return false
}
} }
function sort() { function sort() {

View File

@ -18,7 +18,7 @@
}, },
"spliter": { "spliter": {
"name": "Spliter", "name": "Spliter",
"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." "description": "Splits Items 50/50 to the left/right."
}, },
"warehouse": { "warehouse": {
"name": "Warehouse", "name": "Warehouse",
@ -219,12 +219,13 @@
"more": "Show Inventory / Sell Items", "more": "Show Inventory / Sell Items",
"inventory": "Inventory", "inventory": "Inventory",
"player": "Player", "player": "Player",
"infotooltips": ["Build", "Move", "Rotate", "Delete!", "", "Upgrade", "Information", "", "My Factorys"], "infotooltips": ["Build", "Move", "Rotate", "Delete!", "", "Help!?", "Information", "", "My Factorys"],
"cost": "Cost", "cost": "Cost",
"clickToSell": "Click on items to sell them.", "clickToSell": "Click on items to sell them.",
"reroll": "Reroll Offers", "reroll": "Reroll Offers",
"clickToBuyFactory": "Click on a Factory to Buy.", "clickToBuyFactory": "Click on a Factory to Buy.",
"money": "Dollars", "money": "Dollars",
"mineralslable": "Minerals:", "mineralslable": "Minerals:",
"depth": "Depth",
"numbers": ["", " Thousand", " Million", " Billion", " Trillion", " Quadrillion", " Quintillion", " Sextillion", " Septillion", " Octillion", " Nonillion", " Decillion", " Undecillion", " Duodecillion", " Tredecillion", " Quattuordecillion", " Quindecillion", " Sexdecillion", " Septendecillion", " Octodecillion", " Novemdecillion", " Vigintillion"] "numbers": ["", " Thousand", " Million", " Billion", " Trillion", " Quadrillion", " Quintillion", " Sextillion", " Septillion", " Octillion", " Nonillion", " Decillion", " Undecillion", " Duodecillion", " Tredecillion", " Quattuordecillion", " Quindecillion", " Sexdecillion", " Septendecillion", " Octodecillion", " Novemdecillion", " Vigintillion"]
} }