star-sdk-cli 0.1.8 → 0.1.10

package/dist/cli.mjs

@@ -35,6 +35,7 @@ import Star from 'star-sdk';
 
 \`\`\`javascript
 import Star from 'star-sdk';
+Star.init({ gameId: 'YOUR_GAME_ID' }); // from .starrc
 
 Star.game(ctx => {
   const { canvas, width, height, ctx: c } = ctx;
@@ -45,7 +46,7 @@ Star.game(ctx => {
 
   // Game loop
   ctx.loop((dt) => {
-    c.fillStyle = '#1a1a2e';
+    c.fillStyle = '#111827';
     c.fillRect(0, 0, width, height);
     c.fillStyle = '#fff';
     c.font = '24px sans-serif';
@@ -60,17 +61,6 @@ Star.game(ctx => {
 });
 \`\`\`
 
-## Initialization (Required for Leaderboards)
-
-If using leaderboards outside the Star platform (local dev, self-hosted), initialize with your game ID:
-
-\`\`\`javascript
-import Star from 'star-sdk';
-
-// Get your gameId from .starrc (created by: npx star-sdk init "Game Name")
-Star.init({ gameId: 'your-game-id-here' });
-\`\`\`
-
 ## Common Patterns
 
 ### Game Over -> Submit Score -> Show Leaderboard
@@ -119,9 +109,7 @@ Only these 17 presets exist:
 
 \`\`\`javascript
 import Star from 'star-sdk';
-
-// Initialize for leaderboard support (get gameId from .starrc)
-Star.init({ gameId: 'your-game-id' });
+Star.init({ gameId: 'YOUR_GAME_ID' }); // from .starrc
 
 Star.game(ctx => {
   const { canvas, width, height, ctx: c } = ctx;
@@ -147,7 +135,7 @@ Star.game(ctx => {
     if (gameOver) return;
 
     // Clear
-    c.fillStyle = '#1a1a2e';
+    c.fillStyle = '#111827';
     c.fillRect(0, 0, width, height);
 
     // Update obstacles
@@ -174,13 +162,13 @@ Star.game(ctx => {
     obstacles = obstacles.filter(o => o.x > -20);
 
     // Draw player
-    c.fillStyle = '#e94560';
+    c.fillStyle = '#3b82f6';
     c.beginPath();
     c.arc(50, playerY, 15, 0, Math.PI * 2);
     c.fill();
 
     // Draw obstacles
-    c.fillStyle = '#0f4c75';
+    c.fillStyle = '#a855f7';
     obstacles.forEach(obs => {
       c.fillRect(obs.x - 10, obs.y - 25, 20, 50);
     });
@@ -379,7 +367,7 @@ game(({ ctx, width, height, on, loop, ui, canvas }) => {
   // 1. Draw on the canvas
   loop((dt) => {
     ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = '#22d3ee'; // cyan-400
+    ctx.fillStyle = '#3b82f6'; // blue-500
     ctx.fillRect(width / 2 - 25, height / 2 - 25, 50, 50);
   });
 
@@ -555,10 +543,10 @@ game(({ on, ui }) => {
   function render() {
     // UI is interactive by default - buttons, scroll, forms all work
     ui.render(\`
-      <div class="min-h-[100dvh] grid place-items-center bg-purple-900 text-white">
+      <div class="min-h-[100dvh] grid place-items-center bg-gray-900 text-white">
         <div class="text-center space-y-4">
           <h1 class="text-4xl font-bold">Score: \\\${score}</h1>
-          <button id="clickBtn" class="px-8 py-4 rounded-xl bg-cyan-400 text-slate-900 font-bold">
+          <button id="clickBtn" class="px-8 py-4 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-blue-500/20 font-bold">
             Click Me!
           </button>
         </div>
@@ -594,10 +582,10 @@ game(({ ctx, width, height, loop }) => {
     player.x += speed * dt;
     if (player.x > width) player.x = -playerSize;
 
-    ctx.fillStyle = '#0f172a';
+    ctx.fillStyle = '#111827';
     ctx.fillRect(0, 0, width, height);
 
-    ctx.fillStyle = '#22d3ee';
+    ctx.fillStyle = '#3b82f6';
     ctx.fillRect(player.x, player.y - playerSize/2, playerSize, playerSize);
   });
 });
@@ -628,10 +616,10 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
   });
 
   loop((dt) => {
-    ctx.fillStyle = '#1e1b4b';
+    ctx.fillStyle = '#111827';
     ctx.fillRect(0, 0, width, height);
 
-    ctx.strokeStyle = '#4338ca';
+    ctx.strokeStyle = '#8b5cf6';
     for (let row = 0; row < gridRows; row++) {
       for (let col = 0; col < gridCols; col++) {
         ctx.strokeRect(
@@ -662,10 +650,10 @@ game(({ ctx, width, height, loop, toStagePoint, canvas }) => {
   });
 
   loop((dt) => {
-    ctx.fillStyle = '#0f172a';
+    ctx.fillStyle = '#111827';
     ctx.fillRect(0, 0, width, height);
 
-    ctx.fillStyle = '#22d3ee';
+    ctx.fillStyle = '#3b82f6';
     ctx.fillRect(player.x - 8, player.y - 8, 16, 16);
   });
 }, { width: 320, height: 180 });  // Custom resolution with letterboxing
@@ -677,7 +665,7 @@ game(({ ctx, width, height, loop, toStagePoint, canvas }) => {
 import { game } from 'star-canvas';
 import { createLeaderboard } from 'star-leaderboard';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
   let score = 0;
@@ -727,7 +715,7 @@ game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
         <div class="h-full flex flex-col items-center justify-center text-white">
           <div class="text-3xl mb-4">GAME OVER</div>
           <div class="text-6xl mb-4">\\\${score}</div>
-          <button id="leaderboard-btn" class="px-6 py-3 mb-4 bg-purple-600 rounded-lg pointer-events-auto">
+          <button id="leaderboard-btn" class="px-6 py-3 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold shadow-lg shadow-blue-500/20 pointer-events-auto">
             VIEW LEADERBOARD
           </button>
           <div class="text-xl animate-pulse">TAP TO RESTART</div>
@@ -799,7 +787,7 @@ game(({ ctx, width, height, loop, canvas, createDrag }) => {
 
   const pieces = [
     { x: width * 0.2, y: height * 0.3, color: '#ef4444' },
-    { x: width * 0.4, y: height * 0.4, color: '#22c55e' },
+    { x: width * 0.4, y: height * 0.4, color: '#10b981' },
     { x: width * 0.6, y: height * 0.3, color: '#3b82f6' },
   ];
 
@@ -843,11 +831,11 @@ game(({ ctx, width, height, loop, canvas, createDrag }) => {
   });
 
   loop(() => {
-    ctx.fillStyle = '#1e293b';
+    ctx.fillStyle = '#1f2937';
     ctx.fillRect(0, 0, width, height);
 
     for (const p of pieces) {
-      ctx.fillStyle = drag.dragging === p ? '#fbbf24' : p.color;
+      ctx.fillStyle = drag.dragging === p ? '#f59e0b' : p.color;
       ctx.fillRect(p.x, p.y, pieceSize, pieceSize);
     }
   });
@@ -867,7 +855,7 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
   const pieceSize = height * 0.15;
   const pieces = [
     { x: width * 0.2, y: height * 0.3, color: '#ef4444' },
-    { x: width * 0.4, y: height * 0.4, color: '#22c55e' },
+    { x: width * 0.4, y: height * 0.4, color: '#10b981' },
   ];
 
   // Manual drag state
@@ -913,11 +901,11 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
   });
 
   loop(() => {
-    ctx.fillStyle = '#1e293b';
+    ctx.fillStyle = '#1f2937';
     ctx.fillRect(0, 0, width, height);
 
     for (const p of pieces) {
-      ctx.fillStyle = dragging === p ? '#fbbf24' : p.color;
+      ctx.fillStyle = dragging === p ? '#f59e0b' : p.color;
       ctx.fillRect(p.x, p.y, pieceSize, pieceSize);
     }
   });
@@ -954,12 +942,12 @@ game(({ ctx, width, height, loop }) => {
     if (bg.complete) {
       ctx.drawImage(bg, 0, 0, width, height);
     } else {
-      ctx.fillStyle = '#1e293b';  // Fallback color while loading
+      ctx.fillStyle = '#1f2937';  // Fallback color while loading
       ctx.fillRect(0, 0, width, height);
     }
 
     // Draw game objects on top
-    ctx.fillStyle = '#22d3ee';
+    ctx.fillStyle = '#3b82f6';
     ctx.fillRect(player.x - 16, player.y - 16, 32, 32);
   });
 });
@@ -987,7 +975,7 @@ game(({ ctx, width, height, loop }) => {
       ctx.fillStyle = pattern;
       ctx.fillRect(0, 0, width, height);
     } else {
-      ctx.fillStyle = '#22c55e';  // Fallback color while loading
+      ctx.fillStyle = '#10b981';  // Fallback color while loading
       ctx.fillRect(0, 0, width, height);
     }
 
@@ -1025,7 +1013,7 @@ yarn add star-leaderboard
 **Import:**
 \`\`\`javascript
 import { createLeaderboard } from 'star-leaderboard';
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 \`\`\`
 
 **CRITICAL:** Import in JavaScript - don't add \`<script>\` tags.
@@ -1038,7 +1026,7 @@ const leaderboard = createLeaderboard();
 import { createLeaderboard } from 'star-leaderboard';
 import { game } from 'star-canvas';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 game(({ ctx, width, height, loop, ui, on, canvas }) => {
   let score = 0;
@@ -1057,7 +1045,7 @@ game(({ ctx, width, height, loop, ui, on, canvas }) => {
 
 **That's it!** The SDK handles:
 - Score submission (works for guests and logged-in users)
-- Platform leaderboard UI (modal with rankings)
+- Leaderboard UI (modal with rankings)
 - Weekly/all-time timeframes
 - AI-detected scoring (score/time/moves - higher or lower is better)
 
@@ -1068,7 +1056,7 @@ game(({ ctx, width, height, loop, ui, on, canvas }) => {
 **Core Methods:**
 \`\`\`javascript
 leaderboard.submit(score)       // Submit score, returns Promise<{ success, rank, scoreId }>
-leaderboard.show()              // Show platform leaderboard UI
+leaderboard.show()              // Show leaderboard UI
 leaderboard.getScores(options)  // Fetch scores for custom UI
 leaderboard.share(options)      // Generate shareable link
 \`\`\`
@@ -1076,7 +1064,7 @@ leaderboard.share(options)      // Generate shareable link
 **Properties:**
 \`\`\`javascript
 leaderboard.ready    // true when SDK is initialized
-leaderboard.gameId   // Current game ID (auto-detected on platform)
+leaderboard.gameId   // Current game ID
 \`\`\`
 
 **Aliases (for discoverability):**
@@ -1094,7 +1082,7 @@ leaderboard.showLeaderboard()   // Same as show()
 \`\`\`javascript
 import { createLeaderboard } from 'star-leaderboard';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 function gameOver(finalScore) {
   // Fire and forget - simplest approach
@@ -1108,7 +1096,7 @@ function gameOver(finalScore) {
 \`\`\`javascript
 import { createLeaderboard } from 'star-leaderboard';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 async function gameOver(finalScore) {
   const { success, rank } = await leaderboard.submit(finalScore);
@@ -1127,11 +1115,11 @@ async function gameOver(finalScore) {
 import { createLeaderboard } from 'star-leaderboard';
 import { game } from 'star-canvas';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 game(({ ui, on }) => {
   ui.render(\`
-    <button id="lb-btn" class="pointer-events-auto">
+    <button id="lb-btn" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold text-white shadow-lg shadow-blue-500/20 pointer-events-auto">
       View Leaderboard
     </button>
   \`);
@@ -1148,7 +1136,7 @@ game(({ ui, on }) => {
 \`\`\`javascript
 import { createLeaderboard } from 'star-leaderboard';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 async function showCustomLeaderboard() {
   const { scores, you, config } = await leaderboard.getScores({
@@ -1173,7 +1161,7 @@ async function showCustomLeaderboard() {
 import { createLeaderboard } from 'star-leaderboard';
 import { game } from 'star-canvas';
 
-const leaderboard = createLeaderboard();
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 
 game(({ ctx, width, height, loop, ui, on, canvas }) => {
   let score = 0;
@@ -1198,7 +1186,7 @@ game(({ ctx, width, height, loop, ui, on, canvas }) => {
         <div class="h-full flex flex-col items-center justify-center text-white">
           <div class="text-3xl mb-4">GAME OVER</div>
           <div class="text-6xl mb-4">\\\${score}</div>
-          <button id="lb-btn" class="px-6 py-3 mb-4 bg-purple-600 rounded-lg pointer-events-auto">
+          <button id="lb-btn" class="px-6 py-3 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold shadow-lg shadow-blue-500/20 pointer-events-auto">
             VIEW LEADERBOARD
           </button>
           <div class="text-xl animate-pulse">TAP TO RESTART</div>
@@ -1224,17 +1212,12 @@ game(({ ctx, width, height, loop, ui, on, canvas }) => {
 
 ---
 
-**Options:**
+**Configuration:**
 
+Always pass your gameId (from \`.starrc\`, created by \`npx star-sdk init\`):
 \`\`\`javascript
-// Default - auto-detects gameId on Star platform
-const leaderboard = createLeaderboard();
-
-// Standalone use (outside Star platform)
-const leaderboard = createLeaderboard({
-  gameId: 'your-game-uuid',
-  apiBase: 'https://buildwithstar.com'
-});
+import { createLeaderboard } from 'star-leaderboard';
+const leaderboard = createLeaderboard({ gameId: 'YOUR_GAME_ID' });
 \`\`\`
 
 ---
@@ -1265,9 +1248,9 @@ const data = await leaderboard.getScores({
 
 2. **Fire and forget is fine** - \`submit()\` returns a Promise but you don't need to await it.
 
-3. **Use \`show()\` for platform UI** - It's the easiest way. Use \`getScores()\` only if you need custom rendering.
+3. **Use \`show()\` to display the leaderboard** - It's the easiest way. Use \`getScores()\` only if you need custom rendering.
 
-4. **Don't store leaderboard state** - Just call the SDK methods when needed. The platform handles caching.
+4. **Don't store leaderboard state** - Just call the SDK methods when needed. The SDK handles caching.
 
 5. **Works for guests** - Guests get a generated name like "Guest1234". They can sign in later to claim scores.`;
 
