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

VERSION

@@ -1 +1 @@
-6.0.1
+6.1.0

play-life-backend/main.go

@@ -162,12 +162,13 @@ type GroupsProgress struct {
 }
 
 type WeeklyStatsResponse struct {
-	Total          *float64             `json:"total,omitempty"`
-	GroupProgress1 *float64             `json:"group_progress_1,omitempty"`
-	GroupProgress2 *float64             `json:"group_progress_2,omitempty"`
-	GroupProgress0 *float64             `json:"group_progress_0,omitempty"`
-	Projects       []WeeklyProjectStats `json:"projects"`
-	Wishes         []WishlistItem       `json:"wishes,omitempty"`
+	Total                   *float64             `json:"total,omitempty"`
+	GroupProgress1          *float64             `json:"group_progress_1,omitempty"`
+	GroupProgress2          *float64             `json:"group_progress_2,omitempty"`
+	GroupProgress0          *float64             `json:"group_progress_0,omitempty"`
+	Projects                []WeeklyProjectStats `json:"projects"`
+	Wishes                  []WishlistItem       `json:"wishes,omitempty"`
+	PendingScoresByProject  map[int]float64      `json:"pending_scores_by_project,omitempty"`
 }
 
 type MessagePostRequest struct {
@@ -2966,13 +2967,18 @@ func (a *App) getWeeklyStatsHandler(w http.ResponseWriter, r *http.Request) {
 		wishes = []WishlistItem{}
 	}
 
+	pendingByProject := draftPendingScores
+	if pendingByProject == nil {
+		pendingByProject = make(map[int]float64)
+	}
 	response := WeeklyStatsResponse{
-		Total:          total,
-		GroupProgress1: groupsProgress.Group1,
-		GroupProgress2: groupsProgress.Group2,
-		GroupProgress0: groupsProgress.Group0,
-		Projects:       projects,
-		Wishes:         wishes,
+		Total:                  total,
+		GroupProgress1:         groupsProgress.Group1,
+		GroupProgress2:         groupsProgress.Group2,
+		GroupProgress0:         groupsProgress.Group0,
+		Projects:               projects,
+		Wishes:                 wishes,
+		PendingScoresByProject: pendingByProject,
 	}
 
 	w.Header().Set("Content-Type", "application/json")

play-life-web/package.json

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

play-life-web/src/App.jsx

@@ -427,8 +427,9 @@ function AppContent() {
         groupProgress0 = jsonData.group_progress_0 !== undefined ? jsonData.group_progress_0 : null
       }
 
-      // Получаем желания из ответа
+      // Получаем желания и pending-баллы по проектам из ответа
       const wishes = jsonData?.wishes || []
+      const pendingScoresByProject = jsonData?.pending_scores_by_project && typeof jsonData.pending_scores_by_project === 'object' ? jsonData.pending_scores_by_project : {}
 
       setCurrentWeekData({
         projects: Array.isArray(projects) ? projects : [],
@@ -436,7 +437,8 @@ function AppContent() {
         group_progress_1: groupProgress1,
         group_progress_2: groupProgress2,
         group_progress_0: groupProgress0,
-        wishes: wishes
+        wishes: wishes,
+        pending_scores_by_project: pendingScoresByProject
       })
     } catch (err) {
       setCurrentWeekError(err.message)

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

@@ -271,7 +271,7 @@
   justify-content: center;
   width: calc(100% - 8px);
   max-width: calc(100% - 8px);
-  color: #5b6b8a;
+  color: #000;
   /* font-size задаётся в JS по количеству цифр (auto-size) */
   font-weight: 700;
   line-height: 1.2;
@@ -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

@@ -96,7 +96,7 @@ function CircularProgressBar({ progress, size = 120, strokeWidth = 8, showCheckm
 }
 
 // Компонент мини-карточки желания для отображения внутри карточки проекта
-function MiniWishCard({ wish, onClick }) {
+function MiniWishCard({ wish, onClick, pendingScoresByProject = {} }) {
   const handleClick = (e) => {
     e.stopPropagation()
     if (onClick) {
@@ -108,7 +108,9 @@ function MiniWishCard({ wish, onClick }) {
   const isPointsCondition = cond?.type === 'project_points'
   const required = cond?.required_points ?? 0
   const current = cond?.current_points ?? 0
-  const remaining = isPointsCondition ? Math.max(0, required - current) : 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 showUnlockPoints = remaining > 0
 
   // Auto-size: уменьшаем шрифт при большом количестве цифр, чтобы текст влезал
@@ -138,8 +140,57 @@ function MiniWishCard({ wish, onClick }) {
   )
 }
 
+// Компонент карточки желания в виде строки (для отображения 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 }) {
+function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWishClick, pendingScoresByProject = {} }) {
   const { project_name, total_score, min_goal_score, max_goal_score, priority, today_change } = project
 
   // Вычисляем прогресс по оригинальной логике из ProjectProgressBar
@@ -265,26 +316,45 @@ function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWis
         </div>
       </div>
 
-      {/* Горизонтальный список желаний в отдельном белом блоке */}
+      {/* Список желаний: горизонтальный скролл для 3+, вертикальный список для 1-2 */}
       {hasWishes && (
-        <div className="project-wishes-block">
-          <div className="project-wishes-scroll">
-            {wishes.map((wish) => (
-              <MiniWishCard
-                key={wish.id}
-                wish={wish}
-                onClick={onWishClick}
-              />
-            ))}
+        wishes.length >= 3 ? (
+          <div className="project-wishes-block">
+            <div className="project-wishes-scroll">
+              {wishes.map((wish) => (
+                <MiniWishCard
+                  key={wish.id}
+                  wish={wish}
+                  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>
   )
 }
 
 // Компонент группы проектов по приоритету
-function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick, getWishesForProject, onWishClick }) {
+function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick, getWishesForProject, onWishClick, pendingScoresByProject = {} }) {
   if (projects.length === 0) return null
 
   return (
@@ -312,6 +382,7 @@ function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick,
               onProjectClick={onProjectClick}
               wishes={projectWishes}
               onWishClick={onWishClick}
+              pendingScoresByProject={pendingScoresByProject}
             />
           )
         })}
@@ -577,8 +648,9 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
   const [toastMessage, setToastMessage] = useState(null)
   const [selectedWishlistId, setSelectedWishlistId] = useState(null)
 
-  // Желания приходят вместе с данными проектов
+  // Желания и pending-баллы по проектам приходят вместе с данными
   const wishes = data?.wishes || []
+  const pendingScoresByProject = data?.pending_scores_by_project && typeof data.pending_scores_by_project === 'object' ? data.pending_scores_by_project : {}
 
   // Функция для получения числового значения срока из текста
   const getWeeksValue = (weeksText) => {
@@ -778,6 +850,7 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
           onProjectClick={onProjectClick}
           getWishesForProject={getWishesForProject}
           onWishClick={handleWishClick}
+          pendingScoresByProject={pendingScoresByProject}
         />
 
         <PriorityGroup
@@ -788,6 +861,7 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
           onProjectClick={onProjectClick}
           getWishesForProject={getWishesForProject}
           onWishClick={handleWishClick}
+          pendingScoresByProject={pendingScoresByProject}
         />
 
         <PriorityGroup
@@ -798,6 +872,7 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
           onProjectClick={onProjectClick}
           getWishesForProject={getWishesForProject}
           onWishClick={handleWishClick}
+          pendingScoresByProject={pendingScoresByProject}
         />
       </div>