tarot/index.html at main · RedMagicBlue/tarot · GitHub

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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<!-- Version: 3.2.1 | Last Update: 2025-08-10 | Author: RedMagicBlue Indie Game Studio | © All rights reserved -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Xaula – Tarot Game</title>

  <!-- SEO & Meta Tags -->
  <meta name="theme-color" content="#e4004f">
  <meta name="description" content="La Xaula – Tarot Game: an immersive, philosophical card experience blending traditional symbolism with modern gameplay. Explore intuitive divination, unique characters, and an   				    original soundtrack. Play on desktop, tablet, or smartphone.">
  <meta name="keywords" content="tarot, game, La Xaula">
  <meta name="author" content="RedMagicBlue Indie Games Studio">

  <!-- Favicon -->
  <link rel="icon" href="./images/icon.webp" type="image/webp" />

  <!-- Android + Desktop Icon -->
  <link rel="icon" href="./images/icon.webp" type="image/webp" />

  <!-- iOS/macOS Home Screen Icon -->
  <link rel="apple-touch-icon" href="./images/icon.webp" />

  <!-- Optional: Set iOS theme -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="La Xaula - Tarot Game" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />

  <!-- Social Meta -->
  <meta property="og:title" content="La Xaula – Tarot Game">
  <meta property="og:description" content="Play Now">
  <meta property="og:image" content="https://redmagicblue.github.io/tarot/images/icon.webp">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://redmagicblue.github.io/tarot/">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="La Xaula – Tarot Game">
  <meta name="twitter:description" content="Play Now">
  <meta name="twitter:image" content="https://redmagicblue.github.io/tarot/images/icon.webp">

  <!-- Styles & Scripts -->
  <link rel="stylesheet" href="./css/uikit.css">
  <link rel="stylesheet" href="./css/custom.css">
  <script src="./js/uikit.js"></script>
  <script src="./js/uikit-icons.js"></script>
  <script src="./assets/engine.js"></script>
  <script src="./assets/particles.js"></script>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      scroll-behavior: smooth;
      background: transparent;
      cursor: none !important;
    }

    body, button, [role="button"], .uk-accordion-title {
    cursor: none !important;
    }

    /* Show custom cursor by default (e.g., on desktop) */
    .desktop-only {
    display: block;
    }

    /* Detect touch devices via coarse pointer */
    @media (pointer: coarse) {
    .desktop-only {
    display: none !important;
    }

    /* Restore system cursor or hide custom ones if applied globally */
    * {
    cursor: auto !important;
     }
    }

    body {
      position: relative;
      z-index: 0;
      font-family: sans-serif;
    }

    .uk-container {
      position: relative;
      z-index: 1;
      padding-bottom: 80px;
    }

    .accordion-item {
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 10px;
      background-color: #000;
      color: #fff;
    }

    .accordion-item > a {
      padding: 12px 20px;
      color: #fff !important;
      background-color: #000;
    }

    .uk-accordion-content {
      padding: 15px;
      background-color: #000;
      border-radius: 8px;
      color: #fff;
    }

    #custom-cursor {
    position: fixed;
    width: 80px;
    height: auto;
    pointer-events: none;
    transform: rotate(-5deg);
    z-index: 10;
    mix-blend-mode: normal;
    }

    .uk-lightbox-button,
    .uk-lightbox-iframe,
    .uk-lightbox-toolbar,
    .uk-lightbox-toolbar > * {
     cursor: auto !important;
    }

    .uk-lightbox-toolbar-icon {
    cursor: pointer !important;
    }

    .scene-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    }

    a-scene {
      width: 100vw;
      height: 100vh;
    }

   #music-modal .uk-modal-close-outside {
    position: fixed !important;
    top: 380px !important;
    left: 85% !important;
    transform: translateX(-50%) !important;
    z-index: 1050;

    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #e4004f !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  #music-modal .uk-modal-close-outside::before {
    font-size: 36px !important;
    color: white !important;
  }

