typing game map

import Ember from 'ember';
import createComponentAtom from 'ember-mobiledoc-editor/utils/create-component-atom';
import Mobiledoc from 'mobiledoc-kit';

const EMOJI_MAP = {
  cat: '🐱',
  dog: '🐶',
  poo: '💩',
  key: '🔑',
  moon: '🌜',
  sun: '☀️',
  book: '📗',
  pig: '🐷',
  bee: '🐝',
  cow: '🐄',
  car: '🚗',
  happy: '😀',
  sad: '☹️',
  wink: '😜',
  eyes: '👀',
  ant: '🐜',
  cake: '🍰',
  baby: '👶🏼',
  cheese: '🧀',
  rainbow: '🌈',
  crown: '👑',
  shoe: '👟',
  frog: '🐸',
  bag: '👜',
  crab: '🦀',
  christmas: '🎄',
  tree: '🌲',
  web: '🕸',
  spider: '🕷',
  100: '💯',
  pumpkin: '🎃',
  sick: '😷',
  flower: '🌸',
  sunflower: '🌻',
  bread: '🍞',
  burger: '🍔',
  chips: '🍟',
  marble: '🔮',
  icecream: '🍧',
  apple: '🍏',
  grape: '🍇',
  coffee: '☕️',
  pow: '💥'
};
const EMOJI_KEYS = Object.keys(EMOJI_MAP);
const EMOJI_REPLACEMENT_REGEX = new RegExp(`(${EMOJI_KEYS.join('|')})$`, 'i');

