fungi-renderer.js
/*
  renderSlot is the most important functionality of this renderer - based
  on the slotData provided it changes the visuals within slotDOMElement
  by operating on it's classList.
  The value of the 'animated' argument is not used.
  The function compares the properties of slotData - the current state of the
  slot provided by the game - with the properties of slotDOMElement - previously
  rendered state of the slot. Based on that it decides what to display and how
  to animate the transition. There are 5 possible cases:
  */
renderSlot is the most important functionality of this renderer - based
on the slotData provided it changes the visuals within slotDOMElement
by operating on it's classList.
The value of the 'animated' argument is not used.
The function compares the properties of slotData - the current state of the
slot provided by the game - with the properties of slotDOMElement - previously
rendered state of the slot. Based on that it decides what to display and how
to animate the transition. There are 5 possible cases.
renderSlot is the most important functionality of this renderer - based on the slotData provided it changes the visuals within slotDOMElement by operating on it ' s classList . The value of the ' animated ' argument is not used . The function compares the properties of slotData - the current state of the slot provided by the game - with the properties of slotDOMElement - previously rendered state of the slot . Based on that it decides what to display and how to animate the transition . There are 5 possible cases .
renderSlot (slotData, slotDOMElement, animated) {
    let slotImage = slotDOMElement.children[0]
    if (slotDOMElement.getAttribute('stage') == slotData.stage && slotDOMElement.getAttribute('type') == slotData.type) {
      return
    }
    else if (slotData.type != null && slotData.stage != null) {
      slotDOMElement.setAttribute('type', slotData.type)
      slotDOMElement.setAttribute('stage', slotData.stage)
      slotImage.classList.remove('empty')
      slotImage.classList.add('full')
      slotImage.classList.add('grow')
      slotImage.src = this.getSlotImageSource(slotData.type, slotData.stage)
      slotImage.alt = this.getSlotDescription(slotData.type, slotData.stage)
      setTimeout(() => slotImage.classList.remove('grow'), Renderer.animationTimes.slotAction)
    }
    else if (slotData.type == null && slotData.stage == null && slotImage.className == 'full') {
      slotDOMElement.setAttribute('type', slotData.type)
      slotDOMElement.setAttribute('stage', slotData.stage)
      slotImage.classList.add('disappear')
      setTimeout(() => {
        slotImage.src = ''
        slotImage.alt = 'empty slot'
        slotImage.className = 'empty'
      }, Renderer.animationTimes.slotAction)
    }
    else if (slotData.type == null && slotData.stage == null && slotImage.className == 'empty') {
      return
    }
  }
renderSlot ( slotData , slotDOMElement , animated ) { let slotImage = slotDOMElement . children [ 0 ] if ( slotDOMElement . getAttribute ( 'stage' ) == slotData . stage && slotDOMElement . getAttribute ( 'type' ) == slotData . type ) { return } else if ( slotData . type != null && slotData . stage != null ) { slotDOMElement . setAttribute ( 'type' , slotData . type ) slotDOMElement . setAttribute ( 'stage' , slotData . stage ) slotImage . classList . remove ( 'empty' ) slotImage . classList . add ( 'full' ) slotImage . classList . add ( 'grow' ) slotImage . src = this . getSlotImageSource ( slotData . type , slotData . stage ) slotImage . alt = this . getSlotDescription ( slotData . type , slotData . stage ) setTimeout ( ( ) => slotImage . classList . remove ( 'grow' ) , Renderer . animationTimes . slotAction ) } else if ( slotData . type == null && slotData . stage == null && slotImage . className == 'full' ) { slotDOMElement . setAttribute ( 'type' , slotData . type ) slotDOMElement . setAttribute ( 'stage' , slotData . stage ) slotImage . classList . add ( 'disappear' ) setTimeout ( ( ) => { slotImage . src = '' slotImage . alt = 'empty slot' slotImage . className = 'empty' } , Renderer . animationTimes . slotAction ) } else if ( slotData . type == null && slotData . stage == null && slotImage . className == 'empty' ) { return } }
renderSlot is the most important functionality of this renderer - based
on the slotData provided it changes the visuals within slotDOMElement
by operating on it's classList.
renderSlot is the most important functionality of this renderer - based on the slotData provided it changes the visuals within slotDOMElement by operating on it ' s classList .
// 1) Contents of a full slot do not change -> do nothing // 2) Empty slot becomes full -> animate growth // 3) Full slot stays full -> animate growth // Full slot becomes empty -> animate disappearance // Empty slot stays empty -> do nothing