changes

src/views/campaign/CampaignView.tsx

@@ -14,7 +14,7 @@ export const CampaignView: FC<{}> = props =>
         const parser = event.getParser();
 
         if(!parser) return;
-
+        console.log(parser);
         setCalendarData(parser.calendarData);
     }, []);
 

src/views/campaign/common/CalendarItemState.ts

@@ -0,0 +1,7 @@
+export class CalendarItemState
+{
+    public static readonly STATE_UNLOCKED = 1;
+    public static readonly STATE_LOCKED_AVAILABLE = 2;
+    public static readonly STATE_LOCKED_EXPIRED = 3;
+    public static readonly STATE_LOCKED_FUTURE = 4;
+}

src/views/campaign/common/Utils.ts

@@ -0,0 +1,4 @@
+export const getNumItemsDisplayed = (): number =>
+{
+    return Math.max(Math.min(2, window.screen.width / 135), 7);
+}

src/views/campaign/views/calendar-item/CalendarItemView.tsx

@@ -1,10 +1,46 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
+import { GetRoomEngine, GetSessionDataManager } from '../../../../api';
 import { NitroLayoutFlexColumn } from '../../../../layout';
+import { CalendarItemState } from '../../common/CalendarItemState';
 import { CalendarItemViewProps } from './CalendarItemView.types';
 
 export const CalendarItemView: FC<CalendarItemViewProps> = props =>
 {
+    const { state = null,  productName = null, active = false, onClick = null, id = null } = props;
+    
+    const getFurnitureIcon = useCallback((name: string) =>
+    {
+        
+        let furniData = GetSessionDataManager().getFloorItemDataByName(name);
+        let url = null;
+        if(furniData) url = GetRoomEngine().getFurnitureFloorIconUrl(furniData.id);
+        else
+        {
+            furniData = GetSessionDataManager().getWallItemDataByName(name);
+            if(furniData) url = GetRoomEngine().getFurnitureWallIconUrl(furniData.id);
+        }
+
+        return url;
+    }, []);
+
     return (
-        <NitroLayoutFlexColumn className="calendar-day h-100 w-100" />
+        <NitroLayoutFlexColumn className={`calendar-item h-100 w-100 cursor-pointer align-items-center justify-content-center ${active ? 'active' : ''}`} onClick={() => onClick(id)}>
+            { (state === CalendarItemState.STATE_UNLOCKED) &&
+                <div className="unlocked-generic-bg">
+                    
+                </div>
+            }
+
+            { (state !== CalendarItemState.STATE_UNLOCKED) &&
+                <div className="locked-generic-bg d-flex justify-content-center align-items-center">
+                    { (state === CalendarItemState.STATE_LOCKED_AVAILABLE) &&
+                        <div className="available"/>
+                    }
+                    { (state === CalendarItemState.STATE_LOCKED_EXPIRED || state === CalendarItemState.STATE_LOCKED_FUTURE) &&
+                        <div className="unavailable" />
+                    }
+                </div>
+            }
+        </NitroLayoutFlexColumn>
     );
 }

src/views/campaign/views/calendar-item/CalendarItemView.types.ts

@@ -1,4 +1,8 @@
 export interface CalendarItemViewProps
 {
-
+    id: number;
+    productName?: string;
+    state: number;
+    active?: boolean;
+    onClick(itemId: number): void;
 }

src/views/campaign/views/calendar/CalendarView.scss

@@ -1,10 +1,69 @@
 .nitro-campaign-calendar {
-    width: 800px;
+    width: 1010px;
     height: 400px;
 
-    .calendar-day {
-        background: url('../../../../assets/images/campaign/campaign_day_generic_bg.png');
+    .calendar-item {
+        background: url("../../../../assets/images/campaign/campaign_day_generic_bg.png");
         max-height: 100%;
-        min-width: 50px;
+        min-width: 135px;
+        filter: brightness(80%);
+
+        &.active {
+            filter: brightness(100%);
+        }
+
+        .unlocked-generic-bg {
+            background: url("../../../../assets/images/campaign/unlocked_bg.png");
+            background-size: 132px 132px;
+            width: 132px;
+            height: 132px;
+
+            //width: 190px;
+            //height: 189px;
+        }
+
+        .locked-generic-bg {
+            background: url("../../../../assets/images/campaign/locked_bg.png");
+            width: 132px;
+            height: 132px;
+
+            .available {
+                background: url("../../../../assets/images/campaign/available.png");
+                width: 69px;
+                height: 78px;
+            }
+    
+            .unavailable {
+                background: url("../../../../assets/images/campaign/unavailable.png");
+                width: 68px;
+                height: 78px;
+            }
+        }
+    }
+
+    .button-container {
+        position: relative;
+        width: 100%;
+        height: 0px;
+
+        .calendar-prev {
+            background: url("../../../../assets/images/campaign/prev.png");
+            width: 33px;
+            height: 34px;
+            position: absolute;
+            margin-top: 15%;
+            left: 5px;
+            z-index: 10;
+        }
+
+        .calendar-next {
+            background: url("../../../../assets/images/campaign/next.png");
+            width: 33px;
+            height: 34px;
+            position: absolute;
+            margin-top: 15%;
+            right: 5px;
+            z-index: 10;
+        }
     }
 }

src/views/campaign/views/calendar/CalendarView.tsx

@@ -1,6 +1,8 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex } from '../../../../layout';
+import { CalendarItemState } from '../../common/CalendarItemState';
+import { getNumItemsDisplayed } from '../../common/Utils';
 import { CalendarItemView } from '../calendar-item/CalendarItemView';
 import { CalendarViewProps } from './CalendarView.types';
 
