.

9 files changed, 262 insertions, 70 deletions

diff --git a/src/App.vue b/src/App.vue
index 591a031..a768a4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,213 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <h1 class='header_intro' ref='header_intro'>Click the Amogus</h1>
+ <div class="main_container" @click='musicPlay'>
+	<div id="bigamogus" ref="bigamogus" title="The Big Amogus" @click="delayedTwerk($event, 'bigamogus')">
+
+	 <Dollar ref='bill0'/>
+	 <Dollar ref='bill1'/>
+	 <Dollar ref='bill2'/>
+	 <Dollar ref='bill3'/>
+	 <Dollar ref='bill4'/>
+	 <Dollar ref='bill5'/>
+	 <Dollar ref='bill6'/>
+	 <Dollar ref='bill7'/>
+	 <Dollar ref='bill8'/>
+	 <Dollar ref='bill9'/>
+	 <Dollar ref='bill10'/>
+	 <Dollar ref='bill11'/>
+	</div>
+	<div class="options_container">
+	 <button class='button' @click="speedUpAmogus('yellow')" :disabled="!enoughMoney">
+		<div>Speed it up Amogus!</div>
+		<div>Cost: {{ amogus_twerk_speedup_cost }}$</div>
+	 </button>
+	 <br>
+	 <p>Twerk Speed: {{ yellowAmongusSpeedDisplay }}</p>
+	 <p>Amogus' Ass Thrown In a Circle {{ twerks }} Times</p>
+	 <p>Hard Earned Cash: {{ money }}$</p>
+	</div>
+ </div>
+ <audio ref="music" controls autoplay loop hidden>
+	<source src="./assets/amongus.mp3" type="audio/mpeg">
+ </audio>
+ <audio ref="amogusaudio" controls hidden>
+	<source src="./assets/amogus.mp3" type="audio/mpeg">
+ </audio>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Dollar from './components/DollarEffect.vue'
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+ name: 'App',
+ components: {
+	Dollar
+ },
+ data() {
+	return {
+	 twerk_disabled: false,
+	 twerk_timeout: null,
+	 twerk_queued: false,
+	 yellow_amogus_speed: 1.0,
+	 amogus_twerk_speedup_cost: 2,
+	 amogus_speedup_purchase: 0.8, //how much faster the animations should be each purchase
+	 twerks: 1,
+	 money: 1,
+	 x: 0,
+	 y: 0,
+	 musicPlaying: false
+	}
+ },
+ methods: {
+	musicPlay() {
+	 if(!this.musicPlaying){
+		this.musicPlaying = true
+		this.$refs.music.play();
+	 }
+	},
+	amogusClipPlay(){
+	 this.$refs.amogusaudio.play();
+	},
+	resetAmogus(e, element){
+	 this.twerks += 1
+	 this.money += Math.floor((Math.random() * 3) + 1);
+	 for(let dollar in [0,1,2,3,4,5,6,7,8,9,10,11]){
+		let temp = this.$refs['bill' + (parseInt(dollar) + 1)].reset(e.x, e.y)
+		if(temp != 'activated'){
+		 break
+		}
+	 }
+	 this.$refs[element].style.animation = 'none'
+	 this.$refs[element].offsetHeight /* trigger reflow */
+	 this.$refs[element].style.animation = null
+	},
+	delayedTwerk(e, element) {
+	 if(!this.twerk_disabled){
+		this.twerk_disabled = true
+		this.twerk_timeout = setTimeout(() => {
+		 this.twerk_disabled = false
+		 if(this.twerk_queued){
+			this.twerk_queued = false
+			this.delayedTwerk(e, element)
+		 }
+		}, (this.yellow_amogus_speed * 1000))
+		this.resetAmogus(e, element)
+	 }
+	 else{
+		this.twerk_queued = true
+	 }
+	},
+	speedUpAmogus(color) {
+	 if(this.enoughMoney){
+		this.amogusClipPlay()
+		this.yellow_amogus_speed *= this.amogus_speedup_purchase
+		this.money -= this.amogus_twerk_speedup_cost
+		this.amogus_twerk_speedup_cost *= 3
+	 }
+	}
+
+ },
+ computed: {
+	yellowAmogusSpeed(){
+	 return (this.yellow_amogus_speed + "s")
+	},
+	yellowAmongusSpeedDisplay(){
+	 return ((1/this.yellow_amogus_speed).toFixed(2))
+	},
+	enoughMoney(){
+	 return (this.amogus_twerk_speedup_cost <= this.money)
+	}
+ }
+
 }
 </script>
 
 <style>
