skufflegame.github.io/characters.html at main · SkuffleGame/skufflegame.github.io · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Skuffle</title>
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="style.css" />
    <!-- Favicon and app icons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/favicon/apple-touch-icon.png" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/favicon/favicon-32x32.png" />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <base target="_blank" />
    <!-- This makes every link open in new tab -->

    <!-- import needle-engine -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
  </head>
  <body>
    <header class="py-5 header-bg text-black">
      <div class="container d-flex flex-column align-items-center text-center">
        <img
          src="img/LogoLowRes.png"
          alt="Skuffle logo"
          class="header-logo mb-3" />
        <p class="mb-0">Play. Draw. Ruin their day.</p>
      </div>
    </header>

    <div class="navbar">
      <a href="index.html" target="_self"
        ><i class="fa fa-fw fa-home"></i><span class="nav-text"> Home</span></a
      >
      <a href="tracker.html" target="_self"
        ><i class="fa fa-fw fa-heart"></i
        ><span class="nav-text"> Health Tracker</span></a
      >
      <a class="active" href="characters.html" target="_self"
        ><i class="fa fa-fw fa-users"></i
        ><span class="nav-text"> Characters</span></a
      >
    </div>
    <div class="padd">
      <br>
      <h1 class="tracker-title">Character Bios</h1>

      <div class="character-layout">
        <!-- Left: 3D embed + AR -->
        <div class="model-panel">
          <iframe
            id="needle-frame"
            src="https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw6mPj9T-ZPFQNQ-product%2FCabarello.glb"
            title="3D Character Viewer"
            frameborder="0"
            allow="
              xr-spatial-tracking;
              accelerometer;
              gyroscope;
              display-capture;
              geolocation;
              camera;
              microphone;
            "
            allowfullscreen>
          </iframe>
          <div class="ar-note">
            <p><strong>AR note:</strong> AR works for both Android and iOS, but is best on iOS (Use Quick Look).</p>
            <p>Image tracking is natively supported for iOS, Android users will need to enable WebXR incubations (experimental) in Chrome for image tracking. <a href="https://engine.needle.tools/docs/how-to-guides/xr/image-tracking.html#android-webxr-image-tracking">View setup guide</a></p>
          </div>
          <a
            id="ar-btn"
            href="https://skufflegame.github.io/AR-Image-Tracking/"
            class="ar-btn"
            rel="noopener noreferrer"
            ><i class="fa fa-mobile" aria-hidden="true"></i> View Image Tracking
            AR</a
          >
        </div>

        <!-- Right: Bio -->
        <div class="bio-panel">
          <h2 id="char-name">Cowboy</h2>
          <p id="char-bio">
            Bounty Hunting isn't usually a labour of love, but this Caballero
            loves to hunt for bounties. They've brought in bounties that haven't
            even had bounties put on them yet.
          </p>
          <ul id="char-stats" class="char-stats"></ul>

          <div class="char-extra-image">
            <img id="char-extra-img" src="img/cardbacks/Cabarello.png" alt="Character Card Backs">
          </div>
        </div>
      </div>

      <!-- Gallery Navigation -->
      <div class="gallery-nav">
        <button id="btn-prev" onclick="navigate(-1)">
          <i class="fa fa-chevron-left"></i>
        </button>
        <div id="dot-nav"></div>
        <button id="btn-next" onclick="navigate(1)">
          <i class="fa fa-chevron-right"></i>
        </button>
      </div>
    </div>
    <div class="footer_block">
      <p class="text-center" id="current_year"></p>
      <p class="text-center">
        A project by Aaron, Tom, Adriana, Tadhg and Katerina
      </p>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Character Gallery Init
        buildDots();
        goTo(0);
      });

      const characters = [
        {
          name: "Caballero the Cowboy",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw6mPj9T-ZPFQNQ-product%2FCabarello.glb",
          bio: "Bounty hunting isn't usually a labour of love, but this Caballero loves to hunt for bounties. They've brought in bounties that haven't even had bounties put on them yet.",
          playstyle:
            "Play fast to overwhelm your opponents before they can heal. Spend Ammo points to play more cards.",
          ability:
            "Bullets: You can use bullets to pay for cards, instead of discarding. You start off with one bullet for each player in the game.",
          aggression: "High",
          complexity: "Low",
          extraImage: "img/cardbacks/Cabarello.png",

          theme: {
            border: "#561300",
            background: "#ad8c83",
            text: "#000000",
          }
        },
        {
          name: "Lawrence the Were-Lobster",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw6ZMcFuE-Z2qdF4Y-product%2FLawrence.glb",
          bio: "Dockyards are tough on the back. Even tougher if you have a crustacean's posture. Lawrence has been a were-lobster since he was a lad, and that was quite a while. Turning into a Half-Lobster at high tide lost its novelty quite quickly. So now he just takes advantage of the strength it gives him by working with the heaviest things others can't carry.",
          playstyle:
            "Hit your opponents hard and heavy and stay healthy. Keep some cards in hand to get maximum use out of them",
          ability:
            "Tide: At the start of the game, you’re on Low Tide. At the end of each turn, change the tide. Cards have different effects depending on what tide you’re on.",
          aggression: "High",
          complexity: "Medium",
          extraImage: "img/cardbacks/Lawrence.png",

          theme: {
            border: "#18163b",
            background: "#a1d0fc",
            text: "#18163b",
          },
        },
        {
          name: "Goe Bling the Goblin",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw6np3DL-Z2oiVyv-product%2FGoeBling.glb",
          bio: "You know what they say about the antiques business. It's not what it used to be! Under the table deals are becoming more common to keep these pawnsters and trinket dealers in business. That's where Goe Bling comes in. Swiping, climbing, crawling, stealing and squealing, she gets into trouble, gets out of it, and makes a profit!",
          playstyle:
            "Use your own health as a resource to deal more damage. Steal your opponents cards to disrupt their gameplay.",
          ability:
            "Thievery: At the end of every turn, heal 2hp for each time you’ve stolen a card from an opponent. ",
          aggression: "Low",
          complexity: "Low",
          extraImage: "img/cardbacks/GoeBling.png",

          theme: {
            border: "#223323",
            background: "#466948",
            text: "#ffffff",
          },
        },
        {
          name: "Sal the Office Worker",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw619WO70-1DNp1C-product%2FSal.glb",
          bio: "Sal is devoted to two things, his wife and his job. He is yet to find a wife. 8am to 8pm, Sal doesn't love working, but he hates not having his TPS reports submitted on time. Work hard, get paid, pay bills, work hard. It's a simple life of staying off his feet. Some day he'll retire, and then he can kick back.",
          playstyle:
            "Build up cash, and deal damage in bursts. Avoid having too much and making yourself the threat of the board",
          ability:
            "Paperwork: You start every game with four dollars, and can gain or spend them by playing different cards. If you play a card without having sufficient cash, the card is still removed from your hand, however its effect does not occur",
          aggression: "Low",
          complexity: "Medium",
          extraImage: "img/cardbacks/Sal.png",

          theme: {
            border: "#393939",
            background: "#d9d9d9",
            text: "#393939",
          },
        },
        {
          name: "Margritte the Wizard",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw61wAyfd-ZxFq1z-product%2FMargritte.glb",
          bio: "Reading tarot is an easy swindle, but Margritte can actually get results from them. She and her cat make a living by reading for rich clients and telling them about their twisted end.",
          playstyle: "Maximise your draw to play as many cards as possible.",
          ability: "N/A",
          aggression: "Medium",
          complexity: "Low",
          extraImage: "img/cardbacks/Margritte.png",

          theme: {
            border: "#541037",
            background: "#f2bb5b",
            text: "#541037",
          },
        },
        {
          name: "Alan the Alien",
          embedSrc:
            "https://cloud.needle.tools/view/embed?file=https%3A%2F%2Fcloud.needle.tools%2F-%2Fassets%2FZ1j9bw6Z2g2VhM-Z1wpp63%2FAlien.glb",
          bio: "♋︎💧︎👍︎✋︎✞︎☠︎	 ♓︎❖︎❑︎ ♓︎🙵■︎■︎♓︎  ♓︎🙵 🙰😐︎  Alan  ☠︎❍︎ ⌧︎ ❖︎❑︎ ♓︎🙵■︎■︎♓︎❖︎❑︎ ♓︎🙵  ■︎■︎♓︎❖︎❑︎ ♓︎🙵■︎■︎♓︎❖︎❑︎ ♓︎🙵■︎■︎♓︎❖︎❑︎ ♓︎  🙵■︎■︎♓︎⬧︎♓︎  Portland, Oregon ♓︎🙵●︎❑︎ ♓︎🙵■︎■︎.",
          playstyle:
            "Use attacks that are ahead of the curve. Save your dodge points for when you really need them.",
          ability:
            "Dodge Points: Starting with 3 dodge points, use them to avoid an instance of damage.",
          aggression: "Medium",
          complexity: "Low",
          extraImage: "img/cardbacks/Alan.png",

          theme: {
            border: "#fc6fe7",
            background: "#efeacd",
            text: "#660A54",
          },
        },
      ];

      let current = 0;

      function buildDots() {
        const nav = document.getElementById("dot-nav");
        characters.forEach((_, i) => {
          const d = document.createElement("span");
          d.className = "dot" + (i === 0 ? " active" : "");
          d.onclick = () => goTo(i);
          nav.appendChild(d);
        });
      }

      function goTo(i) {
        current = i;
        const c = characters[i];

        const theme = c.theme || {
          border: "#ccc",
          background: "#ffffff",
          text: "#000000",
        };

        const bioPanel = document.querySelector(".bio-panel");
        bioPanel.style.setProperty("--char-border", theme.border);
        bioPanel.style.setProperty("--char-bg", theme.background);
        bioPanel.style.setProperty("--char-text", theme.text);

        document.getElementById("needle-frame").src = c.embedSrc || "";
        document.getElementById("char-name").textContent = c.name;
        document.getElementById("char-bio").textContent = c.bio;
        document.getElementById("char-stats").innerHTML = `
                <li><strong>Playstyle</strong> ${c.playstyle}</li>
                <li><strong>Ability</strong> ${c.ability}</li>
                <li><strong>Aggression</strong> ${c.aggression}</li>
                <li><strong>Complexity</strong> ${c.complexity}</li>
            `;
            document.getElementById("char-extra-img").src = c.extraImage || "img/cardbacks/cabarello.png";

        document
          .querySelectorAll(".dot")
          .forEach((d, di) => d.classList.toggle("active", di === i));
        document.getElementById("btn-prev").disabled = i === 0;
        document.getElementById("btn-next").disabled =
          i === characters.length - 1;
      }

      function navigate(dir) {
        goTo(current + dir);
      }

      document.getElementById("current_year").textContent =
        `Skuffle © ${new Date().getFullYear()}`;
    </script>
  </body>
</html>