@ -6,84 +6,119 @@
< link rel = "stylesheet" href = "https://bootswatch.com/4/darkly/bootstrap.min.css" > < 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://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 = "https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" / >
< link rel = "stylesheet" href = "css/app.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" > < meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
name="viewport">
< / head > < / head >
< body > < body >
< div id = "root" class = "container mt-2" > < div id = "root" class = "container-fluid mt-2" >
< div class = "row" > < div class = "row" >
< div class = "col-md-12" > <!-- <div class="col - md - 12"> -->
< div class = "alert alert-warning" > <!-- <div class="alert alert - warning alert - dis"> -->
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. <!-- 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-xl-8" >
< div class = "card" >
< div class = "card-header" > Map< / div >
< div class = "card-body" id = "mapwrapper" >
< div id = "" >
< div class = "mapRow" v-for = "row in map" >
< nobr >
< a v-for = "tile in row" >
< img :src = "tile.asset" alt = "" class = "tile" style = "display: inline-block;" @ click = "interactWithTile(tile)" / >
< / a >
< / nobr >
< / div >
< / div >
< / div >
< / div > < / div >
< / div > < / div >
< div class = "col-sm-6" > < div class = "col-xl-4 " >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseResources" role = "button" aria-expanded = "true" aria-controls = "collapseResources" > < a class = "card-header" data-toggle = "collapse" href = "#collapseResources" role = "button"
aria-expanded="true" aria-controls="collapseResources">
< h3 > Resources< / h3 > < h3 > Resources< / h3 >
< / a > < / a >
< div class = "card-body" id = "collapseResources" > < div class = "card-body" id = "collapseResources" >
< div class = "row" > < div class = "row" >
< div class = "col-md-12" v-for = "resource in resources" v-if = "resource.amount > 0 || resource.name === 'Gold'" > < div class = "col-md-12" v-for = "resource in resources"
< div class = "float-right" > {{ getFormattedNumber(resource.amount) }} < img class = "resource-icon" :src = "resource.icon" > < / div > 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 }} {{ resource.name }}
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div >
< div class = "col-sm-6" >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseQuest" role = "button" aria-expanded = "true" aria-controls = "collapseQuest" > < a class = "card-header" data-toggle = "collapse" href = "#collapseQuest" role = "button"
aria-expanded="true"
aria-controls="collapseQuest">
< h3 > Quests< / h3 > < h3 > Quests< / h3 >
< / a > < / a >
< div class = "card-body" id = "collapseQuest" > < div class = "card-body" id = "collapseQuest" >
< div v-if = "currentQuest" > < div v-if = "currentQuest" >
Items needed: < br / > 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)" > < span v-for = "resource in Object.keys(resources)"
< img :title = "resources[resource].name" class = "resource-icon" :src = "resources[resource].icon" > {{ currentQuest[resource] }} 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 > < / span >
< br / > < br / >
< 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 href = "javascript:" class = "btn btn-sm btn-success float-right" @ click = "redeemReward()" > Redeem
< 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 > 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 >
< div v-else > < div v-else >
You don't have a quest at the moment. < br / > You don't have a quest at the moment. < br / >
< br / > < 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 > < 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 > < / div >
< / div >
< div class = "col-md-6" >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseOwned" role = "button" aria-expanded = "true" aria-controls = "collapseOwned" > < a class = "card-header" data-toggle = "collapse" href = "#collapseOwned" role = "button"
aria-expanded="true"
aria-controls="collapseOwned">
< h3 > Owned buildings< / h3 > < h3 > Owned buildings< / h3 >
< / a > < / a >
< div class = "card-body" id = "collapseOwned" > < div class = "card-body" id = "collapseOwned" >
< ul class = "list-group" > < ul class = "list-group" >
< li class = "list-group-item" v-for = "building in buildings" v-if = "building.isOwned" > < li class = "list-group-item" v-for = "building in buildings" v-if = "building.isOwned" >
< div class = "float-right" v-if = "building.isUpgradeable" > < 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 > < 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 >
< div class = "float-left icon-level-container" > < div class = "float-left icon-level-container" >
< img class = "building-icon" :src = "'img/' + building.icon + '.png'" :alt = "building.name + '_icon'" > < 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 class = "level-marker" > {{ building.level === 10 ? 'X' : building.level }}< / div >
< / div > < / div >
< strong > {{ building.name }}< / strong > < br > < 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 / > {{ 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 > < span v-if = "building.hasRequirements" v-html = "getRequirementsText(building)" > < / span >
< div class = "progress" > < 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" > < 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" > < span v-if = "!building.hasMissingResources" >
{{ building.loader }} % {{ building.loader }} %
< / span > < / span >
@ -96,11 +131,9 @@
< / ul > < / ul >
< / div > < / div >
< / div > < / div >
< / div >
< div class = "col-md-6" >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseAvailable" role = "button" aria-expanded = "true" aria-controls = "collapseAvailable" > < a class = "card-header" data-toggle = "collapse" href = "#collapseAvailable" role = "button"
aria-expanded="true" aria-controls="collapseAvailable">
< h3 > Available buildings< / h3 > < h3 > Available buildings< / h3 >
< / a > < / a >
< div class = "card-body" id = "collapseAvailable" > < div class = "card-body" id = "collapseAvailable" >
@ -111,11 +144,15 @@
< template v-if = "building.resourcesToBuild" > < template v-if = "building.resourcesToBuild" >
< i class = "fas fa-hammer text-success" > < / i > < i class = "fas fa-hammer text-success" > < / i >
< span v-for = "(amount, resoureceName) in building.resourcesToBuild" > < 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" > {{ amount }} < img class = "resource-icon" :src = "resources[resoureceName].icon"
:title="resources[resoureceName].icon"
:alt="resources[resoureceName].icon">
< / span > < / span >
< / template > < / template >
< template v-else > < template v-else >
< i class = "fas fa-shopping-basket text-success" > < / i > {{ building.price }} < img class = "resource-icon" src = "img/gold.png" > < i class = "fas fa-shopping-basket text-success" > < / i > {{ building.price }}
< img
class="resource-icon" src="img/gold.png">
< / template > < / template >
< / a > < / a >
< / div > < / div >
@ -123,51 +160,56 @@
< img class = "building-icon" :src = "'img/' + building.icon + '.png'" > < img class = "building-icon" :src = "'img/' + building.icon + '.png'" >
< / div > < / div >
< strong > {{ building.name }}< / strong > < br > < strong > {{ building.name }}< / strong > < br >
{{ building.amount }} < img class = "resource-icon" :src = "'img/' + building.resource + '.png'" > every {{ building.intervalInSeconds }}s< 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 > < span v-if = "building.hasRequirements" v-html = "getRequirementsText(building)" > < / span >
< / li > < / li >
< / ul > < / ul >
< / div > < / div >
< / div > < / div >
< / div >
< div class = "col-md-12" >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseDebug" role = "button" aria-expanded = "true" aria-controls = "collapseDebug" > < a class = "card-header" data-toggle = "collapse" href = "#collapseDebug" role = "button"
aria-expanded="true"
aria-controls="collapseDebug">
< h3 > Debug< / h3 > < h3 > Debug< / h3 >
< / a > < / a >
< div class = "card-body" id = "collapseDebug" > < 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 / > < a href = "https://git.luna-development.net/neroignis/idle-buildup/issues" > < i
class="fas fa-bug">< / i >
Found a bug?< / a > < br / >
< br / > < br / >
< input type = "checkbox" v-model = "debug.levelSandbox" > Buildings-Sandbox< br / > < input type = "checkbox" v-model = "debug.levelSandbox" > Buildings-Sandbox< br / >
< input type = "checkbox" v-model = "debug.buildingsSandbox" > Resource-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="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()" > Soft
< a class = "btn btn-sm btn-danger" style = "margin: 0.5em;" href = "javascript:" @ click = "reset(true)" > Hard reset (everything)< / a > < br / > 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 >
< / div >
< div class = "col-md-12" v-if = "debug.levelSandbox" > < div class = "card" v-if = "debug.levelSandbox" >
< div class = "card" >
< div class = "card-header" > Buildings Sandbox< / div > < div class = "card-header" > Buildings Sandbox< / div >
< div class = "card-body" > < div class = "card-body" >
< template v-for = "building in buildings" v-if = "building.amountPerLevel || building.intervalPerLevel || building.pricePerLevel" > < template v-for = "building in buildings"
v-if="building.amountPerLevel || building.intervalPerLevel || building.pricePerLevel">
< h3 > < strong > {{ building.name }}< / strong > < / h3 > < h3 > < strong > {{ building.name }}< / strong > < / h3 >
Amout per Level:< br / > Amout per Level:< br / >
< input class = "form-control form-control-sandbox" type = "number" v-for = "amount in building.amountPerLevel" :value = "amount" > < br / > < input class = "form-control form-control-sandbox" type = "number"
v-for="amount in building.amountPerLevel" :value="amount">< br / >
Interval per Level:< br / > Interval per Level:< br / >
< input class = "form-control form-control-sandbox" type = "number" v-for = "interval in building.intervalPerLevel" :value = "interval" > < br / > < input class = "form-control form-control-sandbox" type = "number"
v-for="interval in building.intervalPerLevel" :value="interval">< br / >
Price per Level:< br / > Price per Level:< br / >
< input class = "form-control form-control-sandbox" type = "number" v-for = "price in building.pricePerLevel" :value = "price" > < br / > < input class = "form-control form-control-sandbox" type = "number"
< hr / > < br / > v-for="price in building.pricePerLevel" :value="price">< br / >
< hr / >
< br / >
< / template > < / template >
< / div > < / div >
< / div > < / div >
< / div > < div class = "card" v-if = "debug.buildingsSandbox" >
< div class = "col-md-12" v-if = "debug.buildingsSandbox" >
< div class = "card" >
< div class = "card-header" > Resource Sandbox< / div > < div class = "card-header" > Resource Sandbox< / div >
< div class = "card-body" > < div class = "card-body" >
< template v-for = "resource in resources" > < template v-for = "resource in resources" >
