ADDED random card to index page.

UPDATED thumbnail images to optimize appearance. FIXED missing thumbnail images for demo cards. DELETED mistakenly generated thumbnail images. UPDATED page layouts. ADDED links to full size demo cards. ADDED link to demo set. FIXED header link. FIXED credit for Arena of Eternity. UPDATED preview images to be links to card info. UPDATED logging to try and catch useful info. ADDED "tap" verbiage. UPDATED to v0.2.0.
2018-01-27 09:28:09 -05:00
parent 0f605db8fa
commit 4e8cf1bf95
209 changed files with 223 additions and 89 deletions
--- a/views/partials/card.ejs
+++ b/views/partials/card.ejs
@@ -1,18 +1,26 @@
 <% if (typeof card !== 'undefined') {
  var release_map = {
    's01c': '<a href="https://mythicwarsgame.com/clash.html" class="setLink">Clash of the Gods</a>',
-    's01n': '<a href="https://mythicwarsgame.com/clash.html" class="setLink">Nemesis</a>',
-    's01p': '<a href="https://mythicwarsgame.com/clash.html" class="setLink">Promos (Set 01)</a>',
-    's01r': '<a href="https://mythicwarsgame.com/clash.html" class="setLink">Cthulhu Rises</a>',
+    's01d': '<a href="https://mythicwarsgame.com/demo.html" class="setLink">Demo (Set 01)</a>',
+    's01n': '<a href="https://mythicwarsgame.com/nemesis.html" class="setLink">Nemesis</a>',
+    's01p': 'Promos (Set 01)',
+    's01r': '<a href="https://mythicwarsgame.com/cthulhu.html" class="setLink">Cthulhu Rises</a>',

  };
 %>
 <div class="card clearfix">
  <div class="card-info">
+    <% if (card.num.toLowerCase().indexOf('d') > -1 ) { %>
+      <a href="https://mythicwarsgame.com/images/cards/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
+        class="card-imageLink" title="Tap or click for a full-size image of <%= card.name %>'s card!">
+    <% } %>
    <img
      src="/images/thumb/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
      alt="Card image for <%=card.name%>"
      class="card-image" />
+    <% if (card.num.toLowerCase().indexOf('d') > -1 ) { %>
+      </a>
+    <% } %>
    <dl class="card-data dataBox">
      <dt>Name</dt>
      <dd><%= card.name %></dd>
@@ -114,6 +122,9 @@
          <% if (card.wp && card.wp !== '') { %>
            <a href='<%-card.wp%>' title="Wikipedia link for <%=card.name%>">Wikipedia</a>
          <% } %>
+          <% if (card.wp && card.wp !== '' && card.lc && card.lc !== '') { %>
+            &middot;
+          <% } %>
          <% if (card.lc && card.lc !== '') { %>
            <a href='<%-card.lc%>' title="Lovecraft Wiki link for <%=card.name%>">Lovecraft Wiki</a>
          <% } %>
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,25 +1,26 @@
-
-<nav class="js-navMenu navMenu clearfix" id="navMenu">
-  <ul>
-    <li class="navMenu-logo">
-      <a href="https://mythicwarsgame.com/" class="logoBtn navMenu-logoBtn">
-        <img src="/images/mw-logo-wide-300x70.png" class="navMenu-logoImg" />
-      </a>
-    </li>
-    <li class="navMenu-search">
-      <form class="navMenu-search-form" id="searchForm" method="get" action="/search">
-        <fieldset role="search" class="navMenu-search-fieldset">
-          <input id="searchQuery" class="navMenu-search-box" type="search" placeholder="Card Quick Search" value="" name="search_for" title="" maxlength="50">
-          <input class="navMenu-search-btn" type="submit" value="Search">
-          <input type="hidden" name="search_in" value="name" />
-          <input type="hidden" name="search_in" value="ability" />
-        </fieldset>
-      </form>
-    </li>
-    <li class="navMenu-title">
-      <a href="https://mythicwarsgame.com/"><h1>The Codex Mythica</h1></a>
-    </li>
-  </ul>
-</nav>
+<header class="header">
+  <nav class="js-navMenu navMenu clearfix" id="navMenu">
+    <ul>
+      <li class="navMenu-logo">
+        <a href="https://mythicwarsgame.com/" class="logoBtn navMenu-logoBtn">
+          <img src="/images/mw-logo-wide-300x70.png" class="navMenu-logoImg" />
+        </a>
+      </li>
+      <li class="navMenu-search">
+        <form class="navMenu-search-form" id="searchForm" method="get" action="/search">
+          <fieldset role="search" class="navMenu-search-fieldset">
+            <input id="searchQuery" class="navMenu-search-box" type="search" placeholder="Card Quick Search" value="" name="search_for" title="Card Quick Search" maxlength="50">
+            <input class="navMenu-search-btn" type="submit" value="Search">
+            <input type="hidden" name="search_in" value="name" />
+            <input type="hidden" name="search_in" value="ability" />
+          </fieldset>
+        </form>
+      </li>
+      <li class="navMenu-title">
+        <a href="/" class="navMenu-title-link"><h1 class="navMenu-title-header">The Codex Mythica</h1></a>
+      </li>
+    </ul>
+  </nav>
+</header>

 <h2><%=title ? title : ''%></h2>
--- a/views/partials/preview.ejs
+++ b/views/partials/preview.ejs
@@ -1,18 +1,22 @@
 <% if (card) { %>
 <div class="preview">
  <div class="preview-info">
-    <img
-      src="/images/thumb/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
-      alt="Card image for <%=card.name%>"
-      class="preview-image" />
+    <div>
+      <a href="/cards/<%= card.num.toLowerCase() %>" class="preview-imageLink" title="Tap or click to learn about <%= card.name %>'s card!">
+        <img
+          src="/images/thumb/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
+          alt="Card image for <%=card.name%>"
+          class="preview-image" />
+      </a>
+    </div>
    <div>

-    <a href="/cards/<%= card.num.toLowerCase() %>"><%= card.name %>
-      <% if (card.pantheon !== '') { %>
-        <img class="preview-pantheon" src="/images/pantheons/<%= card.pantheon.toLowerCase().replace(' ','-') %>.png"
-          alt="<%= card.pantheon %>" />
-      <% } %>
-        <%= card.num.toUpperCase() %></a><br />
+      <a href="/cards/<%= card.num.toLowerCase() %>"><%= card.name %>
+        <% if (card.pantheon !== '') { %>
+          <img class="preview-pantheon" src="/images/pantheons/<%= card.pantheon.toLowerCase().replace(' ','-') %>.png"
+            alt="<%= card.pantheon %>" />
+        <% } %>
+          <%= card.num.toUpperCase() %></a><br />
      <% if (card.race != '') { %>
        <%= card.race %>
      <% } %>
--- a/views/partials/random_card.ejs
+++ b/views/partials/random_card.ejs
@@ -0,0 +1,21 @@
+<% if (typeof card !== 'undefined') { %>
+  <a href="/cards/<%= card.num.toLowerCase() %>"
+    class="card-randomLink" title="Tap or click to learn about <%= card.name %>'s card!">
+    <figure>
+      <h3>Random Card: <%=card.name%></h3>
+      <img
+        src="/images/thumb/<%= card.num.toLowerCase() %>_<%= card.name_ang %>.jpg"
+        alt="Card image for <%=card.name%>"
+        class="card-image" />
+      <figcaption>
+        <span class="card-randomLink-wrapper">
+          Tap or click to learn more
+        </span>
+      </figcaption>
+    </figure>
+  </a>
+  <p class="card-randomWrapper">
+    or
+    <a href="/">&#x21bb; reload the page for a different card.</a>
+  </p>
+<% } %>
--- a/views/partials/search_form.ejs
+++ b/views/partials/search_form.ejs
@@ -10,7 +10,7 @@
          <label for='search_for'>Search for</label>
          <ul>
            <li>
-              <input type='text' value='<%= query && query.search_for ? query.search_for : "" %>' name='search_for' />
+              <input type='search' title='Text to search for' value='<%= query && query.search_for ? query.search_for : "" %>' name='search_for' />
            </li>
            <li>
              <label for='search_in'>in</label>
@@ -35,7 +35,7 @@
    <fieldset class='searchForm-filterSet'>
      <legend class='js-ulToggle'>Filters</legend>
      <p class="searchForm-filterNotes js-searchForm-filterNotes">
-        Click on a filter name to toggle all of the items in that filter.
+        Tap or click on a filter name to toggle all of the items in that filter.
      </p>
      <ul class='js-ulToggle-list'>
        <li>
@@ -57,6 +57,14 @@
                  class="searchForm-pantheon" src="/images/pantheons/egyptian.png" alt="Egyptian" />
              </label>
            </li>
+            <li>
+              <label>
+                <input type='checkbox' name='pantheons' value='eternal'
+                  <%- query && ((query.pantheons && query.pantheons.indexOf('eternal') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
+                  />&nbsp;<img
+                  class="searchForm-pantheon" src="/images/pantheons/eternal.png" alt="Eternal" />
+              </label>
+            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='greek'
@@ -242,6 +250,13 @@
                  />&nbsp;<strong>Nemesis</strong>
              </label>
            </li>
+            <li>
+              <label>
+                <input type='checkbox' name='releases' value='s01d'
+                  <%- query && ((query.releases && query.releases.indexOf('s01d') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
+                  />&nbsp;Demo
+              </label>
+            </li>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01p'