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.
169 lines
11 KiB
169 lines
11 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 mt-2"> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<div class="alert alert-warning"> |
|
This game is in an early state of development, resources could be resetted everytime and bugs may appear. Also not every building is balanced yet. |
|
</div> |
|
</div> |
|
<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> |
|
Gold |
|
</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" :style="'color: ' + getColorForQuestResource(currentQuest.wood, resources.wood)"> |
|
<img title="wood" class="resource-icon" src="img/wood.png"> {{ currentQuest.wood }} |
|
</span> |
|
<span v-if="currentQuest.planks > 0" :style="'color: ' + getColorForQuestResource(currentQuest.planks, resources.planks)"> |
|
<img title="wood" class="resource-icon" src="img/planks.png"> {{ currentQuest.planks }} |
|
</span> |
|
<span v-if="currentQuest.stone > 0" :style="'color: ' + getColorForQuestResource(currentQuest.stone, resources.stone)"> |
|
<img title="stone" class="resource-icon" src="img/stone.png"> {{ currentQuest.stone }} |
|
</span> |
|
<span v-if="currentQuest.coal > 0" :style="'color: ' + getColorForQuestResource(currentQuest.coal, resources.coal)"> |
|
<img title="coal" class="resource-icon" src="img/coal.png"> {{ currentQuest.coal }} |
|
</span> |
|
<span v-if="currentQuest.iron > 0" :style="'color: ' + getColorForQuestResource(currentQuest.iron, resources.iron)"> |
|
<img title="iron" class="resource-icon" src="img/iron.png"> {{ currentQuest.iron }} |
|
</span> |
|
<span v-if="currentQuest.bricks > 0" :style="'color: ' + getColorForQuestResource(currentQuest.bricks, resources.bricks)"> |
|
<img title="bricks" class="resource-icon" src="img/bricks.png"> {{ currentQuest.bricks }} |
|
</span> |
|
<span v-if="currentQuest.corn > 0" :style="'color: ' + getColorForQuestResource(currentQuest.corn, resources.corn)"> |
|
<img title="corn" class="resource-icon" src="img/corn.png"> {{ currentQuest.corn }} |
|
</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> |
|
</div> |
|
<div v-else> |
|
<a class="btn btn-sm btn-info" @click="generateQuestWithRandomItems()"><i class="fas fa-question"></i> Get a new quest</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 icon-level-container"> |
|
<img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'"> |
|
<div class="level-marker">{{ 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> |
|
|
|
<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> |