Removed bypass onboarding process

Author: pricewowen

components/character/character-creator.tsx

@@ -24,6 +24,7 @@ import {
   type ColorPreset,
 } from "@/lib/character/presets";
 import type { LayerColorState, LayerVariantState } from "@/lib/character/types";
+import { isVariantUnlocked } from "@/lib/character/variant-access";
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
@@ -84,12 +85,16 @@ export function CharacterCreator({
   const activeLayer = getLayerById(activeLayerId);
   const activeColor = colors[activeLayerId];
   const ownedSet = new Set(ownedVariantIds);
-  const pieceVariants = activeLayer.allowVariants
-    ? activeLayer.variants.filter(
+  const pieceVariants = activeLayer.allowVariants ? activeLayer.variants : [];
+  const lockedVariantIds = new Set(
+    pieceVariants
+      .filter(
         (variant) =>
-          variant.id === NONE_VARIANT_ID || ownedSet.has(variant.id),
+          variant.id !== NONE_VARIANT_ID &&
+          !isVariantUnlocked(variant.id, ownedSet),
       )
-    : [];
+      .map((variant) => variant.id),
+  );
 
   const applyPreset = (preset: ColorPreset) => {
     setActivePresetId(preset.id);
@@ -120,6 +125,10 @@ export function CharacterCreator({
   };
 
   const handleVariantChange = (variantId: string) => {
+    if (!isVariantUnlocked(variantId, ownedSet)) {
+      return;
+    }
+
     setVariants((current) => ({
       ...current,
       [activeLayerId]: variantId,
@@ -189,6 +198,7 @@ export function CharacterCreator({
               <div className="min-h-14">
                 <CharacterPieceSelector
                   variants={pieceVariants}
+                  lockedVariantIds={lockedVariantIds}
                   activeId={variants[activeLayerId]}
                   color={activeColor}
                   skinColor={colors.skin}

components/character/character-piece-selector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CircleSlash } from "lucide-react";
+import { CircleSlash, Lock } from "lucide-react";
 
 import type { HSL } from "@/lib/character/color-utils";
 import { NONE_VARIANT_ID, PIECE_SLOT_COUNT } from "@/lib/character/presets";
@@ -11,6 +11,7 @@ import { TintedSpriteIcon } from "./tinted-sprite-icon";
 
 type CharacterPieceSelectorProps = {
   variants: LayerVariant[];
+  lockedVariantIds?: ReadonlySet<string>;
   activeId: string;
   color: HSL;
   skinColor?: HSL;
@@ -19,6 +20,7 @@ type CharacterPieceSelectorProps = {
 
 export function CharacterPieceSelector({
   variants,
+  lockedVariantIds,
   activeId,
   color,
   skinColor,
@@ -66,19 +68,29 @@ export function CharacterPieceSelector({
           );
         }
 
+        const locked = lockedVariantIds?.has(variant.id) ?? false;
+
         return (
           <button
             key={variant.id}
             type="button"
-            title={variant.label}
-            aria-label={variant.label}
+            disabled={locked}
+            aria-disabled={locked}
+            title={
+              locked ? `${variant.label} — unlock in the shop` : variant.label
+            }
+            aria-label={
+              locked ? `${variant.label}, locked — unlock in the shop` : variant.label
+            }
             aria-pressed={activeId === variant.id}
             onClick={() => onSelect(variant.id)}
             className={cn(
-              "flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
-              activeId === variant.id
-                ? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
-                : "border-border/60 hover:border-border hover:bg-zinc-900/60",
+              "relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
+              locked
+                ? "cursor-not-allowed border-border/40 opacity-80"
+                : activeId === variant.id
+                  ? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
+                  : "border-border/60 hover:border-border hover:bg-zinc-900/60",
             )}
           >
             <TintedSpriteIcon
@@ -87,6 +99,14 @@ export function CharacterPieceSelector({
               skinColor={skinColor}
               size={36}
             />
+            {locked ? (
+              <span
+                aria-hidden
+                className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/75"
+              >
+                <Lock className="size-4 text-muted-foreground" strokeWidth={2.25} />
+              </span>
+            ) : null}
           </button>
         );
       })}

lib/character/variant-access.ts

@@ -0,0 +1,39 @@
+import { NONE_VARIANT_ID } from "@/lib/character/presets";
+
+/** First N numbered styles per layer are free; higher numbers are shop-only. */
+export const FREE_STYLE_COUNT = 2;
+
+export function getVariantStyleNumber(variantId: string): number | null {
+  if (variantId === NONE_VARIANT_ID) {
+    return null;
+  }
+
+  const match = variantId.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+
+export function isFreeStyleVariant(variantId: string): boolean {
+  const styleNumber = getVariantStyleNumber(variantId);
+  return styleNumber !== null && styleNumber <= FREE_STYLE_COUNT;
+}
+
+export function isShopOnlyStyleVariant(variantId: string): boolean {
+  const styleNumber = getVariantStyleNumber(variantId);
+  return styleNumber !== null && styleNumber > FREE_STYLE_COUNT;
+}
+
+export function isVariantUnlocked(
+  variantId: string,
+  ownedVariantIds: ReadonlySet<string> | readonly string[],
+): boolean {
+  if (variantId === NONE_VARIANT_ID || isFreeStyleVariant(variantId)) {
+    return true;
+  }
+
+  const owned =
+    ownedVariantIds instanceof Set
+      ? ownedVariantIds
+      : new Set(ownedVariantIds);
+
+  return owned.has(variantId);
+}

lib/shop-catalog.ts

@@ -1,3 +1,4 @@
+import { isShopOnlyStyleVariant } from "@/lib/character/variant-access";
 import type { CharacterLayerId } from "@/lib/character/presets";
 import { CHARACTER_LAYERS, NONE_VARIANT_ID } from "@/lib/character/presets";
 
@@ -57,7 +58,10 @@ export function getShopCatalogFromPresets(): ShopItemRecord[] {
     }
 
     return layer.variants
-      .filter((variant) => variant.id !== NONE_VARIANT_ID)
+      .filter(
+        (variant) =>
+          variant.id !== NONE_VARIANT_ID && isShopOnlyStyleVariant(variant.id),
+      )
       .map((variant) => ({
         id: variant.id,
         name: variant.label,

supabase/seed.sql

@@ -4,24 +4,28 @@ delete from public.user_items
 where item_id in ('hat_blue', 'glasses_round', 'room_sunset');
 
 delete from public.shop_items
-where id in ('hat_blue', 'glasses_round', 'room_sunset');
+where id in (
+  'hat_blue',
+  'glasses_round',
+  'room_sunset',
+  'pants-1',
+  'pants-2',
+  'shoes-1',
+  'shoes-2',
+  'torso-1',
+  'torso-2',
+  'eyes-1',
+  'eyes-2',
+  'head-1',
+  'head-2'
+);
 
 insert into public.shop_items (id, name, type, price, image_path)
 values
-  ('pants-1', 'Pants 1', 'pants', 20, '/character/pants/pants-1.png'),
-  ('pants-2', 'Pants 2', 'pants', 25, '/character/pants/pants-2.png'),
   ('pants-3', 'Pants 3', 'pants', 30, '/character/pants/pants-3.png'),
-  ('shoes-1', 'Shoes 1', 'shoes', 20, '/character/shoes/shoes-1.png'),
-  ('shoes-2', 'Shoes 2', 'shoes', 25, '/character/shoes/shoes-2.png'),
   ('shoes-3', 'Shoes 3', 'shoes', 30, '/character/shoes/shoes-3.png'),
-  ('torso-1', 'Torso 1', 'torso', 25, '/character/torso/torso-1.png'),
-  ('torso-2', 'Torso 2', 'torso', 30, '/character/torso/torso-2.png'),
   ('torso-3', 'Torso 3', 'torso', 35, '/character/torso/torso-3.png'),
   ('torso-4', 'Torso 4', 'torso', 40, '/character/torso/torso-4.png'),
-  ('eyes-1', 'Eyes 1', 'eyes', 15, '/character/eyes/eyes-1.png'),
-  ('eyes-2', 'Eyes 2', 'eyes', 20, '/character/eyes/eyes-2.png'),
-  ('head-1', 'Head 1', 'head', 30, '/character/head/head-1.png'),
-  ('head-2', 'Head 2', 'head', 35, '/character/head/head-2.png'),
   ('head-3', 'Head 3', 'head', 40, '/character/head/head-3.png'),
   ('head-4', 'Head 4', 'head', 45, '/character/head/head-4.png'),
   ('head-5', 'Head 5', 'head', 50, '/character/head/head-5.png'),