add base

4 years ago · fa606644b7
9 changed files with 261 additions and 0 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/idle-build-up.iml
+++ b/.idea/idle-build-up.iml
@ -0,0 +1,9 @@
				@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="tailwindcss" level="application" />
+  </component>
+</module>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,10 @@
				@@ -0,0 +1,10 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@ -0,0 +1,6 @@
				@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{tailwindcss}" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/idle-build-up.iml" filepath="$PROJECT_DIR$/.idea/idle-build-up.iml" />
+    </modules>
+  </component>
+</project>
--- a/css/app.css
+++ b/css/app.css
--- a/index.html
+++ b/index.html
@ -0,0 +1,50 @@
				@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Idle Buildup</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="css/app.css">
+</head>
+<body>
+<div id="root" class="container mt-2">
+    <div class="row">
+        <div class="col-md-12">
+            <h1 style="font-size: 42pt">{{ this.getAmountFormatted() }}</h1>
+            <hr>
+            <h3>Buildings owned</h3>
+            <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> Upgrade for {{ building.price }}</a>
+                    </div>
+                    {{ building.name }} (Level {{ building.level }}) earning {{ building.amount.toFixed(2) }} every {{ building.intervalInSeconds.toFixed(2) }} seconds.<br/>
+                    <div class="progress">
+                        <div class="progress-bar progress-bar-striped" role="progressbar" :style="'width: ' + building.loader + '%;'" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+                            {{ building.loader }} %
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <hr>
+            <h3>Buildings to buy</h3>
+            <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> Buy for {{ building.price }}</a>
+                    </div>
+                    {{ building.name }} could earn {{ building.amount }} every {{ building.intervalInSeconds }} seconds.<br/>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<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/MoneyManager.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
--- a/js/MoneyManager.js
+++ b/js/MoneyManager.js
@ -0,0 +1,34 @@
				@@ -0,0 +1,34 @@
+class MoneyManager {
+    constructor(startMoney = null) {
+        this.money = startMoney ?? this.getSavedMoney();
+        return this.saveMoney();
+    }
+
+    saveMoney() {
+        localStorage.setItem('money', String(this.money));
+        return this.getSavedMoney();
+    }
+
+    getSavedMoney() {
+        this.money = Number(localStorage.getItem('money') ?? 0);
+        return this.money;
+    }
+
+    add(amount = 0) {
+        this.money += amount;
+        return this.saveMoney();
+    }
+
+    sub(amount = 0) {
+        this.money -= amount;
+        return this.saveMoney();
+    }
+
+    getAmount() {
+        return this.money;
+    }
+
+    getAmountFormatted() {
+        return Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(this.money);
+    }
+}
--- a/js/app.js
+++ b/js/app.js
@ -0,0 +1,136 @@
				@@ -0,0 +1,136 @@
+let game = new Vue({
+    el: '#root',
+    data: {
+        money: 0,
+        buildings: [
+            {
+                name: 'TestBuilding',
+                intervalInSeconds: 10,
+                amount: 1000,
+                level: 0,
+                price: 100,
+                isOwned: false
+            }
+        ],
+        loadedIntervals: []
+    },
+    created() {
+        this.money = this.getSavedMoney();
+        this.saveMoney();
+
+        this.reloadBuildings();
+    },
+    methods: {
+        saveMoney() {
+            localStorage.setItem('money', String(this.money));
+            return this.getSavedMoney();
+        },
+
+        getSavedMoney() {
+            this.money = Number(localStorage.getItem('money') ?? 0);
+            return this.money;
+        },
+
+        add(amount = 0) {
+            this.money += amount;
+            return this.saveMoney();
+        },
+
+        sub(amount = 0) {
+            this.money -= amount;
+            return this.saveMoney();
+        },
+
+        getAmount() {
+            return this.money;
+        },
+
+        getAmountFormatted() {
+            return Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(this.money);
+        },
+
+        reloadBuildings() {
+            this.killIntervals();
+
+            let game = this;
+            this.buildings.forEach((building) => {
+                if (building.isOwned) {
+                    this.loadedIntervals.push(
+                        setInterval(() => {
+                            game.add(building.amount);
+                        }, building.intervalInSeconds * 1000)
+                    );
+
+                    this.loadedIntervals.push(
+                        setInterval(() => {
+                            if (building.loader < 100) {
+                                building.loader += 10;
+                            } else {
+                                building.loader = 10;
+                            }
+
+                            game.$forceUpdate()
+                        }, building.intervalInSeconds / 10 * 1000)
+                    )
+                }
+            });
+        },
+
+        killIntervals() {
+            this.buildings.forEach((building) => {
+                building.loader = 0;
+            });
+
+            this.loadedIntervals.forEach((interval) => {
+                clearInterval(interval)
+            });
+        },
+
+        buyBuilding(building) {
+            if (this.money >= building.price) {
+                this.sub(building.price);
+                building.isOwned = true;
+
+                this.upgradeBuilding(building, true);
+                this.saveBuildings();
+            } else {
+                alert('Not enough money');
+            }
+        },
+
+        buyUpgrade(building) {
+            if (this.money >= building.price) {
+                this.sub(building.price);
+                this.upgradeBuilding(building)
+            } else {
+                alert('Not enough money');
+            }
+        },
+
+        upgradeBuilding(building, first = false) {
+            this.killIntervals();
+
+            building.level++;
+            building.price *= 1.25;
+
+            if (first === false) {
+                building.intervalInSeconds *= 0.95;
+            }
+
+            this.reloadBuildings();
+            this.saveBuildings();
+        },
+
+        saveBuildings() {
+            localStorage.setItem('buildings', JSON.stringify(this.buildings));
+        },
+
+        loadBuildings: function () {
+            let savedBuildings = JSON.parse(localStorage.getItem('buildings'));
+
+            if (savedBuildings.length > 0) {
+                this.buildings = savedBuildings;
+            }
+        }
+    },
+});