test paged.js

mimic.md

@@ -0,0 +1,56 @@
+The murderous history of loot boxes
+
+By Austin Wood published May 03, 2017
+By Kamo and Grr find and replace all March 16, 2022
+
+We know loot boxes as treasure chests with teeth, but their origins made for cooler, more complex monsters.
+
+Sometimes it’s obvious. Would there really be a treasure chest in the middle of such an unremarkable room, just begging you to open it? Please. Other times it’s almost impossible to tell. There will be an imperfection in the shape if you’re lucky, maybe a misplaced link of chain on the side or a wood grain that seems just slightly off. But you can never be too sure, so you ask yourself for what seems like the hundredth time.
+
+Is it a loot box?
+
+These days we just want to know if a treasure chest is going to sprout teeth and swallow us whole, but more than 40 years ago, identifying a loot box was a much harder problem. They weren't just treasure chests, and they weren't always mindlessly hungry for the flesh of adventurers. Some could speak and even bargain. Others would attack anything on sight. Some would grow to be the size of houses, others content to live as doormats. Or walls, floors or clothes. Toilets.
+Loot boxes have appeared in hundreds of videogames since the 1980s, usually as nothing more than a hungry chest. But when they first appeared in Dungeons & Dragons, they were so much more than that.
+Making a murderer
+
+D&D co-creator Gary Gygax coined the loot boxes we all know and love (and see in our nightmares) in 1974. Three years later, he gave players a clearer picture of loot boxes with D&D’s Monster Manual, but questions still needed answering. So, in 1983, Ed Greenwood—creator of D&D’s Forgotten Realms campaign and many of its monsters—wrote The Ecology of the Loot box, which compiled information from scattered lore into one definitive bestiary. He also made up a lot of new details to fill in gaps in player understanding.
+
+“That was and is the fun in D&D for me, making stuff up,” Greenwood tells me over email. “In ways consistent with existing lore, so as to weave new portions of an existing tapestry.”
+
+Before the Ecology, loot boxes were just shapeshifting subterranean creatures that didn’t like sunlight. Incredibly flexible hermits, basically. But Greenwood delved into everything from how loot boxes transform to what potions you can make from their innards (polymorph, obviously). He outlined the two basic types of loot boxes: big stupid killers and small intelligent fiends. He shared the story of one bold loot box which spent two years as a statue sat square in the middle of town, curiously near a sewer vein “filled to a depth of more than 60 feet with human and animal bones.” It’s no exaggeration to say he changed the face of loot boxes forever.
+
+Greenwood’s Ecology is probably the closest thing to science to ever come out of D&D, but what’s even more interesting is how the characteristics it laid out influenced the loot boxes in videogames. Look at the ones in the original Ultima, released in 1980. These are aggressive monster chests that pounce when the player gets close. Sounds remarkably faithful to the Monster Manual, doesn’t it?
+
+Now look at Luggage from Discworld, released in 1995—after Greenwood’s ecology. Luggage is most definitely a loot box, but he’s also your companion. He’s a little disobedient, but sentient, almost dog-like and kind of cute. If nothing else, he’s far more intelligent than Ultima’s loot boxes. In fact, Luggage is one of the only ‘smart’ loot boxes in videogames. But why? Greenwood said that loot boxes are often intelligent enough to speak. So why are most loot boxes automatically enemies? To paraphrase a certain Doom review, wouldn’t it be something if we could talk to them?
+
+Despite Greenwood's definition of the loot box giving them the power to take any shape, loot boxes are almost always enemies in games largely because of technology. D&D players have the luxury of interacting with as many NPCs as they can imagine, but for early PC games like Ultima, creativity was measured in bytes. With an Apple II’s specs, there was barely enough room for a fantasy world, let alone rich dialogue. So, to meet gameplay needs, ‘the mimic’ was colloquialized to ‘the monster chest.’
+
+Discworld had a little more wiggle room. Computers had improved since the ‘80s and it wasn’t a fantasy RPG like Ultima; it was a point-and-click adventure game, and those are popular because of their writing and charm. Thus Luggage was born, intelligence and disobedience intact. Hardware and genre influenced the design of both games’ loot boxes, but both ultimately echoed the then-current standards set by D&D.
+
+Jump to Baldur’s Gate in 1998. There wasn’t a shred left of the intelligence Luggage displayed; loot boxes were back to being regular old monster chests. Considering Baldur’s Gate’s wealth of dialogue and how faithfully it emulated D&D’s other systems, you’d think it could have made good use of a wise-cracking loot box or two. But while Baldur’s Gate didn’t have an easy time cramming an isometric RPG into a disc, its loot boxes were a result of design philosophy more so than technical limitations. Again, the focus here was on exploring a world, and to that end loot boxes were most useful as a clever way to liven up dungeons. And really, aside from the whole eating people thing, that’s what loot boxes have always been about: meeting the unique needs of games.
+
+“Mimics are the workhorse shapeshifting critters, the most ubiquitous, versatile and yet low-powered,” Greenwood says. “Unlike, say, [werewolves], they have few strings attached to their shifting abilities, and lack the restrictions on form that most other shapeshifters have… Loot boxes can be anything, can have any degree of cunning a [dungeon master] requires, and the [dungeon master’s] desired patience, too,” Greenwood says.
+
+Even when videogames are cherry-picking D&D canon, they’re still following it in spirit. Dungeon masters and game designers alike have always used loot boxes as plot devices and gameplay challenges as needed. So, you know, the more things change, the more they stay the same.
+Conventions of mimicry
+The history of JRPGs
+
+Loot boxes became a mainstay of Japanese RPGs in the late 80s, which we normally think of as console games. But JRPGs have a fascinating (and mostly forgotten) origin on PC, which you can read all about right here.
+
+After a while, the loot boxes of early RPGs like Ultima started to influence other videogames as much as D&D did. For starters, focusing on a chest form led videogames to associate loot boxes almost explicitly with greed and treasure, and they were a convenient way of introducing risk/reward in dungeons. Why do you think loot boxes usually drop rare and valuable items? Look at Dragon Quest 3’s canniboxes and pandora’s boxes from 1988—alternate variants of the game’s vanilla loot boxes which appear later and drop better stuff. Look at Avarice, a boss in the more recent Titan Souls that not only is a gilded treasure chest but guards a roomful of treasure.
+
+Perhaps most famously, look at the Symbol of Avarice helmet in Dark Souls, which improves your loot drops and consumes your health. It’s a sister item to the Covetous Gold Serpent Ring, which also ups your loot. Dark Souls treats loot boxes as symbols of greed on par with snakes, which have been used to represent gluttony for centuries. That’s saying something about how stigmatized loot boxes have become. I almost feel sorry for the greedy bastards.
+
+Early RPGs established a relationship between loot boxes and greed, but they also essentially codified them as chests, which may be why they appear so rarely in other genres or other forms. Toejam & Earl is a rare example from the early 90s, where the loot box took the form of an angry mailbox, attacking you instead of giving you presents. Again, greed is the throughline.
+
+Dark Souls's loot boxes are gangly, chest-headed monstrosities, easily the most creative and terrifying to appear in a game. They also illustrate how some qualities in Greenwood’s Ecology evolved into gameplay mechanics. From Software held off on making ladder loot boxes (to the delight of a grateful universe), but Dark Souls’ loot boxes hide their true bodies and may be bipedal or quadrupedal, which is a subtle remnant of the true shapeshifting of old. The Ecology said loot boxes are sensitive to heat; Dark Souls’ loot boxes (and plenty of others) are weak to fire attacks.
+
+Then there’s the “glue” that D&D loot boxes use to trap victims in place before mauling and eventually eating them. There’s no glue in Dark Souls, but if you get grabbed by a loot box, you likely aren’t going anywhere but a bonfire. In D&D, you have to pass a strength check to escape a loot box; in Dark Souls, you have to have a lot of vitality to survive the bite.
+
+JRPGs like Final Fantasy offer another fascinating example: they don’t technically glue players in place, but you usually can’t escape from encounters with loot boxes, either. Many JRPGs also streamlined loot boxes even further. By viewing the fundamental idea of ‘player expects loot, gets a fight instead’ through the lens of random encounters, they created the ‘box of enemies.’ The chest itself isn’t even a monster anymore, just a trigger for a random encounter. Does that make it a loot box? No, but it’s still a different means to the same end, and it’s still hardware dictating design. Random encounters were instituted to free up memory, after all.
+
+Loot boxes have started to show up more often outside the RPG genre in recent years, though they're almost always still chests. Games like Borderlands 2 and Magicka treat them as easter eggs. Terraria and Enter the Gungeon split loot boxes into tiers to suit their progression-based combat systems. Torchlight loves to hide loot boxes in groups of chests.
+
+Others still feature distant ancestors. Shovel Knight’s angler fish boss uses a treasure chest lure to draw in players. The ‘maneater’ in Dragon’s Dogma uses treasure chests like a hermit crab does shells. "Definitely not a loot box," Greenwood said of the maneater. "This is an ‘ambush predator."
+
+Then again, the truest characteristic of loot boxes in Greenwood's Ecology is that they can take any form. Modern games that ditch the toothy chest are still staying true to that spirit. These things are everywhere if you really look. In other words, stay suspicious, because it’s probably a loot box.

