.wrangler

import { GAME_CONFIG } from '../../src/config.js'

// Helper functions for consistent JSON responses

function jsonResponse(data, status = 200) {

  return new Response(JSON.stringify(data), {

    status,

    headers: { 'Content-Type': 'application/json' },

  })

}

function errorResponse(message, status = 400) {

  return jsonResponse({ error: message }, status)

}

export const onRequestGet = async ({ env }) => {

  try {

    const results = await env.DB

      .prepare('SELECT player_name, score FROM scores ORDER BY score DESC LIMIT 10')

      .all()

    return jsonResponse({ scores: results.results })

  } catch (err) {

    console.error('Failed to fetch scores:', err)

    return errorResponse('Failed to fetch scores', 500)

  }

}

export const onRequestPost = async ({ request, env }) => {

  let body

  try {

    body = await request.json()

  } catch {

    return errorResponse('Invalid JSON')

  }

  const { playerName, score, eventLog } = body

  // Basic type validation

  if (

    typeof playerName !== 'string' ||

    typeof score !== 'number' ||

    !Array.isArray(eventLog)

  ) {

    return errorResponse('Invalid request body')

  }

  // Validate and get server-computed score

  const validation = validateEventLog(eventLog, score, playerName)

  if (!validation.ok) {

    // Log validation failure for debugging (visible in Cloudflare logs)

    console.warn('Score validation failed:', {

      reason: validation.reason,

      playerName,

      claimedScore: score,

      eventLogLength: eventLog.length,

      details: validation.details || {},

    })

    return errorResponse('Score validation failed')

  }

  try {

    const endEvent = eventLog[eventLog.length - 1]

    const startEvent = eventLog[0]

    await env.DB

      .prepare(

        `INSERT INTO scores (player_name, score, end_frame, duration_ms) VALUES (?, ?, ?, ?)`

      )

      .bind(

        playerName.slice(0, GAME_CONFIG.MAX_PLAYER_NAME_LENGTH),

        score,

        endEvent.frame,

        endEvent.ts - startEvent.ts

      )

      .run()

    return jsonResponse({ ok: true, score: score })

  } catch (err) {

    console.error('Database error:', err)

    return errorResponse('Database error', 500)

  }

}

