6.1.0: Редизайн карточек желаний на экране прогресса

VERSION

@@ -1 +1 @@
-6.0.2
+6.1.0

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/CurrentWeek.css

@@ -306,3 +306,102 @@
   white-space: nowrap;
   text-align: center;
 }
+
+/* Вертикальный список желаний (для 1-2 элементов) */
+.project-wishes-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Карточка желания в виде строки */
+.wish-row-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background-color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: 0 1px 3px 0 rgb(99 102 241 / 0.08);
+}
+
+.wish-row-card:hover {
+  background-color: #f9fafb;
+}
+
+.wish-row-card:active {
+  background-color: #f3f4f6;
+}
+
+/* Логика скруглений: карточка проекта всегда сверху, последнее желание - снизу */
+.wish-row-card-last {
+  border-radius: 0 0 1.5rem 1.5rem;
+}
+
+.wish-row-card-middle {
+  border-radius: 0;
+}
+
+/* Изображение желания */
+.wish-row-image {
+  flex-shrink: 0;
+  width: 50px;
+  height: 60px;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  background: #f0f0f0;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.wish-row-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wish-row-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.65);
+  pointer-events: none;
+}
+
+.wish-row-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+/* Блок с информацией о желании */
+.wish-row-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.wish-row-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wish-row-unlock {
+  font-size: 0.875rem;
+  color: #6b7280;
+}

play-life-web/src/components/CurrentWeek.jsx

@@ -140,6 +140,55 @@ function MiniWishCard({ wish, onClick, pendingScoresByProject = {} }) {
   )
 }
 
+// Компонент карточки желания в виде строки (для отображения 1-2 желаний)
+function WishRowCard({ wish, onClick, pendingScoresByProject = {}, position }) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (onClick) {
+      onClick(wish)
+    }
+  }
+
+  const cond = wish.first_locked_condition
+  const isPointsCondition = cond?.type === 'project_points'
+  const required = cond?.required_points ?? 0
+  const current = cond?.current_points ?? 0
+  const projectId = cond?.project_id
+  const pending = (projectId != null && pendingScoresByProject[projectId] != null) ? Number(pendingScoresByProject[projectId]) : 0
+  const remaining = isPointsCondition ? (required - current - pending) : 0
+  const weeksText = cond?.weeks_text || ''
+
+  const getUnlockText = () => {
+    if (remaining <= 0) {
+      return 'скоро'
+    }
+    const pointsText = `${Math.round(remaining)} баллов`
+    if (weeksText) {
+      return `${pointsText} (${weeksText})`
+    }
+    return pointsText
+  }
+
+  const positionClass = position === 'last' ? 'wish-row-card-last' : 'wish-row-card-middle'
+
+  return (
+    <div className={`wish-row-card ${positionClass}`} onClick={handleClick}>
+      <div className="wish-row-image">
+        {wish.image_url ? (
+          <img src={wish.image_url} alt={wish.name} />
+        ) : (
+          <div className="wish-row-placeholder">🎁</div>
+        )}
+        <div className="wish-row-overlay" aria-hidden="true" />
+      </div>
+      <div className="wish-row-info">
+        <div className="wish-row-title">{wish.name}</div>
+        <div className="wish-row-unlock">{getUnlockText()}</div>
+      </div>
+    </div>
+  )
+}
+
 // Компонент карточки проекта с круглым прогрессбаром
 function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWishClick, pendingScoresByProject = {} }) {
   const { project_name, total_score, min_goal_score, max_goal_score, priority, today_change } = project
@@ -267,20 +316,38 @@ function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWis
         </div>
       </div>
 
-      {/* Горизонтальный список желаний в отдельном белом блоке */}
+      {/* Список желаний: горизонтальный скролл для 3+, вертикальный список для 1-2 */}
       {hasWishes && (
-        <div className="project-wishes-block">
+        wishes.length >= 3 ? (
-          <div className="project-wishes-scroll">
+          <div className="project-wishes-block">
-            {wishes.map((wish) => (
+            <div className="project-wishes-scroll">
-              <MiniWishCard
+              {wishes.map((wish) => (
-                key={wish.id}
+                <MiniWishCard
-                wish={wish}
+                  key={wish.id}
-                onClick={onWishClick}
+                  wish={wish}
-                pendingScoresByProject={pendingScoresByProject || {}}
+                  onClick={onWishClick}
-              />
+                  pendingScoresByProject={pendingScoresByProject || {}}
-            ))}
+                />
+              ))}
+            </div>
           </div>
-        </div>
+        ) : (
+          <div className="project-wishes-vertical">
+            {wishes.map((wish, index) => {
+              const isLast = index === wishes.length - 1
+              const position = isLast ? 'last' : 'middle'
+              return (
+                <WishRowCard
+                  key={wish.id}
+                  wish={wish}
+                  onClick={onWishClick}
+                  pendingScoresByProject={pendingScoresByProject || {}}
+                  position={position}
+                />
+              )
+            })}
+          </div>
+        )
       )}
     </div>
   )