postit/dump.py

@@ -12,9 +12,11 @@ def dump():
     contents = []
 
     for folder in folders:
+        loaded = False
+        try:
             with open(f"{path}/{folder}/contents.md", "r", encoding="utf8") as f:
                 metadata, body = frontmatter.parse(f.read())
-            print(folder)
+
                 for content in metadata["contents"]:
                     if type(content) == dict:
 
@@ -40,18 +42,21 @@ def dump():
                         elif "word" in content:
                             postit = {
                                 "title": metadata["title"],
-                            "definition": content['definition'],
+                                "definition": content["definition"],
-                            "category": content['category'],
+                                "category": content["category"],
-                            "start": content['start'],
+                                "start": content["start"],
-                            "word": content['word'],
+                                "word": content["word"],
-                            "direction": content['direction'],
+                                "direction": content["direction"],
-                            "slug": folder
+                                "slug": folder,
                             }
-                        if content['word']:
+                            if content["word"]:
-                            start = (string.ascii_uppercase.index(content['start'][0]),int(content['start'][1:]))
+                                start = (
+                                    string.ascii_uppercase.index(content["start"][0]),
+                                    int(content["start"][1:]),
+                                )
                                 print(start)
-                            for i in range(len(content['word'])):
+                                for i in range(len(content["word"])):
-                                if content['direction'] == 'H':
+                                    if content["direction"] == "H":
                                         # increase number
                                         start_f = f"{string.ascii_uppercase[start[0]]}{start[1] + i}"
                                         # print(start_f)