function validateEventLog(eventLog, claimedScore, playerName) {

  // Name validation

  if (playerName.length > GAME_CONFIG.MAX_PLAYER_NAME_LENGTH) {

    return { ok: false, reason: 'INVALID_NAME_LENGTH' }

  }

  // Score bounds validation

  if (claimedScore > GAME_CONFIG.MAX_SCORE || claimedScore < 0) {

    return { ok: false, reason: 'INVALID_SCORE_RANGE' }

  }

  // Event log structure validation

  if (!eventLog || eventLog.length < 2) {

    return { ok: false, reason: 'INSUFFICIENT_EVENTS' }

  }

  // Validate event structure before processing

  for (const event of eventLog) {

    if (

      !event ||

      typeof event.frame !== 'number' ||

      typeof event.ts !== 'number' ||

      typeof event.type !== 'string'

    ) {

      return { ok: false, reason: 'MALFORMED_EVENT' }

    }

  }

  // Validate bookends

  if (eventLog[0].type !== 'START' || eventLog[eventLog.length - 1].type !== 'END') {

    return { ok: false, reason: 'INVALID_BOOKENDS' }

  }

  let lastFrame = -1

  let lastTs = -1

  let lastJumpFrame = -Infinity

  let prevLevel = 0

  for (let i = 0; i < eventLog.length; i++) {

    const event = eventLog[i]

    // Monotonic frame validation

    if (event.frame < lastFrame) {

      return { ok: false, reason: 'FRAME_NOT_MONOTONIC' }

    }

    // Monotonic timestamp validation

    if (event.ts < lastTs) {

      return { ok: false, reason: 'TIMESTAMP_NOT_MONOTONIC' }

    }

    lastFrame = event.frame

    lastTs = event.ts

    // Jump physics validation

    if (event.type === 'JUMP') {

      if (lastFrame - lastJumpFrame < GAME_CONFIG.JUMP_AIRBORNE_FRAMES) {

        return { ok: false, reason: 'INVALID_JUMP_TIMING' }

      }

      lastJumpFrame = lastFrame

    }

    // Level timing validation

    if (event.type === 'LEVEL') {

      const expectedFrame = event.value * GAME_CONFIG.LEVEL_SCORE_THRESHOLD * GAME_CONFIG.SCORE_INCREASE_RATE

      const tolerance = expectedFrame * GAME_CONFIG.LEVEL_FRAME_TOLERANCE

      if (Math.abs(event.frame - expectedFrame) > tolerance) {

        return { ok: false, reason: 'INVALID_LEVEL_TIMING' }

      }

      // Level progression validation (no skipping levels)

      if (event.value > prevLevel + 1) {

        return { ok: false, reason: 'LEVEL_SKIP_DETECTED' }

      }

      prevLevel = event.value

    }

  }

  const endEvent = eventLog[eventLog.length - 1]

  const endFrame = endEvent.frame

  const endTs = endEvent.ts

  const startEvent = eventLog[0]

  const startTs = startEvent.ts

  // Score calculation validation

  const expectedScore = Math.floor(endFrame / GAME_CONFIG.SCORE_INCREASE_RATE)

  if (Math.abs(expectedScore - claimedScore) > 1) {

    return { ok: false, reason: 'SCORE_MISMATCH' }

  }

  // Wall clock timing validation

  const minDuration = endFrame * (1000 / 60) * GAME_CONFIG.WALL_CLOCK_TOLERANCE

  if (endTs - startTs < minDuration) {

    return { ok: false, reason: 'WALL_CLOCK_TOO_FAST' }

  }

  // Timestamp sanity checks

  const now = Date.now()

  const oldestAllowed = now - GAME_CONFIG.MAX_SESSION_AGE_MS

  if (startTs < oldestAllowed) {

    return { ok: false, reason: 'TIMESTAMP_TOO_OLD', details: { age: now - startTs } }

  }

  if (startTs > now + GAME_CONFIG.CLOCK_DRIFT_ALLOWANCE_MS) {

    return { 

      ok: false, 

      reason: 'TIMESTAMP_IN_FUTURE', 

      details: { 

        clientStartTs: startTs, 

        serverNow: now, 

        driftMs: startTs - now 

      } 

    }

  }

  // Level cap validation

  const maxLevel = Math.floor(expectedScore / GAME_CONFIG.LEVEL_SCORE_THRESHOLD)

  if (prevLevel > maxLevel) {

    return { ok: false, reason: 'LEVEL_TOO_HIGH' }

  }

  return { ok: true, score: expectedScore }

}

CREATE TABLE IF NOT EXISTS scores (

  id          INTEGER PRIMARY KEY AUTOINCREMENT,

  player_name TEXT    NOT NULL,

  score       INTEGER NOT NULL,

  end_frame   INTEGER NOT NULL,

  duration_ms INTEGER NOT NULL,

  created_at  DATETIME DEFAULT CURRENT_TIMESTAMP

);

CREATE INDEX IF NOT EXISTS idx_scores_score ON scores (score DESC);

-- Add composite index for tie-breaking and efficient sorting

CREATE INDEX IF NOT EXISTS idx_scores_score_created 

  ON scores (score DESC, created_at DESC);

-- Add index for player lookups (for potential future features)

CREATE INDEX IF NOT EXISTS idx_scores_player 

  ON scores (player_name);

    "build": "bun run scripts/build.js",

    "deploy": "bun run build && wrangler pages deploy ./dist"

#!/usr/bin/env bun

import { $ } from "bun"

import { existsSync, rmSync, mkdirSync } from "fs"

const DIST_DIR = "./dist"

const PUBLIC_DIR = "./public"

console.log("🦕 Building Dino Game...\n")

// Clean and create dist

if (existsSync(DIST_DIR)) {

  console.log("🧹 Cleaning dist directory...")

  rmSync(DIST_DIR, { recursive: true, force: true })

}

mkdirSync(DIST_DIR, { recursive: true })

// Build with Bun

console.log("📦 Building bundle...")

await $`bun build ./index.html --outdir ${DIST_DIR}`

// Copy assets

console.log("📁 Copying assets...")

await $`cp -r ${PUBLIC_DIR}/assets ${DIST_DIR}/assets`

// Copy public files (icons, manifest, etc)

console.log("🖼️  Copying icons and manifest...")

await $`cp ${PUBLIC_DIR}/*.png ${DIST_DIR}/`.quiet()

await $`cp ${PUBLIC_DIR}/*.ico ${DIST_DIR}/`.quiet()

await $`cp ${PUBLIC_DIR}/*.webmanifest ${DIST_DIR}/`.quiet()

