Import kingmaker.gateway-gamers.net into monorepo

2026-09-04 14:55:10 -05:00
parent 0bd939a18e 6f62a9a5ba
commit 3116ae3a1c
22 changed files with 2290 additions and 0 deletions
@@ -0,0 +1,4 @@
 node_modules/
 dist/
 .env
 .env.local
@@ -0,0 +1,25 @@
 stages:
  - build
  - deploy
 build:
  stage: build
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour
  only:
    - main
 deploy:
  stage: deploy
  script:
    - rsync -avz --delete dist/ /var/www/domains/gateway-gamers.net/kingmaker/
  only:
    - main
  environment:
    name: production
    url: https://kingmaker.gateway-gamers.net
@@ -0,0 +1,33 @@
 # CLAUDE.md
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 ## Project
 This repository is for `kingmaker.gateway-gamers.net` — likely the website or backend service for a Kingmaker community on the Gateway Gamers network.
 ## Stack
 - **Vite** — build tool and dev server
 - **Tailwind CSS v4** — utility-first CSS (configured via CSS, no `tailwind.config.js`)
 - **daisyUI v5** — component library plugin for Tailwind
 ## Commands
 ```bash
 npm install       # install dependencies
 npm run dev       # start dev server (http://localhost:5173)
 npm run build     # production build → dist/
 npm run preview   # preview production build locally
 ```
 ## Structure
 - `index.html` — Vite entry point at repo root
 - `src/style.css` — CSS entry; imports Tailwind and registers daisyUI via `@plugin`
 - `src/main.js` — JS entry point
 - `postcss.config.js` — wires `@tailwindcss/postcss` into Vite's PostCSS pipeline
 ## daisyUI theming
 Set the active theme on `<html data-theme="...">`. Available themes are daisyUI's built-ins (e.g. `light`, `dark`, `cupcake`). Custom themes can be added in `src/style.css` using `@plugin "daisyui" { themes: [...] }`.
@@ -0,0 +1,66 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kingmaker — Gateway Gamers</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body class="min-h-screen flex flex-col">
    <div id="header"></div>
    <!-- ===== CAROUSEL ===== -->
    <!-- Add images inside this section when ready -->
    <!--
    <div class="carousel w-full">
      <div id="slide1" class="carousel-item relative w-full">
        <img src="/images/photo1.jpg" class="w-full object-cover max-h-96" alt="Campaign art" />
        <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
          <a href="#slide2" class="btn btn-circle">❮</a>
          <a href="#slide2" class="btn btn-circle">❯</a>
        </div>
      </div>
    </div>
    -->
    <!-- ===== MAIN CONTENT ===== -->
    <main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
      <h1 class="text-4xl font-bold mb-4">Kingmaker</h1>
      <p class="text-lg mb-8">Welcome to the Kingmaker 40k campaign hub on Gateway Gamers.</p>
      <div class="divider"></div>
      <section class="mb-8">
        <h2 class="text-2x1 font-semibold mb-3">Current Season</h2>
        <p class="mb-4">11th Edition Launch Season</p>
        <p>This current Season runs from 7/06/2026 to 12/31/2026</p>
        <p>SIGNUPS ARE LIVE</p>
      <div class="divider"></div>
      <section class="mb-8">
        <h2 class="text-2xl font-semibold mb-3">About the Campaign</h2>
        <p class="mb-4">Kingmaker is a Warhammer 40k league run by a local club. Players compete across a series of games to claim dominance over the battlefield.</p>
        <p>The campaign will be organized into several divisions, with division size based on the amount of signups. Division 1 will be the most competitive, with overall division competitive-ness decreasing as the division number increases. The league is welcome to all skill levels, and hopefully you should be assigned a division that is close to the level of play that you would expect.</p>
      </section>
      <div class="divider"></div>
      <section class="mb-8">
        <h2 class="text-2xl font-semibold mb-3">Quick Links</h2>
        <div class="flex flex-wrap gap-4">
          <a href="signups.html" class="btn btn-primary">Sign Up to Play</a>
          <a href="reporting.html" class="btn btn-secondary">Report a Game</a>
          <a href="standings.html" class="btn btn-accent">View Standings</a>
        </div>
      </section>
    </main>
    <div id="footer"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,36 @@
 server {
    listen 80;
    listen [::]:80;
    server_name kingmaker.gateway-gamers.net;
    return 301 https://$host$request_uri;
 }
 server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name kingmaker.gateway-gamers.net;
    root /var/www/domains/gateway-gamers.net/kingmaker;
    index index.html;
    # SSL — managed by Certbot
    # ssl_certificate /etc/letsencrypt/live/kingmaker.gateway-gamers.net/fullchain.pem;
    # ssl_certificate_key /etc/letsencrypt/live/kingmaker.gateway-gamers.net/privkey.pem;
    # include /etc/letsencrypt/options-ssl-nginx.conf;
    # ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
    # Hide nginx version
    server_tokens off;
    # Security headers
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; frame-src https://docs.google.com; img-src 'self' data:;" always;
    location / {
        try_files $uri $uri/ =404;
    }
 }
