index.html

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