// Copy functions

console.log("⚡ Copying API functions...")

await $`cp -r ./functions ${DIST_DIR}/functions`

// Copy config for API functions

console.log("⚙️  Copying config for API...")

mkdirSync(`${DIST_DIR}/src`, { recursive: true })

await $`cp ./src/config.js ${DIST_DIR}/src/config.js`

console.log("\n✅ Build complete! Output in ./dist")

// Game physics and scoring constants

// Used by both client (DinoGame) and server (validation)

export const GAME_CONFIG = {

  SCORE_INCREASE_RATE: 6,        // frames per score point

  JUMP_AIRBORNE_FRAMES: 40,      // minimum frames between jumps

  WALL_CLOCK_TOLERANCE: 0.75,    // 75% of expected real-time duration

  LEVEL_SCORE_THRESHOLD: 100,    // score points per level

  LEVEL_FRAME_TOLERANCE: 0.05,   // 5% tolerance for level-up timing

  MAX_PLAYER_NAME_LENGTH: 3,     // enforced on both client and server

  MAX_SCORE: 99999,              // reasonable upper bound

  MAX_SESSION_AGE_MS: 24 * 60 * 60 * 1000, // 24 hours

  CLOCK_DRIFT_ALLOWANCE_MS: 60000, // 60 seconds future tolerance (handles clock drift)

}

export const FRAME_RATE = 60