const PICTURE_MAP = {
  intercom: [
    'https://marketing.intercomassets.com/assets/press/intercom-symbol-inverted-2x-f4e929e59c81795a5206446abb28fa4785e12f73f760be873facea3e9c60a9e7.jpg'
  ],
  everest: [
    'http://vignette2.wikia.nocookie.net/paw-patrol/images/f/fc/Everest_Action_Pose.png/revision/latest?cb=20150109144127'
  ],
  ryder: [
    'http://vignette3.wikia.nocookie.net/paw-patrol/images/d/d4/Ryder_der.png/revision/latest?cb=20151230083924',
    'http://vignette4.wikia.nocookie.net/paw-patrol/images/2/20/Paw-patrol-ryder.jpg/revision/latest?cb=20131113152844',
    'http://vignette3.wikia.nocookie.net/paw-patrol-relationship/images/2/24/PAW_Patrol_Ryder.png/revision/latest?cb=20160130162418',
    'http://vignette3.wikia.nocookie.net/paw-patrol/images/6/6f/Bsk29.png/revision/latest?cb=20141120195604'
  ],
  marshal: [
    'http://pawpatrol.com/img/pawpatrol/marshall.png'
  ],
  zuma: [
    'http://vignette2.wikia.nocookie.net/paw-patrol/images/5/59/Zuma_PNG.png/revision/latest?cb=20150520174037'
  ],
  chase: [
    'http://pawpatrol.com/img/bio/chase.png'
  ],
  rubble: [
    'http://pawpatrol.com/img/pawpatrol/rubble.png'
  ],
  sky: [
    'http://pawpatrol.com/img/bio/skye.png',
    'http://pawpatrol.com/img/bio/gallery-skye6.jpg'
  ],
  pups: [
    'https://www.kimmelcenter.org/globalassets/pdp/201617/kimmel-center-presents/paw-patrol/paw_patrol_910x520.jpg'
  ],
  'captain turbot': [
    'http://vignette3.wikia.nocookie.net/paw-patrol/images/c/c4/C128a6e6aa83cef9c3cb664a9d2d99f8.png/revision/latest?cb=20140318011400',
    "http://vignette2.wikia.nocookie.net/paw-patrol/images/d/d3/PAW_Patrol_Pups_in_a_Fix_Cap'n_Turbot_Captain.png/revision/latest?cb=20160404215601"
  ],
  'mayor goodway': [
    'http://images.nickjr.com/nickjr/promos/video/paw-patrol/silly-short-mayor-goodway-supercut-16x9.jpg?quality=0.60'
  ],
  abcdefghijklmnopqrstuvwxyz: [
    "https://lh3.googleusercontent.com/WwCLpmWnRdmeH-AFI08w25BE1H1uIPX-LzmE88EDiAbzUb0R7MVX84A5QZ2Zt49Sq4jOD35KFkZTlP1CRLA_AJOihpxHdO-anf8Oh38FMQmnXBB_Byor2spNUC3k1Zs6Ra__ID4YlpSx5YgcbxIC-35y_GgOjQyNJbhbGnAQdQSFx879-Q0omFoaXdpio1FDKmYf2Wly6oSIxUjXauJlL-t_Z4_9KY2gyF2N0S4NrRR2tQx2KwsNIcCxeQQImo-KWqzOJtCUqaNb852fbsHPzfsgVtGZeW1IBPkth9ehj2t8xg4yjHUaps-8CIpS4LEpzIoMi1t0hgAIxxLtifKScgoy05p7MEyAruoPELEUYkqBgLsek1lFPvxVSSAXxx55jbJ8N4dGJMtj74oPw0p6ozze6AEwnoTAh2Rcq4cj8HiqEYZ5gJJVsooIeXjWRc8k77lfaMLDcWUimelZy7Hfc5QxQG4yYbSHSP9HkM2D4jGWQzDlnc0D-K71Kz0qKin6ZfGIA8w9oDPrpoAeWkqVijXaW_p5x98a3b0MCBcF_wSE0lpwMBmQVcyE35-paCjfMfjGSQCqfxXw8fxkRieYgZ55FOcaVuGWN1jEn2hxc7q-hYvIIw=w279-h210-no"
  ],
  plaster: [
    "http://plaster.ru/images/plaster%201%20polymer.jpg"
  ],
  eating: [
    "https://lh3.googleusercontent.com/B-LI91tLNGw0iqn4r5uA2Ya7x_6EFf7S81WSQOmf4CPKEiVCCqmr2Dc4ijZAUdxZh2rxYZAW0Ivn5WfKNUtS5yvMQQmRB3YlQ-5lIlvSdGUbsiZXkcPD0A_bEgbSG4IcOtig8_LheQAtQ56dEhfb0YgMnFUPiTCVI4Y8onR19MiK_ThWDdTx8swaZe1UcgKhzou9lJP4hepb3VJF5_RRdFII3bAgLQL8bpzy0Cx8iLjYhhdhAA5-5Zr0F9PLNmyFh42hgqSc-w9KSknETgcWht2J2q25oRGjye9U1yX_fwtU4CnQCAfrNW2wK99CiQCdO7yNQpgMG5BDTbexpNdjQb3ryH1upaPiUzqcuQH5LFkyETobRgZGdmS2CfOBM_GG-DAiJ_K9Z-TCYoYV0anqa08EwkJOJptyLhaRcC8EO3N5tMnDY2ka5aM0ywWVRiABYxjKQEq7YuhL0a59dRb_MMmZ7zbLs0psQM-bf9sq4FBvk9n8Awqil1Y0cqbg7khDmouwk5wVLslz1Y6k4nLJv_oZVB37M2G3PW3KgRBunIO1Rsvf5sOqOoLzW7KpE4dnXMBhcyDGuJ3hQQcUypRmU8eZIAEQp1H2US7Y76PxBmmvghiD4Q=w448-h336-no"
  ],
  shopping: [
    "https://lh3.googleusercontent.com/6O192D6oGDYGmcS0hBL_rE0jBQtdLzrKRVLkeOqJspWhZ6e-ejd0rQ4-POv97xTnCnuuHKf2FoQiCQJJoIP8vNabT0QMeGj-2ppHmlk6jT_xTQ_inQPy1WMemcURqwPDGVzVulAJIqgZhMRRNorB_Fkb6eefP3rDkX97Veo9T7chUxstQ739yes1OQ6FNPpQCNWsKDz_qCs8q3D7eeCP1ed4m4bu_nbdIvwUirXsTH6TD_HiAX8LfoO_ZlC9fL4ZCdbjhvSGJ7nurVfNh0pS6XvtJwRQhNQDqHdKG_q-S_2s6yCpxLFMOS465eH8u2gTWwP0ebxE9_cN7uFS9dPu_8wNjWbgUBGx2nPyS6SAChKGUOPgYB1pMUj5iST_FgWprXr_SCov29WYxenCXnJ2d36kdowxvjXP2iitr-yugN9IgBErRKsShW4VNVFOas9nsYutcQa5y48Rc6REhuTBQJxlIzCNoMg1bU9YBND6cdeoc4i9OJ7Gig2OVV_gWsRS6J7vYQvJkTuD8tCHPJfrbI3TNW2FqVmxnsN3kwrIGbcWP-aae8yQL6vAmHLIVjdkfVFz2jfGnjDNrvt9jTEsosJMcFs00rMcDpzn9xEms2GNLOrJlw=w448-h336-no"
  ],

};
const PICTURE_KEYS = Object.keys(PICTURE_MAP);
const PICTURE_REPLACEMENT_REGEX = new RegExp(`(${PICTURE_KEYS.join('|')})$`, 'i');

