import React, { useEffect, useRef, useState } from 'react'; import Player from '../com/Player'; import TitleScreen from '../com/components/TitleScreen'; import Header from '../com/components/Header'; import Button from '../com/components/Button'; import SnapShotPopup from '../com/components/SnapShotPopup'; import Text from '../com/components/Text'; import AlertBox from '../com/components/AlertBox'; import Animation from '../com/components/Animation'; import ColorBox from '../com/components/ColorBox'; import Dnd from '../com/components/Dnd'; import DataTable from '../com/components/DataTable'; import DropDown from '../com/components/DropDown'; import { setupChildren } from '../com/helpers/helperFunction'; import { activityProps } from '../com/interface/helperInterface'; import ImageComponent from '../com/components/ImageComponent'; import Slider from '../com/components/Slider'; import ToggleButton from '../com/components/ToggleButton'; import { UnOrderedList } from '../com/components/UnOrderedList'; import Input from '../com/components/Input'; import Line from '../com/components/Line'; import Notes from '../com/components/Notes'; import globalStore from '../com/thunk'; import Gallery from '../com/components/Gallery'; import Fragment from '../com/components/Fragment'; import ZoomButton from '../com/components/ZoomButton'; import InputDom from '../com/components/InputDom'; import RadioButton from '../com/components/RadioButton'; import RadioComp from '../com/components/RadioComp'; import colors from '../com/styles/colors.scss'; interface Point { x: number; y: number; pos: string; } interface btnImages { x: number; y: number; pos: string; tween: { alpha: number; tweening: string; }[]; state: boolean[]; count: number; xIndex: number; yIndex: number; } interface ImageValues { x: number; y: number; name: string; tween: { alpha: number; tweening: string; }[]; count: number; xIndex: number; yIndex: number; } interface ModelObjLearn { btnImages: btnImages[]; matrixDataRow: number[]; noOfRows: number; matrixDataColumn1: number[]; matrixDataColumn2: number[]; matrixDataColumn3: number[]; matrix: { x: number; y: number; pos: string }[][]; textPosition: Point[]; imageCount: ImageValues[][] } interface ModelObjState { overAllReload: boolean; launchPage: boolean; activeTabStr: string; tabArr: string[]; learnBool: boolean; practiceBool: boolean; learn: ModelObjLearn; currentSelected: number; } const App = (props: activityProps) => { //const arr1=[iske andar properties ayenge]; const arr1 = Array.from({ length: 5 }, (_, index) => ({ imageId: `image_${index}`, textId: `text_${index}`, })); const [modelObj, setModelObj] = useState({ overAllReload: true, launchPage: true, activeTabStr: 'btn1', tabArr: ['btn1', 'btn2', 'btn3'], currentSelected: 0, learnBool: true, practiceBool: false, learn: { btnImages: [], matrixDataRow: [1, 1], matrixDataColumn1: [1, 1], matrixDataColumn2: [1, 1], matrixDataColumn3: [1, 1], noOfRows: 0, matrix: [], textPosition: [], }, }); const localObj: any = { colorBoxValue: { x: 0, y: 0, width: 223, height: 292, bgColor: 'transparent1', padding: { x: 0, y: 0, }, complexRoundRect: { tl: 10, tr: 10, br: 10, bl: 10, }, }, ImgValue: { x: 0, y: 0, width: 223, height: 292, padding: { x: 0, y: 0, }, complexRoundRect: { tl: 10, tr: 10, br: 10, bl: 10, }, }, }; /** * This function is an event listener for button click * @param {String} e : This is the id of the component which has been clicked */ const onClick = (e: string) => { setModelObj((prevState) => { let newState = { ...prevState }; switch (e) { case 'titleScreen': newState.launchPage = false; break; } if (e.includes('colorBoxButton')) { const btnRow = Number(e.split('_')[1]); const btnColumn = Number(e.split('_')[2]); const btnIndex = Number(e.split('_')[3]); let _imageCountObj = [...newState.learn.imageCount]; const btnImages = { ...newState.learn.btnImages[btnRow][btnColumn] }; const btnCount = btnImages.count; newState.learn.disableArrangeBlock = false; if (!btnImages.state[btnIndex]) { if (btnImages.count < 10) { btnImages.state[btnCount] = true; btnImages.count += 1; newState.learn.disableQuestionGene = true; newState.learn.animationCycle = true; _imageCountObj[btnRow][btnColumn].name = `dragImage_${btnImages.pos}`; newState.learn.draggedImage = true; } } else if (btnImages.state[btnIndex]) { if (btnImages.count > 0) { btnImages.state[btnCount - 1] = false; btnImages.count -= 1; } } newState.learn.tempcheckAllDone = true; let tweenData: { alpha: number; tweening: string }[] = []; Array.from({ length: btnImages.count }).map((_, _index) => { tweenData.push({ alpha: 1, tweening: '' }); //use tween }); btnImages.tween = [...tweenData]; newState.learn.btnImages[btnRow][btnColumn] = { ...btnImages }; ///*logic to render the btn images } else if ( e.includes('addClick') || (e.includes('subtractClick') && BrowserDetect.isDevice()) ) { let selectedBoxArr = newState.learn.selectedBox.split('_'); const btnRow = Number(selectedBoxArr[1]); const btnColumn = Number(selectedBoxArr[2]); let _imageCountObj = [...newState.learn.imageCount]; const btnImages = { ...newState.learn.btnImages[btnRow][btnColumn] }; const btnCount = btnImages.count; newState.learn.disableArrangeBlock = false; if (btnImages.count < 10 && e.includes('addClick')) { btnImages.state[btnCount] = true; btnImages.count += 1; newState.learn.disableQuestionGene = true; newState.learn.animationCycle = true; _imageCountObj[btnRow][btnColumn].name = `dragImage_${btnImages.pos}`; newState.learn.draggedImage = true; newState.learn.disableAddButton = false; newState.learn.disableSubtractButton = false; if (btnImages.count === 10) { newState.learn.disableAddButton = true; } } if (btnImages.count > 0 && e.includes('subtractClick')) { btnImages.state[btnCount - 1] = false; btnImages.count -= 1; newState.learn.disableAddButton = false; newState.learn.disableSubtractButton = false; if (btnImages.count === 0) { newState.learn.disableSubtractButton = true; } } newState.learn.tempcheckAllDone = true; let tweenData: { alpha: number; tweening: string }[] = []; Array.from({ length: btnImages.count }).map((_, _index) => { tweenData.push({ alpha: 1, tweening: '' }); }); btnImages.tween = [...tweenData]; newState.learn.btnImages[btnRow][btnColumn] = { ...btnImages }; } else if (e.includes('colorBoxSelected') && BrowserDetect.isDevice()) { newState.learn.selectedBox = e; let selectedBoxArr = newState.learn.selectedBox.split('_'); const btnRow = Number(selectedBoxArr[1]); const btnColumn = Number(selectedBoxArr[2]); const btnImages = { ...newState.learn.btnImages[btnRow][btnColumn] }; const btnCount = btnImages.count; newState.learn.colorBoxData = { x: newState.learn.matrix[btnRow][btnColumn].x, y: newState.learn.matrix[btnRow][btnColumn].y, visible: true, rowIndex: btnRow, colIndex: btnColumn, pos: newState.learn.matrix[btnRow][btnColumn].pos, }; newState.learn.disableQuestionGene = true; newState.learn.disableArrangeBlock = false; if (btnCount === 0) { newState.learn.disableAddButton = false; newState.learn.disableSubtractButton = true; } else if (btnCount === 10) { newState.learn.disableAddButton = true; newState.learn.disableSubtractButton = false; } else { newState.learn.disableAddButton = false; newState.learn.disableSubtractButton = false; } } if ( e.includes('colorBoxButton') || e.includes('addClick') || e.includes('subtractClick') ) { let _check = true; newState.learn.btnImages.forEach((_btnRow) => { _btnRow.forEach((_btnCol) => { if (_btnCol.count !== 0) { _check = false; } }); }); newState.learn.reload = _check; } return newState; }); }; /* * @param {String} id : this is the id of component * @param event : this is event of the component which has been clicked */ function onChange(id = '', event = '') { switch (id) { } } const { saveData, getData } = globalStore.useStoreActions((store) => store.activity); useEffect(() => { getData(props.activityName) .then((_data: any) => { // setModelObj(_data.modelObj) }) .catch(() => {}); }, []); let centerContent: JSX.Element | JSX.Element[]; const gap = 10; // const colorBoxWidth = 223; //const imageOffsetX = 20; // Horizontal offset for the image inside the colorbox //const imageOffsetY = 10; // Vertical offset for the image inside the colorbox const initialButtonImages = Array.from({ length: 5 }, () => Array.from({ length: 9 }, () => ({ normalUrl: 'greyImage.png', hoverUrl: 'hoverImage.png', // Replace with your hover image URL downUrl: 'downImage.png', // Replace with your down image URL disableUrl: 'disableImage.png', // Replace with your disable image URL activeUrl: 'selectedImage.png', // Replace with your active (selected) image URL isSelected: false, // Additional property to track the selected state })) ); const colorBoxes = arr1.map((item, index) => { const xPosition = index * (colorBoxWidth + gap); //calculating x-pos for Colorboxes return ( {[...Array(9)].map((_, buttonIndex) => { // Calculate position for button using buttonIndex to arrange in rows of 3 const row = Math.floor(buttonIndex / 3); // Determine row number starting from 0 const col = buttonIndex % 3; // Determine column number starting from 0 // Calculate the x and y based on row and column const _x = col * (50 + 5) + 30; //50uski width,5 uska gap,Assuming each button is 34px wide with 4.5px gap const _y = row * (50 + 5) + 110; // Assuming each button is 34px high with 4.5px gap //const btnImagePos = modelObj.learn.btnImages?.[_rowIndex]?.[_columnIndex]; return ( ); })} ); }); if (modelObj.launchPage) { centerContent = ( ); } else { centerContent = [ , {/*rendering radiobuttons learn and practice*/} , {/*rendering colorboxes*/} {colorBoxes} , {/*footer section */} , , ,
, /*