Hampster example (discord)

components.hampster-image-manager.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import { equal } from '@ember/object/computed';

export const HAMPSTER_IMAGES = Object.freeze([
  'https://emberjs.com/images/brand/ember_Tomster-Lockup-b368131eb80ecbcbaf2d23fd4cb27295.png',
  'https://emberjs.com/images/tomsters/chicago-zoey-ccedddece3b2142d4113757829c652aa.png'
]);

export default Component.extend({
  tagName: '',
  imageIndex: 0,
  
  currentImage: computed('imageIndex', function() {
    return HAMPSTER_IMAGES[this.imageIndex];
  }),
  
  hasNoMore: equal('imageIndex', HAMPSTER_IMAGES.length - 1),
  
  actions: {
    nextImage() {
      if (this.hasNoMore) { return; }
      this.incrementProperty('imageIndex');
    },
    
    prevImage() {
      if (this.imageIndex === 0) { return; }
      this.decrementProperty('imageIndex');
    }
  }
});

controllers.application.js

import Controller from '@ember/controller';

// Codepen example does not provide context as to why this is in
// JavaScript and not template
const STATIC_MESSAGE = 'Vue is great but i fall in love with this little  💜  hamster!';

export default Controller.extend({
  message: STATIC_MESSAGE,
  
});

styles.app.css

body {
  background-color: #fafafa;
}

img {
  width: 15%;
}

.container {
  text-align: center;
  padding-top: 45px;
}

h2 {
  font-weight: bold;
}

templates.application.hbs

<div id="app" class="container">

  <HampsterImageManager as |manager|>
  
    <div class="row">
  
      <div class="column">
    
        <img src={{manager.currentImage}}>
      
        <h2>{{this.message}}</h2>
      
        <button
          disabled={{manager.hasNoMore}}
          {{action manager.nextImage}}
        >
          {{#if manager.hasNoMore}}
            No more hamsters
          {{else}}
            Change hamster
          {{/if}}
        </button>
      
      </div>
    
    </div>
    
  </HampsterImageManager>
 
</div>

templates.components.hampster-image-manager.hbs

{{yield (hash
  imageIndex=this.imageIndex
  currentImage=this.currentImage
  hasNoMore=this.hasNoMore
  nextImage=(action "nextImage")
  prevImage=(action "prevImage")
)}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}