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       a.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       #twitter-share-button {
  37           padding: 2px 5px 2px 0.9em;
  38           background: url('twitter.png') 0.2em center no-repeat #EEEEEE;
  39       }
  40   }
  41     </style>
  42   </head>
  43   <body onload='litanizeElement("wearing", "twitter-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", "twitter-share-button");' class="button" href="#">How gauche.</a>
  70       <a id="twitter-share-button" target="_blank" class="button"
  71          href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
  72     </div>
  73     <hr />
  74     <dl class="downplay">
  75       <dt>What is this?</dt>
  76       <dd>
  77         The Labelle Litanizer generates random <em>Animal Crossing:
  78         New Leaf</em> outfits. Ignoring the realities of the period
  79         and distribution of your random number generator, all possible
  80         outfits should have some chance of appearing.
  81       </dd>
  82       <dt>What's with the name?</dt>
  83       <dd>
  84         It's inspired by Ian
  85         Bogost's <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
  86         Litanizer</a>, and his writings about objects and carpentry
  87         more generally.
  88       </dd>
  89       <dt>Why?</dt>
  90       <dd>
  91         Latour litanies confront us with objects in a way that defies
  92         our usual methods of grouping or reduction. In a similar way
  93         the Labelle Litanizer asks us to consider the possible rather
  94         than merely the desirable or expected. <em>New Leaf</em>
  95         contains a huge number of objects you can wear (or otherwise
  96         visibly present with, if you are uncomfortable saying you are
  97         "wearing" an ice cream cone). But that scale and diversity is
  98         obscured due to its grouping algorithms, the small number
  99         presented at any one time, and our cultural norms about dress.
 100       </dd>
 101       <dt>
 102         Can I restrict it to my / catalogable / easily-accessible items (no
 103         DLC / region-exclusives)?
 104       </dt>
 105       <dd>
 106         No. Instead, consider how the true <em>Daseine</em> of the
 107         objects you think you have are also inaccessible to you.
 108       </dd>
 109       <dt>Can you add images?</dt>
 110       <dd>
 111         I would like to, but a full set of wearable object images
 112         doesn't exist, and if it did I probably couldn't host it here
 113         due to its size (estimated ~150MB). If you have one and want
 114         to host it, let me know.
 115       </dd>
 116
 117       <dt>It generated an invalid outfit / sentence / MoriDB link.<br/>
 118         It can't generate some valid outfit.<br/>
 119       You're missing my favorite item.</dt>
 120       <dd>
 121         Email me (joe.wreschnig at gmail) with the details,
 122         please. I'm certain there's still miscategorized caps/hats
 123         vs. masks/helmets, and plenty of items I forgot.
 124       </dd>
 125     </dl>
 126     </main>
 127   </body>
 128 </html>