@@ -8,30 +10,104 @@ export const CalendarView: FC<CalendarViewProps> = props =>
 {
     const { close = null, campaignName = null, currentDay = null, numDays = null, missedDays = null, openedDays = null } = props;
     const [ selectedDay, setSelectedDay ] = useState(currentDay);
+    const [ index, setIndex ] = useState(0);
+
+    const getDayState = useCallback((day: number) =>
+    {
+        if(openedDays.includes(day))
+        {
+            return CalendarItemState.STATE_UNLOCKED;
+        }
+        if(day > currentDay)
+        {
+            return CalendarItemState.STATE_LOCKED_FUTURE;
+        }
+                    
+        if(missedDays.includes(day))
+        {
+            return CalendarItemState.STATE_LOCKED_EXPIRED;
+        }
+           
+        return CalendarItemState.STATE_LOCKED_AVAILABLE;
+    }, [currentDay, missedDays, openedDays]);
 
     const dayMessage = useCallback((day: number) =>
     {
-        if(missedDays.includes(day))
+        const state = getDayState(day);
+
+        switch(state)
         {
-            return LocalizeText('campaign.calendar.info.expired');
+            case CalendarItemState.STATE_UNLOCKED:
+                return LocalizeText('campaign.calendar.info.unlocked');
+            case CalendarItemState.STATE_LOCKED_FUTURE:
+                return LocalizeText('campaign.calendar.info.future');
+            case CalendarItemState.STATE_LOCKED_EXPIRED:
+                return LocalizeText('campaign.calendar.info.expired');
+            default: return LocalizeText('campaign.calendar.info.available.desktop');
+        }
+    }, [getDayState]);
+
+    const onClickNext = useCallback(() =>
+    {
+        const nextDay = selectedDay + 1;
+
+        if( (nextDay) === numDays) return;
+
+        setSelectedDay(nextDay);
+
+        if( (index + getNumItemsDisplayed()) < nextDay + 1 )
+        {
+            setIndex(index + 1);
         }
 
-        if(openedDays.includes(day))
+    }, [index, numDays, selectedDay]);
+
+    const onClickPrev = useCallback(() =>
+    {
+        const prevDay = selectedDay - 1;
+
+        if( (prevDay < 0)) return;
+
+        setSelectedDay(prevDay);
+
+        if( index > prevDay)
         {
-            return LocalizeText('campaign.calendar.info.unlocked')
+            setIndex(index - 1);
         }
-    }, [missedDays, openedDays]);
+    }, [index, selectedDay]);
+
+    const onClickItem = useCallback((item: number) =>
+    {
+        if(selectedDay === item)
+        {
+            //handle opening
+        }
+        else
+        {
+            setSelectedDay(item);
+        }
+    }, [selectedDay]);
 
     return (
         <NitroCardView className="nitro-campaign-calendar">
             <NitroCardHeaderView headerText={ LocalizeText(`campaign.calendar.${campaignName}.title`) } onCloseClick={ close }/>
             <NitroCardContentView>
                 <div className="text-black">
-                    <h3>{ LocalizeText('campaign.calendar.heading.day', ['number'], [selectedDay.toString()]) }</h3>
-                    <p>{ LocalizeText('') }</p>
+                    <h3>{ LocalizeText('campaign.calendar.heading.day', ['number'], [(selectedDay + 1).toString()]) }</h3>
+                    <p>{ dayMessage(selectedDay) }</p>
+                </div>
+                <div className="button-container">
+                    <div className="calendar-prev cursor-pointer" onClick={ onClickPrev }/>
+                    <div className="calendar-next cursor-pointer" onClick={ onClickNext }/>
                 </div>
                 <NitroLayoutFlex className="h-100" gap={ 2 }>
-                    { [...Array(7)].map((e, i) => <CalendarItemView key={ i } /> ) }
+                    { 
+                        [...Array(getNumItemsDisplayed())].map((e, i) =>
+                        {
+                            const day = index + i;
+                            return <CalendarItemView key={ i } state={ getDayState(day) } active={selectedDay === day} onClick={onClickItem} id={day}/> 
+                        }) 
+                    }
                 </NitroLayoutFlex>
             </NitroCardContentView>
         </NitroCardView>

src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx

@@ -106,9 +106,8 @@ export const WordQuizWidgetView: FC<{}> = props =>
     {
         setUserAnswers(prev =>
         {
-            const copy = new Map(prev);
             const keysToRemove: number[] = [];
-            copy.forEach((value, key) =>
+            prev.forEach((value, key) =>
             {
                 value.secondsLeft--;
 
@@ -118,8 +117,10 @@ export const WordQuizWidgetView: FC<{}> = props =>
                 }
             });
 
-            keysToRemove.forEach(key => copy.delete(key));
+            if(keysToRemove.length === 0) return prev;
 
+            const copy = new Map(prev);
+            keysToRemove.forEach(key => copy.delete(key));
             return copy;
         })