From 3233949d447a79940b9964c7577fb006b677ace9 Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Sun, 20 Mar 2022 20:23:22 +0100 Subject: [PATCH] comment the code ! color cookie ! home css --- postit/contents.json | 2 +- postit/generate.py | 32 +++++++-- postit/static/contents | 2 +- postit/static/css/contents.css | 7 +- postit/static/css/home.css | 6 +- postit/static/js/color.js | 29 +++++++-- postit/templates/postit.html | 115 ++++++++++++++++++++++----------- 7 files changed, 135 insertions(+), 58 deletions(-) diff --git a/postit/contents.json b/postit/contents.json index 1560450..19d6e52 100644 --- a/postit/contents.json +++ b/postit/contents.json @@ -1 +1 @@ -{"nim": [{"title": "Nim Fanfic", "img": "purple_nim.jpg"}, {"title": "Nim Fanfic", "description": "July 2056, the Nim population has hit a point of stagnation."}, {"title": "Nim Fanfic", "description": "My name is 1, I am \na proud, yet worn out \nnimizen of what has \nbeen known as the \nNimation for now more \nthan five centuries."}, {"title": "Nim Fanfic", "description": "Since our formation in \nEurope in 1532 \nour population has \nremained stable."}, {"title": "Nim Fanfic", "description": "We remain a steady\nand horrifyingly tiresome\nsixteen individuals, \nstuck in what is now a \nseriously embarrassing \nhierarchical structure: \nthe pyramid."}, {"title": "Nim Fanfic", "description": "Our society used to be organised in the following structure:"}, {"title": "Nim Fanfic", "img": "nim_1-1.jpg"}, {"title": "Nim Fanfic", "description": "We respond to a very simple set of rules:"}, {"title": "Nim Fanfic", "description": "(i) Only one couple\nis allowed at the time\nin Nimation."}, {"title": "Nim Fanfic", "description": "(ii) Nimizens are only able to communicate with their immediate neighbour, i.e 1 and 7 can never be in touch."}, {"title": "Nim Fanfic", "description": "(iii) Only Nim\u2019s of an \nidentical position within \nour pyramid structure \ncan navigate outside \nof the pyramid together \nat once."}, {"title": "Nim Fanfic", "description": "As you may imagine, the referral to multiple 1s, 2s, 3s, 4s and 5s was quite unsettling, arousing jealousies that could confuse outsiders."}, {"title": "Nim Fanfic", "description": "The Nim Revolution of 1904 marked a turn in our history as new names were assigned to each nimizen:"}, {"title": "Nim Fanfic", "img": "nim_1-2.jpg", "alt": "the new names after the Nim Revolution"}, {"title": "Nim Fanfic", "description": "Embracing each nimizen as individuals, through distinct names and physical features became the norm."}, {"title": "Nim Fanfic", "description": "Our diversity had finally \nbecome the trope for a \nfair representation of \nthe self within a \nco-dependent society."}, {"title": "Nim Fanfic", "description": "The following year, 1905\nthe L-group composed\nof 3, 7, 13, 14, 15, 16\nand myself wanted to go\neven further and\nre-considered our\narchitectural ideologies."}, {"title": "Nim Fanfic", "img": "nim_illustration_1-4.jpg"}, {"title": "Nim Fanfic", "description": "We wanted to implement a new set of rules:"}, {"title": "Nim Fanfic", "description": "(i) Nimation is opened to groups and individuals. It will no longer be a couple only experience."}, {"title": "Nim Fanfic", "description": "(ii) Nimizens are able to engage with any other nimizens, not just their immediate neighbour."}, {"title": "Nim Fanfic", "description": "(iii) Identity and social stature are no longer limited to one's position in the pyramid."}, {"title": "Nim Fanfic", "description": "(iv) Nimizens are able to navigate outside the structure with any other nimizens not only with those of similar structural stature."}, {"title": "Nim Fanfic", "description": "(v) The traditional pyramid structure becomes a structure amongst others, not the default structure."}, {"title": "Nim Fanfic", "description": "(vi) One's fate shouldn't be set in stone, one should have agency as to the path one chooses."}, {"title": "Nim Fanfic", "description": "(vii) Nimation should be\nopen to the growth of its\nnimizens as well as its\nannihilation, retirement\nof its nimizens or \nreplacement of \nits nimizens."}, {"title": "Nim Fanfic", "description": "Unable to convince the others of the necessity of the institution\u2019s rewriting our structure remained the same."}, {"title": "Nim Fanfic", "img": "nim_illustration_1-1.jpg"}, {"title": "Nim Fanfic", "nw": "1: Psst.", "se": "Silence."}, {"title": "Nim Fanfic", "ne": "1: Pssst!", "sw": "2: What?!"}, {"title": "Nim Fanfic", "description": "1: I'm not talking to you."}, {"title": "Nim Fanfic", "nw": "2: 3.", "se": "3: Hm?"}, {"title": "Nim Fanfic", "nw": "2: I think 1 is trying to talk to you.", "se": "3: What is it?"}, {"title": "Nim Fanfic", "ne": "1: I'm lonely.", "sw": "3: We already talked about this."}, {"title": "Nim Fanfic", "description": "1: Well it still hasn't\nbeen solved."}, {"title": "Nim Fanfic", "description": "3: I\u2019m sorry there is\nnothing I can do about \nit at the moment,\nyou could..."}, {"title": "Nim Fanfic", "description": "1: People assume because I'm at the top of the pyramid, everything is great for me!"}, {"title": "Nim Fanfic", "description": "1: Ha, sure is a great\nbore. Five centuries of\nsolitude, an omnipotent\nperspective that has\nno witness."}, {"title": "Nim Fanfic", "description": "1: No one to share my point of view with."}, {"title": "Nim Fanfic", "description": "1: To get any mundane experience across I need a waterfall of information, to slightly hope one will get some kind of input and they might never understand."}, {"title": "Nim Fanfic", "nw": "3: I understand you! Or at least try too.", "se": "2: Quiet you two, \nI'm practising."}, {"title": "Nim Fanfic", "ne": "1: And when I go,\nI go alone.", "sw": "3: Well at least you don't\nhave to suffer the\nunreasonable ones\nof this row."}, {"title": "Nim Fanfic", "nw": "1: And when I fear,\nI fear alone.", "sw": "3: You talk to me, sometimes."}, {"title": "Nim Fanfic", "ne": "7: Is 1 having a \nmoment again?", "sw": "3: Yes, yes, we're trying to figure it out."}, {"title": "Nim Fanfic", "nw": "2: Sssh.", "se": "6: This again?"}, {"title": "Nim Fanfic", "nw": "2: 1 is trying to annihilate us again.", "se": "6: Let them be, they will be picked on soon enough again."}, {"title": "Nim Fanfic", "sw": "2: Hmm.", "nw": "1: And when I dream,\nI dream alone."}, {"title": "Nim Fanfic", "nw": "7: They got everyone \nup again.", "se": "3: Everyone's up now."}, {"title": "Nim Fanfic", "nw": "1: Well not enough.", "se": "3: Let's keep it quiet \nfor now."}, {"title": "Nim Fanfic", "nw": "1: You know?", "se": "3: Tell me."}, {"title": "Nim Fanfic", "nw": "1: In dreams...\nI walk with you.", "se": "3: Roy?"}]} \ No newline at end of file +{"what-is-a-loot-box": [{"title": "What is a loot box?", "img": "purple_what-is-a-loot-box.jpg"}, {"title": "What is a loot box?", "description": "A closed box with objects inside."}, {"title": "What is a loot box?", "description": "A digital or physical box."}, {"title": "What is a loot box?", "description": "A virtual box inside video games containing randomized items."}, {"title": "What is a loot box?", "description": "A virtual box of hidden\nmotives, designed\nto persuade and\ntrick players."}, {"title": "What is a loot box?", "description": "A virtual box where\nthe user can pay and\naccess products. Those\nitems can be useful to\ndevelop you character \nin the game or can\nbe collectable."}, {"title": "What is a loot box?", "description": "A lottery box."}, {"title": "What is a loot box?", "description": "It looks like a real gift,\nbut you purchase it\nfor yourself."}, {"title": "What is a loot box?", "description": "You choose it."}, {"title": "What is a loot box?", "description": "You get something nice."}, {"title": "What is a loot box?", "description": "A box embedded in\na context."}, {"title": "What is a loot box?", "description": "It works within the context of a game."}, {"title": "What is a loot box?", "description": "It works outside the context of a game."}, {"title": "What is a loot box?", "description": "When the game gets tough, the loot box offers you a shortcut."}, {"title": "What is a loot box?", "nw": "Payment", "se": "Reward"}, {"title": "What is a loot box?", "description": "A virtual feature that players can purchase with real money. It is usually available in free-to-play games or full-price games."}, {"title": "What is a loot box?", "description": "You don't get it for free, and you don't know what you get."}, {"title": "What is a loot box?", "description": "A promise for a virtual treasure that is purchased with real money. You buy a virtual treasure hoping it contains something valuable within the world of the game."}, {"title": "What is a loot box?", "description": "Fast-thinking"}, {"title": "What is a loot box?", "description": "It is what motivates immediate irrational purchases."}, {"title": "What is a loot box?", "description": "It can be rational in the context of the game."}, {"title": "What is a loot box?", "description": "A quest, narrative or social pressure can justify any loot box."}, {"title": "What is a loot box?", "description": "It appears and disappears quickly in order to seem exclusive. Thus, it makes the player buy it without thinking too much."}, {"title": "What is a loot box?", "description": "Time pressure creates artificial urgency (jeopardy)."}, {"title": "What is a loot box?", "description": "Excitement and anticipation"}, {"title": "What is a loot box?", "description": "A feeling of excitement and anticipation could be related to the excitement of gambling."}, {"title": "What is a loot box?", "description": "You know that there is a chance of getting some items that you desire."}, {"title": "What is a loot box?", "description": "It is desirable because it creates rare chances to get powerful items."}, {"title": "What is a loot box?", "description": "It is like gambling because you anticipate what is inside."}, {"title": "What is a loot box?", "description": "Surprise mechanism"}, {"title": "What is a loot box?", "description": "The element of surprise is a highly appreciated aspect of the loot box."}, {"title": "What is a loot box?", "description": "A secret treasure that is not worth the money you pay for it, nor the expectations you have for it. However, that is somehow exciting."}, {"title": "What is a loot box?", "description": "Addictiveness is\nconnected to the\nsurprise mechanism: the\nmoment of anticipation\nis addictive. It makes\nyou feel that anything\nis possible."}, {"title": "What is a loot box?", "description": "It's like the cat in the box: is she dead or is she alive? She is both until you open the box."}, {"title": "What is a loot box?", "description": "An entertaining element."}, {"title": "What is a loot box?", "description": "It keeps the players\nhooked to the game by\nusing an element\nof surprise."}, {"title": "What is a loot box?", "description": "The player never knows what is inside of it."}, {"title": "What is a loot box?", "description": "Surprise that comes\nwith consequences."}, {"title": "What is a loot box?", "description": "The immediate reward makes it fun. The risk comes with pleasure."}, {"title": "What is a loot box?", "description": "It derives from the loot, a bunch of goodies that you can get as a reward after you conquer a super boss or level up."}, {"title": "What is a loot box?", "description": "A reward after accomplishing a really heroic task."}, {"title": "What is a loot box?", "description": "An immediately rewarding response preceded by a generally customized trigger."}, {"title": "What is a loot box?", "description": "A guaranteed reward in exchange for money."}, {"title": "What is a loot box?", "description": "Progress in the game"}, {"title": "What is a loot box?", "description": "You have more power in the game."}, {"title": "What is a loot box?", "description": "Sometimes the game doesn\u2019t reach its full potential without buying a loot box. That makes players feel compelled to make a purchase."}, {"title": "What is a loot box?", "description": "You will get better if you buy a loot box."}, {"title": "What is a loot box?", "sw": "Emotional trigger", "ne": "Collectible item"}, {"title": "What is a loot box?", "description": "Strong emotional reactions are tied to the financial elements."}, {"title": "What is a loot box?", "nw": "Excitement", "se": "Disappointment"}, {"title": "What is a loot box?", "ne": "Desire", "sw": "Exploitation"}, {"title": "What is a loot box?", "description": "Even if you don't get exactly what you wish for, you will get something, and you feel somehow rewarded."}, {"title": "What is a loot box?", "description": "Incremental rewards"}, {"title": "What is a loot box?", "description": "It is disguised as safe and innocent."}, {"title": "What is a loot box?", "description": "You can keep opening loot boxes forever."}, {"title": "What is a loot box?", "description": "It interfaces the game and the real world."}, {"title": "What is a loot box?", "description": "It\u2019s an alternate reality experience of collecting things you can't own in real life."}, {"title": "What is a loot box?", "description": "It\u2019s a pulse in the\ncirculation of resources\nbetween a virtual game\nand the reality outside\nof it."}, {"title": "What is a loot box?", "description": "Loot box as currency exchange"}, {"title": "What is a loot box?", "ne": "Game coin", "sw": "Real money"}, {"title": "What is a loot box?", "nw": "Power-Up", "se": "Pleasure"}, {"title": "What is a loot box?", "description": "Designed to be addictive"}, {"title": "What is a loot box?", "description": "Very real addictive mechanisms."}, {"title": "What is a loot box?", "description": "A repeated scheme that ensures constant spending into virtual game currencies."}, {"title": "What is a loot box?", "description": "Designed to be desirable and to be purchased again and again."}, {"title": "What is a loot box?", "description": "Some rewards are rare and that makes the loot box desirable."}, {"title": "What is a loot box?", "description": "It puts you in a condition for purchasing without thinking too much."}, {"title": "What is a loot box?", "description": "Its timespan is similar to the discount periods or Black Friday."}, {"title": "What is a loot box?", "description": "Looking under the hood."}, {"title": "What is a loot box?", "description": "A trigger for \naddictive behaviour."}, {"title": "What is a loot box?", "description": "A gambling mechanism,\nexploitative by design,\nthat promises immediate\nin-game rewards to\nthe player."}, {"title": "What is a loot box?", "description": "The rewards of the loot\nbox can affect both the\ngameplay and the social\nenvironment around\nthe game."}, {"title": "What is a loot box?", "description": "It sets the beat\nfor repeated\nmicrotransactions."}, {"title": "What is a loot box?", "description": "It's a repetitive\nrhythm for the\nplayer's temporality."}, {"title": "What is a loot box?", "description": "It builds a habit by triggering the attention and the emotional response of the player."}, {"title": "What is a loot box?", "description": "It's fun."}, {"title": "What is a loot box?", "description": "It ensures that you\nkeep playing\npotentially forever."}, {"title": "What is a loot box?", "description": "From habit to addiction."}, {"title": "What is a loot box?", "description": "You pay money to obtain something new."}, {"title": "What is a loot box?", "sw": "Ritual", "ne": "Thrill"}, {"title": "What is a loot box?", "nw": "Risk", "se": "Destiny"}, {"title": "What is a loot box?", "description": "It hacks the temporality of a game."}, {"title": "What is a loot box?", "description": "It allows you\nto customize your\ngame character."}, {"title": "What is a loot box?", "description": "It shifts the dynamics in the game."}, {"title": "What is a loot box?", "description": "It provides you with\ncollectables or power-\nups that make you\nprogress inside\nthe game."}, {"title": "What is a loot box?", "description": "A temporalized tool\nfor the distribution\nand management\nof resources."}, {"title": "What is a loot box?", "description": "The potentially endless collection creates artificial needs."}, {"title": "What is a loot box?", "description": "The benefits for you are emotional. The benefits for the game platforms are financial."}, {"title": "What is a loot box?", "description": "A money-making mechanism that uses real-world money in video games' worlds."}, {"title": "What is a loot box?", "description": "It targets\nvulnerable players."}, {"title": "What is a loot box?", "description": "A trigger for\naddictive behaviour."}, {"title": "What is a loot box?", "description": "A trigger for\ntoxic behaviour."}, {"title": "What is a loot box?", "description": "An escape from real life."}, {"title": "What is a loot box?", "description": "Fake promises."}, {"title": "What is a loot box?", "description": "FOMO (fear of \nmissing out)"}, {"title": "What is a loot box?", "description": "The surprise mechanism and exclusivity of the loot box creates a constant FOMO."}, {"title": "What is a loot box?", "description": "Peer pressure"}, {"title": "What is a loot box?", "ne": "Social pressure", "sw": "Individual engagement"}, {"title": "What is a loot box?", "description": "A personalized 1 to 1 interaction"}, {"title": "What is a loot box?", "description": "1 to machine interaction"}]} \ No newline at end of file diff --git a/postit/generate.py b/postit/generate.py index 608d9c0..0065e95 100644 --- a/postit/generate.py +++ b/postit/generate.py @@ -1,8 +1,23 @@ -from flask import Blueprint, render_template +from flask import Blueprint, render_template, request import json from . import dump -index = ['intro','what-is-a-loot-box', 'crosswords', 'one-sentence-game-ideas', 'nim', 'mimic', 'unfinished-thoughts', 'the-leader', 'connect-less', 'xquisite', 'katamari', 'life-hacks', 'karaoke', 'outro'] +index = [ + "intro", + "what-is-a-loot-box", + "crosswords", + "one-sentence-game-ideas", + "nim", + "mimic", + "unfinished-thoughts", + "the-leader", + "connect-less", + "xquisite", + "katamari", + "life-hacks", + "karaoke", + "outro", +] bp = Blueprint( @@ -14,20 +29,25 @@ bp = Blueprint( @bp.route("/") def blocks(): + + color = request.cookies.get("color", "purple") + # temporary, eventually we will dump contents only when they are updated in git (git hooks + git pull ?) dump.dump(index) with open("postit/contents.json", "r") as f: contributions = json.load(f) - - return render_template("postit.html", contributions=contributions) + + return render_template("postit.html", contributions=contributions, color=color) @bp.route("/") def block(slug=None): + + color = request.cookies.get("color", "purple") + dump.dump([slug]) with open("postit/contents.json", "r") as f: contributions = json.load(f) - - return render_template("postit.html", contributions=contributions) + return render_template("postit.html", contributions=contributions, color=color) diff --git a/postit/static/contents b/postit/static/contents index 2cba105..9616b72 160000 --- a/postit/static/contents +++ b/postit/static/contents @@ -1 +1 @@ -Subproject commit 2cba1055408e68e7a617300f7020c5a4ef85478c +Subproject commit 9616b7250840e1ff3fb4edff1cfa49f70da5447a diff --git a/postit/static/css/contents.css b/postit/static/css/contents.css index c7bd026..b1b3485 100644 --- a/postit/static/css/contents.css +++ b/postit/static/css/contents.css @@ -74,10 +74,6 @@ font-size: 24px; } -.connect-less figcaption { - display: none; -} - .crosswords .info { position: absolute; font-size: 21px; @@ -127,8 +123,7 @@ } .nw { - white-space: initial; - + white-space: initial; } .ne { diff --git a/postit/static/css/home.css b/postit/static/css/home.css index 5b3f702..636f057 100644 --- a/postit/static/css/home.css +++ b/postit/static/css/home.css @@ -33,11 +33,11 @@ ol { button#color { position: absolute; right: 32px; - top: 48px; + top: 52px; display: inline-block; - width: 48px; + width: 24px; height: 24px; - border-radius: 24px; + border-radius: 0; border: none; background-color: var(--alt-bg); } diff --git a/postit/static/js/color.js b/postit/static/js/color.js index 513a0c0..6620f65 100644 --- a/postit/static/js/color.js +++ b/postit/static/js/color.js @@ -1,8 +1,26 @@ +// I really don't like this code but it's ok for now... + +let main = true; + // Set a reference in the localStorage with the main color window.addEventListener("load", () => { - var style = getComputedStyle(document.body); - currentColor = style.getPropertyValue("--color"); - setCookie("color", currentColor, 7); + color = getCookie("color"); + + if (color == "purple" || color == "") { + document.documentElement.style.setProperty("--color", "var(--purple)"); + document.documentElement.style.setProperty("--background", "var(--purple-bg)"); + document.documentElement.style.setProperty("--alt", "var(--orange)"); + document.documentElement.style.setProperty("--alt-bg", "var(--orange-bg)"); + setCookie("color", "purple", 7); + main = true; + } else { + document.documentElement.style.setProperty("--color", "var(--orange)"); + document.documentElement.style.setProperty("--background", "var(--orange-bg)"); + document.documentElement.style.setProperty("--alt", "var(--purple)"); + document.documentElement.style.setProperty("--alt-bg", "var(--purple-bg)"); + setCookie("color", "orange", 7); + main = false; + } }); // Toggle color button @@ -26,6 +44,7 @@ function toggleColor() { document.documentElement.style.setProperty("--alt", currentColor); document.documentElement.style.setProperty("--alt-bg", currentBg); - // set a reference in the localStorage - setCookie("color", altColor, 7); + // set a reference in a cookie to share it with the generator page + main = !main; + setCookie("color", main ? "purple" : "orange", 7); } diff --git a/postit/templates/postit.html b/postit/templates/postit.html index 88f63cb..c7a608d 100644 --- a/postit/templates/postit.html +++ b/postit/templates/postit.html @@ -5,35 +5,65 @@ Post it - - + + - + + - - {%for contribution, contents in contributions.items()%} - - {% for content in contents %} - -
- {%if content['img'] %} - + {%for contribution, contents in contributions.items()%} {% for content in contents %} + +
+ + + + + + {%if content['pic'] %} + {{content['alt']}} + {% if content["alt"] %} -
{{content['description']}}
- {% endif %} +
{{content['alt']}}
+ {% endif %} + + + {%elif content['img'] %} + {{content['alt']}} + + {% if content["alt"]%} +
{{content['alt']}}
+ {% endif %} + + + + {%elif content['card']%} -
{{content['card']}}
-
{{content['quote']}} The Leader
+
+ {{content['quote']}} The Leader +
Motivation
{{content['motivation']}}
@@ -48,9 +78,15 @@
{{content['positivity']}}
+ + + + {%elif content['definition']%} -
{{content['start']}} {{content['category']}}
+
+ {{content['start']}} {{content['category']}} +

{{content['definition']}} @@ -64,6 +100,8 @@ > + + {%elif content['type'] == 'mimic-colophon'%}

@@ -85,25 +123,29 @@ > + + + + + + + {%elif 'nw' in content or 'ne' in content or 'se' in content or 'sw' in content%} -

- {%if content['ne']%}{{content['ne']}}{%endif%} - {%if content['nw']%}{{content['nw']}}{%endif%} +

+ {%if content['ne']%}{{content['ne']}}{%endif%} {%if + content['nw']%}{{content['nw']}}{%endif%}

-

- {%if content['se']%}{{content['se']}}{%endif%} - {%if content['sw']%}{{content['sw']}}{%endif%} +

+ {%if content['se']%}{{content['se']}}{%endif%} {%if + content['sw']%}{{content['sw']}}{%endif%}

-

{{content['title']}}

- {%else%} + + {%else%}

{{content['description']}} @@ -128,7 +171,7 @@ {%endif%}

- {% endfor %} - {%endfor%} + {% endfor %} + {%endfor%}