-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (210 loc) · 11.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="ca" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="author" content="Jacob Ràfols">
<meta name="description" content="Un joc de rol social on encarnareu uns mafiosos sense escrupuls mentre disfruteu d'una festa com manen els anys 20.">
<meta name="keywords" content="joc de rol, joc social, joc de rol social, pomes agres, poder, joc de la mafia, joc de mafiosos, anys 20, 20s">
<title>POMES AGRES: Un joc de rol social</title>
<meta property="og:title" content="POMES AGRES: Un joc de rol social">
<meta property="og:description" content="Un joc de rol social on encarnareu uns mafiosos sense escrupuls mentre disfruteu d'una festa com manen els anys 20.">
<meta property="og:image" content="https://jacob.rafols.cat/pomesagres/thumbnail.png">
<meta property="og:url" content="https://jacob.rafols.cat/pomesagres/">
<meta property="og:site_name" content="Jacob Ràfols">
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<meta name="vers" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/master.css?v=1.5">
<link rel="stylesheet" href="css/responsive.css?v=1.7">
<link rel="stylesheet" href="css/print.css?v=1.2" media="print">
<!-- Global site tag (gtag.js) - Google Analytics -->
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7PQH9ZX3NP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7PQH9ZX3NP');
</script>
-->
</head>
<body>
<section id="intro">
<div class="container">
<h1 class="title">
Pomes agres
<span class="machine sticker">versió 2</span>
</h1>
<h2 class="subtitle">Un joc de rol social</h2>
<p>
Jugar a pomes agres és organitzar una festa de disfresses amb els teus amics. El joc proposa un marc d'improvització, una manera divertida d'encarnar un personatge, alhora que crea relacions inesperades i sovint desconegudes per a tots els jugadors. Interpretar el teu personatge et dona punts, i aconseguir els teus objectius mentre ho fas, et farà guanyar la partida.
</p>
<p>
En aquesta pàgina trobaras totes les instruccions i eines que necessites per a organitzar la trobada i jugar aquest joc que, com a primer joc de rol social, et convida a allunyar-te dels daus i els taulells, per a transformar-vos durant unes hores, en delinqüents i estafadors.
</p>
<img src="src/divider.svg" alt="divisor" class="divider">
<p>Estàs esperant que els teus amics et responguin els missatges? Entretén-te a llegir les <a href="javascript: scrollto('normes');">normes</a>.</p>
<p>Ja t'han respost? I estan engrescats? <a href="javascript: scrollto('generador-personatges');">Genera els personatges</a> i a jugar.</p>
</div>
<div class="flex-row separate">
<span class="srclink phone-hide">src: <a href="https://www.pexels.com/photo/photo-of-man-in-black-suit-smoking-cigarette-7319350/">Photo by cottonbro from Pexels</a></span>
<span class="srclink">src: <a href="https://www.pexels.com/photo/a-woman-posing-in-a-twenties-outfit-6640019/">Photo by cottonbro from Pexels</a></span>
</div>
<div id="intro-color"></div>
</section>
<section id="generador-personatges">
<div id="app">
<div class="container">
<h1>Generador de personatges:</h1>
<div style="text-align: center">Carregant...</div>
<noscript>
<p>Aquest generador necesita javascript per a funcionar. Siusplau, permeteu l'us de <i>scripts</i> en aquesta pàgina.</p>
</noscript>
</div>
</div>
</section>
<section id="normes">
<div style="position: absolute; height: 100%; top: 0; right: 0;">
<button type="button" name="button" class="stick-top" onclick="document.getElementById('material').scrollIntoView({ behavior: 'smooth', block: 'start'});"><i class="fas fa-angle-double-down"></i></button>
<div style="height: calc(100% - 16rem); pointer-events: none"></div>
<button type="button" name="button" class="stick-bottom" onclick="document.getElementById('generador-personatges').scrollIntoView({ behavior: 'smooth', block: 'start'});"><i class="fas fa-angle-double-up"></i></button>
</div>
<div style="overflow: hidden; border-radius: 4rem;">
<div class="container">
<h1>Com jugar?</h1>
<div class="split">
<div class="block" style="flex-grow: 4;">
<p>Cada jugador rebrà un personatge amb un objectiu a negociar amb algú altre. Aconsegueix els teus objectius sense donar la partida als altres. Sembla fàcil, no?</p>
<p>Repassa, si et cal, les normes. Genera els personatges per a tots els convidats i, si vols, les seves invitacions. Finalment, aconsegueix tot el material que et faci falta. No et preocupis, molt és imprimible.</p>
<ol>
<li><a href="normes/" class="social"><span style="padding: 1rem; line-height: 1.5rem;">Llegeix les normes</span></a></li>
<li><a href="#generador-personatges" class="social"><span style="padding: 1rem; line-height: 1.5rem;">Genera els personatges</span></a></li>
<li><a href="#material" class="social"><span style="padding: 1rem; line-height: 1.5rem;">Troba el material</span></a></li>
</ol>
</div>
<div class="block">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6VmgLLeQ7OWv7pjHpIxMFV?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="material">
<div class="container">
<h1>Material</h1>
<p>
A part d'imprimir les fitxes dels personatges i les invitacions, per a poder jugar necessitareu alguns materials:
</p>
<div class="flex-row material phone-reverse">
<img src="src/poker-chip_nosh.png" alt="Poker chips" width="80%">
<div>
<h2>Les <strong>fitxes</strong></h2>
<p>
Per a representar els diners pots fer servir bitllets d'un joc com el Monopoly, fitxes de pòquer o els <a href="src/materials/cheks-test1.pdf">xecs de l'Associació Bancària Don Vignolo</a> que pots intercanviar a la banca (operada per l'amfitrió o el Bartender) per fitxes per fer pagaments més petits a altres jugadors o apostar als jocs de cartes.
</p>
<p>
Imprimeix el pdf (amb tantes copies com calgui), retalla els xecs i posa-l's en un sobre amb la fitxa de personatge.
</p>
</div>
</div>
<div class="flex-row material">
<div>
<h2>Els <strong>carregaments</strong></h2>
<p>
Per a representar els carregaments de productes il·legals podreu imprimir una serie de targetes de "visita". Contenen una adreça on s'enmagatzemen
aquests bens. El document imprimible el pots trobar <a href="#">aquí</a>.
</p>
<p>
I si se t'acut alguna altra forma de representar els carregaments, no dubtis en fer-me la arribar.
</p>
</div>
<img src="src/cards.png" alt="Targetes de contacte" width="90%">
</div>
<div class="flex-row material phone-reverse">
<img src="src/diamond.png" alt="Poker chips" width="80%">
<div>
<h2>El <strong>diamant</strong></h2>
<p>
Per a fer de diamant podeu utilitzar qualsevol xapa que tingueu a mà, o comprar uns diamants de plastic com vaig fer jo als 14 anys. Els he fet servir moltes més vegades no em pensava.
</p>
</div>
</div>
<div id="recompte-material">
Carregant el recompte de material necessari...
</div>
</div>
<div style="text-align: right; padding-right: 2rem">
<span class="srclink">src: <a href="https://www.pexels.com/photo/photo-of-vintage-stationery-776632/">Photo by Ylanite Koppens from Pexels</a></span> <br>
<span class="srclink">src: <a href="https://www.pexels.com/photo/brown-paper-envelope-on-table-211290/">Photo by John-Mark Smith from Pexels</a></span>
</div>
</section>
<section id="idees">
<div class="container">
<h1>Idees</h1>
<p>
Podries incloure un <strong>llibre de visites</strong>, perquè els jugadors hi deixin alguna nota, per incloure pistes o elements que ajudin a desenvolupar parts del joc.
</p>
<hr>
<p>
Si imagineu més elements, podeu fer-me arribar les vostres idees a qualsevol de les meves xarxes:
</p>
<a href="https://instagram.com/jacobrmmr" class="social">
<span><i class="fa-brands fa-instagram"></i></span>
<span>@jacobrmmr</span>
</a>
<a href="https://twitter.com/jacobrafols" class="social">
<span><i class="fa-brands fa-twitter"></i></span>
<span>@jacobrafols</span>
</a>
</div>
<div class="separate">
<span class="srclink" style="padding-left: 2rem">src:
<a href="https://www.pexels.com/ca-es/foto/gent-adiccio-aposta-casino-6664178/">
Foto de Anna Shvets de Pexels
</a>
</span>
</div>
</section>
<footer>
<div class="container">
<h2 style="margin-bottom: 0">
Un joc de <a href="/">Jacob Ràfols Morilla</a>,
</h2>
<h3>Montse Morilla Gil</h3>
<hr>
<p style="text-align: left;"><i>Betatesters:</i></p>
<div class="contribuidors">
<span>Aicard Ventura</span>
<span>Anna Salvador</span>
<span>Clara Catasus</span>
<span>Daniel Sanford</span>
<span>David Silvestre</span>
<span>Jon Garcia</span>
<span>Laia Soto</span>
<span>Luke Hayden</span>
<span>Manel Ballart</span>
<span>Marc Vives</span>
<span>Nayra Silvestre</span>
<span>Ona Molner</span>
<span>Tristan Vignolo</span>
</div>
<hr>
<p class="machine">Des de: 14 - 1 - 2022</p>
</div>
</footer>
<script src="lib/vue.js"></script>
<script src="lib/vuex.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<script src="js/store_v2.js?v=2.1" charset="utf-8"></script>
<script src="js/characterprint_v2.js?v=2.2" charset="utf-8"></script>
<script src="js/app_v2.js?v=2.2" charset="utf-8"></script>
<script type="text/javascript">
function scrollto (id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth', block: 'start'});
}
</script>
</body>
</html>