<!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 resources" v-if = "currentQuest[resource.name.toLowerCase()] > 0" :style = "'color: ' + getColorForQuestResource(currentQuest[resource.name.toLowerCase()], resource.amount)" >
< img :title = "resource.name" class = "resource-icon" :src = "resource.icon" > {{ currentQuest[resource.name.toLowerCase()] }}
< / 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()" > < i class = "fas fa-question" > < / i > Get a new quest< / 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 >
