projects / heroik.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 80a4858)
Promotional card page, in progress.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Tue, 26 Aug 2014 21:02:35 +0000 (23:02 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Tue, 26 Aug 2014 21:02:35 +0000 (23:02 +0200)
card.png [new file with mode: 0644] patch | blob
cards.html [new file with mode: 0644] patch | blob
female.png [new file with mode: 0644] patch | blob
heroik.css patch | blob | history
male.png [new file with mode: 0644] patch | blob

diff --git a/card.png b/card.png
new file mode 100644 (file)
index 0000000..e02d652
Binary files /dev/null and b/card.png differ
diff --git a/cards.html b/cards.html
new file mode 100644 (file)
index 0000000..a90d87a
--- /dev/null
+++ b/cards.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html manifest=heroik.appcache>
+  <!--
+  The person who associated a work with this deed has dedicated the work
+  to the public domain by waiving all of his or her rights to the work
+  worldwide under copyright law, including all related and neighboring
+  rights, to the extent allowed by law.
+
+  You can copy, modify, distribute and perform the work, even for
+  commercial purposes, all without asking permission.
+
+  See https://creativecommons.org/publicdomain/zero/1.0/ for details.
+  -->
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Hero: IK">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="apple-touch-icon" href="favicon_192.png">
+    <link rel=icon type="image/png" sizes="32x32" href="favicon_32.png">
+    <link rel=icon type="image/png" sizes="192x192" href="favicon_192.png">
+    <link rel=icon type="image/png" sizes="256x256" href="favicon_256.png">
+    <link rel=stylesheet href="heroik.css" type="text/css">
+    <script src="fastclick.js" type="text/javascript"></script>
+    <script src="heroik.js" type="text/javascript"></script>
+    <script src="names.js" type="text/javascript"></script>
+    <script src="scenarios.js" type="text/javascript"></script>
+    <title>Expansion Cards - Hero: Immortal King</title>
+  </head>
+  <body>
+    <div id=statusbar></div>
+    <main>
+    <div style="height: 3em" class="no-print">
+      <a class=button style="float: left; text-align: left"
+         href="heroik.html">
+        ◄ Finished!
+      </a>
+    </div>
+    <h1>Promotional Cards</h1>
+    <div class='card adventurer'>
+      <div class=name>Ph&oelig;nix</div>
+      <div class=type>Warrior</div>
+      <div class=flavor>Ashes to ashes...</div>
+      <div class=code>Promo 4</div>
+      <div class=gender><img src=male.png></div>
+      <div class=abilities>
+        <div class=skill>
+          +2 to combat rolls against dragons. If the adventurers lose
+          their last Courage token, remove a Tenacity token from
+          Phoenix and immediately gain 3 Courage tokens and 1 Mana
+          token.
+        </div>
+        <div class=temporary>
+          +2 to combat rolls for each Tenacity token on Phoenix.
+        </div>
+        <div class=ultimate>
+          Place 1 Tenacity token on Phoenix and 1 Mana on any
+          adventurer.
+        </div>
+      </div>
+    </div>
+    <div class='card adventurer'>
+      <div class=name>Ykesha</div>
+      <div class=type>Warrior</div>
+      <div class=code>Promo 1</div>
+      <div class=gender><img src=male.png></div>
+      <div class=abilities>
+        <div class=skill>
+          At the start of the game, take a weapon from your collection
+          and put it into play face-up for free.
+        </div>
+        <div class=temporary>
+          +X to your combat die, where X is the number of face-up
+          weapons you have.
+        </div>
+        <div class=ultimate>
+          Roll 3d6. For each 6, destroy one face-up dungeon card, and
+          gain 1 Mana token and 1 Courage token.
+        </div>
+      </div>
+    </div>
+
+    <div class='card object'>
+      <div class=name>Conqueror's Sword</div>
+      <div class=type>Weapon - Unique</div>
+      <div class=effect>
+        <div class=cost><span class=r></span><span class=r></span><span class=r></span><span class=g></span><span class=g></span></div>
+        Once per combat, you may re-roll a combat die showing a 1. At
+        the end of each round, if you lost at least one Courage token,
+        you may place a Mana token on an adventurer.
+      </div>
+      <div class=code>Promo 2</div>
+    </main>
+  </body>
+</html>
diff --git a/female.png b/female.png
new file mode 100644 (file)
index 0000000..5e83417
Binary files /dev/null and b/female.png differ
diff --git a/heroik.css b/heroik.css
index d1a9936..6d94165 100644 (file)
--- a/heroik.css
+++ b/heroik.css
@@ -381,6 +381,189 @@ table {
     color: white;
 }
 
     color: white;
 }
 