main.uk-container {
  position: relative;
  height: 100vh;      /* fill the viewport */
  overflow-y: auto;   /* allow vertical scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  padding-bottom: 80px;
  z-index: 1;
  background: transparent;

  /* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* Hide scrollbar for Chrome, Safari and Opera */
main.uk-container::-webkit-scrollbar {
  display: none;

}

  </style>

  <!-- Lightbox Delay -->
  <script>
    UIkit.mixin({ data: { delayControls: 86400000 } }, 'lightbox');
  </script>

</head>

<body>
  <main class="uk-container">
    <header class="uk-text-center uk-padding-large">
      <h1 class="uk-animation-slide-top uk-heading-xlarge uk-heading-2xlarge@m" style="text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);">
        <span class="uk-text-lighter" style="color: #e4004f;">La Xaula</span>
        <span style="color: white;">Tarot</span>
      </h1>
      <div class="uk-flex uk-flex-center uk-margin uk-animation-scale-up uk-padding-large uk-padding-remove-bottom" uk-lightbox>
        <a class="uk-button uk-button-primary uk-button-large uk-border-pill uk-text-bold" href="game.html">
          <span uk-icon="icon: play; ratio: 1.5"></span> Play Game
        </a>
      </div>

<!-- Trigger Button -->
	<div class="uk-flex uk-flex-center uk-margin">
  	<a class="uk-button uk-button-primary uk-button-large uk-border-pill uk-text-bold"
     	href="#music-modal" uk-toggle>
    	<span uk-icon="icon: settings; ratio: 1.5"></span> Soundtrack
  	</a>
	</div>
        <!-- Modal -->
<div id="music-modal" class="uk-modal" uk-modal>
  <div class="uk-modal-dialog uk-modal-full uk-padding-remove">
    <button class="uk-modal-close-outside" type="button" uk-close></button>
    <iframe src="music.html" frameborder="0" allow="autoplay" style="width:100%; height:100vh;"></iframe>
  </div>
</div>

    </header>

    <!-- Accordion Section -->
    <section style="opacity: 0.8;">
      <ul uk-accordion="multiple: false; collapsible: true">
        <li class="accordion-item uk-card uk-card-default uk-box-shadow-hover-small uk-animation-fade">
          <a class="uk-accordion-title" href="#">About</a>
          <div class="uk-accordion-content">
<p class="uk-text-lighter uk-text-large">La Xaula's Tarot cards, like life, are meant for whatever the operator chooses to do with them.</p>

  <p>
  <span style="color: #e4004f;">1 LU MARREC</span> (the rascal -masc.)<br />
  <span style="color: #e4004f;">2 LINFANTA</span> (the infanta -fem.)<br />
  <span style="color: #e4004f;">3 LA PORTAL</span> (the gate -androgynous)<br />
  <span style="color: #e4004f;">4 LO MÚSIC</span> (the musician -masc)<br />
  <span style="color: #e4004f;">5 LA JOBELLA</span> (“the jobella” -fem)<br />
  <span style="color: #e4004f;">6 LA MORTERA</span> (the mortar -androgynous)<br />
  <span style="color: #e4004f;">7 EL REIETÓ</span> (the little king -masc.)<br />
  <span style="color: #e4004f;">8 LA REINETA</span> (the little queen -fem.)<br />
  <span style="color: #e4004f;">9 EL LLUNA</span> (the moon -androgynous)<br />
  <span style="color: #e4004f;">10 LO SORRO</span> (the fox -masc.)<br />
  <span style="color: #e4004f;">11 LA RAPOSA</span> (the vixen -fem.)<br />
  <span style="color: #e4004f;">12 LA GAIATA</span> (the cane -androgynous)<br />
  <span style="color: #e4004f;">13 L'AGÜELO</span> (grandpa -masc.)<br />
  <span style="color: #e4004f;">14 L'ÀVIA</span> (grandma -fem.)<br />
  <span style="color: #e4004f;">15 LA SOL</span> (the sun -androgynous)<br />
  <span style="color: #e4004f;">16 LA BRUIXA</span> (the witch -fem.)<br />
  <span style="color: #e4004f;">17 L'ABALANSA</span> (the scale -androgynous)<br />
  <span style="color: #e4004f;">18 EL BRUIXOT</span> (the sorcerer -masc.)<br />
  <span style="color: #e4004f;">19 L'ARQUITECTE</span> (the architect -masc.)<br />
  <span style="color: #e4004f;">20 LA DEESSA</span> (the goddess -fem.)<br />
  <span style="color: #e4004f;">21 L'ARMAFRODITE</span> (“the armafrodite” -androgynous)<br />
  <span style="color: #e4004f;">LO MÓN</span> (the world -neutral)<br />
  <span style="color: #e4004f;">LO NOMÓN</span> (“the noworld” -neutral)<br />
  <span style="color: #e4004f;">LO MÓN DEL MITX</span> (the middle world -neutral)
  </p>

<p class="uk-text-lighter uk-text-large uk-dropcap">In this brief introduction, we will abstain from offering literal meanings for each of these cards. Since, undoubtedly, the reader will recognize in the deck images derived from multiple traditions as well as others newly coined, to which they will easily be able to assign contents, whether classic or more personal. In fact, we encourage the reader to abandon this text and, without further ado, extract from the observation of the cards themselves their way of using them.</p>

<p class="uk-text-lighter uk-text-large">Anyway, we shall here focus on discussing the structure of the deck, laying some foundations that might help the users to find their way through the cards, regardless whether this takes the form of a game, an object of contemplation, an oracle or something completely unsuspected. If the penultimate is the case, to those who want to use it in the way of a tarot, la Xaula offers the advantage of allowing more intuitive associations and projections, free from the pre-learnt system of the arcanes, but, at the same time, allowing to apply, in new ways, the bulk of knowledge of the traditions present in classic tarot. To those who want to use la Xaula as a form of entertainment, the multiple ways in which the cards can interact will allow them to create games with rules that can go from the very simple to high levels of complexity.</p>

<p class="uk-text-lighter uk-text-large">La Xaula consists of 7 masculine cards, 7 feminine cards, 7 androgynous cards and 3 neutral cards. Being each card duplicated in color and in black & white. Please note that nouns and articles in Catalan, La Xaula's original language, are gendered. Quite often, its nouns and articles seemingly contain misspellings or are oddly gendered, with articles unsuitable for the gender of the noun, thus creating a third gender category which we have noted in the translation as “androgynous”. The translations above include the categories masc. (masculine), fem. (feminine), androgynous and neutral, so that non-Catalan readers can fully grasp this aspect of the deck. Of these cards, the first 21 are figurative and portray people, animals, celestial bodies, objects and spaces. The remaining cards, the three worlds, are much more abstract.</p>

<p class="uk-text-lighter uk-text-large">Each card has three colours, leaving aside the white colour of the background and the black colour of the line. Overall, the deck has a heptadic color scheme: magenta, orange, yellow, green, turquoise, blue and gray. As to the meaning of black & white vs coloured cards, they can be assigned to potential vs. factual, past vs. future or any other parameter the reader finds convenient.</p>

<p class="uk-text-lighter uk-text-large">The interactions between the different cards can take place at many levels: numerical value, content, objects, gaze direction, colour, etc. The images draw from multiple traditions and can operate at different planes. If, for instance, someone inclined towards astrology would like to apply zodiacal correspondences to the cards, they could, according to their pictorial content, use the following: Aries - 13 L'AGÜELO, Taurus - 14 L'ÀVIA, Gemini - 10 LO SORRO, Cancer - 12 LA GAIATA, Leo - 15 LA SOL, Virgo - 9 EL LLUNA, Libra - 17 L'ABALANSA, Scorpio - 20 LA DEESSA, Sagittarius - 19 L'ARQUITECTE, Capricorn - 11 LA RAPOSA, Aquarius - 21 L'ARMAFRODITE, Pisces - 16 LA BRUIXA.</p>

<p class="uk-text-lighter uk-text-large">A peculiarity specific to La Xaula is, though, the card interactions through “escletxes” (cracks) and “forats” (holes). Each of the figurative cards has a white gap or “escletxa” (crack) near one of its corners. This "escletxa" can combine or not with other “escletxes” of adjacent cards. When two “escletxes” touch, they form a “forat” (hole). “Escletxes” have several shapes: semicircle, semisquare, up horn, down horn, spike and bone. The resulting “forats” can have 1, 2, 3 or 4 lines.</p>

<p class="uk-text-lighter uk-text-large">Two coincident semicircles, for instance, create a circular shape or "forat aigüera” (sink hole) which is considered to have a single line. A bone and a horn or a bone and a spike create a “tita” (willie) hole, which has 2 lines. The “tita” type “forats” can be, according to their shape, “trempats, destrempats” or “templats” (horny, flaccid or tempered). A semisquare plus a semicircle create a “tambor” (drum); two horns or a horn plus a spike create a “xona” (pussy) that, depending on its shape, can also be “somrient, disgustada” or “templada” (smiling, upset or tempered). A semicircle plus a spike or horn forms a “llàgrima” (tear). Two bones form, you guess, an “Os” (bone). All of the above “forats” have 2 lines. A semisquare plus a horn or spike creates an “ullal” or “estaca” (fang or stake) respectively. Both having 3 lines. Finally, two semisquares create a square hole or “finestra” (window), the only shape with four lines.</p>

<p class="uk-text-lighter uk-text-large">“Escletxes” (cracks) and the characters' gaze directions give two possible directionalities for each card. We can interpret the card's content according to its directional interaction with other cards using any of these two codes. For instance, in an oracular context, the gaze of the character could apply to the aim of a person's actions whereas, in parallel, the “escletxa” might point to the directionality of the context or, in other words, the inertia of the situation.</p>

<p class="uk-text-lighter uk-text-large">When “escletxes” coalesce, a “forat” of one of the above types is formed. Moreover, when the cracks' positions do not match but are in coincident sides of the cards they can be “mounted”, sliding up or down one of the cards, so that a shape is formed. In that case we talk about a “forat xuscat” (xuscat hole). When they are in opposite sides of the cards, we have a “contra” (opposition). “Contras” can also be “direct” or “xuscat”, depending on whether the position of the cracks is at the same height or not. Finally, when two “escletxes” do not coalesce, but both face the same side (for example, the right side of their respective card), we have a “fugida” (escape), which can also be “direct” or “xuscat” following the same rule.</p>

<p class="uk-text-lighter uk-text-large">Unnumbered cards (LO MÓN, LO NOMÓN and LO MÓN DEL MITX) have cracks open to all directions, so they always match and can act as bridges between entities or worlds.</p>

<p class="uk-text-lighter uk-text-large">We hope you enjoy the game and the game enjoys you.</p>

<p class="uk-text-lighter uk-text-large">Gerard Gil</p>
          </div>
        </li>
        <li class="accordion-item uk-card uk-card-default uk-box-shadow-hover-small uk-animation-fade">
          <a class="uk-accordion-title" href="#">Credits</a>
          <div class="uk-accordion-content">
            <p><span style="color: #e4004f;">Concept, Music and Tarot Cards:</span> <a href="https://www.imdb.com/name/nm2584352/" target="_blank">Gerard Gil</a></p>
            <p><span style="color: #e4004f;">Game Design:</span> <a href="https://ferrosara.github.io" target="_blank">Sara Ferro</a> & <a href="https://weilchris.github.io" target="_blank">Chris Weil</a></p>
            <p><span style="color: #e4004f;">Development:</span> <a href="https://redmagicblue.github.io" target="_blank">RedMagicBlue</a></p>
            <p><span style="color: #e4004f;">Publisher:</span> <a href="https://artoldo.github.io" target="_blank">ARTOLDO</a> media</p>
	    <p>© 2025 - All rights reserved.
          </div>
        </li>
        <li class="accordion-item uk-card uk-card-default uk-box-shadow-hover-small uk-animation-fade">
          <a class="uk-accordion-title" href="#">Disclaimer</a>
          <div class="uk-accordion-content">
            <p><span style="color: #e4004f;">The creators of the Tarot’s Oraclem provide this experience for entertainment purposes only. No guarantees are made regarding the accuracy, reliability, or outcomes of 					     any advice, predictions, or interpretations offered. The creators accept no liability for any decisions, actions, or consequences resulting from use. All choices and 	                                     their outcomes remain solely the responsibility of the player.</span><p>
          </div>
        </li>
        <li class="accordion-item uk-card uk-card-default uk-box-shadow-hover-small uk-animation-fade">
          <a class="uk-accordion-title" href="#">Instructions</a>
          <div class="uk-accordion-content">
<p class="uk-text-lighter uk-text-large uk-dropcap">
Begin your journey by invoking the game. With each card you touch, listen closely to the oracle’s whisper, revealing secrets veiled within its image. Should you wish, immerse yourself in the original soundtrack, a subtle score weaving through the experience as your companion.
</p>

<p class="uk-text-lighter uk-text-large">
Our intent has been to preserve the purity of play, inviting each player to embark on a journey of imagination and discovery. The intricate interplay woven within the cards is left to your intuition to unravel, for embedding it too explicitly would diminish the mystery and depth that breathe life into the game. For those who wish to delve beyond the surface, there lies a profound philosophy waiting to be explored—a delicate balance between the timeless wisdom of classic card traditions and the effortless grace of a casual digital experience.
</p>

<p class="uk-text-lighter uk-text-large">
This creation is yours to explore on any modern device — smartphone, tablet, or desktop — a portal open for all seekers. Embrace the simplicity, yet surrender to the complexity beneath, and may your path through the cards reveal more than mere play.
</p>

<p class="uk-text-lighter uk-text-large">
Omnia ad uno<br>
Sara Ferro & Chris Weil
</p>
          </div>
        </li>
      </ul>
    </section>

<br><br><br><br><br><br><br><br><br><br>

  </main>

  <img id="custom-cursor" class="desktop-only" src="./images/hand.png" alt="cursor" />

  <script>
  const customCursor = document.getElementById('custom-cursor');
  document.addEventListener('mousemove', (e) => {
    const offsetX = -30;
    const offsetY = -50;
    customCursor.style.left = (e.clientX + offsetX) + 'px';
    customCursor.style.top = (e.clientY + offsetY) + 'px';
  });
  </script>

  <!-- A-Frame Background Scene -->
  <div class="scene-background">
    <a-scene
      particle-system="preset: snow; particleCount: 15000; color: #e4004f; rotationAxis:y; velocityValue: 0 5 0"
      loading-screen="dotsColor: red; backgroundColor: black"
      vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false"
      antialias="true">
      <a-camera position="0 0 -15"></a-camera>
      <a-sky color="#000"></a-sky>
    </a-scene>
  </div>

  <!-- Tarot Deck -->
  <script>
    const tarotDeck = Array.from({ length: 24 }, (_, i) => ({
    texture: `./images/${i + 1}.jpg`
    }));
    const cardBackTexture = './images/back.jpg';
    const scene = document.querySelector('a-scene');

    function clearCards() {
      const oldCards = scene.querySelectorAll('.falling-card');
      oldCards.forEach(card => card.remove());
    }

    function pick3Random(deck) {
      const copy = deck.slice();
      for (let i = copy.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [copy[i], copy[j]] = [copy[j], copy[i]];
      }
      return copy.slice(0, 3);
    }

    function createCardEntity(frontTexture, backTexture, x, delay) {
      const card = document.createElement('a-entity');
      card.classList.add('falling-card');
      card.setAttribute('position', `${x} 20 -20`);
      card.setAttribute('animation__rotate', {
        property: 'rotation', to: '0 720 0', loop: true, dur: 8000, easing: 'linear', delay
      });
      card.setAttribute('animation__fall', {
        property: 'position', to: `${x} -20 -20`, dur: 10000, loop: true, easing: 'linear', delay
      });

      const front = document.createElement('a-plane');
      front.setAttribute('width', '1');
      front.setAttribute('height', '2');
      front.setAttribute('material', `src: ${frontTexture}; side: double; shader: flat`);
      front.setAttribute('position', '0 0 0');

      const back = document.createElement('a-plane');
      back.setAttribute('width', '1');
      back.setAttribute('height', '2');
      back.setAttribute('material', `src: ${backTexture}; side: double; shader: flat`);
      back.setAttribute('rotation', '0 180 0');
      back.setAttribute('position', '0 0 -0.003');

      card.appendChild(front);
      card.appendChild(back);
      scene.appendChild(card);
    }

    function startFallingCards() {
      clearCards();
      const cards = pick3Random(tarotDeck);
      const positionsX = [-3, 0, 3];
      const delayBetween = 3500;
      cards.forEach((card, i) => {
        createCardEntity(card.texture, cardBackTexture, positionsX[i], i * delayBetween);
      });
    }

    function loopCards() {
      startFallingCards();
      const cycleLength = 10000 + 3500 * 2;
      setInterval(startFallingCards, cycleLength);
    }

    window.onload = loopCards;
  </script>

<!-- Prevent dragging -->

<script>
document.querySelectorAll('img').forEach((img) => {
    img.addEventListener('dragstart', (e) => e.preventDefault());
});
</script>

<!-- Disable right-click -->

<script>
  // Disable right-click
  document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
  });

  // Disable text selection using JavaScript (extra layer of protection)
  document.addEventListener('selectstart', function(event) {
    event.preventDefault();
  });
</script>

</body>
</html>