You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
21 KiB
363 lines
21 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Idle Gathering</title> |
|
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css"> |
|
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"/> |
|
<link rel="stylesheet" href="css/app.css"> |
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" |
|
name="viewport"> |
|
</head> |
|
<body> |
|
<div id="root" class="container-fluid mt-2"> |
|
<div class="modal fade" id="buildingModal" tabindex="-1" aria-labelledby="buildingModalLabel" aria-hidden="true" v-if="modalBuilding"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title" id="buildingModalLabel">{{ modalBuilding.name }}</h5> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true">×</span> |
|
</button> |
|
</div> |
|
<div class="modal-body"> |
|
<div class="float-right" v-if="modalBuilding.isUpgradeable"> |
|
<a href="javascript:" @click="buyUpgrade(modalBuilding)"><i |
|
class="fas fa-arrow-up text-success"></i> {{ modalBuilding.price }} <img |
|
class="resource-icon" src="img/gold.png"> </a> |
|
</div> |
|
|
|
<div class="float-left icon-level-container"> |
|
<img class="building-icon" :src="'img/' + modalBuilding.icon + '.png'" |
|
:alt="modalBuilding.name + '_icon'"> |
|
<div class="level-marker">{{ modalBuilding.level === 10 ? 'X' : modalBuilding.level }}</div> |
|
</div> |
|
|
|
{{ modalBuilding.amount }} <img class="resource-icon" |
|
:src="'img/' + modalBuilding.resource + '.png'" |
|
:alt="modalBuilding.resource + '_icon'"> every |
|
{{ modalBuilding.intervalInSeconds }}s<br/> |
|
|
|
<span v-if="modalBuilding.hasRequirements" v-html="getRequirementsText(modalBuilding)"></span> |
|
|
|
<div class="progress"> |
|
<div class="progress-bar progress-bar-success text-light" role="progressbar" |
|
:style="'width: ' + modalBuilding.loader + '%;'" aria-valuenow="10" |
|
aria-valuemin="0" |
|
aria-valuemax="100"> |
|
<span v-if="!modalBuilding.hasMissingResources"> |
|
{{ modalBuilding.loader }} % |
|
</span> |
|
<span class="text-danger" v-else> |
|
Missing resources! |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-xl-8"> |
|
<div class="card"> |
|
<div class="card-header">Map</div> |
|
<div class="card-body" id="mapwrapper"> |
|
<div class="mapRow" v-for="(row, rowNumber) in map"> |
|
<nobr> |
|
<a v-for="(tile, colNumber) in row"> |
|
<img :src="tile.asset" alt="" class="tile" style="display: inline-block;" @click="interactWithTile(tile, rowNumber, colNumber)"/> |
|
</a> |
|
</nobr> |
|
</div> |
|
<div class="" style="position: relative; bottom: 43em; width: 5em;"> |
|
<div class="card-body"> |
|
<div class="nav-item"> |
|
<a href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|
Building |
|
</a> |
|
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> |
|
<button v-for="building in buildings" @click="initiateBuilding(building)" class="tilebutton"> |
|
<img :src="'img/' + building.icon + '.png'" |
|
data-toggle="tooltip" |
|
data-placement="left" |
|
:title="building.name + ' (' + getResourcesNeededToBuildText(building) + ')'"/> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="nav-item"> |
|
<a href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|
Deco |
|
</a> |
|
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> |
|
<button class="tilebutton deco-button" |
|
v-for="item in mapDecorations" |
|
@click="selectDecoration(item)" |
|
data-toggle="tooltip" |
|
data-placement="left" |
|
:title="item.name + ' (' + item.price + ' Gold)'"> |
|
<img :src="item.path" class="deco-button-image"/> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="nav-item"> |
|
<a href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|
Roads |
|
</a> |
|
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> |
|
<button class="tilebutton deco-button" |
|
v-for="item in roads" |
|
@click="selectDecoration(item)" |
|
data-toggle="tooltip" |
|
data-placement="left" |
|
:title="item.name + ' (' + item.price + ' Gold)'"> |
|
<img :src="item.path" class="deco-button-image"/> |
|
</button> |
|
</div> |
|
</div> |
|
<button class="tilebutton deco-button" |
|
@click="selection = {bulldozer: true}" |
|
data-toggle="tooltip" |
|
data-placement="left" |
|
title="Bulldozer"> |
|
<img src="img/tiles/environment/fire.png"/> |
|
</button> |
|
<button class="tilebutton deco-button cancel" |
|
v-if="selection" |
|
@click="selection = null" |
|
data-toggle="tooltip" |
|
data-placement="left" |
|
title="Cancel"> |
|
<i class="fas fa-ban" style="color: darkred"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-xl-4"> |
|
<div class="card"> |
|
<a class="card-header" data-toggle="collapse" href="#collapseResources" role="button" |
|
aria-expanded="true" aria-controls="collapseResources"> |
|
<h3>Resources</h3> |
|
</a> |
|
<div class="card-body" id="collapseResources"> |
|
<div class="row"> |
|
<div class="col-md-12" v-for="resource in resources" |
|
v-if="resource.amount > 0 || resource.name === 'Gold'"> |
|
<div class="float-right">{{ getFormattedNumber(resource.amount) }} <img |
|
class="resource-icon" :src="resource.icon"></div> |
|
{{ resource.name }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<a class="card-header" data-toggle="collapse" href="#collapseQuest" role="button" |
|
aria-expanded="true" |
|
aria-controls="collapseQuest"> |
|
<h3>Quests</h3> |
|
</a> |
|
<div class="card-body" id="collapseQuest"> |
|
<div v-if="currentQuest"> |
|
Items needed: <br/> |
|
<span v-for="resource in Object.keys(resources)" |
|
v-if="resources[resource].unlocked && currentQuest[resource] > 0" |
|
:style="'color: ' + getColorForQuestResource(currentQuest[resource], resources[resource].amount)"> |
|
<img :title="resources[resource].name" class="resource-icon" |
|
:src="resources[resource].icon"> {{ currentQuest[resource] }} |
|
</span> |
|
<br/> |
|
<br/> |
|
<a href="javascript:" class="btn btn-sm btn-success float-right" @click="redeemReward()">Redeem |
|
reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a> |
|
<a class="btn btn-sm btn-info float-right" style="margin-right: 1em;" |
|
@click="generateQuestWithRandomItems(true)"><i class="fas fa-question"></i> Get a new |
|
quest |
|
for 250 <img class="resource-icon" src="img/gold.png"> ({{ 3 - questSkipCounter }} left)</a> |
|
</div> |
|
<div v-else> |
|
You don't have a quest at the moment. <br/> |
|
<br/> |
|
<br/> |
|
<a class="btn btn-sm btn-info float-right" @click="generateQuestWithRandomItems()"><i |
|
class="fas fa-question"></i> Get a new quest</a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<a class="card-header" data-toggle="collapse" href="#collapseOwned" role="button" |
|
aria-expanded="true" |
|
aria-controls="collapseOwned"> |
|
<h3>Owned buildings</h3> |
|
</a> |
|
<div class="card-body" id="collapseOwned"> |
|
<ul class="list-group"> |
|
<li class="list-group-item" v-for="building in buildings" v-if="building.isOwned"> |
|
<div class="float-right" v-if="building.isUpgradeable"> |
|
<a href="javascript:" @click="buyUpgrade(building)"><i |
|
class="fas fa-arrow-up text-success"></i> {{ building.price }} <img |
|
class="resource-icon" src="img/gold.png"> </a> |
|
</div> |
|
|
|
<div class="float-left icon-level-container"> |
|
<img class="building-icon" :src="'img/' + building.icon + '.png'" |
|
:alt="building.name + '_icon'"> |
|
<div class="level-marker">{{ building.level === 10 ? 'X' : building.level }}</div> |
|
</div> |
|
|
|
<strong>{{ building.name }}</strong><br> |
|
|
|
{{ building.amount }} <img class="resource-icon" |
|
:src="'img/' + building.resource + '.png'" |
|
:alt="building.resource + '_icon'"> every |
|
{{ building.intervalInSeconds }}s<br/> |
|
|
|
<span v-if="building.hasRequirements" v-html="getRequirementsText(building)"></span> |
|
|
|
<div class="progress"> |
|
<div class="progress-bar progress-bar-success text-light" role="progressbar" |
|
:style="'width: ' + building.loader + '%;'" aria-valuenow="10" |
|
aria-valuemin="0" |
|
aria-valuemax="100"> |
|
<span v-if="!building.hasMissingResources"> |
|
{{ building.loader }} % |
|
</span> |
|
<span class="text-danger" v-else> |
|
Missing resources! |
|
</span> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<a class="card-header" data-toggle="collapse" href="#collapseAvailable" role="button" |
|
aria-expanded="true" aria-controls="collapseAvailable"> |
|
<h3>Available buildings</h3> |
|
</a> |
|
<div class="card-body" id="collapseAvailable"> |
|
<ul class="list-group"> |
|
<li class="list-group-item" v-for="building in buildings" v-if="!building.isOwned"> |
|
<div class="float-right"> |
|
<a href="javascript:" @click="buyBuilding(building)"> |
|
<template v-if="building.resourcesToBuild"> |
|
<i class="fas fa-hammer text-success"></i> |
|
<span v-for="(amount, resoureceName) in building.resourcesToBuild"> |
|
{{ amount }} <img class="resource-icon" :src="resources[resoureceName].icon" |
|
:title="resources[resoureceName].icon" |
|
:alt="resources[resoureceName].icon"> |
|
</span> |
|
</template> |
|
<template v-else> |
|
<i class="fas fa-shopping-basket text-success"></i> {{ building.price }} |
|
<img |
|
class="resource-icon" src="img/gold.png"> |
|
</template> |
|
</a> |
|
</div> |
|
<div class="float-left"> |
|
<img class="building-icon" :src="'img/' + building.icon + '.png'"> |
|
</div> |
|
<strong>{{ building.name }}</strong><br> |
|
{{ building.amount }} <img class="resource-icon" |
|
:src="'img/' + building.resource + '.png'"> |
|
every {{ building.intervalInSeconds }}s<br/> |
|
<span v-if="building.hasRequirements" v-html="getRequirementsText(building)"></span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<a class="card-header" data-toggle="collapse" href="#collapseDebug" role="button" |
|
aria-expanded="true" |
|
aria-controls="collapseDebug"> |
|
<h3>Debug</h3> |
|
</a> |
|
<div class="card-body" id="collapseDebug"> |
|
<a href="https://git.luna-development.net/neroignis/idle-buildup/issues"><i |
|
class="fas fa-bug"></i> |
|
Found a bug?</a><br/> |
|
<br/> |
|
<input type="checkbox" v-model="debug.levelSandbox"> Buildings-Sandbox<br/> |
|
<input type="checkbox" v-model="debug.buildingsSandbox"> Resource-Sandbox<br/> |
|
<!-- <a class="btn btn-sm btn-danger" style="margin: 0.5em;" href="javascript:" @click="resources = {gold: 500,wood: 50,stone: 50,iron: 50,bricks: 50,corn: 50,coal: 50,planks: 50}">Reset resources</a>--> |
|
<a class="btn btn-sm btn-danger" style="margin: 0.5em;" href="javascript:" @click="reset()">Soft |
|
reset (everything except resources)</a> |
|
<a class="btn btn-sm btn-danger" style="margin: 0.5em;" href="javascript:" @click="reset(true)">Hard |
|
reset (everything)</a><br/> |
|
</div> |
|
</div> |
|
|
|
<div class="card" v-if="debug.levelSandbox"> |
|
<div class="card-header">Buildings Sandbox</div> |
|
<div class="card-body"> |
|
<template v-for="building in buildings" |
|
v-if="building.amountPerLevel || building.intervalPerLevel || building.pricePerLevel"> |
|
<h3><strong>{{ building.name }}</strong></h3> |
|
Amout per Level:<br/> |
|
<input class="form-control form-control-sandbox" type="number" |
|
v-for="amount in building.amountPerLevel" :value="amount"><br/> |
|
Interval per Level:<br/> |
|
<input class="form-control form-control-sandbox" type="number" |
|
v-for="interval in building.intervalPerLevel" :value="interval"><br/> |
|
Price per Level:<br/> |
|
<input class="form-control form-control-sandbox" type="number" |
|
v-for="price in building.pricePerLevel" :value="price"><br/> |
|
<hr/> |
|
<br/> |
|
</template> |
|
</div> |
|
</div> |
|
<div class="card" v-if="debug.buildingsSandbox"> |
|
<div class="card-header">Resource Sandbox</div> |
|
<div class="card-body"> |
|
<template v-for="resource in resources"> |
|
<h3><strong>{{ resource.name }}</strong></h3> |
|
<div class="row"> |
|
<div class="col-md-3"> |
|
<div class="form-group"> |
|
<label for="">Name</label> |
|
<input class="form-control" type="number" v-model="resource.name"> |
|
</div> |
|
</div> |
|
<div class="col-md-3"> |
|
<div class="form-group"> |
|
<label for="">Worth</label> |
|
<input class="form-control" type="number" v-model="resource.worth"> |
|
</div> |
|
</div> |
|
<div class="col-md-3"> |
|
<div class="form-group"> |
|
<label for="">Amount</label> |
|
<input class="form-control" type="number" v-model="resource.amount"> |
|
</div> |
|
</div> |
|
<div class="col-md-3"> |
|
<div class="form-group"> |
|
<label for="">Unlocked</label><br/> |
|
<input type="checkbox" v-model="resource.unlocked"> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> |
|
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> |
|
<script src="js/app.js?v=0.3"></script> |
|
</body> |
|
</html> |