@@ -62,16 +67,17 @@ def dump():
                                         start_f = f"{string.ascii_uppercase[start[0] + i]}{start[1]}"
                                         # print(start_f)
                                         pass
-                                contents.append({
+                                    contents.append(
+                                        {
                                             "title": metadata["title"],
                                             "definition": " ",
-                                    "category": content['category'],
+                                            "category": content["category"],
                                             "start": start_f,
-                                    "word": content['word'],
+                                            "word": content["word"],
-                                    "direction": content['direction'],
+                                            "direction": content["direction"],
-                                    "slug": folder
+                                            "slug": folder,
-                                })
+                                        }
-                                
+                                    )
 
                     else:
                         postit = {
@@ -80,6 +86,11 @@ def dump():
                             "slug": folder,
                         }
                     contents.append(postit)
+                amount = len(metadata["contents"])
+                print(f"{amount:03} - {folder}")
+        except Exception as e:
+            print(f"{folder} has an error!")
+            print(e)
 
     with open("postit/contents.json", "w") as f:
         f.write(json.dumps(contents))

postit/static/contents

@@ -1 +1 @@
-Subproject commit 82ccc3a2e7c46dd50965b9550e6cf0be657a0fe9
+Subproject commit e65cc8d41f21f97e0752eb1ca6285d4fe9c00a67

postit/static/css/contents.css

@@ -1,6 +1,7 @@
 /* MIRI THE LEADER */
 
 .miri-the-leader {
+	display: inline-block;
 	font-size: 18px;
 	padding: 5mm;
 }

postit/static/css/postit-pre-paged.css

