Test

by enbette

HTML

<button id='Blue'>blue</button>
<button id='White'>white</button>
<button id='Green'>green</button>
<button id='Brown'>brown</button>

JavaScript

let iceCone = {
  position:{x:0,y:0},
  stack:[]
}

let ice = {
  color :'White'
}

document.getElementById('Blue').addEventListener('click',addIce)
document.getElementById('White').addEventListener('click',addIce)

document.getElementById('Green').addEventListener('pointerdown',pourGreen)
document.getElementById('Green').addEventListener('pointerup',unpour)
document.getElementById('Green').addEventListener('pointercancel',unpour)




function addIce(e){
  iceCone.stack.push(this.id)
  console.log(iceCone)
  
}

let greenPercent = 0
let totalGreen = 10000
let greenPourInterval

let orangePercent = 0
let totalOrange = 10000
let orangePourInterval

function pourGreen(e){
  greenPourInterval = setInterval(pouring,1)
}


function unpour(){
  console.log(greenPercent, totalGreen)
  clearInterval(greenPourInterval)
  clearInterval(orangePourInterval)
}

function pouring(){
  greenPercent += 1
  totalGreen -= 1
  
}