diff --git a/src/assets/CMPages/CM1.png b/src/assets/CMPages/CM1.png new file mode 100644 index 00000000..14a7c322 Binary files /dev/null and b/src/assets/CMPages/CM1.png differ diff --git a/src/assets/CMPages/CM2.png b/src/assets/CMPages/CM2.png new file mode 100644 index 00000000..6ae4e6e4 Binary files /dev/null and b/src/assets/CMPages/CM2.png differ diff --git a/src/assets/CMPages/CM3.png b/src/assets/CMPages/CM3.png new file mode 100644 index 00000000..d3bbb04d Binary files /dev/null and b/src/assets/CMPages/CM3.png differ diff --git a/src/assets/ConceptsMasteredIntroPages/CM1.png b/src/assets/ConceptsMasteredIntroPages/CM1.png deleted file mode 100644 index c43b2a5c..00000000 Binary files a/src/assets/ConceptsMasteredIntroPages/CM1.png and /dev/null differ diff --git a/src/assets/ConceptsMasteredIntroPages/CM2.png b/src/assets/ConceptsMasteredIntroPages/CM2.png deleted file mode 100644 index ef7ad303..00000000 Binary files a/src/assets/ConceptsMasteredIntroPages/CM2.png and /dev/null differ diff --git a/src/assets/ConceptsMasteredIntroPages/CM3.png b/src/assets/ConceptsMasteredIntroPages/CM3.png deleted file mode 100644 index 69673cf8..00000000 Binary files a/src/assets/ConceptsMasteredIntroPages/CM3.png and /dev/null differ diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 44282696..9d2ecb74 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import styled from 'styled-components'; import DumbellImage from '../assets/Dumbell.png'; import BooksImage from '../assets/Books.png'; @@ -19,9 +19,10 @@ import { ScoresComponent } from './scoresComponent'; import InfoIcon from '../../src/pages/test/components/InfoIcon'; import type { TrainingLevels } from '../../src/models/trainingLevels'; import Circle from './CircleHighlight'; -import AnalyticalDashboardButton from '../../src/pages/test/components/AnalyticalDashboardButton'; import HamburgerMenu from './hamburgerMenu'; -//import ConceptsPage from 'src/pages/concepts-page/concepts-page'; +import { useEffect } from 'react'; +import ImageSlider from '../pages/test/components/imageSlider'; +import { useState } from 'react'; const Navbar = (): ReactElement => { const history = useHistory(); @@ -32,6 +33,7 @@ const Navbar = (): ReactElement => { const setIsDisplayingIntroductionModal = useStoreActions( (store: any) => store.setIsDisplayingIntroductionModal, ); + const setTrainingLevel = useStoreActions( (store: any) => store.setTrainingLevel, ); @@ -48,6 +50,29 @@ const Navbar = (): ReactElement => { const chmTierPasswordBypass = useStoreState( (store: any) => store.chmTierPasswordBypass, ); + const isDisplayingIntroductionModal = useStoreState( + (store: any) => store.isDisplayingIntroductionModal, + ); + const [toggleValue, setToggleValue] = useState(false); + + const location = useLocation(); + + const handleClick = () => { + if (trainingLevel === 'CM') { + console.log('ENTERED'); + setIsDisplayingIntroductionModal(true); + if (location.pathname === '/concepts-page') { + console.log('already set to concepts page'); + } + } + }; + + useEffect(() => { + console.log( + 'isDisplayingIntroductionModal after click:', + isDisplayingIntroductionModal, + ); + }, [isDisplayingIntroductionModal]); /* eslint-disable */ const maxWPM = useStoreState( @@ -177,21 +202,36 @@ const Navbar = (): ReactElement => { - {trainingLevel == 'CM' ? : ''} + {trainingLevel === 'CM' ? : ''}
CM
- (window.location.href = '#/concepts-page') && - TrainingPageFunction('CM', true) - } + onClick={() => { + history.push('/concepts-page'); + TrainingPageFunction('CM', true); + }} /> - + {trainingLevel === 'CM' && isDisplayingIntroductionModal && ( +
+
+ + +
+
+ )}
{ @@ -404,3 +449,20 @@ const ConBtnLink = styled.a` transition: 0.3s ease out; } `; +const modal = { + position: 'absolute' as const, + zIndex: '1' as const, + left: '5%' as const, + width: '75%' as const, + textAlign: 'center' as const, + backgroundColor: 'rgba(0, 0, 0, 0.25)' as const, +}; + +const modal_content = { + backgroundColor: '#222424' as const, + position: 'absolute' as const, + top: '20%' as const, + left: '20%' as const, + borderRadius: '5px' as const, + border: '2px solid black' as const, +}; diff --git a/src/components/router.tsx b/src/components/router.tsx index a2bd36df..28987b9d 100644 --- a/src/components/router.tsx +++ b/src/components/router.tsx @@ -76,7 +76,6 @@ const Router = (): ReactElement => { -
{/* This is the route to the Chara Piano page. */} diff --git a/src/models/flashCardsModel.ts b/src/models/flashCardsModel.ts index fc081d81..83e24963 100644 --- a/src/models/flashCardsModel.ts +++ b/src/models/flashCardsModel.ts @@ -1,7 +1,7 @@ import type { Action, Computed, Thunk } from 'easy-peasy'; export interface flashCard { - type: 'text' | 'image' | 'translation'; + //type: 'text' | 'image' | 'translation'; question: string; answer: string; imageSrc: string; @@ -57,11 +57,7 @@ export interface flashCardActionModel { // Actions to set and remove the selected tag setSelectedTag: Action; - // Actions to get and set the last daily training date of a set - setNextDailyTraining: Action; - loadNextDailyTraining: Action; - - setSessionTrainingData: Action; + setSessionTrainingData: Action; setInfiniteSessionTrainingData: Action< flashCardStoreStateModel, activeFlashCard[] @@ -81,9 +77,6 @@ export interface flashCardStoreStateModel { selectedTags: string; sessionTrainingData: sessionTrainingData[]; - nextTrainingDate: Date; - - // Number of flash cards to practice daily numberOfDailyFlashCards: number; activeFlashCards: Computed; diff --git a/src/pages/concepts-page/ConceptsPage.styled.tsx b/src/pages/concepts-page/ConceptsPage.styled.tsx index 908849bf..f7282d3b 100644 --- a/src/pages/concepts-page/ConceptsPage.styled.tsx +++ b/src/pages/concepts-page/ConceptsPage.styled.tsx @@ -13,11 +13,16 @@ export const ItemsContainer = styled.div` background-color: #222424; `; -const height = 'height: calc(100vh - 64px);'; +const height = 'calc(100vh - 80px);'; export const PageContainer = styled.div.attrs({ - className: 'text-gray-600 body-font flex flex-row', + className: 'text-gray-600 body-font flex', })` + flex-direction: column; background-color: #222424; + height: calc(100% - 111px); +`; + +export const ConceptsContainer = styled.div` min-height: ${height}; `; diff --git a/src/pages/concepts-page/ConceptsPage.tsx b/src/pages/concepts-page/ConceptsPage.tsx index e8970598..8252fa2c 100644 --- a/src/pages/concepts-page/ConceptsPage.tsx +++ b/src/pages/concepts-page/ConceptsPage.tsx @@ -2,8 +2,13 @@ import React, { useEffect, useState } from 'react'; import { useStoreState, useStoreActions } from '../../store/store.js'; import { ManagerTier } from './manager-tier/ManagerTier.jsx'; import { DailyTrainingTier } from './daily-training-tier/DailyTrainingTier.jsx'; -import { ItemsContainer, PageContainer } from './ConceptsPage.styled'; import { CustomTrainingTier } from './custom-training-tier/CustomTrainingTier.jsx'; +import Footer from '../../components/footer.jsx'; +import { + ItemsContainer, + PageContainer, + ConceptsContainer, +} from './ConceptsPage.styled'; const ConceptsPage = () => { const loadedFromStorage = useStoreState((state) => state.loadedFromStorage); @@ -29,7 +34,7 @@ const ConceptsPage = () => { }; return ( - <> +
- {isTrainingAvailable ? ( -
- {isActiveFlashCards ? ( - -

Daily training available:

- setActiveTraining()}> - Start Training - - - ) : ( - -

No active flash cards:

- setCurrentTier(2)}> - Go to Manager - - - )} + {isActiveFlashCards ? ( +
+ + How many flashcards would you like to train today? + + + + Currently set to {numberSelected} out of {activeFlashCards.length} + + + setActiveTraining(numberSelected)}> + Start Training + +
) : ( -

Next Available Training is: {nextTrainingDate.toDateString()}

- setCurrentTier(1)}> - Train in custom +

No active flash cards:

+ setCurrentTier(2)}> + Go to Manager )} diff --git a/src/pages/concepts-page/daily-training-tier/Slider.styled.tsx b/src/pages/concepts-page/daily-training-tier/Slider.styled.tsx new file mode 100644 index 00000000..21b0bb4e --- /dev/null +++ b/src/pages/concepts-page/daily-training-tier/Slider.styled.tsx @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +export const SliderContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 400px; + height: 50px; +`; diff --git a/src/pages/concepts-page/daily-training-tier/Slider.tsx b/src/pages/concepts-page/daily-training-tier/Slider.tsx new file mode 100644 index 00000000..62ff7927 --- /dev/null +++ b/src/pages/concepts-page/daily-training-tier/Slider.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { SliderContainer } from './Slider.styled'; + +interface SliderProps { + max: number; + currentNumber: number; + setCurrentNumber: (number: number) => void; +} + +export const Slider = ({ + max, + currentNumber, + setCurrentNumber, +}: SliderProps) => { + return ( + + setCurrentNumber(e.target.valueAsNumber)} + /> + + ); +}; diff --git a/src/pages/concepts-page/manager-tier/CustomDropDown.tsx b/src/pages/concepts-page/manager-tier/CustomDropDown.tsx new file mode 100644 index 00000000..bcf08a34 --- /dev/null +++ b/src/pages/concepts-page/manager-tier/CustomDropDown.tsx @@ -0,0 +1,55 @@ +import React, { useState, Dispatch, SetStateAction } from 'react'; +import { useStoreState } from '../../../store/store'; + +interface CustomDropDownProps { + setCustomTag: Dispatch>; +} + +const CustomDropDown: React.FC = ({ setCustomTag }) => { + const tags = useStoreState((state) => state.tags) || {}; + const tagNames = Object.keys(tags); + + const [activeElementType, setActiveElementType] = useState('dropdown'); + const [customTag, setCustomTagLocal] = useState(''); + + const dropDownChanged = (e: React.ChangeEvent) => { + const selectedValue = e.target.value; + + if (selectedValue === 'custom') { + setActiveElementType('input'); + } else { + setActiveElementType('dropdown'); + setCustomTagLocal(''); // Reset custom tag when selecting a predefined tag + } + }; + + const dropDownComp = () => ( + + ); + + const inputFieldComp = () => ( + { + setCustomTagLocal(e.target.value); + setCustomTag(e.target.value); + }} + /> + ); + + return ( +
+ {activeElementType === 'dropdown' ? dropDownComp() : inputFieldComp()} +
+ ); +}; + +export default CustomDropDown; diff --git a/src/pages/concepts-page/manager-tier/DialogPortal.tsx b/src/pages/concepts-page/manager-tier/DialogPortal.tsx index 90536ad6..b3e4f9da 100644 --- a/src/pages/concepts-page/manager-tier/DialogPortal.tsx +++ b/src/pages/concepts-page/manager-tier/DialogPortal.tsx @@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'; import { useStoreActions, useStoreState } from '../../../store/store'; import type { flashCard } from '../../../models/flashCardsModel'; import { FlashCard } from './FlashCard'; +import CustomDropDown from './CustomDropDown'; interface DialogPortalProps { selectedFlashcardIndices: number[]; @@ -15,21 +16,21 @@ export const DialogPortal = ({ const updatedFlashCards = useStoreState((state) => state.flashCards); const [showModal, setShowModal] = useState(false); - const [input, setInput] = useState(''); + + const [customTag, setCustomTag] = useState(''); const windowHeight = window.innerHeight; const windowWidth = window.innerWidth; const modalHeight = 150; const modalWidth = 300; - const modalTop = windowHeight / 2 - modalHeight / 2; + const modalTop = windowHeight / 1.5 + modalHeight / 1.5; const modalLeft = windowWidth / 2 - modalWidth / 2; const handleAddTag = () => { - console.log('Adding tag:', input); - console.log('happening'); + console.log('Adding tag:', customTag); selectedFlashcardIndices.forEach((index) => { - addTagFlashCard({ key: input, index }); + addTagFlashCard({ key: customTag, index }); }); // Log flashcards and their tags @@ -38,7 +39,7 @@ export const DialogPortal = ({ console.log('Tags:', flashCard.tags); }); - setInput(''); + setCustomTag(''); setShowModal(false); }; @@ -49,7 +50,7 @@ export const DialogPortal = ({ color="pink" onClick={() => setShowModal(true)} > - Add New Tag + Add Tag {showModal && createPortal( @@ -69,19 +70,14 @@ export const DialogPortal = ({ }} >

New Tag:

- setInput(e.target.value)} - placeholder="New Tag" - /> +