Poorna dev catalogue

AIEP_Resources/Weekly_Reports/Sannidhi/Week2.md

@@ -0,0 +1,13 @@
+This week I worked on setting up and designing the frontend for progchamp. We used Sveltekit for this as it helps with both fetching data from the server side and the rendering on the webpage. This made the prohect easier to manage
+
+For the homepage we designed a cyberpunk-themed interface. This includes:
+1)a navigation bar with a search field and login controls
+2)an animated space invaders game for design purposes 
+3)a trending games grid
+4)a genre categories section
+5)a custom animated cursor that smoothly follows the mouse and reacts when hovering over interactive elements. 
+The entire design uses a dark colour palette with neon cyan, pink, yellow, and purple accents.
+Frontend files I worked on:
+•	src/routes/+page.svelte — designed and built the full homepage UI
+•	src/routes/+page.server.ts — set up server-side data loading for the homepage
+•	src/routes/+layout.server.ts — configured session data to flow to all pages

AIEP_Resources/Weekly_Reports/archita/week2.md

@@ -0,0 +1,43 @@
+This week we focused on completing the frontend and starting the integration of the backend with the frontend.
+
+I worked on the UI for the "upload games" page, "all games" page and "my games" page using: SvelteKit with Svelte 5 runes, TypeScript, and CSS.
+
+All three pages share a consistent cyberpunk aesthetic built from scratch including:
+> CSS variables for a neon colour palette
+> Neon text-shadow and box-shadow glows on interactive elements
+> Custom animated cursor which scales and changes colour on hover
+> Shared nav bar with logo, page links, active state highlighting, and a login/logout button
+> Login modal with animated entrance
+> Footer with four columns and a pulsing status indicator
+
+
+`Upload Page (src/routes/upload/+page.svelte)`
+> Contains form fields for game title, genre dropdown, description, URL input with "https://" prefix
+> Drag-and-drop thumbnail dropzone with image preview, and a "change image" option on hover
+> On submit, writes to the submissions store with status "pending"
+> Auth-gated (prompts login modal if user is not logged in)
+
+`All Games Page (src/routes/games/+page.svelte)`
+> Displays all published games on the site
+> Search bar filtering by title or developer name
+> Genre filter pill buttons (12 genres)
+> Sort dropdown (newest first, top rated, most played)
+> Each game card has a 16:9 thumbnail (or a generated placeholder with a neon icon), genre label, title, dev credit, star rating, and player count
+> "PLAY NOW" overlay appears on card hover
+> Empty state shown when no results match the current filters
+> Live result count updates as filters change
+
+
+`My Games Page (src/routes/my-games/+page.svelte)`
+> Auth-gated (shows "ACCESS DENIED" state if not logged in, prompting the login modal)
+> Filters the submissions store to only show games belonging to the current user
+> Three colour-coded sections:
+    Yellow / pending — "Under Review", games that are awaiting admin approval
+    Cyan / approved — "Live Games", with a link to view the game in the vault
+    Pink / rejected — "Rejected Submissions", shows the rejectionReason from the store and a resubmit button linking back to the upload page
+
+Summary of changes:
+- modified `frontend/src/lib/stores/submissions.ts` to add 'genre' and 'rejectionReason' fields
+- created `frontend/src/routes/all-games/+page.svelte` page
+- modified `frontend/src/routes/upload/+page.svelte` page
+- modified `frontend/src/routes/my-games/+page.svelte` page

AIEP_Resources/Weekly_Reports/poornaprajna/Week_0.md

@@ -0,0 +1,10 @@
+This week I did not do much, I just went through the Techstack
+learnt about the usage of Hono + Svelte for Backend and Frontend
+
+Learnt about the usage of CF R2 platform uaqge for the project 
+
+Went through OAuth and Auth functionality for this project
+
+
+Goals:
+Hoping to work on the backend and get some work done on the Auth,ts files and testing out if they work or not

AIEP_Resources/Weekly_Reports/poornaprajna/Week_1.md

@@ -0,0 +1,4 @@
+This week I focused on working on the backend and basically finishing up the authorisation aspects of it, I worked on auth.ts and made sure that the pre existing code works as intended and tested it out with a sample Turso db
+
+
+

README.md