@@ -0,0 +1,17 @@
 {
  "name": "kingmaker-gateway-gamers",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.0.0",
    "daisyui": "^5.0.0",
    "tailwindcss": "^4.0.0",
    "vite": "^6.0.0"
  }
 }
@@ -0,0 +1,5 @@
 export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
 }
@@ -0,0 +1,3 @@
 <footer class="footer footer-center bg-base-300 text-base-content p-4">
  <p>&copy; 2026 Gateway Gamers. All rights reserved.</p>
 </footer>
@@ -0,0 +1,63 @@
 <header class="bg-base-300 shadow-lg">
  <!-- Hero: carousel background + centered logo -->
  <div class="relative overflow-hidden min-h-64 py-10 flex items-center justify-center">
    <!-- Carousel images -->
    <div id="hero-carousel" class="absolute inset-0">
      <img src="/images/photo1.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
      <img src="/images/photo2.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
      <img src="/images/photo3.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
      <img src="/images/photo4.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
      <img src="/images/photo5.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
    </div>
    <!-- Overlay so logo stays readable over busy images -->
    <div class="absolute inset-0 bg-black/40"></div>
    <!-- Logo -->
    <div class="relative z-10">
      <a href="/index.html">
        <img src="/images/logo.png" alt="Gateway Gamers" class="h-48 w-auto drop-shadow-2xl" />
      </a>
    </div>
  </div>
  <!-- Nav row -->
  <div class="navbar bg-base-200 px-4 min-h-0 py-2">
    <div class="navbar-center hidden lg:flex flex-1 justify-center">
      <ul class="menu menu-horizontal px-1 gap-1">
        <li><a href="/index.html">Home</a></li>
        <li><a href="/signups.html">Sign-ups</a></li>
        <li><a href="/reporting.html">Game Reporting</a></li>
        <li><a href="/standings.html">Standings</a></li>
      </ul>
    </div>
    <div class="navbar-end gap-2 ml-auto">
      <label class="swap swap-rotate btn btn-ghost btn-circle" title="Toggle light/dark">
        <input type="checkbox" class="theme-controller" value="light" />
        <svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M21.64 13a1 1 0 0 0-1.27-.66 8.5 8.5 0 0 1-10.71-10.71 1 1 0 0 0-1.32-1.27A10 10 0 1 0 22 14.29a1 1 0 0 0-.36-1.29z"/>
        </svg>
        <svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M5.64 17l-.71.71a1 1 0 0 0 1.41 1.41l.71-.71A1 1 0 0 0 5.64 17zM5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1zm7-7a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1zM5.64 7.05a1 1 0 0 0 .7.29 1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.41l-.71-.71a1 1 0 0 0-1.41 1.41zm12 .29a1 1 0 0 0 .7-.29l.71-.71a1 1 0 0 0-1.41-1.41l-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29zM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm-9 8a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1zm6.36-2a1 1 0 0 0-1.41 1.41l.71.71a1 1 0 0 0 1.41-1.41zM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5z"/>
        </svg>
      </label>
      <div class="dropdown dropdown-end lg:hidden">
        <label tabindex="0" class="btn btn-ghost btn-circle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </label>
        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52">
          <li><a href="/index.html">Home</a></li>
          <li><a href="/signups.html">Sign-ups</a></li>
          <li><a href="/reporting.html">Game Reporting</a></li>
          <li><a href="/standings.html">Standings</a></li>
        </ul>
      </div>
    </div>
  </div>
 </header>
