|
|
|
|
<!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" 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>
|
|
|
|
|
|
|
|
|
|
<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-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 ({{ 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>
|
|
|
|
|
|
|
|
|
|
<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" 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>
|
|
|
|
|
|
|
|
|
|
<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 class="col-md-12">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12" v-if="debug.levelSandbox">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12" v-if="debug.buildingsSandbox">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<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>
|
