1nicerOli
/
idle-buildup
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
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.
24 Commits
2 Branches
0 Tags
1.5 MiB
 
 
 
Tree: 95d5605622
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '95d5605622'
${ noResults }
idle-buildup/index.html

148 lines
9.4 KiB
Raw Blame History

<!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 mt-2">
<div class="row">
<div class="col-sm-6">
<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">
<div class="float-right">{{ getFormattedNumber(resources.gold) }} <img class="resource-icon" src="img/gold.png"></div>
Coins
</div>
<div class="col-md-12" v-if="resources.wood > 0">
<div class="float-right">{{ getFormattedNumber(resources.wood) }} <img class="resource-icon" src="img/wood.png"></div>
Wood
</div>
<div class="col-md-12" v-if="resources.planks > 0">
<div class="float-right">{{ getFormattedNumber(resources.planks) }} <img class="resource-icon" src="img/planks.png"></div>
Planks
</div>
<div class="col-md-12" v-if="resources.stone > 0">
<div class="float-right">{{ getFormattedNumber(resources.stone) }} <img class="resource-icon" src="img/stone.png"></div>
Stones
</div>
<div class="col-md-12" v-if="resources.coal > 0">
<div class="float-right">{{ getFormattedNumber(resources.coal) }} <img class="resource-icon" src="img/coal.png"></div>
Coal
</div>
<div class="col-md-12" v-if="resources.iron > 0">
<div class="float-right">{{ getFormattedNumber(resources.iron) }} <img class="resource-icon" src="img/iron.png"></div>
Iron
</div>
<div class="col-md-12" v-if="resources.corn > 0">
<div class="float-right">{{ getFormattedNumber(resources.corn) }} <img class="resource-icon" src="img/corn.png"></div>
Corn
</div>
<div class="col-md-12" v-if="resources.bricks > 0">
<div class="float-right">{{ getFormattedNumber(resources.bricks) }} <img class="resource-icon" src="img/bricks.png"></div>
Bricks
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<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-if="currentQuest.wood > 0"><img title="wood" class="resource-icon" src="img/wood.png"> {{ currentQuest.wood }}</span>
<span v-if="currentQuest.planks > 0"><img title="wood" class="resource-icon" src="img/planks.png"> {{ currentQuest.planks }}</span>
<span v-if="currentQuest.stone > 0"><img title="stone" class="resource-icon" src="img/stone.png"> {{ currentQuest.stone }}</span>
<span v-if="currentQuest.coal > 0"><img title="coal" class="resource-icon" src="img/coal.png"> {{ currentQuest.coal }}</span>
<span v-if="currentQuest.iron > 0"><img title="iron" class="resource-icon" src="img/iron.png"> {{ currentQuest.iron }}</span>
<span v-if="currentQuest.bricks > 0"><img title="bricks" class="resource-icon" src="img/bricks.png"> {{ currentQuest.bricks }}</span>
<span v-if="currentQuest.corn > 0"><img title="corn" class="resource-icon" src="img/corn.png"> {{ currentQuest.corn }}</span>
<br/>
<a href="javascript:" class="btn btn-sm btn-success" @click="redeemReward()">Redeem reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a>
</div>
<div v-else>
<a class="btn btn-sm btn-info" @click="generateQuestWithRandomItems()">Get Quest (resources needed)</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<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">
<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">
<img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'">
</div>
<strong>{{ building.name }} (Level {{ building.level }})</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>
<div class="col-md-6">
<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)"><i class="fas fa-shopping-basket text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png"> </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>
</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>