Homepage (#33)

* Add Competitive_Gwent

* Refactor tooltip code

* Following mouse

* Keep card within viewport

* Added aliases

* Add failing test for accentuated letters

* Add back accents

* Support accents

* Fix error in Chrome

See tyxla/remove-accents#11

* Support GwentDB (don't double tooltips)

* Cleanup

* Wrote content for home page

* Wrote content for home page

* Add frog and fix ADC

* Hyper Gwent logo using Sketch

* Improve R

* Fix kerning

* Add colors 🌈

* Improving homepage style

* Add dandelion and geralt avatars

* Fix walker to skip script and styles tags

* Added emotes :p

* Fix responsiveness

* Another wordplay

* Dark theme

* Grammar

* Add link to issues

* Style issues

* Add gradient background

* Link to compose a message

* Add favicon

* Remove border from logo

* Add back border, but better

* Adjust button colors

* Add warning for non Chrome users. Fix rem

* Fix rem

* Remove list style

* Update manifest.json

* Limit extension to GwentDB decks

* Fix manifest.json

* Extend to GwentDB forums

manifest.json

@@ -1,19 +1,22 @@
 {
+  "manifest_version": 2,
+  "author": "Soreine & Zhouzi",
+  "homepage": "https://soreine.github.io/hyper-gwent",
   "name": "Hyper Gwent",
-  "description": "Enrich pages containing GwentⓇ related content. Card names quick access, terms highlight and more!",
+  "description": "Show tooltips for cards in pages containing GwentⓇ related content.",
   "version": "0.1.0",
-  "manifest_version": 2,
   "icons": {
-    "16": "icon16.png",
-    "48": "icon48.png",
-    "128": "icon128.png"
+    "16": "favicon16x16.png",
+    "48": "favicon48x48.png",
+    "128": "favicon128x128.png"
   },
   "content_scripts": [
     {
       "matches": [
         "https://www.reddit.com/r/gwent/*",
         "https://www.reddit.com/r/Competitive_Gwent/*",
-        "http://www.gwentdb.com/*"
+        "http://www.gwentdb.com/decks/*",
+        "http://www.gwentdb.com/forums/*"
       ],
       "js": [
         "dist/content.js"

package.json

@@ -44,6 +44,7 @@
     "gwent-api-client": "^1.1.0",
     "html-webpack-plugin": "^2.29.0",
     "style-loader": "^0.16.1",
+    "svg-inline-loader": "^0.8.0",
     "url-loader": "^0.5.9",
     "webpack": "^3.0.0"
   }

src/core/__tests__/findAllMatches.js

@@ -151,7 +151,7 @@ test('Should detect plurals', (t) => {
 });
 
 test('Should detect aliases', (t) => {
-  const text = 'Frost, Yen, YenCon, QG and light cavalries';
+  const text = 'Frost, Yen, YenCon, QG and light cavalries and ADC';
   const matchedRanges = findAllMatches(DICTIONARY, text);
   t.deepEqual(matchedRanges, [
     {
@@ -179,6 +179,11 @@ test('Should detect aliases', (t) => {
       entryValue: 'Dun Banner Light Cavalry',
       start: 27,
       end: 42,
+    }, {
+      entryKey: 'adc',
+      entryValue: "Alzur's Double–Cross",
+      start: 47,
+      end: 50,
     },
   ]);
 });

src/core/data/ALIASES.js

@@ -13,7 +13,7 @@ const ALIASES = {
   ],
   Albrich: [],
   Alchemist: [],
-  "Alzur's Double Cross": [
+  "Alzur's Double–Cross": [
     'adc',
   ],
   "Alzur's Thunder": [
@@ -299,7 +299,7 @@ const ALIASES = {
   Ghoul: [],
   'Giant Toad': [
     'toad',
-    // 'frog',
+    'frog',
   ],
   'Grave Hag': [
     // 'gh',

src/extension/content.js

@@ -1,81 +1,3 @@
-/* global window, document */
+import walk from './walk';
 
-import urlParse from 'url-parse';
-import findAllMatches from '../core/findAllMatches';
-import replaceMatches from '../core/replaceMatches';
-import tooltip from '../core/tooltip/index';
-import { CARDS } from '../core/data';
-import DICTIONARY from '../core/dictionary';
-
-const CLASSNAME = 'hyper-gwent-card-highlight';
-const CARD_NAME_ATTRIBUTE = 'data-card-name';
-const GWENTDB_TOOLTIP_ATTR = 'data-tooltip-url';
-const GWENTDB_HOSTNAME = 'www.gwentdb.com';
-
-const HOSTNAME = urlParse(window.location.href).hostname;
-
-const walker = window.document.createTreeWalker(
-  window.document.body,
-  window.NodeFilter.SHOW_ELEMENT + window.NodeFilter.SHOW_TEXT,
-  // Filter out GwentDB tooltips
-  {
-    acceptNode(node) {
-      const TEXT_NODE = 3;
-      const ELEMENT_NODE = 1;
-
-      const {
-        FILTER_ACCEPT,
-        FILTER_REJECT,
-        FILTER_SKIP,
-      } = window.NodeFilter;
-
-      // Non GwentDB
-      if (HOSTNAME !== GWENTDB_HOSTNAME) {
-        return node.nodeType === TEXT_NODE
-        ? FILTER_ACCEPT
-        : FILTER_SKIP;
-      }
-
-      // on GwentDB, we skip existing tooltips
-      if (
-        node.nodeType === ELEMENT_NODE
-        && node.getAttribute(GWENTDB_TOOLTIP_ATTR)
-      ) {
-        // Skip this node and all its children
-        return FILTER_REJECT;
-      } else if (node.nodeType === TEXT_NODE) {
-        return FILTER_ACCEPT;
-      }
-      return FILTER_SKIP;
-    },
-  },
-);
-const nodes = [];
-
-while (walker.nextNode()) {
-  const node = walker.currentNode;
-  const matches = findAllMatches(DICTIONARY, node.nodeValue);
-
-  if (matches.length) {
-    nodes.push({
-      node,
-      matches,
-    });
-  }
-}
-
-nodes.forEach(({ node, matches }) => {
-  const span = window.document.createElement('span');
-  span.innerHTML = replaceMatches(node.nodeValue, matches, match => `<span class="${CLASSNAME}" ${CARD_NAME_ATTRIBUTE}="${match.entryValue}" style="border-bottom: 1px dashed; padding-bottom: 0.1em">${node.nodeValue.slice(match.start, match.end)}</span>`);
-
-  node.parentNode.replaceChild(span, node);
-});
-
-// Add tooltips
-const highlights = document.getElementsByClassName(CLASSNAME);
-for (let i = 0; i < highlights.length; i += 1) {
-  const highlight = highlights[i];
-  const cardName = highlight.getAttribute(CARD_NAME_ATTRIBUTE);
-  const card = CARDS[cardName];
-  tooltip(card, highlight);
-}
+walk();

src/extension/walk.js

@@ -0,0 +1,91 @@
+/* global window, document */
+
+import urlParse from 'url-parse';
+import findAllMatches from '../core/findAllMatches';
+import replaceMatches from '../core/replaceMatches';
+import tooltip from '../core/tooltip/index';
+import { CARDS } from '../core/data';
+import DICTIONARY from '../core/dictionary';
+
+const CLASSNAME = 'hyper-gwent-card-highlight';
+const CARD_NAME_ATTRIBUTE = 'data-card-name';
+const GWENTDB_TOOLTIP_ATTR = 'data-tooltip-url';
+const GWENTDB_HOSTNAME = 'www.gwentdb.com';
+
+// Walk the document and highlight cards
+function walk() {
+  const HOSTNAME = urlParse(window.location.href).hostname;
+
+  const walker = window.document.createTreeWalker(
+    window.document.body,
+    window.NodeFilter.SHOW_ELEMENT + window.NodeFilter.SHOW_TEXT,
+    // Filter out GwentDB tooltips
+    {
+      acceptNode(node) {
+        const TEXT_NODE = 3;
+        const ELEMENT_NODE = 1;
+
+        const {
+          FILTER_ACCEPT,
+          FILTER_REJECT,
+          FILTER_SKIP,
+        } = window.NodeFilter;
+
+        if (node.nodeType === TEXT_NODE) {
+          return FILTER_ACCEPT;
+        } else if (
+          node.nodeType === ELEMENT_NODE
+        ) {
+          // Ignore style and scripts
+          if (node.tagName === 'STYLE'
+          || node.tagName === 'SCRIPT') {
+            return FILTER_REJECT;
+          }
+
+          // on GwentDB, we skip existing tooltips
+          if (HOSTNAME === GWENTDB_HOSTNAME
+            && node.getAttribute(GWENTDB_TOOLTIP_ATTR)) {
+            // Skip this node and all its children
+            return FILTER_REJECT;
+          }
+
+          // Skip the node itself
+          return FILTER_SKIP;
+        }
+        return FILTER_SKIP;
+      },
+    },
+  );
+
+  const nodes = [];
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    const matches = findAllMatches(DICTIONARY, node.nodeValue);
+
+    if (matches.length) {
+      nodes.push({
+        node,
+        matches,
+      });
+    }
+  }
+
+  nodes.forEach(({ node, matches }) => {
+    const span = window.document.createElement('span');
+    span.innerHTML = replaceMatches(node.nodeValue, matches, match => `<span class="${CLASSNAME}" ${CARD_NAME_ATTRIBUTE}="${match.entryValue}" style="border-bottom: 1px dashed; padding-bottom: 0.1em">${node.nodeValue.slice(match.start, match.end)}</span>`);
+
+    node.parentNode.replaceChild(span, node);
+  });
+
+  // Add tooltips
+  const highlights = document.getElementsByClassName(CLASSNAME);
+  for (let i = 0; i < highlights.length; i += 1) {
+    const highlight = highlights[i];
+    const cardName = highlight.getAttribute(CARD_NAME_ATTRIBUTE);
+    const card = CARDS[cardName];
+    tooltip(card, highlight);
+  }
+}
+
+export default walk;

src/website/index.js

@@ -2,31 +2,95 @@
 
 // eslint-disable-next-line no-unused-vars
 import { createElement } from 'jsx-dom';
-import tooltip from '../core/tooltip/index';
+import walk from '../extension/walk';
+import Logo from './logo.svg';
+import style from './website.css';
 
-const target = <span id="target" style="color: blue;">Aeromancy</span>;
-const app = (
+const REDDIT = 'https://www.reddit.com/r/gwent/';
+const GWENTDB = 'http://www.gwentdb.com/';
+const REPO = 'https://github.com/Soreine/hyper-gwent/issues';
+const EXT_LINK = '#';
+
+const notUsingChrome = !window.chrome;
+
+const htmlPage = (
   /* eslint-disable max-len */
-  <div>
-    <p>C makes it easy to shoot yourself in the foot; C++ makes it harder, but when you do, it blows away your whole leg.</p>
-    <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
-    <p>This paragraph contains a card named {target}.</p>
-    <p>It's not a bug - it's an undocumented feature.</p>
-    <p>A good programmer is someone who always looks both ways before crossing a one-way street.</p>
-    <p>The perfect project plan is possible if one first documents a list of all the unknowns.</p>
+  <div className="content">
+    <style type="text/css">{style.toString()}</style>
+
+    <div className="logo">
+      <div className="logo-title"
+        innerHTML={Logo} />
+      <div className="logo-subtitle">{'Chrome extension for GWENT®: The Witcher Card Game'}</div>
+    </div>
+
+    <a className="download-link" href={EXT_LINK}>{'Add to Chrome'}</a>
+
+    {notUsingChrome && <p className="nochrome">
+      This extension is only available for Chrome. The demonstration on this page will not work in other browsers.
+    </p>}
+
+    <div className="description">
+      <p>
+        {'None of us can reasonably remember every possible Gwent card\'s name and effect. Browsing '}
+        <a href={REDDIT}>{'/r/gwent'}</a>
+        {' and reading deck guides on '}
+        <a href={GWENTDB}>{'GwentDB'}</a>
+        {' can be challenging if you don\'t know half the cards people are talking about.'}
+      </p>
+
+      <p>
+        <em>{'You might find this shocking:'}</em>
+        <ul>
+          <li>{'Xmen are not what they used to be.'}</li>
+          <li>{'ADC does not stand for Attack Damage Carry.'}</li>
+          <li>{'There '}<em>{'are'}</em>{' worst names for a dragon than Borkh.'}</li>
+          <li>{'Gwent has nothing to do with cooking frogs, mushrooms, or anything remotely related to french cuisine.'}</li>
+        </ul>
+      </p>
+
+      <div className="emote">
+        <div className="avatar geralt"></div>
+        <div className="emote-text">
+          {'Not bad. Not bad at all.'}
+        </div>
+      </div>
+
+      <p>
+        {'Whether you are new to the game, or you want to keep up with the latest card changes, or you can\'t remember crap, Hyper Gwent is here to save the day. Hyper Gwent automatically detects card names or acronyms in the pages you visit, highlights them and shows a tooltip when hovering them.'}
+      </p>
+
+      <p>
+        {'Feature list:'}
+        <ul>
+          <li>{'Up to date with all existing cards'}</li>
+          <li>{'Support acronyms, plurals, lowercase, and missing accents'}</li>
+          <li>{'Lightweight'}</li>
+        </ul>
+      </p>
+
+      <p>{'What do you think of that, Dandelion?'}</p>
+
+      <div className="emote">
+        <div className="avatar dandelion"></div>
+        <div className="emote-text">
+          {'That… was actually rather impressive. Congratulations.'}
+        </div>
+      </div>
+
+    </div>
+
+    <a className="download-link" href={EXT_LINK}>{'Add to Chrome'}</a>
+
+    <p className="issues">
+      If you find bugs, if you want to submit new acronyms, request a feature, or contribute, post an issue <a href={REPO}>here</a>.
+      <br/>
+      You can also contact <a href="https://www.reddit.com/message/compose/?to=Soreine">/u/Soreine</a>.</p>
   </div>
   /* eslint-enable max-len */
 );
-window.document.body.appendChild(app);
-
-tooltip({
-  name: 'Aeromancy',
-  info: 'Play a Bronze or Silver Weather card from your Deck or Graveyard. Shuffle the others from your Deck back.',
-  variations: [
-    {
-      art: {
-        thumbnailImage: 'https://api.gwentapi.com/media/aeromancy-thumbnail.png',
-      },
-    },
-  ],
-}, target);
+window.document.body.appendChild(htmlPage);
+
+
+// Launch extension within the page
+walk();