+html, body {
+ height: 100%;
+ margin: 0;
+}
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #fff;
+ margin-top: 0px;
+ padding-top: 60px;
+ background-image: url('./assets/background.png');
+ background-size: cover;
+ background-repeat: no-repeat;
+ min-height: 100%; 
+}
+.main_container {
+ background-color: rgba(1, 1, 1, 0.35);
+ margin: auto;
+ width: auto;
+ padding: 50px;
+ display: inline-block;
+ border: 0px;
+ border-radius: 25px;
+}
+.options_container {
+ background-color: rgba(1, 1, 1, 0.5);
+ margin: auto;
+ width: auto;
+ border: 0px;
+ border-radius: 25px;
+ padding: 15px;
+ display: inline-block;
+ border: 0px;
+ border-radius: 25px;
+}
+#bigamogus {
+ background-image: url('./assets/amogus.png');
+ width: 384px;
+ height: 384px;
+ animation: anim v-bind('yellowAmogusSpeed') steps(6) 1;
+ border: 20px;
+ margin: auto;
+ user-select: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -webkit-touch-callout: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+}
+@keyframes anim {
+ to { background-position: -2304px; }
 }
+
+.button {
+ user-select: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -webkit-touch-callout: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ background-color: goldenrod; 
+ border: none;
+ color: black;
+ padding: 16px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ transition-duration: 0.4s;
+ cursor: pointer;
+ border: 2px solid gold;
+}
+
+.button:hover {
+ background-color: white;
+ color: black;
+}
+
+.button:disabled {
+ background-color: lightgoldenrodyellow;
+ color: darkgray;
+ cursor: not-allowed;
+}
+
 </style>
diff --git a/src/assets/amogus.gif b/src/assets/amogus.gif
new file mode 100644
index 0000000..99a3030
--- /dev/null
+++ b/src/assets/amogus.gif
diff --git a/src/assets/amogus.mp3 b/src/assets/amogus.mp3
new file mode 100644
index 0000000..a120c5a
--- /dev/null
+++ b/src/assets/amogus.mp3
diff --git a/src/assets/amogus.png b/src/assets/amogus.png
new file mode 100644
index 0000000..2fd6b5d
--- /dev/null
+++ b/src/assets/amogus.png
diff --git a/src/assets/amongus.mp3 b/src/assets/amongus.mp3
new file mode 100644
index 0000000..3f088df
--- /dev/null
+++ b/src/assets/amongus.mp3
diff --git a/src/assets/background.png b/src/assets/background.png
new file mode 100644
index 0000000..aea5eb0
--- /dev/null
+++ b/src/assets/background.png
diff --git a/src/assets/bill.png b/src/assets/bill.png
new file mode 100644
index 0000000..1dbf190
--- /dev/null
+++ b/src/assets/bill.png
diff --git a/src/components/DollarEffect.vue b/src/components/DollarEffect.vue
new file mode 100644
index 0000000..a7c35b2
--- /dev/null
+++ b/src/components/DollarEffect.vue
@@ -0,0 +1,62 @@
+<template>
+ <img v-show='activated' src="../assets/bill.png" class="bill" ref="bill">
+</template>
+
+<script>
+export default {
+ data() {
+	return {
+	 x: 0,
+	 y: 0,
+	 startx: 0,
+	 starty: 0,
+	 targetx: 100,
+	 targety: 100,
+	 activated: false
+	}
+ },
+ methods: {
+	reset(x,y) {
+	 if(this.activated){
+		return 'activated'
+	 }
+	 this.x = parseInt(x)
+	 this.y = parseInt(y)
+	 this.startx = x + 'px'
+	 this.starty = y + 'px'
+	 this.targetx = (this.x + Math.floor(Math.random() * 100) - 50) + 'px'
+	 this.targety = (this.y + Math.floor(Math.random() * 100) - 50) + 'px'
+	 this.activated = true
+	 this.timeout = setTimeout(() => {
+		this.activated = false
+	 }, (1.2 * 1000))
+	 //this.$refs.bill.style.animation = 'none'
+	 //this.$refs.bill.offsetHeight /* trigger reflow */
+	 //this.$refs.bill.style.animation = null
+	},
+ }
+}
+</script>
+
+<style scoped>
+img {
+ user-select: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -webkit-touch-callout: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ width: 100px;
+ height: 100px;
+ animation-name: bill;
+ animation-duration: 1.3s;
+ animation-iteration-count: infinite;
+ position: absolute
+
+}
+@keyframes bill {
+ 0%   {opacity: 0; left: v-bind('startx'); top: v-bind('starty');}
+ 1%   {opacity: 1; left: v-bind('startx'); top: v-bind('starty');}
+ 100% {opacity: 0; left: v-bind('targetx'); top: v-bind('targety');}
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 7fd2dc5..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>