index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name=viewport content="width=device-width, initial-scale=1">
   6     <link rel="stylesheet" href="/css/main.css" type="text/css">
   7     <title>Labelle Litanizer - Outfit-Oriented Ontology from Animal Crossing: New Leaf ~ Yukkuri Games</title>
   8     <script type="text/javascript" src="acnl-wearables-list.js"></script>
   9     <script type="text/javascript" src="acnl-outfit.js"></script>
  10     <style>
  11       div#labelle { height: 400px; margin-top: 40px; }
  12       div#haveyou {
  13           font-size: 1.5em;
  14           font-style: italic;
  15           margin-bottom: 0.5em;
  16       }
  17       div#wearing { font-size: 2em; }
  18
  19       #buttons { text-align: center }
  20
  21       .button {
  22           font-size: 2em;
  23           text-decoration: none;
  24           background-color: #eee;
  25           color: #333;
  26           padding: 3px 6px 3px 6px;
  27           border-top: 1px solid #ccc;
  28           border-right: 1px solid #333;
  29           border-bottom: 1px solid #333;
  30           border-left: 1px solid #ccc;
  31           margin: 0.25em 0.5em;
  32           display: inline-block;
  33           white-space: nowrap;
  34       }
  35
  36       .button.twitter {
  37           padding: 2px 5px 2px 0.9em;
  38           background: url('twitter.png') 0.2em center no-repeat #eee;
  39       }
  40   }
  41     </style>
  42   </head>
  43   <body onload='litanizeElement("wearing", "share-button");'>
  44     <header>
  45       <a href="http://yukkurigames.com" id="header-logo">
  46         <img src="/logotype_horizontal_1.png" class="logo"
  47              data-large
  48              alt="(◕ ヮ ◕)"
  49         ><img src="/logotype_horizontal_2.png"
  50               data-optional
  51               alt="Yukkuri Games"
  52         ><img src="/logotype_horizontal_3.png" class="logo"
  53              data-small
  54              alt="(◕ ヮ ◕)">
  55       </a>
  56       <h1>Labelle Litanizer</h1>
  57     </header>
  58     <main>
  59       <div id="labelle">
  60         <div style="float: left; width: 30%">
  61           <img src="labelle.jpg" style="max-width: 100%;"/>
  62         </div>
  63         <div style="float: right; width: 60%; margin-right: 2em; margin-top: 2em">
  64           <div id="haveyou">Have you considered...</div>
  65           <div id="wearing">...</div>
  66         </div>
  67       </div>
  68     <div id="buttons">
  69       <a onclick='litanizeElement("wearing", "share-button", event);'
  70          class="button" href="">How gauche.</a>
  71       <a id="share-button" target="_blank" class="twitter button"
  72          href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
  73     </div>
  74     <hr>
  75     <dl class="downplay">
  76       <dt>What is this?</dt>
  77       <dd>
  78         The Labelle Litanizer generates random <em>Animal Crossing:
  79         New Leaf</em> outfits. Ignoring the realities of the period
  80         and distribution of your random number generator, all possible
  81         outfits should have some chance of appearing.
  82       </dd>
  83       <dt>What's with the name?</dt>
  84       <dd>
  85         It's inspired by Ian
  86         Bogost's <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
  87         Litanizer</a>, and his writings about objects and carpentry
  88         more generally.
  89       </dd>
  90       <dt>Why?</dt>
  91       <dd>
  92         Latour litanies confront us with objects in a way that defies
  93         our usual methods of grouping or reduction. In a similar way
  94         the Labelle Litanizer asks us to consider the possible rather
  95         than merely the desirable or expected. <em>New Leaf</em>
  96         contains a huge number of objects you can wear (or otherwise
  97         visibly present with, if you are uncomfortable saying you are
  98         "wearing" an ice cream cone). But that scale and diversity is
  99         obscured due to its grouping algorithms, the small number
 100         presented at any one time, and our cultural norms about dress.
 101       </dd>
 102       <dt>
 103         Can I restrict it to my / catalogable / easily-accessible items (no
 104         DLC / region-exclusives)?
 105       </dt>
 106       <dd>
 107         No. Instead, consider how the true <em>Daseine</em> of the
 108         objects you think you have are also inaccessible to you.
 109       </dd>
 110       <dt>Can you add images?</dt>
 111       <dd>
 112         I would like to, but a full set of wearable object images
 113         doesn't exist, and if it did I probably couldn't host it here
 114         due to its size (estimated ~150MB). If you have one and want
 115         to host it, let me know.
 116       </dd>
 117       <dt>
 118         It generated an invalid outfit / sentence / MoriDB link.<br>
 119         It can't generate some valid outfit.<br>
 120         You're missing my favorite item.
 121       </dt>
 122       <dd>
 123         Email me (joe.wreschnig at gmail) with the details,
 124         please. I'm certain there's still miscategorized caps/hats
 125         vs. masks/helmets, and plenty of items I forgot.
 126       </dd>
 127     </dl>
 128     </main>
 129   </body>
 130 </html>