import { GAME_CONFIG } from '../config.js'

      scoreIncreaseRate: GAME_CONFIG.SCORE_INCREASE_RATE, // fpa

    this.eventLog = []

    this.onGameOver = null

  }

  _recordEvent(data) {

    this.eventLog.push({ ...data, frame: this.frameCount, ts: Date.now() })

            this._recordEvent({ type: 'JUMP' })

          this._recordEvent({ type: 'DUCK' })

          this._recordEvent({ type: 'STAND' })

    this.frameCount = 0

    this.eventLog = []

    this._recordEvent({ type: 'START' })

    this._recordEvent({ type: 'END', score: this.state.score.value })

    if (typeof this.onGameOver === 'function') {

      this.onGameOver(this.state.score.value, this.eventLog)

    }

        this._recordEvent({ type: 'LEVEL', value: state.level })

const container = document.getElementById('game-container')

const overlay = document.createElement('div')

overlay.id = 'score-overlay'

overlay.style.display = 'none'

container.appendChild(overlay)

overlay.innerHTML = `

  <div id="score-modal" role="dialog" aria-labelledby="modal-title" aria-modal="true">

    <h2 id="modal-title">GAME OVER</h2>

    <p id="final-score-display" aria-live="polite"></p>

    <div id="submit-section">

      <input 

        type="text" 

        id="player-initials" 

        placeholder="AAA" 

        maxlength="3" 

        autocomplete="off"

        autocapitalize="characters"

        aria-label="Enter your initials (3 letters)"

      />

      <button id="submit-btn" aria-label="Submit your score">SUBMIT</button>

    </div>

    <div id="leaderboard-section" aria-live="polite">

      <div id="leaderboard-list"></div>

    </div>

    <div id="modal-footer">

      <button id="action-btn" aria-label="Play again">PLAY AGAIN</button>

    </div>

  </div>

`

const modalTitle = document.getElementById('modal-title')

const finalScoreDisplay = document.getElementById('final-score-display')

const initialsInput = document.getElementById('player-initials')

const submitBtn = document.getElementById('submit-btn')

const submitSection = document.getElementById('submit-section')

const leaderboardSection = document.getElementById('leaderboard-section')

const leaderboardList = document.getElementById('leaderboard-list')

const actionBtn = document.getElementById('action-btn')

// Focus trap elements

let focusableElements

let firstFocusable

let lastFocusable

function updateFocusTrap() {

  focusableElements = overlay.querySelectorAll('button:not(:disabled), input:not(:disabled)')

  firstFocusable = focusableElements[0]

  lastFocusable = focusableElements[focusableElements.length - 1]

}

// Handle Tab key for focus trap

overlay.addEventListener('keydown', (e) => {

  if (e.key !== 'Tab' || !overlayState.visible) return

  if (e.shiftKey) {

    if (document.activeElement === firstFocusable) {

      e.preventDefault()

      lastFocusable.focus()

    }

  } else {

    if (document.activeElement === lastFocusable) {

      e.preventDefault()

      firstFocusable.focus()

    }

  }

})

// Touch to dismiss overlay (tap background)

overlay.addEventListener('click', (e) => {

  if (e.target === overlay && overlayState.visible) {

    hideOverlay()

// Overlay state management

const overlayState = {

  visible: false,

  submitted: false,

  submitting: false,

  submittedInitials: '',

  currentScore: 0,

  currentEventLog: [],

}

function escapeHtml(text) {

  const div = document.createElement('div')

  div.textContent = text

  return div.innerHTML

}

function showOverlay(score, eventLog) {

  overlayState.visible = true

  overlayState.submitted = false

  overlayState.submitting = false

  overlayState.submittedInitials = ''

  overlayState.currentScore = score

  overlayState.currentEventLog = eventLog

  modalTitle.textContent = 'GAME OVER'

  finalScoreDisplay.textContent = `SCORE: ${score}`

  initialsInput.value = ''

  submitSection.style.display = ''

  initialsInput.disabled = false

  submitBtn.disabled = false

  submitBtn.textContent = 'SUBMIT'

  overlay.style.display = ''

  updateFocusTrap()

  initialsInput.focus()

  loadLeaderboard(false) // Use cache if available

}

function hideOverlay() {

  overlayState.visible = false

  overlayState.currentScore = 0

  overlayState.currentEventLog = []

  overlay.style.display = 'none'

}

function formatInitials(value) {

  return value.toUpperCase().replace(/[^A-Z]/g, '').slice(0, 3)

}

initialsInput.addEventListener('input', (e) => {

  e.target.value = formatInitials(e.target.value)

})

async function submitScore() {

  if (overlayState.submitted || overlayState.submitting) return

  const initials = initialsInput.value.trim().toUpperCase() || 'AAA'

  overlayState.submitting = true

  submitBtn.disabled = true

  try {

    const res = await fetch('/api/scores', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({

        playerName: initials,

        score: overlayState.currentScore,

        eventLog: overlayState.currentEventLog,

      }),

    })

    if (res.ok) {

      overlayState.submitted = true

      overlayState.submitting = false

      overlayState.submittedInitials = initials

      initialsInput.disabled = true

      submitSection.style.display = 'none'

      updateFocusTrap() // Update after hiding submit section

      loadLeaderboard(true) // Force refresh after submit

    } else {

      const data = await res.json()

      modalTitle.textContent = data.error || 'FAILED'

      overlayState.submitting = false

      submitBtn.disabled = false

      submitBtn.textContent = 'SUBMIT'

    }

  } catch {

    modalTitle.textContent = 'NETWORK ERROR'

    overlayState.submitting = false

    submitBtn.disabled = false

    submitBtn.textContent = 'SUBMIT'

  }

}

submitBtn.addEventListener('click', submitScore)

actionBtn.addEventListener('click', () => {

  hideOverlay()

  game.onInput('jump')

})

initialsInput.addEventListener('keydown', (e) => {

  if (e.key === 'Enter') {

    submitScore()

  }

})

// Leaderboard caching

const leaderboardCache = {

  data: null,

  timestamp: 0,

  TTL: 10000, // 10 seconds

}

async function loadLeaderboard(forceRefresh = false) {

  const now = Date.now()

  // Use cache if valid and not forcing refresh

  if (

    !forceRefresh &&

    leaderboardCache.data &&

    now - leaderboardCache.timestamp < leaderboardCache.TTL

  ) {

    renderLeaderboard(leaderboardCache.data)

    return

  }

  leaderboardList.innerHTML = '<p class="loading">LOADING...</p>'

  try {

    const res = await fetch('/api/scores')

    const data = await res.json()

    leaderboardCache.data = data

    leaderboardCache.timestamp = now

    renderLeaderboard(data)

  } catch {

    leaderboardList.innerHTML = '<p class="error">FAILED TO LOAD</p>'

  }

}

function renderLeaderboard(data) {

  if (data.scores && data.scores.length > 0) {

    leaderboardList.innerHTML = `

      <table class="leaderboard-table">

        <thead>

          <tr>

            <th>#</th>

            <th>NAME</th>

            <th>SCORE</th>

          </tr>

        </thead>

        <tbody>

          ${data.scores

            .map(

              (s, i) => `

            <tr class="${s.score === overlayState.currentScore && s.player_name === overlayState.submittedInitials ? 'highlight' : ''}">

              <td>${i + 1}</td>

              <td>${escapeHtml(s.player_name)}</td>

              <td>${s.score}</td>

            </tr>

          `

            )

            .join('')}

        </tbody>

      </table>

    `

  } else {

    leaderboardList.innerHTML = '<p class="empty">NO SCORES YET</p>'

  }

}

game.onGameOver = (score, eventLog) => {

  setTimeout(() => showOverlay(score, eventLog), 300)

}

document.addEventListener('keydown', (e) => {

  if (!overlayState.visible) {

    if (keycodes.JUMP[e.keyCode]) {

      game.onInput('jump')

    } else if (keycodes.DUCK[e.keyCode]) {

      game.onInput('duck')

    }

  } else {

    // Escape key closes modal

    if (e.key === 'Escape') {

      hideOverlay()

      game.onInput('jump')

      return

    }

    // Space/Enter closes only if not in input field

    if (document.activeElement !== initialsInput && keycodes.JUMP[e.keyCode]) {

      hideOverlay()

      game.onInput('jump')

    }

  }

})

document.addEventListener('keyup', (e) => {

  if (!overlayState.visible && keycodes.DUCK[e.keyCode]) {

    game.onInput('stop-duck')

  }

})

document.addEventListener(

  'touchstart',

  (e) => {

    if (!overlayState.visible) {

      e.preventDefault()

      if (e.touches.length === 1) {

        game.onInput('jump')

      } else if (e.touches.length === 2) {

        game.onInput('duck')

      }

    }

  },

  { passive: false }

)

document.addEventListener('touchend', (e) => {

  if (!overlayState.visible) {

  position: relative;

#score-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(18, 17, 19, 0.88);

  z-index: 10;

}

#score-modal {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

  background: #1a1a1b;

  border: 2px solid #3a3a3b;

  border-radius: 4px;

  padding: 32px;

  font-family: 'PressStart2P', monospace;

  color: #e8e8e8;

  text-align: center;

  min-width: 400px;

  max-width: 90vw;

}

@media (max-width: 500px) {

  #score-modal {

    min-width: auto;

    width: 90vw;

  }

}

/* Ensure modal is visible above mobile keyboard */

@media (max-height: 600px) {

  #score-modal {

    max-height: 90vh;

    overflow-y: auto;

    padding: 20px;

    gap: 12px;

  }

}

#score-modal h2 {

  font-size: 14px;

  margin-bottom: 8px;

  letter-spacing: 1px;

}

#final-score-display {

  font-size: 12px;

  color: #a8a8a8;

}