+.card {
+    display: block;
+
+    position: relative;
+    width: 20em;
+    height: 27.1875em;
+    font-size: 88.275%;
+/*    width: 64mm;
+    height: 87mm;
+    font-size: 9pt;*/
+    margin: auto;
+    background-image: url(card.png);
+    background-size: cover;
+    margin: 0.5em auto;
+}
+
+.card.adventurer .name, .card.adventurer .type {
+    background-color: #4ba12f;
+}
+
+.card.object .name, .card.object .type {
+    background-color: #cdab4c;
+}
+
+.card .name {
+    position: absolute;
+    color: white;
+    text-align: center;
+    width: 76%;
+    border: solid white 0.06em;
+    border-radius: 0.4em;
+    line-height: 1.6em;
+    height: 4.75%;
+    font-size: 0.8em;
+    font-weight: bold;
+    left: 12%;
+    right: 12%;
+    top: 3.65%;
+    text-shadow: 0 0 0.333em black;
+}
+
+.card .type {
+    color: black;
+    letter-spacing: 0.05em;
+    font-weight: bold;
+    text-shadow: -0.0354em -0.0354em white,
+                 0.0354em -0.0354em white,
+                 -0.0354em 0.0354em white,
+                 0.0354em 0.0354em white,
+                 0.05em 0 white,
+                 -0.05em 0 white,
+                 0 0.05em white,
+                 0 -0.05em white;
+    text-align: left;
+    margin: auto;
+    position: absolute;
+    height: 2.55%;
+    width: 84%;
+    left: 8%;
+    top: 52.3333%;
+    box-sizing: border-box;
+    padding-left: 0.6667em;
+    font-size: 0.575em;
+    line-height: 1.25em;
+    box-shadow: inset 0 0 0.25em black;
+}
+
+.card .gender {
+    position: absolute;
+    height: 9%;
+    top: 47.5%;
+    right: 8.5%;
+}
+
+.card .gender img {
+    float: right;
+    height: 100%;
+}
+
+.card .abilities {
+    text-align: left;
+    position: absolute;
+    top: 57%;
+    bottom: 8%;
+    left: 10%;
+    right: 10%;
+    font-size: 0.8em;
+    line-height: 1.05em;
+    padding-left: 1em;
+}
+
+.card .cost span {
+    position: relative;
+    content: ' ';
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 0.75em;
+    border: solid black 0.75em;
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 0.5em 0.05em;
+    box-shadow: 0 0 0.05em 0.04em black;
+}
+
+.card .cost span:before {
+    position: absolute;
+    text-align: center;
+    left: -0.75em;
+    top: -0.75em;
+    color: black;
+    line-height: 1.333em;
+    opacity: 0.5;
+    width: 1.5em;
+    height: 1.5em;
+}
+
+
+.card .cost .r:before { content: 'r'; }
+.card .cost .g:before { content: 'g'; }
+
+.card .cost .r {
+    
+    border-color: #e4573c;
+}
+.card .cost .g {
+    border-color: #abbc45;
+}
+
+.card .abilities .skill:before {
+    content: "Skill: ";
+    font-weight: bold;
+    margin-left: -1em;
+}
+
+.card .abilities .temporary:before {
+    content: "Temporary power: ";
+    font-weight: bold;
+    margin-left: -1em;
+}
+
+.card .abilities .ultimate:before {
+    content: "Ultimate power: ";
+    font-weight: bold;
+    margin-left: -1em;
+}
+
+.card .effect {
+    text-align: center;
+    position: absolute;
+    top: 59%;
+    bottom: 8%;
+    left: 15%;
+    width: 70%;
+    font-size: 0.8em;
+    line-height: 1.05em;
+}
+
+.card .flavor {
+    position: absolute;
+    bottom: 9%;
+    width: 80%;
+    left: 10%;
+    font-style: italic;
+    color: black;
+    font-size: 0.6em;
+}
+
+.card .code {
+    position: absolute;
+    color: white;
+    bottom: 3.5%;
+    right: 12%;
+    font-size: 0.65em;
+    text-shadow: -0.0433em -0.0433em black,
+                 0.0433em -0.0433em black,
+                 -0.0433em 0.0433em black,
+                 0.0433em 0.0433em black,
+                 0.06667em 0 black,
+                 -0.06667em 0 black,
+                 0 0.06667em black,
+                 0 -0.06667em black;
+}
+
 #statusbar {
     display: none;
     position: fixed;
 #statusbar {
     display: none;
     position: fixed;
diff --git a/male.png b/male.png
new file mode 100644 (file)
index 0000000..b302763
Binary files /dev/null and b/male.png differ
Scenario Generator & Variant Rules for Hero: Immortal King