@@ -0,0 +1,41 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Reporting — Kingmaker</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body class="min-h-screen flex flex-col">
    <div id="header"></div>
    <!-- ===== MAIN CONTENT ===== -->
    <main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
      <h1 class="text-4xl font-bold mb-4">Game Reporting</h1>
      <p class="text-lg mb-8">Please Use the form below to report your game results.</p>
      <div class="divider"></div>
      <!-- Google Form embed — replace the src URL with your form's embed link -->
      <div class="w-full">
        <iframe
          src="https://docs.google.com/forms/d/e/1FAIpQLSfv8j9Wo6QUYisP7urhvD7qHUmKVrAa_h_xa02IrE9djtLrwA/viewform?embedded=true"
          width="100%"
          height="900"
          frameborder="0"
          marginheight="0"
          marginwidth="0"
          class="rounded-box">
          Loading form…
        </iframe>
      </div>
    </main>
    <div id="footer"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,54 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign-ups — Kingmaker</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body class="min-h-screen flex flex-col">
    <div id="header"></div>
    <!-- ===== MAIN CONTENT ===== -->
    <main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
      <h1 class="text-4xl font-bold mb-4">Sign-ups</h1>
      <p class="text-lg mb-8">Interested in joining the Kingmaker campaign? Fill out the form below to sign up, and please pay Game Nite the entry fee of $10. I'll be verifying with them that everyone has paid. </p>
      <div class="divider"></div>
      <!-- commenting out paypal information
      <section class="mb-8">
        <h2 class="text-2xl font-semibold mb-3">League Entry Fee</h2>
        <p class="mb-4">In addition to signing-up below, please pay your league entry fee of $## via PayPal to secure your spot.</p>
        <a href="https://paypal.me/REDACTED" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
          Pay Entry Fee via PayPal
        </a>
      </section>
      <div class="divider"></div>
      -->
      <!-- Google Form embed — replace the src URL with your form's embed link -->
      <div class="w-full">
        <iframe
          src="https://docs.google.com/forms/d/e/1FAIpQLSeZt1nzM6FKGjIlCv-QuENsvKLYv7RlukqVARGjj-Mrxcna9w/viewform?embedded=true"
          width="100%"
          height="900"
          frameborder="0"
          marginheight="0"
          marginwidth="0"
          class="rounded-box">
          Loading form…
        </iframe>
      </div>
    </main>
    <div id="footer"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,36 @@
 function loadHTML(file, elementId, callback) {
  fetch(file)
    .then(r => r.text())
    .then(html => {
      document.getElementById(elementId).innerHTML = html;
      if (callback) callback();
    })
    .catch(err => console.error('Error loading:', file, err));
 }
 function highlightActiveNav() {
  const current = location.pathname.split('/').pop() || 'index.html';
  document.querySelectorAll('#header a[href]').forEach(link => {
    if (link.getAttribute('href') === `/${current}`) {
      link.classList.add('active');
    }
  });
 }
 function startCarousel() {
  const slides = document.querySelectorAll('#hero-carousel .carousel-slide');
  if (!slides.length) return;
  let current = 0;
  slides[current].style.opacity = '1';
  setInterval(() => {
    slides[current].style.opacity = '0';
    current = (current + 1) % slides.length;
    slides[current].style.opacity = '1';
  }, 5000);
 }
 loadHTML('/header.html', 'header', () => {
  highlightActiveNav();
  startCarousel();
 });
 loadHTML('/footer.html', 'footer');
@@ -0,0 +1,2 @@
@import "tailwindcss";
@plugin "daisyui";
@@ -0,0 +1,40 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Standings — Kingmaker</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body class="min-h-screen flex flex-col">
    <div id="header"></div>
    <!-- ===== MAIN CONTENT ===== -->
    <main class="flex-1 max-w-7xl w-full mx-auto px-6 py-10">
      <h1 class="text-4xl font-bold mb-4">Standings</h1>
      <p class="text-lg mb-8">Campaign standings:</p>
      <div class="divider"></div>
      <!-- Google Sheet embed — replace the src URL with your sheet's embed/publish link -->
      <!-- To get the link: File → Share → Publish to web → select sheet → Embed → Copy -->
      <div class="w-full">
        <iframe
          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-oB-N4mEkTFMEfcXvJeAB1Of9gAFOL4YZ-6nnYEIS1DjTIjTUTvDx3iCcDLW5YmBwKbpaLbY5KJR_/pubhtml?gid=929746231&amp;single=true&amp;widget=true&amp;headers=false"
          width="100%"
          height="700"
          frameborder="0"
          class="rounded-box">
          Loading spreadsheet…
        </iframe>
      </div>
    </main>
    <div id="footer"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,18 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        signups: resolve(__dirname, 'signups.html'),
        reporting: resolve(__dirname, 'reporting.html'),
        standings: resolve(__dirname, 'standings.html'),
      }
    }
  }
 });
		`@@ -0,0 +1,2 @@`
							`@import "tailwindcss";`
							`@plugin "daisyui";`