#submit-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

}

#player-initials {

  width: 100px;

  padding: 12px 8px;

  font-family: 'PressStart2P', monospace;

  font-size: 16px;

  background: #121113;

  border: 2px solid #3a3a3b;

  border-radius: 2px;

  color: #e8e8e8;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 4px;

  outline: none;

}

#player-initials:focus {

  border-color: #5a5a5b;

}

#player-initials::placeholder {

  color: #5a5a5b;

  letter-spacing: 4px;

}

#submit-btn,

#action-btn {

  width: 100%;

  max-width: 200px;

  padding: 12px 16px;

  font-family: 'PressStart2P', monospace;

  font-size: 10px;

  background: #2a2a2b;

  border: 2px solid #4a4a4b;

  border-radius: 2px;

  color: #e8e8e8;

  cursor: pointer;

  transition: background 0.15s, border-color 0.15s;

}

#submit-btn:hover:not(:disabled),

#action-btn:hover {

  background: #3a3a3b;

  border-color: #5a5a5b;

}

#submit-btn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}

.leaderboard-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 10px;

}

.leaderboard-table th {

  padding: 8px 4px;

  border-bottom: 1px solid #3a3a3b;

  color: #a8a8a8;

}

.leaderboard-table td {

  padding: 8px 4px;

}

.leaderboard-table tbody tr:hover {

  background: #252526;

}

.leaderboard-table tbody tr.highlight {

  background: #2a3a2a;

  color: #7fc97f;

}

.loading,

.empty,

.error {

  font-size: 10px;

  color: #a8a8a8;

  padding: 20px;

}

.error {

  color: #e85a5a;

}

name = "dino"

compatibility_date = "2024-09-23"

pages_build_output_dir = "./dist"

[[d1_databases]]

binding = "DB"

database_name = "dino-scores"

database_id = "fd10c71f-a539-49f6-ad85-39fa943f4d3c"