star-sdk-cli 0.1.7 → 0.1.9

package/dist/cli.mjs

@@ -45,7 +45,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 +60,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
@@ -120,9 +109,6 @@ 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.game(ctx => {
   const { canvas, width, height, ctx: c } = ctx;
   let score = 0;
@@ -147,7 +133,7 @@ Star.game(ctx => {
     if (gameOver) return;
 
     // Clear
-    c.fillStyle = '#1a1a2e';
+    c.fillStyle = '#111827';
     c.fillRect(0, 0, width, height);
 
     // Update obstacles
@@ -174,13 +160,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 +365,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 +541,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 +580,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 +614,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 +648,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
@@ -727,7 +713,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 +785,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 +829,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 +853,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 +899,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 +940,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 +973,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);
     }
 
@@ -1057,7 +1043,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 +1054,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 +1062,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):**
@@ -1131,7 +1117,7 @@ const leaderboard = createLeaderboard();
 
 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>
   \`);
@@ -1198,7 +1184,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,19 +1210,6 @@ game(({ ctx, width, height, loop, ui, on, canvas }) => {
 
 ---
 
-**Options:**
-
-\`\`\`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'
-});
-\`\`\`
-
 ---
 
 **getScores Options:**
@@ -1265,9 +1238,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,14 +1382,11 @@ 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. Import Star SDK in your game`);
+    log(`  2. Use Star.leaderboard.submit(score) to submit scores`);
     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("");
     log(`${colors.dim}Using an AI coding agent?${colors.reset}`);

package/package.json

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