Release v1.1.3 bat collection expansion

Author: Dotoryman

app/page.tsx

@@ -89,7 +89,7 @@ type StartResponse = {
 };
 
 const TOTAL_PITCHES = 10;
-const APP_VERSION = 'v1.1.2';
+const APP_VERSION = 'v1.1.3';
 const BATTER_FRAMES = [
   'ready',
   'load',
@@ -103,9 +103,32 @@ const BATTER_FRAMES = [
 const DAILY_BAT_STORAGE_KEY = 'utang-baseball-daily-bat-v1';
 const BAT_SPRITES: Record<BatType, string> = {
   basic: '/utang-batter-v8-strip.png',
+  aluminum: '/utang-batter-v8-aluminum-strip.png',
   gold: '/utang-batter-v8-gold-strip.png',
+  ruby: '/utang-batter-v8-ruby-strip.png',
   diamond: '/utang-batter-v8-diamond-strip.png',
 };
+const BAT_LABELS: Record<BatType, string> = {
+  basic: '기본',
+  aluminum: '알루미늄',
+  gold: '황금',
+  ruby: '루비',
+  diamond: '다이아몬드',
+};
+const BAT_ICONS: Record<BatType, string> = {
+  basic: '/utang-bat-gold-v093.png',
+  aluminum: '/utang-bat-aluminum-v113.png',
+  gold: '/utang-bat-gold-v093.png',
+  ruby: '/utang-bat-ruby-v113.png',
+  diamond: '/utang-bat-diamond-v093.png',
+};
+const BAT_COLLECTION: Array<{ type: BatType; games: number }> = [
+  { type: 'basic', games: 0 },
+  { type: 'aluminum', games: 1 },
+  { type: 'gold', games: 2 },
+  { type: 'ruby', games: 3 },
+  { type: 'diamond', games: 4 },
+];
 const RANKING_PAGE_SIZE = 5;
 const WINDUP_MS = 760;
 const CONTACT_PROGRESS = 0.86;
@@ -262,18 +285,10 @@ function saveDailyBatState(state: DailyBatState) {
   }
 }
 function missPoseForBat(bat: BatType) {
-  return bat === 'gold'
-    ? '/utang-pose-miss-v093-gold.png'
-    : bat === 'diamond'
-      ? '/utang-pose-miss-v093-diamond.png'
-      : RESULT_META.WHIFF.pose;
+  return bat === 'basic' ? RESULT_META.WHIFF.pose : `/utang-pose-miss-v093-${bat}.png`;
 }
 function followPoseForBat(bat: BatType) {
-  return bat === 'gold'
-    ? '/utang-batter-v8-gold-follow.png'
-    : bat === 'diamond'
-      ? '/utang-batter-v8-diamond-follow.png'
-      : RESULT_META.HOME_RUN.pose;
+  return bat === 'basic' ? RESULT_META.HOME_RUN.pose : `/utang-batter-v8-${bat}-follow.png`;
 }
 function triggerHitHaptic(outcome: Outcome) {
   if (
@@ -534,11 +549,17 @@ export default function Home() {
   useEffect(() => {
     const characterAssets = [
       '/utang-batter-v8-strip.png',
+      '/utang-batter-v8-aluminum-strip.png',
       '/utang-batter-v8-gold-strip.png',
+      '/utang-batter-v8-ruby-strip.png',
       '/utang-batter-v8-diamond-strip.png',
+      '/utang-bat-aluminum-v113.png',
       '/utang-bat-gold-v093.png',
+      '/utang-bat-ruby-v113.png',
       '/utang-bat-diamond-v093.png',
+      '/utang-pose-miss-v093-aluminum.png',
       '/utang-pose-miss-v093-gold.png',
+      '/utang-pose-miss-v093-ruby.png',
       '/utang-pose-miss-v093-diamond.png',
       '/utang-pitcher-v090-strip.png',
       '/utang-umpire-v091-strip.png',
@@ -1273,37 +1294,22 @@ export default function Home() {
             <section className="bat-collection" aria-label="오늘 모은 배트">
               <div className="bat-collection-head">
                 <strong>오늘 모은 배트</strong>
-                <span>{Math.min(3, dailyBatState.completedGames + 1)} / 3</span>
+                <span>{Math.min(5, dailyBatState.completedGames + 1)} / 5</span>
               </div>
               <div className="bat-collection-list">
-                <div className="bat-slot is-owned">
-                  <img
-                    className="bat-thumb bat-thumb-basic"
-                    src="/utang-bat-gold-v093.png"
-                    alt=""
-                  />
-                  <span>기본</span>
-                </div>
-                <div
-                  className={`bat-slot ${dailyBatState.completedGames >= 1 ? 'is-owned' : 'is-locked'}`}
-                >
-                  <img
-                    className="bat-thumb"
-                    src="/utang-bat-gold-v093.png"
-                    alt=""
-                  />
-                  <span>황금</span>
-                </div>
-                <div
-                  className={`bat-slot ${dailyBatState.completedGames >= 2 ? 'is-owned' : 'is-locked'}`}
-                >
-                  <img
-                    className="bat-thumb"
-                    src="/utang-bat-diamond-v093.png"
-                    alt=""
-                  />
-                  <span>다이아</span>
-                </div>
+                {BAT_COLLECTION.map(({ type, games }) => (
+                  <div
+                    className={`bat-slot ${dailyBatState.completedGames >= games ? 'is-owned' : 'is-locked'}`}
+                    key={type}
+                  >
+                    <img
+                      className={`bat-thumb ${type === 'basic' ? 'bat-thumb-basic' : ''}`}
+                      src={BAT_ICONS[type]}
+                      alt=""
+                    />
+                    <span>{BAT_LABELS[type]}</span>
+                  </div>
+                ))}
               </div>
             </section>
             <div className="intro-ranking">
@@ -1543,6 +1549,24 @@ export default function Home() {
                 />
               </div>
               {umpire}
+              {contact && contact.outcome !== 'WHIFF' && (
+                <span
+                  className={`comic-contact-effect comic-${RESULT_META[contact.outcome].tier}`}
+                  aria-hidden="true"
+                >
+                  <b>
+                    {contact.outcome === 'HOME_RUN'
+                      ? '쾅!'
+                      : contact.outcome === 'FOUL'
+                        ? '탁!'
+                        : '딱!'}
+                  </b>
+                  <i />
+                  <i />
+                  <i />
+                  <i />
+                </span>
+              )}
               {contact?.outcome === 'HOME_RUN' && (
                 <span className="batter-impact-bubble" aria-hidden="true">
                   !!
@@ -1763,7 +1787,7 @@ export default function Home() {
                 <Trophy size={16} /> 오늘 잘 친 우땅이 TOP 3
               </div>
               {records.slice(0, 3).map((item, index) => (
-                <div className="ranking-row" key={`${item.playedAt}-${index}`}>
+                <div className={`ranking-row rank-${index + 1}`} key={`${item.playedAt}-${index}`}>
                   <b>{index + 1}</b>
                   <span>{item.nickname}</span>
                   <strong>{item.score.toLocaleString()}점</strong>
@@ -1805,7 +1829,7 @@ export default function Home() {
           <dialog
             open
             className="bat-reward-overlay"
-            aria-label={`${batReward === 'gold' ? '황금' : '다이아몬드'}배트 획득`}
+            aria-label={`${BAT_LABELS[batReward]}배트 획득`}
           >
             <div className={`bat-reward-card reward-${batReward}`}>
               <span
@@ -1821,18 +1845,10 @@ export default function Home() {
                 ✦
               </span>
               <small>오늘의 플레이 보상</small>
-              <h2>
-                {batReward === 'gold'
-                  ? '황금배트를 얻어따!'
-                  : '다이아몬드배트를 얻어따!'}
-              </h2>
+              <h2>{BAT_LABELS[batReward]}배트를 얻어따!</h2>
               <img
-                src={
-                  batReward === 'gold'
-                    ? '/utang-bat-gold-v093.png'
-                    : '/utang-bat-diamond-v093.png'
-                }
-                alt={batReward === 'gold' ? '황금배트' : '다이아몬드배트'}
+                src={BAT_ICONS[batReward]}
+                alt={`${BAT_LABELS[batReward]}배트`}
               />
               <Button type="button" onClick={() => setBatReward(null)}>
                 확인

app/v100.css

@@ -11,16 +11,56 @@
 .bat-collection-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: 950; }
 .bat-collection-head strong::before { content: '⚾'; margin-right: 6px; font-size: 12px; }
 .bat-collection-head span { color: #9a6848; font-size: 10px; }
-.bat-collection-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
+.bat-collection-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
 .bat-slot { position: relative; min-width: 0; height: 43px; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; border: 1px solid rgb(102 65 42 / 12%); border-radius: 12px 10px 13px 11px; background: #f8eddb; }
-.bat-slot span { font-size: 9px; font-weight: 900; white-space: nowrap; }
+.bat-slot span { font-size: 8px; font-weight: 900; white-space: nowrap; }
 .bat-slot.is-locked { color: #a99b8c; filter: saturate(.2); opacity: .58; }
 .bat-slot.is-locked::after { content: '?'; position: absolute; right: 5px; top: 4px; width: 13px; height: 13px; display: grid; place-items: center; color: white; border-radius: 50%; background: #9c8d7c; font-size: 8px; font-weight: 950; }
-.bat-thumb { width: 55px; height: 31px; display: block; flex: 0 0 auto; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 2px 2px rgb(70 39 21 / 13%)); }
+.bat-thumb { width: 38px; height: 27px; display: block; flex: 0 1 auto; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 2px 2px rgb(70 39 21 / 13%)); }
 .bat-thumb-basic { filter: saturate(.3) sepia(.35) hue-rotate(-16deg) brightness(1.06) drop-shadow(0 2px 2px rgb(70 39 21 / 13%)); }
 .network-notice { position: fixed; z-index: 350; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); padding: 9px 13px; color: #fff9e9; border: 2px solid #fff1c7; border-radius: 999px; background: #68432e; box-shadow: 0 6px 16px rgb(44 24 14 / 28%); transform: translateX(-50%); font-size: 10px; font-weight: 900; }
 @media (max-height: 740px) {
   .bat-collection { margin-top: 8px; padding-block: 8px; }
   .bat-collection-head { margin-bottom: 6px; }
   .bat-slot { height: 33px; }
 }
+
+/* v1.1.3: podium highlights and a small comic contact burst. */
+.ranking-row.rank-1,
+.ranking-row.rank-2,
+.ranking-row.rank-3 { position: relative; margin-inline: -4px; padding-inline: 4px; border-radius: 9px; }
+.ranking-row.rank-1 { background: linear-gradient(90deg, rgb(255 220 91 / 24%), transparent 72%); }
+.ranking-row.rank-2 { background: linear-gradient(90deg, rgb(201 216 228 / 25%), transparent 72%); }
+.ranking-row.rank-3 { background: linear-gradient(90deg, rgb(222 157 103 / 19%), transparent 72%); }
+.ranking-row.rank-1 b,
+.ranking-row.rank-2 b,
+.ranking-row.rank-3 b { position: relative; box-shadow: inset 0 1px rgb(255 255 255 / 72%), 0 2px 5px rgb(77 48 26 / 12%); }
+.ranking-row.rank-1 b::after,
+.ranking-row.rank-2 b::after,
+.ranking-row.rank-3 b::after { position: absolute; right: -7px; top: -10px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 0 white); }
+.ranking-row.rank-1 b::after { content: '♛'; color: #d99b00; transform: rotate(8deg); }
+.ranking-row.rank-2 b::after { content: '✦'; color: #8aa0b4; }
+.ranking-row.rank-3 b::after { content: '★'; color: #bf7641; font-size: 9px; }
+
+.comic-contact-effect { position: absolute; z-index: 30; left: 21%; bottom: 24%; width: 86px; height: 86px; display: grid; place-items: center; pointer-events: none; animation: comic-contact-pop 650ms ease-out both; }
+.comic-contact-effect::before { content: ''; position: absolute; inset: 3px; background: repeating-conic-gradient(from 6deg, #ffe56c 0deg 8deg, transparent 8deg 24deg); clip-path: polygon(50% 0,59% 31%,79% 8%,73% 38%,100% 34%,77% 52%,96% 69%,68% 65%,70% 96%,52% 72%,36% 100%,37% 68%,7% 82%,29% 57%,0 47%,32% 43%,15% 16%,43% 34%); opacity: .92; }
+.comic-contact-effect b { position: relative; z-index: 2; color: #8c321f; font: 950 24px/1 'Arial Rounded MT Bold', 'Malgun Gothic', sans-serif; letter-spacing: -2px; text-shadow: 2px 2px 0 #fff8d7; transform: rotate(-10deg); }
+.comic-contact-effect i { position: absolute; width: 19px; height: 3px; border-radius: 99px; background: #6a3828; transform-origin: 45px 1px; }
+.comic-contact-effect i:nth-of-type(1) { transform: translateX(43px) rotate(6deg); }
+.comic-contact-effect i:nth-of-type(2) { transform: translateX(43px) rotate(96deg); }
+.comic-contact-effect i:nth-of-type(3) { transform: translateX(43px) rotate(186deg); }
+.comic-contact-effect i:nth-of-type(4) { transform: translateX(43px) rotate(276deg); }
+.comic-foul::before { background: repeating-conic-gradient(from 6deg, #cceaff 0deg 8deg, transparent 8deg 24deg); }
+.comic-homer { width: 105px; height: 105px; left: 19%; bottom: 22%; }
+.comic-homer b { color: #b21f2d; font-size: 29px; }
+@keyframes comic-contact-pop { 0% { opacity: 0; transform: scale(.35) rotate(-8deg); } 36% { opacity: 1; transform: scale(1.16) rotate(3deg); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08) translateY(-7px); } }
+@media (prefers-reduced-motion: reduce) { .comic-contact-effect { animation: none; opacity: 1; } }
+
+.bat-reward-card.reward-aluminum { background: linear-gradient(155deg, #fbfdff 0%, #e4ebf0 55%, #bcc9d3 100%); }
+.bat-reward-card.reward-aluminum h2 { color: #526779; text-shadow: 0 2px #fff; }
+.bat-reward-card.reward-aluminum button { background: #718797; border-color: #475a68; box-shadow: 0 5px 0 #475a68; }
+.bat-reward-card.reward-ruby { background: linear-gradient(155deg, #fff8f8 0%, #ffd7dc 55%, #eaa2ad 100%); }
+.bat-reward-card.reward-ruby h2 { color: #a51935; text-shadow: 0 2px #fff; }
+.bat-reward-card.reward-ruby button { background: #c92e4c; border-color: #8e1830; box-shadow: 0 5px 0 #8e1830; }
+.reward-aluminum .reward-spark { color: #8ca2b4; }
+.reward-ruby .reward-spark { color: #d5264a; }

lib/daily-bat.ts

@@ -1,4 +1,4 @@
-export type BatType = 'basic' | 'gold' | 'diamond';
+export type BatType = 'basic' | 'aluminum' | 'gold' | 'ruby' | 'diamond';
 export type BatReward = Exclude<BatType, 'basic'>;
 
 export type DailyBatState = {
@@ -9,7 +9,9 @@ export type DailyBatState = {
 
 const BAT_SCORE_MULTIPLIERS: Record<BatType, number> = {
   basic: 1,
+  aluminum: 1.05,
   gold: 1.1,
+  ruby: 1.15,
   diamond: 1.2,
 };
 
@@ -18,8 +20,10 @@ export function koreanDayStart(now = Date.now()) {
 }
 
 export function batForCompletedGames(completedGames: number): BatType {
-  if (completedGames >= 2) return 'diamond';
-  if (completedGames >= 1) return 'gold';
+  if (completedGames >= 4) return 'diamond';
+  if (completedGames >= 3) return 'ruby';
+  if (completedGames >= 2) return 'gold';
+  if (completedGames >= 1) return 'aluminum';
   return 'basic';
 }
 
@@ -38,12 +42,17 @@ export function normalizeDailyBatState(value: unknown, now = Date.now()): DailyB
 export function completeDailyGame(value: unknown, now = Date.now()): { state: DailyBatState; reward: BatReward | null } {
   const current = normalizeDailyBatState(value, now);
   const completedGames = current.completedGames + 1;
-  const reward: BatReward | null = completedGames === 1 ? 'gold' : completedGames === 2 ? 'diamond' : null;
+  const reward: BatReward | null =
+    completedGames === 1 ? 'aluminum'
+      : completedGames === 2 ? 'gold'
+        : completedGames === 3 ? 'ruby'
+          : completedGames === 4 ? 'diamond'
+            : null;
   return { state: { dayStart: current.dayStart, completedGames, equippedBat: batForCompletedGames(completedGames) }, reward };
 }
 
 export function isBatType(value: unknown): value is BatType {
-  return value === 'basic' || value === 'gold' || value === 'diamond';
+  return value === 'basic' || value === 'aluminum' || value === 'gold' || value === 'ruby' || value === 'diamond';
 }
 
 export function calculateEarnedScore(points: number, combo: number, bat: BatType) {

lib/player-session.ts

@@ -38,6 +38,11 @@ export function batProgress(completedGames: number, now = Date.now()): ServerBat
     dayStart: koreanDayStart(now),
     completedGames: count,
     equippedBat: batForCompletedGames(count),
-    reward: count === 1 ? 'gold' : count === 2 ? 'diamond' : null,
+    reward:
+      count === 1 ? 'aluminum'
+        : count === 2 ? 'gold'
+          : count === 3 ? 'ruby'
+            : count === 4 ? 'diamond'
+              : null,
   };
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "utang-baseball",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "engines": {
     "node": ">=22.13.0"