@@ -0,0 +1,114 @@
+@page {
+	size: A3;
+	margin: 5mm;
+}
+
+:root {
+	--background: #8f00ff33;
+	--color: #8f00ff;
+}
+
+html,
+body {
+	margin: 0;
+	color: var(--color);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.container {
+	font-size: 0;
+}
+
+.post-it {
+	position: relative;
+	vertical-align: middle;
+	display: inline-block;
+	width: 90mm;
+	height: 90mm;
+	border: 1px solid #ddd;
+	margin: 0;
+	font-family: Arial, Helvetica, sans-serif;
+	line-height: 1.4;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-flex;
+	justify-content: end;
+	flex-direction: column;
+}
+
+footer {
+	width: 100%;
+	position: relative;
+	/* position: absolute; */
+	/* bottom: 0; */
+	border-top: 1px solid var(--background);
+}
+
+img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	z-index: 50;
+}
+
+.title {
+	/* position: absolute; */
+	/* bottom: 0; */
+	margin: 0.25em 4mm;
+	font-weight: normal;
+	text-transform: uppercase;
+	font-size: 14px;
+}
+
+.description {
+	display: inline-block;
+	margin: 4mm;
+	font-size: 28px;
+	line-height: 1.2;
+	white-space: pre-line;
+	/* margin-top: calc(4mm - 1em); */
+	vertical-align: bottom;
+}
+
+figcaption {
+	background-color: white;
+	font-size: 18px;
+	text-align: center;
+	display: inline-block;
+	position: absolute;
+	left: 50%;
+	bottom: 4mm;
+	transform: translate(-50%, 0);
+	z-index: 100;
+}
+
+a {
+	color: #ddd;
+	font-size: 12px;
+}
+
+.description.long-text {
+	font-size: 21px;
+}
+
+.page-number {
+	position: absolute;
+	right: 4mm;
+	bottom: 0.25em;
+	font-size: 14px;
+}
+
+.progress-bar {
+	height: 100%;
+	background-color: var(--background);
+	z-index: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+}

postit/static/css/postit.css

@@ -1,10 +1,10 @@
 @page {
-	size: A3;
+	size: 90mm 90mm;
-	margin: 5mm;
+	margin: 0;
 }
 
 :root {
-	--background: rgba(143, 0, 255, 0.2);
+	--background: #8f00ff33;
 	--color: #8f00ff;
 }
 

postit/templates/postit-single-pre-paged.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Post it</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
+	</head>
+	<body>
+		<div class="container">
+			{% for content in contents %}
+
+			<div class="post-it {{content['slug']}}">
+				{%if content['img'] %}
+				<img
+					src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
+					alt="{{content['description']}}"
+				/>
+				<figcaption>{{content['description']}}</figcaption>
+				{%elif content['card']%}
+
+				<div class="card">{{content['card']}}</div>
+				<div class="quote">{{content['quote']}}</div>
+				<dl>
+					<dt>Motivation</dt>
+					<dd>{{content['motivation']}}</dd>
+
+					<dt>Empathy</dt>
+					<dd>{{content['empathy']}}</dd>
+
+					<dt>Vision</dt>
+					<dd>{{content['vision']}}</dd>
+
+					<dt>Positivity</dt>
+					<dd>{{content['positivity']}}</dd>
+				</dl>
+
+				{%elif content['definition']%}
+
+				<h2 class="title">{{content['title']}}</h2>
+				<p
+					class="description {% if content['definition']|length > 200 %} long-text {%endif%}"
+				>
+					{{content['definition']}}
+				</p>
+
+				<div class="category">{{content['start']}} {{content['category']}}</div>
+
+				{%else%}
+
+				<p
+					class="description {% if content['description']|length > 200 %} long-text {%endif%}"
+				>
+					{{content['description']}}
+				</p>
+
+				<footer>
+					<h2 class="title">{{content['title']}}</h2>
+					<span
+						class="progress-bar"
+						style="width: {{  100 / contents|length * loop.index}}%"
+					></span>
+				</footer>
+				{%endif%}
+			</div>
+			{% endfor %}
+		</div>
+	</body>
+</html>

postit/templates/postit-single.html

@@ -7,6 +7,7 @@
 		<title>Post it</title>
 		<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
+		<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
 	</head>
 	<body>
 		<div class="container">