@ -6,224 +6,84 @@
< 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" < meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name = "viewport" >
name="viewport">
< / head > < / head >
< body > < body >
< div id = "root" class = "container-fluid mt-2" > < div id = "root" class = "container mt-2" >
< div class = "modal fade" id = "buildingModal" tabindex = "-1" aria-labelledby = "buildingModalLabel" aria-hidden = "true" v-if = "modalBuilding" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "buildingModalLabel" > {{ modalBuilding.name }}< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< div class = "float-right" v-if = "modalBuilding.isUpgradeable" >
< a href = "javascript:" @ click = "buyUpgrade(modalBuilding)" > < i
class="fas fa-arrow-up text-success">< / i > {{ modalBuilding.price }} < img
class="resource-icon" src="img/gold.png"> < / a >
< / div >
< div class = "float-left icon-level-container" >
< img class = "building-icon" :src = "'img/' + modalBuilding.icon + '.png'"
:alt="modalBuilding.name + '_icon'">
< div class = "level-marker" > {{ modalBuilding.level === 10 ? 'X' : modalBuilding.level }}< / div >
< / div >
{{ modalBuilding.amount }} < img class = "resource-icon"
:src="'img/' + modalBuilding.resource + '.png'"
:alt="modalBuilding.resource + '_icon'"> every
{{ modalBuilding.intervalInSeconds }}s< br / >
< span v-if = "modalBuilding.hasRequirements" v-html = "getRequirementsText(modalBuilding)" > < / span >
< div class = "progress" >
< div class = "progress-bar progress-bar-success text-light" role = "progressbar"
:style="'width: ' + modalBuilding.loader + '%;'" aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100">
< span v-if = "!modalBuilding.hasMissingResources" >
{{ modalBuilding.loader }} %
< / span >
< span class = "text-danger" v-else >
Missing resources!
< / span >
< / div >
< / div >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< / div >
< / div >
< / div >
< / div >
< div class = "row" > < div class = "row" >
< div class = "col-xl-8" > < div class = "col-md-12" >
< div class = "card" > < div class = "alert alert-warning" >
< div class = "card-header" > Map< / div > 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 class = "card-body" id = "mapwrapper" >
< div class = "mapRow" v-for = "(row, rowNumber) in map" >
< nobr >
< a v-for = "(tile, colNumber) in row" >
< img :src = "tile.asset" alt = "" class = "tile" style = "display: inline-block;" @ click = "interactWithTile(tile, rowNumber, colNumber)" / >
< / a >
< / nobr >
< / div > < / div >
< div class = "" style = "position: relative; bottom: 43em; width: 5em;" > < / div >
< div class = "card-body" > < div class = "col-sm-6" >
< div class = "nav-item" >
< a href = "#" id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Building
< / a >
< div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink" >
< button v-for = "building in buildings" @ click = "initiateBuilding(building)" class = "tilebutton" >
< img :src = "'img/' + building.icon + '.png'"
data-toggle="tooltip"
data-placement="left"
:title="building.name + ' (' + getResourcesNeededToBuildText(building) + ')'"/>
< / button >
< / div >
< / div >
< div class = "nav-item" >
< a href = "#" id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Deco
< / a >
< div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink" >
< button class = "tilebutton deco-button"
v-for="item in mapDecorations"
@click="selectDecoration(item)"
data-toggle="tooltip"
data-placement="left"
:title="item.name + ' (' + item.price + ' Gold)'">
< img :src = "item.path" class = "deco-button-image" / >
< / button >
< / div >
< / div >
< div class = "nav-item" >
< a href = "#" id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Roads
< / a >
< div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink" >
< button class = "tilebutton deco-button"
v-for="item in roads"
@click="selectDecoration(item)"
data-toggle="tooltip"
data-placement="left"
:title="item.name + ' (' + item.price + ' Gold)'">
< img :src = "item.path" class = "deco-button-image" / >
< / button >
< / div >
< / div >
< button class = "tilebutton deco-button"
@click="selection = {bulldozer: true}"
data-toggle="tooltip"
data-placement="left"
title="Bulldozer">
< img src = "img/tiles/environment/fire.png" / >
< / button >
< button class = "tilebutton deco-button cancel"
v-if="selection"
@click="selection = null"
data-toggle="tooltip"
data-placement="left"
title="Cancel">
< i class = "fas fa-ban" style = "color: darkred" > < / i >
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-xl-4" >
< div class = "card" > < div class = "card" >
< a class = "card-header" data-toggle = "collapse" href = "#collapseResources" role = "button" < a class = "card-header" data-toggle = "collapse" href = "#collapseResources" role = "button" aria-expanded = "true" aria-controls = "collapseResources" >
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" < div class = "col-md-12" v-for = "resource in resources" v-if = "resource.amount > 0 || resource.name === 'Gold'" >
v-if="resource.amount > 0 || resource.name === 'Gold'"> < div class = "float-right" > {{ getFormattedNumber(resource.amount) }} < img class = "resource-icon" :src = "resource.icon" > < / div >
< 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" < a class = "card-header" data-toggle = "collapse" href = "#collapseQuest" role = "button" aria-expanded = "true" aria-controls = "collapseQuest" >
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)" < span v-for = "resource in Object.keys(resources)" v-if = "resources[resource].unlocked && currentQuest[resource] > 0" :style = "'color: ' + getColorForQuestResource(currentQuest[resource], resources[resource].amount)" >
v-if="resources[resource].unlocked & & currentQuest[resource] > 0" < img :title = "resources[resource].name" class = "resource-icon" :src = "resources[resource].icon" > {{ currentQuest[resource] }}
: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 < 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 >
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 >
< 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 < a class = "btn btn-sm btn-info float-right" @ click = "generateQuestWithRandomItems()" > < i class = "fas fa-question" > < / i > Get a new quest< / a >
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" < a class = "card-header" data-toggle = "collapse" href = "#collapseOwned" role = "button" aria-expanded = "true" aria-controls = "collapseOwned" >
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 < 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 >
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'" < img class = "building-icon" :src = "'img/' + building.icon + '.png'" :alt = "building.name + '_icon'" >
: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" {{ building.amount }} < img class = "resource-icon" :src = "'img/' + building.resource + '.png'" :alt = "building.resource + '_icon'" > every {{ building.intervalInSeconds }}s< br / >
: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" < div class = "progress-bar progress-bar-success text-light" role = "progressbar" :style = "'width: ' + building.loader + '%;'" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" >
: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 >
@ -236,9 +96,11 @@
< / 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" < a class = "card-header" data-toggle = "collapse" href = "#collapseAvailable" role = "button" aria-expanded = "true" aria-controls = "collapseAvailable" >
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" >
@ -249,15 +111,11 @@
< 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" {{ amount }} < img class = "resource-icon" :src = "resources[resoureceName].icon" :title = "resources[resoureceName].icon" :alt = "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 }} < i class = "fas fa-shopping-basket text-success" > < / i > {{ building.price }} < img class = "resource-icon" src = "img/gold.png" >
< img
class="resource-icon" src="img/gold.png">
< / template > < / template >
< / a > < / a >
< / div > < / div >
@ -265,56 +123,51 @@
< 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" {{ building.amount }} < img class = "resource-icon" :src = "'img/' + building.resource + '.png'" > every {{ building.intervalInSeconds }}s< br / >
: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" < a class = "card-header" data-toggle = "collapse" href = "#collapseDebug" role = "button" aria-expanded = "true" aria-controls = "collapseDebug" >
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 < a href = "https://git.luna-development.net/neroignis/idle-buildup/issues" > < i class = "fas fa-bug" > < / i > Found a bug?< / a > < br / >
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 < a class = "btn btn-sm btn-danger" style = "margin: 0.5em;" href = "javascript:" @ click = "reset()" > Soft reset (everything except resources)< / a >
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 / >
< a class = "btn btn-sm btn-danger" style = "margin: 0.5em;" href = "javascript:" @ click = "reset(true)" > Hard < / div >
reset (everything)< / a > < br / >
< / div > < / div >
< / div > < / div >
< div class = "card" v-if = "debug.levelSandbox" > < div class = "col-md-12" 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" < template v-for = "building in buildings" v-if = "building.amountPerLevel || building.intervalPerLevel || building.pricePerLevel" >
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" < input class = "form-control form-control-sandbox" type = "number" v-for = "amount in building.amountPerLevel" :value = "amount" > < br / >
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" < input class = "form-control form-control-sandbox" type = "number" v-for = "interval in building.intervalPerLevel" :value = "interval" > < br / >
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" < input class = "form-control form-control-sandbox" type = "number" v-for = "price in building.pricePerLevel" :value = "price" > < br / >
v-for="price in building.pricePerLevel" :value="price">< br / > < hr / > < br / >
< hr / >
< br / >
< / template > < / template >
< / div > < / div >
< / div > < / div >
< div class = "card" v-if = "debug.buildingsSandbox" > < / div >
< 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" >