const COLOR_MAP = {
  'A': {
    name: 'Aqua',
    backgroundColor: 'aqua',
    fontColor: 'blue'
  },
  'B': {
    name: 'Blue',
    backgroundColor: 'blue',
    fontColor: 'white'
  },
  'blue': {
    name: 'Blue',
    backgroundColor: 'blue',
    fontColor: 'white'
  },
  'C': {
    name: 'Chocolate',
    backgroundColor: 'chocolate',
    fontColor: 'purple'
  },
  'D': {
    name: 'Deep Pink',
    backgroundColor: 'deeppink',
    fontColor: 'yellow'
  },
  'E': {
    name: 'Black',
    backgroundColor: 'black',
    fontColor: '#eee'
  },
  'F': {
    name: 'Fire Brick',
    backgroundColor: 'firebrick',
    fontColor: 'yellow'
  },
  'G': {
    name: 'Green',
    backgroundColor: 'green',
    fontColor: 'yellow'
  },
  'H': {
    name: 'Honey Dew',
    backgroundColor: 'honeydew',
    fontColor: 'black'
  },
  'I': {
    name: 'Indigo',
    backgroundColor: 'indigo',
    fontColor: 'white'
  },
  'J': {
    name: 'Indian Red',
    backgroundColor: 'INDIANRED',
    fontColor: 'white'
  },
  'K': {
    name: 'Khaki',
    backgroundColor: 'khaki',
    fontColor: 'black'
  },
  'L': {
    name: 'Lawn Green',
    backgroundColor: 'lawngreen',
    fontColor: 'blue'
  },
  'M': {
    name: 'Misty Rose',
    backgroundColor: 'mistyrose',
    fontColor: 'blue'
  },
  'N': {
    name: 'Navy',
    backgroundColor: 'navy',
    fontColor: 'lawngreen'
  },
  'O': {
    name: 'Olive',
    backgroundColor: 'olive',
    fontColor: 'yellow'
  },
  'P': {
    name: 'Pink',
    backgroundColor: '#e49fab',
    fontColor: 'purple'
  },
  'Q': {
    name: 'Royal Blue',
    backgroundColor: 'royalblue',
    fontColor: 'yellow'
  },
  'R': {
    name: 'Red',
    backgroundColor: 'red',
    fontColor: 'white'
  },

  'Y': {
    name: 'Yellow',
    backgroundColor: 'yellow',
    fontColor: 'purple'
  },
  'Z': {
    name: 'YellowGreen',
    backgroundColor: 'yellowgreen',
    fontColor: 'green'
  },
};
const COLOR_KEYS = Object.keys(COLOR_MAP);
const COLOR_REPLACEMENT_REGEX = new RegExp(`(${COLOR_KEYS.join('|')})$`);

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.$('.mobiledoc-editor__editor').focus();
  },

  atoms: Ember.computed(function() {
    return [
      createComponentAtom('demo-atom'),
      createComponentAtom('picture-atom')
    ];
  }),

  actions: {
    didCreateEditor(editor) {
      this._editor = editor;

      editor.didRender(() => {
        //TODO: only if we're at the end of the document
        window.scrollTo(0, document.body.scrollHeight);
      });

      editor.onTextInput({
        match: EMOJI_REPLACEMENT_REGEX,
        run(editor, match) {
          let matchText = match[0];
          let emoji = EMOJI_MAP[matchText.toLowerCase()];

          editor.run(postEditor => {
            let atom = postEditor.builder.createAtom("demo-atom", emoji, { id: 42 });
            postEditor.insertMarkers(editor.range.head, [atom]);
          });

        }
      });

      editor.onTextInput({
        match: PICTURE_REPLACEMENT_REGEX,
        run(editor, match) {
          let matchText = match[0];
          let pictureUrls = PICTURE_MAP[matchText.toLowerCase()];
          let pictureUrl = pictureUrls[Math.floor(Math.random() * pictureUrls.length)];

          editor.run(postEditor => {
            let atom = postEditor.builder.createAtom("picture-atom", pictureUrl, { id: 42 });

            let section = editor.builder.createMarkupSection('p');
            postEditor.insertMarkers(editor.range.head, [atom]);
          });

          window.scrollTo(0,document.body.scrollHeight);
        }
      });

      editor.onTextInput({
        match: COLOR_REPLACEMENT_REGEX,
        run(editor, match) {
          let matchText = match[0];
          let color = COLOR_MAP[matchText];

          document.body.style.backgroundColor = color.backgroundColor;
          // document.body.style.color = color.fontColor;
          Ember.$('.mobiledoc-editor__editor')[0].style.color = color.fontColor;
          window.scrollTo(0,document.body.scrollHeight);
        }
      });

      editor.onTextInput({
        match: /:$/,
        run(editor) {
          let randomKey = EMOJI_KEYS[Math.floor(Math.random() * EMOJI_KEYS.length)];
          let emoji = EMOJI_MAP[randomKey];
          editor.run(postEditor => {
            let atom = postEditor.builder.createAtom("demo-atom", `${emoji}`, { id: 42 });
            postEditor.insertMarkers(editor.range.head, [atom]);
          });
          window.scrollTo(0,document.body.scrollHeight);
        }
      });
    }
  }
});