From f202a0282e465ac8f5702dd7acfc7e03837a87e4 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Wed, 6 Jul 2016 11:25:13 -0400
Subject: [PATCH] Simplify emojis `background-size` and `background-position`

---
 src/components/emoji.js | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/components/emoji.js b/src/components/emoji.js
index 0ece18c..c37c7f9 100644
--- a/src/components/emoji.js
+++ b/src/components/emoji.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import data from '../../data'
 
-const SHEET_SIZE = 2624
-const EMOJI_SIZE = 64
+const SHEET_COLUMNS = 41
 const SKINS = [
   '1F3FA', '1F3FB', '1F3FC',
   '1F3FD', '1F3FE', '1F3FF',
@@ -54,20 +53,11 @@ export default class Emoji extends React.Component {
     return emojiData
   }
 
-  getSheetSize() {
-    var { size } = this.props,
-        sheetSize = SHEET_SIZE * size / EMOJI_SIZE
-
-    return `${sheetSize}px ${sheetSize}px`
-  }
-
   getPosition(emojiData) {
-    var { size } = this.props,
-        { sheet_x, sheet_y } = emojiData,
-        x = sheet_x * size,
-        y = sheet_y * size
+    var { sheet_x, sheet_y } = emojiData,
+        multiply = 100 / (SHEET_COLUMNS - 1)
 
-    return `-${x}px -${y}px`
+    return `${multiply * sheet_x}% ${multiply * sheet_y}%`
   }
 
   getNative(emojiData) {
@@ -117,7 +107,7 @@ export default class Emoji extends React.Component {
         height: size,
         display: 'inline-block',
         backgroundImage: `url(${sheetURL})`,
-        backgroundSize: this.getSheetSize(),
+        backgroundSize: `${100 * SHEET_COLUMNS}%`,
         backgroundPosition: this.getPosition(emojiData),
       }}>
       </span>