@@ -83,6 +83,14 @@ frontend/
 └── vite.config.ts
 ```
 
+- [Archita Agrawal]()
+- [Pratham Mudakavi](https://github.com/Pratham042006)
+- [Poornaprajna Kashyap](https://github.com/leatfingies)
+- [Syed Ayaan Hasan](https://github.com/ayaanGH06)
+- [Sannidhi Nayak](https://github.com/thisisSandy06)
+
+<hr>
+
 # ProgChamp API Documentation
 
 ## Authentication Endpoints

frontend/src/lib/components/GameCard.svelte

@@ -1,82 +1,120 @@
 <script lang="ts">
-    /**
-     * GameCard
-     * Renders a single game tile. Pass the full game object via the `game` prop.
-     * Optional `showCorner` controls which corner decoration to display.
-     */
-    interface Game {
-      id:      string;
-      name:      string;
-      genre:     string;
-      rating:    string | number;
-      icon:      string;
-      iconColor: string;
-      image_url?: string;
-    }
-
-    interface Props {
-      game:        Game;
-      showCorner?: 'tl' | 'br' | null;
-    }
-
-    let { game, showCorner = null }: Props = $props();
-  </script>
-
-  <a href="/game/[id]/{game.id}" class="game-card">
-    <div class="game-thumb">
-      {#if game.image_url}
-        <img class="game-thumb-img" src={game.image_url} alt={game.name} />
-      {:else}
-        <div class="game-thumb-fallback">
-          <span style="color:{game.iconColor}">{game.icon}</span>
-        </div>
-      {/if}
-      <div class="game-art-pattern"></div>
-      <div class="game-icon" style="color:{game.iconColor}">{game.icon}</div>
-    </div>
-
-    <div class="game-overlay"></div>
-    <div class="game-hover-btn"><span class="play-btn">PLAY NOW</span></div>
-
-    <div class="game-info">
-      <div class="game-genre">{game.genre}</div>
-      <div class="game-name">{game.name}</div>
-      <div class="game-meta">
-        <span class="game-rating">{game.rating}</span>
+  /**
+   * GameCard
+   * Renders a single game tile. Pass the full game object via the `game` prop.
+   * Optional `showCorner` controls which corner decoration to display.
+   */
+  interface Game {
+    id:           string;
+    genre:        string;
+    rating:       string | number;
+    // Support both the original properties and the new dev-catalog properties
+    name?:        string; 
+    title?:       string;
+    image_url?:   string;
+    thumbnail?:   string;
+    icon?:        string;
+    iconColor?:   string;
+    // New properties
+    developer?:   string;
+    players?:     number;
+    publishedAt?: string;
+  }
+
+  interface Props {
+    game:         Game;
+    showCorner?:  'tl' | 'br' | null;
+  }
+
+  let { game, showCorner = null }: Props = $props();
+
+  // ── Normalizers ────────────────────────────────────────────────────────────
+  // Automatically picks the right data regardless of which page calls the card
+  let displayTitle = $derived(game.title || game.name || 'UNKNOWN');
+  let displayImage = $derived(game.thumbnail || game.image_url);
+
+  // Formats '2025-11-03' into 'NOV 2025'
+  let formattedDate = $derived(
+    game.publishedAt 
+      ? new Date(game.publishedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' }).toUpperCase()
+      : null
+  );
+</script>
+
+<a href="/game/{game.id}" class="game-card">
+  <div class="game-thumb">
+    {#if displayImage}
+      <img class="game-thumb-img" src={displayImage} alt={displayTitle} />
+    {:else}
+      <div class="game-thumb-fallback">
+        <span style="color:{game.iconColor || 'var(--neon-cyan)'}">{game.icon || '◈'}</span>
+      </div>
+    {/if}
+    <div class="game-art-pattern"></div>
+    <div class="game-icon" style="color:{game.iconColor || 'var(--neon-cyan)'}">{game.icon || ''}</div>
+  </div>
+
+  <div class="game-overlay"></div>
+  <div class="game-hover-btn"><span class="play-btn">PLAY NOW</span></div>
+
+  <div class="game-info">
+    <div class="game-genre">{game.genre}</div>
+    <div class="game-name">{displayTitle}</div>
+
+    {#if game.developer || formattedDate}
+      <div class="game-dev-row">
+        {#if game.developer}<span class="dev-name">{game.developer}</span>{/if}
+        {#if formattedDate}<span class="pub-date">// {formattedDate}</span>{/if}
       </div>
+    {/if}
+
+    <div class="game-meta">
+      <span class="game-rating">★ {game.rating}</span>
+      {#if game.players !== undefined}
+        <span class="game-players">◉ {game.players >= 1000 ? (game.players/1000).toFixed(1) + 'K' : game.players}</span>
+      {/if}
     </div>
+  </div>
+
+  {#if showCorner === 'tl'}<div class="corner-deco tl"></div>{/if}
+  {#if showCorner === 'br'}<div class="corner-deco br"></div>{/if}
+</a>
+
+<style>
+  .game-card { background:var(--dark2); overflow:hidden; position:relative; cursor:none; transition:transform .3s; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; }
+  .game-card:hover { z-index:2; transform:scale(1.02); }
+
+  .game-thumb         { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
+  .game-thumb-img     { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
+  .game-card:hover .game-thumb-img { transform:scale(1.08); }
+  .game-thumb-fallback { width:100%; height:100%; background:linear-gradient(135deg,#0a0020 0%,#1a0040 50%,#2a0060 100%); display:flex; align-items:center; justify-content:center; font-size:4rem; }
+
+  .game-art-pattern { position:absolute; inset:0; opacity:.06; background-image:repeating-linear-gradient(45deg,#fff 0px,#fff 1px,transparent 1px,transparent 10px); pointer-events:none; }
+  .game-icon        { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3.5rem; opacity:.15; pointer-events:none; transition:opacity .3s; }
+  .game-card:hover .game-icon { opacity:.25; }
+
+  .game-overlay   { position:absolute; inset:0; background:linear-gradient(to top,rgba(3,0,10,.95) 0%,rgba(3,0,10,.5) 40%,transparent 70%); }
+  .game-hover-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,255,249,.05); opacity:0; transition:opacity .3s; }
+  .game-card:hover .game-hover-btn { opacity:1; }
+
+  .play-btn  { font-family:'Share Tech Mono',monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; background:var(--neon-cyan); color:var(--dark); padding:12px 30px; font-weight:bold; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); box-shadow:0 0 30px rgba(0,255,249,.6); }
+
+  .game-info   { position:relative; padding:24px; }
+  .game-genre  { font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--neon-pink); text-shadow:0 0 10px var(--neon-pink); margin-bottom:6px; }
+  .game-name   { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:.05em; color:white; text-shadow:0 0 20px rgba(255,255,255,.3); margin-bottom:8px; line-height: 1; }
 
-    {#if showCorner === 'tl'}<div class="corner-deco tl"></div>{/if}
-    {#if showCorner === 'br'}<div class="corner-deco br"></div>{/if}
-  </a>
-
-  <style>
-    .game-card { background:var(--dark2); overflow:hidden; position:relative; cursor:none; transition:transform .3s; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; }
-    .game-card:hover { z-index:2; transform:scale(1.02); }
-
-    .game-thumb         { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
-    .game-thumb-img     { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
-    .game-card:hover .game-thumb-img { transform:scale(1.08); }
-    .game-thumb-fallback { width:100%; height:100%; background:linear-gradient(135deg,#0a0020 0%,#1a0040 50%,#2a0060 100%); display:flex; align-items:center; justify-content:center; font-size:4rem; }
-
-    .game-art-pattern { position:absolute; inset:0; opacity:.06; background-image:repeating-linear-gradient(45deg,#fff 0px,#fff 1px,transparent 1px,transparent 10px); pointer-events:none; }
-    .game-icon        { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3.5rem; opacity:.15; pointer-events:none; transition:opacity .3s; }
-    .game-card:hover .game-icon { opacity:.25; }
-
-    .game-overlay   { position:absolute; inset:0; background:linear-gradient(to top,rgba(3,0,10,.95) 0%,rgba(3,0,10,.5) 40%,transparent 70%); }
-    .game-hover-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,255,249,.05); opacity:0; transition:opacity .3s; }
-    .game-card:hover .game-hover-btn { opacity:1; }
-
-    .play-btn  { font-family:'Share Tech Mono',monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; background:var(--neon-cyan); color:var(--dark); padding:12px 30px; font-weight:bold; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); box-shadow:0 0 30px rgba(0,255,249,.6); }
-
-    .game-info   { position:relative; padding:24px; }
-    .game-genre  { font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--neon-pink); text-shadow:0 0 10px var(--neon-pink); margin-bottom:6px; }
-    .game-name   { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:.05em; color:white; text-shadow:0 0 20px rgba(255,255,255,.3); margin-bottom:8px; }
-    .game-meta   { display:flex; align-items:center; justify-content:space-between; }
-    .game-rating { font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); }
+  /* ── NEW: Developer & Date row ── */
+  .game-dev-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
+  .dev-name     { font-family:'Share Tech Mono',monospace; font-size:.65rem; color:rgba(224,224,255,.6); text-transform: uppercase; }
+  .pub-date     { font-family:'Share Tech Mono',monospace; font-size:.6rem; color:rgba(0,255,249,.4); }
+
+  .game-meta    { display:flex; align-items:center; justify-content:space-between; }
+  .game-rating  { font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); }
 
-    /* corner decorations — same classes as global.css but scoped here for card context */
-    .corner-deco      { position:absolute; width:40px; height:40px; pointer-events:none; }
-    .corner-deco.tl   { top:0;    left:0;   border-top:    2px solid var(--neon-cyan); border-left:   2px solid var(--neon-cyan); }
-    .corner-deco.br   { bottom:0; right:0;  border-bottom: 2px solid var(--neon-cyan); border-right:  2px solid var(--neon-cyan); }
-  </style>
+  /* ── NEW: Player count ── */
+  .game-players { font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--neon-cyan); opacity: 0.8;}
+
+  .corner-deco      { position:absolute; width:40px; height:40px; pointer-events:none; }
+  .corner-deco.tl   { top:0;    left:0;   border-top:    2px solid var(--neon-cyan); border-left:   2px solid var(--neon-cyan); }
+  .corner-deco.br   { bottom:0; right:0;  border-bottom: 2px solid var(--neon-cyan); border-right:  2px solid var(--neon-cyan); }
+</style>