idlegames/zener.html at main · TimelessP/idlegames · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="application-name" content="IdleGames">
  <meta name="theme-color" content="#808080">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <script src="assets/js/pwa.js" defer></script>
  <title>Zener cards</title>
  <style>
    html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Arial}
    body{display:flex;align-items:center;justify-content:center;background:#808080}
    /* prevent accidental text selection on tap/click */
    html,body,svg{user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none}
    body{-webkit-tap-highlight-color: transparent}
   /* hot-corner overlays (visual only, pointer-events:none so clicks pass through)
     Use vmin for square corners so they remain square regardless of viewport aspect ratio. */
   .hot-corner{position:fixed;width:14vmin;height:14vmin;background:#999999;opacity:0.6;pointer-events:none;z-index:9999}
   .hot-corner.top-left{left:0;top:0;border-bottom-right-radius:10px}
   .hot-corner.top-right{right:0;top:0;border-bottom-left-radius:10px}
   .hot-corner.bottom-left{left:0;bottom:0;border-top-right-radius:10px}
   .hot-corner.bottom-right{right:0;bottom:0;border-top-left-radius:10px}
    .stage{width:min(80vmin,480px);height:calc(min(80vmin,480px) * 1.6);display:flex;align-items:center;justify-content:center;position:relative}
    .card{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center}
    .card.show{display:flex}
    svg{width:80%;height:auto;display:block}
    .hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.9);padding:6px 10px;border-radius:8px;font-size:13px;color:#111;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
    .credit{position:absolute;top:8px;left:8px;font-size:12px;color:#444}
  </style>
</head>
<body>
  <div class="stage" id="stage">


    <!-- Card 1: Circle (yellow) -->
    <div class="card" id="card-circle" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Circle card">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <circle cx="90" cy="144" r="48" fill="none" stroke="#f6c708" stroke-width="10"/>
      </svg>
    </div>

    <!-- Card 2: Plus (red) -->
    <div class="card" id="card-plus" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Plus card">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <g stroke="#fe0000" stroke-width="14" stroke-linecap="square" stroke-linejoin="miter">
          <path d="M90 84 L90 204" fill="none"/>
          <path d="M30 144 L150 144" fill="none"/>
        </g>
      </svg>
    </div>

    <!-- Card 3: Waves (blue) -->
    <div class="card" id="card-waves" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Waves card">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <g stroke="#094cf6" stroke-width="14" stroke-linecap="round" fill="none">
          <!-- three vertical waves occupying the same 120x120 bbox as the plus (x:30-150, y:84-204) -->
          <path d="M60 84 C72 102 48 120 60 138 C72 156 48 174 60 192" />
          <path d="M90 84 C102 102 78 120 90 138 C102 156 78 174 90 192" />
          <path d="M120 84 C132 102 108 120 120 138 C132 156 108 174 120 192" />
        </g>
      </svg>
    </div>

    <!-- Uno deck: numbers 1..9 in rotating colors -->
    <div class="card" data-deck="uno" id="uno-1" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 1">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#e53935" stroke="#b12626" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">1</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-2" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 2">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#29c430" stroke="#1f9a29" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">2</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-3" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 3">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#f6c708" stroke="#d4a205" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">3</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-4" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 4">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#1976d2" stroke="#1159a3" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">4</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-5" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 5">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#e53935" stroke="#b12626" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">5</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-6" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 6">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#29c430" stroke="#1f9a29" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">6</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-7" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 7">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#f6c708" stroke="#d4a205" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">7</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-8" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 8">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#1976d2" stroke="#1159a3" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">8</text>
      </svg>
    </div>

    <div class="card" data-deck="uno" id="uno-9" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Uno 9">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="32" y="56" width="116" height="176" rx="10" fill="#e53935" stroke="#b12626" stroke-width="6"/>
        <text x="90" y="144" fill="#ffffff" stroke="#000" stroke-width="8" paint-order="stroke fill" stroke-linejoin="round" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="96" text-anchor="middle" dominant-baseline="middle">9</text>
      </svg>
    </div>

    <!-- Card 4: Square (black frame) -->
    <div class="card" id="card-square" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Square card">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <rect x="48" y="104" width="84" height="80" fill="none" stroke="#000" stroke-width="12" rx="6" ry="6"/>
      </svg>
    </div>

    <!-- Card 5: Star (green) -->
    <div class="card" id="card-star" aria-hidden="true">
      <svg viewBox="0 0 180 288" role="img" aria-label="Star card">
        <rect x="8" y="8" width="164" height="272" rx="12" ry="12" fill="#fff" stroke="#404040" stroke-width="4"/>
        <polygon points="90,84 103,124 146,124 110,150 123,190 90,166 57,190 70,150 34,124 77,124" fill="none" stroke="#29c430" stroke-width="10" stroke-linejoin="round"/>
      </svg>
    </div>


  </div>

  <!-- Visual hot-corner overlays (visual only; clicks pass through) -->
  <div class="hot-corner top-left" aria-hidden="true"></div>
  <div class="hot-corner top-right" aria-hidden="true"></div>
  <div class="hot-corner bottom-left" aria-hidden="true"></div>
  <div class="hot-corner bottom-right" aria-hidden="true"></div>

  <script>
    (function(){
      const allCards = Array.from(document.querySelectorAll('.card'));
      const zenerCards = Array.from(document.querySelectorAll('.card:not([data-deck])'));
      const unoCards = Array.from(document.querySelectorAll('.card[data-deck="uno"]'));
      let currentDeck = 'zener'; // 'zener' or 'uno'
      // history of shown cards: {deck:'zener'|'uno', index: number}
      const history = [];
      let historyPos = -1; // index into history
      let lastEventAt = 0;

      function hideAll(){
        allCards.forEach(c => { c.classList.remove('show'); c.setAttribute('aria-hidden', 'true'); });
      }

      function showFromDeck(deck, index){
        hideAll();
        const list = deck === 'uno' ? unoCards : zenerCards;
        if(!list || list.length===0) return;
        index = Math.max(0, Math.min(index, list.length-1));
        list[index].classList.add('show');
        list[index].setAttribute('aria-hidden','false');
      }

      function pushHistory(deck, index){
        // if we're not at the end of history, truncate forward history
        if(historyPos < history.length - 1){
          history.splice(historyPos + 1);
        }
        history.push({deck, index});
        // cap history at 10
        while(history.length > 10) history.shift();
        historyPos = history.length - 1;
      }

      function goBack(){
        if(historyPos > 0){
          historyPos -= 1;
          const h = history[historyPos];
          if(h) { currentDeck = h.deck; showFromDeck(h.deck, h.index); }
        }
      }

      function goForward(){
        if(historyPos < history.length - 1){
          historyPos += 1;
          const h = history[historyPos];
          if(h) { currentDeck = h.deck; showFromDeck(h.deck, h.index); }
        }
      }

      function pickRandomFrom(list){
        if(!list || list.length===0) return -1;
        if(list.length===1) return 0;
        return Math.floor(Math.random()*list.length);
      }

      function inTopLeft(x,y){ return x < window.innerWidth * 0.12 && y < window.innerHeight * 0.12; }
      function inTopRight(x,y){ return x > window.innerWidth * 0.88 && y < window.innerHeight * 0.12; }
      function inBottomLeft(x,y){ return x < window.innerWidth * 0.12 && y > window.innerHeight * 0.88; }
      function inBottomRight(x,y){ return x > window.innerWidth * 0.88 && y > window.innerHeight * 0.88; }

      function interaction(ev, x, y){
        const now = Date.now();
        if(now - lastEventAt < 250) return; // debounce
        lastEventAt = now;

        // navigation: bottom-left/back, bottom-right/forward
        if(typeof x === 'number' && typeof y === 'number'){
          if(inBottomLeft(x,y)) { goBack(); return; }
          if(inBottomRight(x,y)) { goForward(); return; }
        }

        // if coordinates provided, check top corners to switch deck
        if(typeof x === 'number' && typeof y === 'number'){
          if(inTopLeft(x,y)) currentDeck = 'zener';
          else if(inTopRight(x,y)) currentDeck = 'uno';
        }

        // draw a new random card from current deck
        const list = currentDeck === 'uno' ? unoCards : zenerCards;
        const idx = pickRandomFrom(list);
        if(idx < 0) return;

        // if we're in the middle of history, truncate forward history before pushing
        pushHistory(currentDeck, idx);
        showFromDeck(currentDeck, idx);
      }

      window.addEventListener('keydown', (e)=> interaction(e), {passive:true});
      window.addEventListener('click', (e)=> interaction(e, e.clientX, e.clientY), {passive:true});
      window.addEventListener('touchstart', function(e){
        const t = e.touches && e.touches[0];
        if(t) interaction(e, t.clientX, t.clientY);
      }, {passive:true});

      // show a random first card on load and record it in history
      const initial = pickRandomFrom(zenerCards);
      if (initial >= 0) {
        currentDeck = 'zener';
        pushHistory('zener', initial);
        showFromDeck('zener', initial);
      }

      // expose helpers for debugging
      window.zener = {
        showFromDeck: (deck,i)=>{ pushHistory(deck,i); showFromDeck(deck,i); },
        history
      };
    })();
  </script>
  <script src="parental.js"></script>
</body>
</html>