@@ -1409,15 +1392,14 @@ async function initCommand(name, email) {
     log(`${colors.dim}Config saved to${colors.reset} ${colors.bright}.starrc${colors.reset}`);
     log("");
     log(`${colors.dim}Next steps:${colors.reset}`);
-    log(`  1. Install: ${colors.cyan}npm install star-sdk${colors.reset}`);
-    log(`  2. Import Star SDK in your game`);
-    log(`  3. Initialize with your game ID`);
-    log(`  4. Use Star.leaderboard.submit(score) to submit scores`);
+    log(`  1. Install the leaderboard package: ${colors.cyan}yarn add star-leaderboard${colors.reset}`);
+    log(`  2. Submit scores and show the leaderboard`);
     log("");
     log(`${colors.dim}Example:${colors.reset}`);
-    log(`  ${colors.cyan}import Star from 'star-sdk';${colors.reset}`);
-    log(`  ${colors.cyan}Star.init({ gameId: '${data.gameId}' });${colors.reset}`);
-    log(`  ${colors.cyan}Star.leaderboard.submit(1500);${colors.reset}`);
+    log(`  ${colors.cyan}import { createLeaderboard } from 'star-leaderboard';${colors.reset}`);
+    log(`  ${colors.cyan}const leaderboard = createLeaderboard({ gameId: '${data.gameId}' });${colors.reset}`);
+    log(`  ${colors.cyan}leaderboard.submit(1500);${colors.reset}`);
+    log(`  ${colors.cyan}leaderboard.show();${colors.reset}`);
     log("");
     log(`${colors.dim}Using an AI coding agent?${colors.reset}`);
     log(`  ${colors.cyan}npx star-sdk install${colors.reset}        ${colors.dim}Claude Code, Codex, Cursor, Windsurf, Aider${colors.reset}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "star-sdk-cli",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "CLI tool for Star SDK - register games and manage leaderboards",
   "type": "module",
   "bin": {