starting big rework

2 files changed, 81 insertions, 57 deletions

diff --git a/src/App.vue b/src/App.vue
index a768a4c..7e241b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
  <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')">
+	<div id="bigamogus" ref="bigamogus" title="The Big Amogus" @click="speedUpDance($event)">
 
 	 <Dollar ref='bill0'/>
 	 <Dollar ref='bill1'/>
@@ -17,13 +17,19 @@
 	 <Dollar ref='bill11'/>
 	</div>
 	<div class="options_container">
-	 <button class='button' @click="speedUpAmogus('yellow')" :disabled="!enoughMoney">
+	 <button class='button' @click="speedUpAmogus()" :disabled="!enoughMoney">
 		<div>Speed it up Amogus!</div>
-		<div>Cost: {{ amogus_twerk_speedup_cost }}$</div>
+		<div>Cost: {{ 0 }}$</div>
+	 </button>
+	 <button class='button' @click="speedUpAmogus()" :disabled="!enoughMoney">
+		<div>Speed it up Amogus!</div>
+		<div>Cost: {{ 0 }}$</div>
 	 </button>
 	 <br>
-	 <p>Twerk Speed: {{ yellowAmongusSpeedDisplay }}</p>
-	 <p>Amogus' Ass Thrown In a Circle {{ twerks }} Times</p>
+	 <p>Dance Speed: {{ amogusSpeedRounded }}</p>
+	 <p>Mouse Motivation Power: {{ amogus_motivate }}</p>
+	 <p>Motivator: {{ amogus_motivate }}</p>
+	 <p>Dance Moves Completed: <b>{{ amogus_dance_routines }} Times</b></p>
 	 <p>Hard Earned Cash: {{ money }}$</p>
 	</div>
  </div>
@@ -45,29 +51,60 @@ export default {
  },
  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
+		amogus_min: 1.0,
+		amogus_max: 2.0,
+		amogus_speed: 0.0,
+		amogus_decay: 0.995,
+		amogus_motivate: 0.10,
+		amogus_width: 298,
+		amogus_height: 298,
+		amogus_frame: 0,
+		amogus_frame_count: 65,
+		amogus_frame_buffer: 0,
+		amogus_dance_routines: 0,
+		money: 1,
+		x: 0,
+		y: 0,
+		musicPlaying: false
 	}
  },
  methods: {
 	musicPlay() {
 	 if(!this.musicPlaying){
-		this.musicPlaying = true
+		this.musicPlaying = true;
 		this.$refs.music.play();
 	 }
 	},
 	amogusClipPlay(){
 	 this.$refs.amogusaudio.play();
 	},
+	speedUpDance(e){
+		this.amogus_speed += this.amogus_motivate;
+	},
+	amogusFrameAdvance(){
+		this.amogus_frame += 1;
+		while(this.amogus_frame > this.amogus_frame_count){
+			this.amogus_dance_routines += 1;
+			this.amogus_frame -= this.amogus_frame_count;
+	 	for(let dollar in [0,1,2,3,4,5,6,7,8,9,10,11]){
+			var among = this.$refs["bigamogus"];
+			let temp = this.$refs['bill' + (parseInt(dollar) + 1)].reset(
+				Math.random() * (this.amogus_height - 100) + (among.offsetLeft - 25),
+				Math.random() * (this.amogus_width - 100) + (among.offsetTop - 25)
+				)
+			if(temp != 'activated'){
+			 break
+			}
+		}
+		}
+	},
+	amogusResolveBuffer(){
+	 while(this.amogus_frame_buffer >= 1.0){
+		this.amogus_frame_buffer -= 1.0;
+		this.amogusFrameAdvance();
+	 }
+	}
+	/*
 	resetAmogus(e, element){
 	 this.twerks += 1
 	 this.money += Math.floor((Math.random() * 3) + 1);
@@ -76,46 +113,34 @@ export default {
 		if(temp != 'activated'){
 		 break
 		}
-	 }
-	 this.$refs[element].style.animation = 'none'
-	 this.$refs[element].offsetHeight /* trigger reflow */
-	 this.$refs[element].style.animation = null
+	 }*/
+	 //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
-	 }
-	}
-
- },
+		  mounted(){
+			var vm = this;
+			this.interval = setInterval(function () {
+			  if(vm.amogus_speed > vm.amogus_min) {
+				vm.amogus_speed *= vm.amogus_decay
+			  }
+			  vm.amogus_frame_buffer += (vm.amogus_speed * 0.1);
+				vm.amogusResolveBuffer();
+				//console.log("buffr: " + vm.amogus_frame_buffer + "\nspeed: " + vm.amogus_speed);
+			  }, (1/60) * 1000);
+		  },
  computed: {
-	yellowAmogusSpeed(){
-	 return (this.yellow_amogus_speed + "s")
+	amogusSpeedSeconds(){
+	 return (this.amogusSpeedRounded + "s")
 	},
-	yellowAmongusSpeedDisplay(){
-	 return ((1/this.yellow_amogus_speed).toFixed(2))
+	amogusSpeedRounded(){
+	 return ((this.amogus_speed).toFixed(2))
 	},
 	enoughMoney(){
 	 return (this.amogus_twerk_speedup_cost <= this.money)
+	},
+	amogusFramePosition(){
+	 return ((this.amogus_frame * this.amogus_width) + 'px 0px')
 	}
  }
 
@@ -161,11 +186,10 @@ html, body {
  border-radius: 25px;
 }
 #bigamogus {
- background-image: url('./assets/amogus.png');
- width: 384px;
- height: 384px;
- animation: anim v-bind('yellowAmogusSpeed') steps(6) 1;
- border: 20px;
+ background: url('./assets/amongusdance.png') v-bind('amogusFramePosition');
+ width: 298px; 
+ height: 298px;
+ border: 0px;
  margin: auto;
  user-select: none;
  -webkit-user-select: none;
@@ -175,7 +199,7 @@ html, body {
  -o-user-select: none;
 }
 @keyframes anim {
- to { background-position: -2304px; }
+ to { background-position: -19370px; }
 }
 
 .button {
diff --git a/src/assets/amongusdance.png b/src/assets/amongusdance.png
new file mode 100644
index 0000000..5e76138
--- /dev/null
+++ b/src/assets/amongusdance.png