STYLE HIM UP — KK & Jay Supply Co.

[{"_1":2,"_328":-5,"_329":-5},"loaderData",{"_3":4,"_212":213},"root",{"_5":6,"_7":6,"_8":6,"_9":10,"_18":-7,"_19":20,"_206":6,"_207":208,"_210":211},"hasDatabase",false,"isSignedIn","verifyMFA","userData",{"_11":-7,"_12":-7,"_13":-7,"_14":-7,"_15":-7,"_16":-7,"_17":-7},"first_name","last_name","email","wallets","factors","user_metadata","app_metadata","stripeCustomer","theme",{"_21":22,"_23":24,"_25":-7,"_26":27,"_85":-7,"_86":87,"_88":-7,"_89":87,"_90":91,"_92":93,"_170":87,"_171":172,"_173":91,"_174":87,"_175":87,"_176":177,"_178":87,"_179":6,"_180":87,"_181":182,"_194":-7,"_195":-7,"_196":197},"hostname","storypress-eoy.pages.dev","tone","light","fonts","colors",{"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":65,"_69":67,"_70":65,"_71":72,"_73":57,"_74":67,"_75":65,"_76":77,"_78":79,"_80":81,"_82":65,"_83":84},"--primary-color","deeppink","--primary-hover-color","oklch(from var(--primary-color) calc(l + 0.05) c h / 0.95)","--secondary-color","darkcyan","--secondary-hover-color","oklch(from var(--secondary-color) calc(l + 0.05) c h / 0.95)","--tertiary-color","orange","--tertiary-hover-color","oklch(from var(--tertiary-color) calc(l + 0.05) c h / 0.95)","--red-color","red","--green-color","green","--white-color","white","--black-color","black","--main-outer-color","var(--tertiary-color)","--main-inner-color","var(--secondary-color)","--main-inner-max-width-color","var(--main-inner-color)","--bg-color","var(--white-color)","--text-color","var(--black-color)","--border-color","hsl(from var(--text-color) h s calc(l + 25))","--border-invert-color","hsl(from var(--white-color) h s calc(l - 25))","--prose-color","hsl(from var(--text-color) h s calc(l + 20))","--prose-heading-color","var(--text-color)","--nav-bg-color","var(--bg-color)","--nav-text-color","--footer-bg-color","--footer-text-color","--thumbnail-bg-color","rgb(255 255 255 / 90%)","--thumbnail-text-color","--button-bg-color","--button-text-color","--button-hover-bg-color","oklch(from var(--button-bg-color) calc(l + 0.05) c h / 0.95)","--button-hover-text-color","oklch(from var(--button-text-color) calc(l + 0.05) c h / 0.95)","--input-bg-color","rgb(212 212 212)","--input-text-color","--input-placeholder-text-color","rgb(82 82 82)","footer","gtm_id","","favicons","maxWidth","siteTitle","StoryPress","navigation",{"_94":95,"_96":97,"_134":135,"_128":92,"_167":6,"_168":166,"_169":6},"_uid","d61595af-0bc9-4a30-98f5-8d9bc97274e9","logo",[98],{"_94":99,"_100":101,"_128":96,"_130":131,"_132":133},"e76425f3-b061-416d-970b-cf26814da965","text",[102],{"_94":103,"_100":104,"_125":6,"_126":127,"_128":129},"8040fc3c-4394-4bf0-a36f-7344eb76d02a",{"_105":106,"_107":108},"type","doc","content",[109],{"_105":110,"_111":112,"_107":116},"heading","attrs",{"_113":114,"_115":-5},"level",1,"textAlign",[117],{"_100":118,"_105":100,"_119":120},"Exp. 0007","marks",[121],{"_105":122,"_111":123},"textStyle",{"_124":57},"color","prose","alignment","justify","component","textRich","textWidth","250","imageMaxWidth","150","menu",[136],{"_94":137,"_138":139,"_110":164,"_128":134,"_165":166},"6be559c5-f6af-4aef-9d94-45b2e0364364","items",[140,156],{"_94":141,"_142":143,"_151":152,"_153":154,"_128":155},"8feb382a-c9db-47b1-b8d7-4fbe70c1c1fd","link",{"_144":87,"_145":146,"_147":145,"_148":149,"_150":146},"id","url","/products","linktype","fieldtype","multilink","cached_url","label","Products","submenu",[],"menuItem",{"_94":157,"_142":158,"_105":87,"_151":162,"_153":163,"_128":155},"83a9af5d-e4c0-4244-aa1b-a4c5a2f3a8c7",{"_144":159,"_145":87,"_147":160,"_148":149,"_150":161},"0f18481c-a400-40b3-8ce0-7a83e880ba3f","story","about","About",[],[],"showBreadcrumb",true,"alwaysMobileMenu","additionalPaddingX","additionalPaddingY","termly_uuid","imageQuality","50","authorDefault","cookieyes_key","termlyWhitelist","termlyConsentPrefLabel","Consent Preferences","relatedPostThumbnailAspectRatio","cookieyesRenderRevisitConsentButton","relatedPostThumbnailCustomAspectRatio","languages",{"_181":183,"_192":193},[184,189],{"_185":186,"_187":188},"code","en","name","English",{"_185":190,"_187":191},"it","Italian","i18n",["S",186,190],"langPref","langRoute","env",{"_198":199,"_200":201,"_202":203,"_204":-7,"_205":-7},"TURNSTILE_SITE_KEY","0x4AAAAAABJj7J6weoMDklK-","STORYBLOK_REGION","eu","STORYBLOK_VERSION","public","CLOUDFLARE_IMAGE_DOMAIN","STRIPE_PUBLISHABLE_KEY","isTouchScreen","returnUrlParams",{"_209":-5},"stripeSetupIntentClientSecret","error",{},"routes/_app.$/route",{"_160":214},{"_187":215,"_216":217,"_218":219,"_220":221,"_144":222,"_223":224,"_107":225,"_298":299,"_300":301,"_302":-5,"_303":304,"_305":306,"_307":6,"_308":309,"_310":-5,"_311":312,"_313":314,"_315":-5,"_316":317,"_318":-5,"_319":320,"_321":-5,"_322":-5,"_323":6,"_324":325,"_326":327},"Game — Dress the Man","created_at","2026-06-16T16:48:29.414Z","published_at","2026-06-25T17:55:09.642Z","updated_at","2026-06-25T17:55:09.663Z",188165772993870,"uuid","e79e9c61-d82c-4367-9f4d-a87ed518e618",{"_94":226,"_227":228,"_25":244,"_267":268,"_269":270,"_128":278,"_279":166,"_280":281,"_292":-7,"_293":294,"_297":-7},"kkj-page","body",[229],{"_144":230,"_231":232,"_233":87,"_94":234,"_235":236,"_237":166,"_128":238,"_239":240,"_241":166,"_242":240,"_243":6},"kkj-style","js","/* =====================================================================\n GAME_DATA — EDIT EVERYTHING HERE. NO LOGIC BELOW NEEDS TOUCHING.\n ---------------------------------------------------------------------\n A non-coder can:\n • add / remove pieces in any slot (just copy an existing {block})\n • change each piece's score weights + feedback line\n • change colors used to draw a piece on the figure (svg.fill etc.)\n • change the target score and the promo reward\n ---------------------------------------------------------------------\n HOW SCORING WORKS (plain English):\n Every chosen piece carries a \"weight\" (points it adds or removes).\n Positive weight = sharper. Negative = trying too hard / clashing.\n The base figure starts at GAME_DATA.baseScore.\n Two bonuses are computed automatically (see RULES at the bottom of\n this object) so the brand philosophy is enforced without code edits:\n + \"the line\" bonus when foundation (braces/garter) is chosen\n + \"restraint\" bonus when few loud pieces are stacked\n - \"too much\" penalty when several loud pieces pile up together\n Each piece can be flagged `loud:true` to count toward that penalty.\n ---------------------------------------------------------------------\n LOADING THIS FROM AN EXTERNAL SOURCE LATER (optional, no logic change):\n Instead of the literal object below you could do, e.g.:\n const GAME_DATA = await fetch('./style-him-up.json').then(r=>r.json());\n ...or pull it from a StoryPress freeform component field:\n const GAME_DATA = JSON.parse(\n document.getElementById('sp-freeform-styleData').textContent\n );\n As long as the shape (slots / options / weights / rules) matches,\n everything below keeps working untouched.\n ===================================================================== */\nconst GAME_DATA = {\n\n targetScore: 90, // score needed to \"win\" and unlock the reward\n baseScore: 40, // where an undressed-but-presentable figure starts\n\n // The promo reward shown on the end screen\n reward: {\n code: \"SHARP10\",\n desc: \"$10 off your first set of braces.\",\n minScoreLabel: \"Earned at 90+.\"\n },\n\n // Brand-voice verdict bands keyed by score. Highest matching min wins.\n verdicts: [\n { min: 0, text: \"A blank slate. Dress with intent.\" },\n { min: 45, text: \"Coming together. Mind the line.\" },\n { min: 60, text: \"Decent. But decent isn’t the goal.\" },\n { min: 72, text: \"Composed. He looks like he means it.\" },\n { min: 82, text: \"Quietly excellent. Almost nothing wasted.\" },\n { min: 90, text: \"Sharp. Restraint reads as confidence. The line holds.\" }\n ],\n\n // End-screen summaries by band (chosen by final score)\n endings: [\n { min: 0, kicker: \"Try Again\", title: \"Not yet.\", text: \"There’s a man in there. Strip the noise, set the foundation, and let the line do the talking.\" },\n { min: 72, kicker: \"Close\", title: \"Nearly there.\", text: \"Good instincts. A touch more restraint, a touch more structure — and he arrives.\" },\n { min: 90, kicker: \"The Verdict\", title: \"Sharp.\", text: \"Nothing shouting, nothing slack. The braces hold the line so he doesn’t have to. That’s the whole idea.\" }\n ],\n\n /* -------------------------------------------------------------------\n SLOTS — each is one control row. `key` must be unique.\n Each option:\n id unique within the slot\n label button text\n note tiny italic note under label (optional)\n weight points (can be negative)\n loud true if it counts as a \"loud / flashy\" piece\n foundation true ONLY for braces/garter pieces (drives \"the line\")\n feedback brand-voice line shown when chosen\n svg drawing instructions for the figure (see DRAW NOTES)\n ------------------------------------------------------------------- */\n slots: [\n {\n key:\"shirt\", name:\"Shirt\", hint:\"the canvas\",\n options:[\n { id:\"white\", label:\"Crisp White\", note:\"+ timeless\", weight:10, swatch:\"#fdfdfb\",\n feedback:\"White. The hardest thing to wear, the easiest to respect.\",\n svg:{ shirt:\"#fbfbf8\" } },\n { id:\"chambray\", label:\"Pale Chambray\", note:\"+ easy\", weight:8, swatch:\"#9fb4c9\",\n feedback:\"Soft blue. Warmth without effort. A good place to build.\",\n svg:{ shirt:\"#aebfd1\" } },\n { id:\"stripe\", label:\"Bengal Stripe\", note:\"+ character\", weight:6, loud:false, swatch:\"#c5d3e2\",\n feedback:\"A clean stripe earns its keep. Pattern, but disciplined.\",\n svg:{ shirt:\"#cdd9e6\", shirtStripe:\"#6f86a3\" } },\n { id:\"loud\", label:\"Loud Floral\", note:\"− busy\", weight:-12, loud:true, swatch:\"#d8714e\",\n feedback:\"The shirt is talking over the man. Quiet it down.\",\n svg:{ shirt:\"#e6a07c\", shirtFloral:true, shirtBase:\"#e6a07c\" } }\n ]\n },\n {\n key:\"braces\", name:\"Braces / Garter\", hint:\"the foundation — the line\",\n options:[\n { id:\"none\", label:\"None\", note:\"no structure\", weight:-4, foundation:false, swatch:\"transparent\",\n feedback:\"Nothing holding the line. It will sag before noon.\",\n svg:{} },\n { id:\"belt\", label:\"Just a Belt\", note:\"breaks the line\", weight:0, foundation:false, swatch:\"#5a3d28\",\n feedback:\"A belt cinches; it doesn’t lift. The torso still breaks.\",\n svg:{ belt:\"#4a3322\" } },\n { id:\"navy\", label:\"Navy Braces\", note:\"+ the line\", weight:16, foundation:true, swatch:\"#1f2a3c\",\n feedback:\"There it is. The line lifts and holds. Invisible engineering.\",\n svg:{ braces:\"#1f2a3c\" } },\n { id:\"brass\", label:\"Tan Braces + Garter\", note:\"+ the full line\", weight:20, foundation:true, swatch:\"#c8a96a\",\n feedback:\"Braces above, garter below. The whole line stays true all day.\",\n svg:{ braces:\"#b08d52\", garter:true } }\n ]\n },\n {\n key:\"neck\", name:\"Neckwear\", hint:\"restraint lives here\",\n options:[\n { id:\"open\", label:\"Open Collar\", note:\"+ ease\", weight:9, swatch:\"#fdfdfb\",\n feedback:\"An open collar, worn well, is its own statement. Confident.\",\n svg:{} },\n { id:\"knit\", label:\"Navy Knit Tie\", note:\"+ texture\", weight:12, swatch:\"#1f2a3c\",\n feedback:\"A knit tie. Texture over flash. Exactly the right amount.\",\n svg:{ tie:\"#1f2a3c\", tieKnit:true } },\n { id:\"silk\", label:\"Burgundy Silk\", note:\"+ polish\", weight:10, swatch:\"#6e2230\",\n feedback:\"Deep, considered colour. It finishes the throat without shouting.\",\n svg:{ tie:\"#6e2230\" } },\n { id:\"bowloud\", label:\"Sequin Bow Tie\", note:\"− costume\", weight:-14, loud:true, swatch:\"#d4b13a\",\n feedback:\"This is a costume choice. The man disappears behind it.\",\n svg:{ bow:\"#d4b13a\", bowLoud:true } }\n ]\n },\n {\n key:\"pocket\", name:\"Pocket Square\", hint:\"a whisper, not a shout\",\n options:[\n { id:\"none\", label:\"None\", note:\"clean\", weight:6, swatch:\"transparent\",\n feedback:\"Empty pocket. Never wrong. Restraint is a choice too.\",\n svg:{} },\n { id:\"white\", label:\"White Linen\", note:\"+ classic\", weight:11, swatch:\"#fdfdfb\",\n feedback:\"A flash of white linen. The oldest trick, still the best.\",\n svg:{ pocket:\"#fbfbf8\" } },\n { id:\"tonal\", label:\"Tonal Fold\", note:\"+ subtle\", weight:9, swatch:\"#9aa7b8\",\n feedback:\"Picks up the suit without matching the tie. Quietly clever.\",\n svg:{ pocket:\"#aab6c6\" } },\n { id:\"loud\", label:\"Neon Paisley Puff\", note:\"− too much\", weight:-10, loud:true, swatch:\"#e0532a\",\n feedback:\"An explosion in the breast pocket. Trying far too hard.\",\n svg:{ pocket:\"#e0532a\", pocketLoud:true } }\n ]\n },\n {\n key:\"shoes\", name:\"Shoes\", hint:\"the foundation everyone forgets\",\n options:[\n { id:\"sneak\", label:\"White Sneakers\", note:\"− breaks tone\", weight:-6, loud:true, swatch:\"#f2f2ee\",\n feedback:\"Sneakers undercut everything above them. The tone snaps.\",\n svg:{ shoes:\"#eeeeea\" } },\n { id:\"suede\", label:\"Tan Suede\", note:\"+ relaxed\", weight:9, swatch:\"#a87b4a\",\n feedback:\"Suede softens the formality just enough. Considered ease.\",\n svg:{ shoes:\"#a87b4a\" } },\n { id:\"oxford\", label:\"Black Oxfords\", note:\"+ anchor\", weight:13, swatch:\"#1a1a1a\",\n feedback:\"Polished oxfords anchor the whole figure. The base holds.\",\n svg:{ shoes:\"#191919\" } },\n { id:\"loud\", label:\"Gold Hi-Tops\", note:\"− circus\", weight:-13, loud:true, swatch:\"#d4af37\",\n feedback:\"Gold high-tops. The line dies at the ankle.\",\n svg:{ shoes:\"#d4af37\", shoesLoud:true } }\n ]\n },\n {\n key:\"attitude\", name:\"Attitude / Posture\", hint:\"matters as much as the cloth\",\n options:[\n { id:\"slouch\", label:\"Slouched\", note:\"− folds the line\", weight:-10, swatch:\"#8a8a8a\",\n feedback:\"The clothes can’t fix a folded spine. Stand into it.\",\n svg:{ pose:\"slouch\" } },\n { id:\"stiff\", label:\"Stiff & Anxious\", note:\"− tries too hard\", weight:-5, swatch:\"#6f6f6f\",\n feedback:\"Rigid reads as nervous. Composure isn’t tension.\",\n svg:{ pose:\"stiff\" } },\n { id:\"easy\", label:\"Easy & Upright\", note:\"+ composed\", weight:14, swatch:\"#1f2a3c\",\n feedback:\"Upright, unhurried. The posture wears the clothes — not the reverse.\",\n svg:{ pose:\"easy\" } },\n { id:\"hands\", label:\"Hands in Pockets\", note:\"+ unbothered\", weight:11, swatch:\"#3a4759\",\n feedback:\"Relaxed, unbothered, in command. Nothing to prove.\",\n svg:{ pose:\"hands\" } }\n ]\n }\n ],\n\n /* RULES — the brand philosophy, enforced automatically. Tune freely. */\n rules: {\n lineBonus: 12, // added when a foundation (braces/garter) piece is chosen\n restraintBonus: 10, // added when 0–1 \"loud\" pieces are worn\n loudPenaltyEach: 7, // subtracted per loud piece beyond the first\n maxScore: 100,\n minScore: 0\n }\n};\n\n/* =====================================================================\n GAME LOGIC — generic. Driven entirely by GAME_DATA above.\n ===================================================================== */\n(function(){\n const state = {}; // slotKey -> chosen optionId\n const controlsEl = document.getElementById('controls');\n const finishBtn = document.getElementById('finishBtn');\n const resetBtn = document.getElementById('resetBtn');\n const toolbar = document.getElementById('slots');\n\n // Default selections (first option of each slot)\n function defaults(){\n GAME_DATA.slots.forEach(s => state[s.key] = s.options[0].id);\n }\n defaults();\n\n // -------- Build control UI from data --------\n GAME_DATA.slots.forEach(slot=>{\n const wrap = document.createElement('div');\n wrap.className='slot';\n wrap.innerHTML =\n '

'+slot.name+\n ''+slot.hint+'

'+\n '

';\n const opts = wrap.querySelector('.opts');\n slot.options.forEach(opt=>{\n const b=document.createElement('button');\n b.className='opt';b.type='button';\n b.setAttribute('aria-pressed', state[slot.key]===opt.id ? 'true':'false');\n b.dataset.slot=slot.key;b.dataset.id=opt.id;\n const sw = opt.swatch && opt.swatch!=='transparent'\n ? '' : '';\n b.innerHTML = sw + ''+opt.label+''+(opt.note?''+opt.note+'':'');\n b.addEventListener('click',()=>choose(slot.key,opt.id,wrap));\n opts.appendChild(b);\n });\n toolbar.appendChild(wrap);\n });\n\n // -------- Category carousel: swipe (scroll-snap) + stepper --------\n (function initCarousel(){\n const track=document.getElementById('slots');\n const dotsEl=document.getElementById('catDots');\n const catLabel=document.getElementById('catLabel');\n const catHint=document.getElementById('catHint');\n const prevBtn=document.getElementById('prevCat');\n const nextBtn=document.getElementById('nextCat');\n if(!track||!dotsEl||!catLabel) return;\n const N=GAME_DATA.slots.length;\n GAME_DATA.slots.forEach((s,i)=>{const d=document.createElement('span');d.className='dot'+(i===0?' on':'');dotsEl.appendChild(d);});\n const idx=()=>Math.round(track.scrollLeft/Math.max(1,track.clientWidth));\n const go=i=>{i=Math.max(0,Math.min(N-1,i));track.scrollTo({left:i*track.clientWidth,behavior:'smooth'});};\n function sync(){const i=idx();catLabel.textContent=GAME_DATA.slots[i].name;if(catHint)catHint.textContent=GAME_DATA.slots[i].hint||'';[...dotsEl.children].forEach((d,j)=>d.classList.toggle('on',j===i));prevBtn.disabled=i<=0;nextBtn.disabled=i>=N-1;}\n let raf=0;track.addEventListener('scroll',()=>{cancelAnimationFrame(raf);raf=requestAnimationFrame(sync);});\n prevBtn.addEventListener('click',()=>go(idx()-1));\n nextBtn.addEventListener('click',()=>go(idx()+1));\n sync();\n })();\n\n function getOpt(slotKey,id){\n const s=GAME_DATA.slots.find(s=>s.key===slotKey);\n return s.options.find(o=>o.id===id);\n }\n\n function choose(slotKey,id,wrapEl){\n state[slotKey]=id;\n // update pressed states within this slot\n wrapEl.querySelectorAll('.opt').forEach(b=>{\n b.setAttribute('aria-pressed', b.dataset.id===id ? 'true':'false');\n });\n // per-slot feedback\n const fb = wrapEl.querySelector('[data-fb]');\n fb.innerHTML = getOpt(slotKey,id).feedback;\n fb.classList.remove('flash'); void fb.offsetWidth; fb.classList.add('flash');\n update();\n }\n\n // -------- Scoring --------\n function compute(){\n let score = GAME_DATA.baseScore;\n let loudCount=0, hasFoundation=false;\n GAME_DATA.slots.forEach(s=>{\n const o=getOpt(s.key,state[s.key]);\n score += (o.weight||0);\n if(o.loud) loudCount++;\n if(o.foundation) hasFoundation=true;\n });\n const R=GAME_DATA.rules;\n let reasons=[];\n if(hasFoundation){score+=R.lineBonus; reasons.push('+ the line holds');}\n if(loudCount<=1){score+=R.restraintBonus; reasons.push('+ restraint');}\n if(loudCount>1){const p=(loudCount-1)*R.loudPenaltyEach; score-=p; reasons.push('− trying too hard');}\n score=Math.max(R.minScore,Math.min(R.maxScore,Math.round(score)));\n return {score,loudCount,hasFoundation,reasons};\n }\n\n function verdictFor(score){\n let v=GAME_DATA.verdicts[0];\n GAME_DATA.verdicts.forEach(x=>{if(score>=x.min)v=x;});\n return v.text;\n }\n function endingFor(score){\n let e=GAME_DATA.endings[0];\n GAME_DATA.endings.forEach(x=>{if(score>=x.min)e=x;});\n return e;\n }\n\n // -------- Render --------\n const scoreNum=document.getElementById('scoreNum');\n const meterFill=document.getElementById('meterFill');\n const meterTarget=document.getElementById('meterTarget');\n const verdictEl=document.getElementById('verdict');\n let displayScore=0;\n\n meterTarget.style.left = GAME_DATA.targetScore + '%';\n\n function update(){\n const {score}=compute();\n // animate number\n animateNum(score);\n meterFill.style.width = score + '%';\n // gold when near/above target, muted below\n meterFill.style.background = score>=GAME_DATA.targetScore\n ? 'var(--gold)'\n : '#c9bda9';\n verdictEl.innerHTML = verdictFor(score);\n finishBtn.disabled = false;\n finishBtn.textContent = score>=GAME_DATA.targetScore ? 'Claim His Look ✓' : 'See His Final Look';\n drawFigure(document.getElementById('figureBox'));\n }\n\n function animateNum(target){\n const start=displayScore, t0=performance.now(), dur=500;\n function step(now){\n const p=Math.min(1,(now-t0)/dur);\n const e=1-Math.pow(1-p,3);\n displayScore=Math.round(start+(target-start)*e);\n scoreNum.textContent=displayScore;\n if(p<1)requestAnimationFrame(step); else displayScore=target;\n }\n requestAnimationFrame(step);\n }\n\n /* =====================================================================\n FIGURE — inline SVG editorial line-art man, redrawn from traits.\n DRAW NOTES (for authors): a piece's svg.{...} fields flip features on:\n shirt / shirtStripe / shirtFloral / shirtBase : shirt colour+pattern\n braces (colour) / garter(bool) / belt(colour)\n tie (colour) / tieKnit(bool) / bow(colour) / bowLoud(bool)\n pocket (colour) / pocketLoud(bool)\n shoes (colour) / shoesLoud(bool)\n pose : \"easy\" | \"hands\" | \"slouch\" | \"stiff\"\n You generally won't need to touch the SVG builder itself.\n ===================================================================== */\n function traits(){\n const t={};\n GAME_DATA.slots.forEach(s=>{\n const o=getOpt(s.key,state[s.key]);\n Object.assign(t,o.svg||{});\n });\n return t;\n }\n\n // Art-directed crop box (SVG user units). Single source of truth for figure framing:\n // drives the viewBox AND, via height-driven CSS, the on-screen size. Tightly bounds the\n // ink (x~82-178, y~44-352; hair curve peaks ~44) with px pad so no posture clips. Tighter than the\n // old \"0 40 260 320\" — kills ~63% horizontal dead margin so the man commands the frame\n // and the waist/braces line (hero product) reads bigger. A future central character\n // template carries one of these per character.\n const INK_BOUNDS = { x:78, y:40, w:104, h:316 };\n\n function buildSVG(t, mini){\n const ink=\"#333333\";\n const skin=\"#e7c9a8\", hair=\"#2b2622\";\n const shirt = t.shirtBase || t.shirt || \"#fbfbf8\";\n const trouser = \"#3a4150\";\n const pose = t.pose || \"easy\";\n\n // arm + slight posture lean\n let lean=0, shoulderY=128, hands=false, slouch=false;\n if(pose===\"slouch\"){lean=4;shoulderY=134;slouch=true;}\n else if(pose===\"stiff\"){lean=0;shoulderY=124;}\n else if(pose===\"hands\"){hands=true;}\n // body x-center\n const cx=130;\n\n // ---- pattern defs ----\n let defs='';\n if(t.shirtStripe){\n defs+=''+\n ''+\n '';\n }\n if(t.shirtFloral){\n defs+=''+\n ''+\n ''+\n ''+\n '';\n }\n const shirtFill = t.shirtFloral ? 'url(#floral)' : (t.shirtStripe ? 'url(#stripe)' : shirt);\n\n // ---- head ----\n const headY=70 + (slouch?6:0);\n let s='';\n s+='';\n // hair\n s+='';\n // face\n s+='';\n // jaw line / neck\n s+='';\n // simple features\n s+='';\n s+='';\n s+='';\n s+='';\n\n // ---- torso group (with lean) ----\n s+='';\n // shoulders/shirt body\n const torsoTop=shoulderY-12;\n s+='';\n // collar\n s+='';\n // button placket\n s+='';\n\n // ---- braces ----\n if(t.braces){\n const bc=t.braces;\n s+='';\n s+='';\n s+='';\n // brass clasp hints\n s+='';\n s+='';\n s+='';\n }\n if(t.belt){\n s+='';\n s+='';\n }\n\n // ---- neckwear ----\n if(t.tie){\n s+='';\n s+='';\n if(t.tieKnit){\n s+='';\n }\n }\n if(t.bow){\n s+='';\n s+='';\n s+='';\n if(t.bowLoud){\n for(let i=0;i<8;i++){\n const a=Math.random()*6.28, r=10;\n s+='';\n }\n }\n }\n\n // ---- pocket square ----\n if(t.pocket){\n if(t.pocketLoud){\n s+='';\n }else{\n s+='';\n }\n }\n\n // ---- arms ----\n function arm(side){ // side -1 left, +1 right\n const sx=cx+side*28, sy=shoulderY+2;\n if(hands){\n // bent into pocket\n const ex=cx+side*20, ey=200;\n return ''+\n '';\n }\n const ex=cx+side*24, ey=232+(slouch?6:0);\n let a='';\n a+=''; // hand\n return a;\n }\n s+=arm(-1)+arm(1);\n s+=''; // torso group\n\n // ---- trousers / legs (less affected by lean) ----\n const legTop=246;\n s+='';\n s+='';\n s+='';\n // garter hint at sock line\n if(t.garter){\n s+='';\n s+='';\n }\n s+='';\n\n // ---- shoes ----\n if(t.shoes){\n const sc=t.shoes;\n function shoe(side){\n const x=cx+side*14;\n if(t.shoesLoud){\n return ''+\n '';\n }\n return '';\n }\n s+=shoe(-1)+shoe(1);\n } else {\n s+='';\n s+='';\n }\n\n // baseline shadow\n s+='';\n\n return '';\n }\n\n function drawFigure(el){ el.innerHTML = buildSVG(traits(), false); }\n\n // -------- End screen --------\n const overlay=document.getElementById('overlay');\n function openEnd(){\n const {score}=compute();\n const e=endingFor(score);\n document.getElementById('endKicker').innerHTML=e.kicker;\n document.getElementById('endTitle').innerHTML=e.title;\n document.getElementById('endSummary').innerHTML=e.text;\n document.getElementById('finalNum').textContent=score;\n document.getElementById('finalFig').innerHTML=buildSVG(traits(),true);\n // reward only \"earns\" at/above target; otherwise show how to unlock\n const earned = score>=GAME_DATA.targetScore;\n const promoCode=document.getElementById('promoCode');\n const promoDesc=document.getElementById('promoDesc');\n if(earned){\n promoCode.textContent=GAME_DATA.reward.code;\n promoDesc.innerHTML=GAME_DATA.reward.desc;\n document.getElementById('copyBtn').style.display='';\n }else{\n promoCode.textContent='LOCKED';\n promoDesc.innerHTML='Reach '+GAME_DATA.targetScore+'+ to earn your code. '+GAME_DATA.reward.minScoreLabel;\n document.getElementById('copyBtn').style.display='none';\n }\n document.getElementById('copiedMsg').textContent='';\n overlay.classList.add('show');\n }\n function closeEnd(){overlay.classList.remove('show');}\n\n finishBtn.addEventListener('click',openEnd);\n document.getElementById('restyleBtn').addEventListener('click',closeEnd);\n overlay.addEventListener('click',e=>{if(e.target===overlay)closeEnd();});\n document.addEventListener('keydown',e=>{if(e.key==='Escape')closeEnd();});\n\n document.getElementById('copyBtn').addEventListener('click',()=>{\n const code=GAME_DATA.reward.code;\n const done=()=>{document.getElementById('copiedMsg').textContent='Copied. Wear it well.';};\n if(navigator.clipboard&&navigator.clipboard.writeText){\n navigator.clipboard.writeText(code).then(done).catch(done);\n }else{ // file:// fallback\n const ta=document.createElement('textarea');ta.value=code;document.body.appendChild(ta);\n ta.select();try{document.execCommand('copy');}catch(e){}ta.remove();done();\n }\n });\n\n resetBtn.addEventListener('click',()=>{\n defaults();\n controlsEl.querySelectorAll('.slot').forEach((wrap,i)=>{\n const key=GAME_DATA.slots[i].key;\n wrap.querySelectorAll('.opt').forEach(b=>b.setAttribute('aria-pressed', b.dataset.id===state[key]?'true':'false'));\n wrap.querySelector('[data-fb]').innerHTML='';\n });\n update();\n });\n\n // first paint\n update();\n})();\n\n/* Self-resize hook for iframe embedding (StoryPress freeform) */\nconst fit=()=>{if(window.frameElement)window.frameElement.style.height=document.documentElement.scrollHeight+'px'};\ntry{ new ResizeObserver(fit).observe(document.body); }catch(_){}\naddEventListener('load',fit);","css","438f4999-6977-4ea7-b54c-0a08027f2953","html","\n\n\n\n\nSTYLE HIM UP — KK & Jay Supply Co.\n\n\n\n\n

\n \n\n \n

A blank slate. Dress with intent.

\n\n \n

\n \n

Shirt

the canvas

\n \n

\n\n \n

\n \n

\n\n\n

The Verdict

Sharp.

0/100

\n \n

\n \n \n

\n\n\n\n\n","isolate","freeform","iframeHeight","min(820px, calc(100dvh - 24px))","iframeAllowScripts","iframeHeightMobile","iframeInjectThemeVars",[245],{"_94":246,"_247":248,"_128":25,"_249":250,"_251":250,"_252":250,"_253":254,"_255":256,"_257":256,"_258":256,"_259":260,"_261":250,"_262":263,"_264":260,"_265":263,"_266":166},"c1c7f0ea-faf6-4e52-b6f1-ae912f0eafc9","multiple","https://use.typekit.net/pdj4rqt.css","inputSize","md","labelSize","buttonSize","headingSize","xl","inputWeight","500","labelWeight","buttonWeight","headingWeight","400","paragraphSize","headingFallback","sans-serif","paragraphWeight","paragraphFallback","useMultipleStyleSheetInReverseOrder","share",[],"metaTags",[271],{"_94":272,"_273":274,"_275":166,"_128":269,"_276":277},"kkj-meta","title","Dress the Man — KK & Jay","noIndex","description","Style him to the sharpest line.","post","hideHeader","featuredImages",[282],{"_144":283,"_284":87,"_187":285,"_286":87,"_273":87,"_287":87,"_288":289,"_290":87,"_148":291},188890497233335,"alt","screenshot_2026_06_18_at_135431.png","focus","source","filename","https://a.storyblok.com/f/334678/d5ecc71978/screenshot_2026_06_18_at_135431.png","copyright","asset","isUnique","relatedPosts",{"_295":-7,"_296":-7},"previous","next","sortBy","slug","dress-the-man","full_slug","kk-jay-games-experiment/dress-the-man","sort_by_date","position",-10,"tag_list",[],"is_startpage","parent_id",188137949936333,"meta_data","group_id","5cae6979-12d9-4fd9-b922-0ca2e03cf163","first_published_at","2026-06-25T17:53:32.513Z","release_id","lang","default","path","alternates",[],"default_full_slug","translated_slugs","isI18n","cacheStatus","MISS","route","https://storypress-eoy.pages.dev/kk-jay-games-experiment/dress-the-man","actionData","errors"]