+
+ );
+};
+
+export default MentorProfile;
diff --git a/react-ystemandchess/src/Pages/MentorProfile/Mentor-Profile.scss b/react-ystemandchess/src/Pages/MentorProfile/Mentor-Profile.scss
new file mode 100644
index 00000000..b925ebcc
--- /dev/null
+++ b/react-ystemandchess/src/Pages/MentorProfile/Mentor-Profile.scss
@@ -0,0 +1,305 @@
+body {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.background-wrapper {
+ min-height: 100vh; /* Ensure it covers the whole viewport */
+ margin: 0 auto;
+ text-align: center;
+ background-image: url("../../images/student/bg-image.png");
+ background-repeat: repeat; /* Options: repeat, repeat-x, repeat-y, no-repeat */
+ background-size: 100em; /* Set a specific size for the repeating image */
+ min-height: 100vh; /* Ensure it covers the whole viewport */
+}
+
+.userProfileDiv {
+ text-align: left;
+ padding: 40px;
+ position: relative; // Add relative positioning to contain absolutely positioned children
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+.profile-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+
+ img {
+ border-radius: 50%;
+ width: 100px;
+ height: 100px;
+ margin-bottom: 10px; // Add some space between the image and the text
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 24px;
+ }
+}
+
+.top-bar {
+ display: flex;
+ justify-content: space-between;
+ background-color: #7fcc26;
+ padding: 0; // Remove padding to ensure the entire element is clickable
+ border-radius: 10px 10px 0 0;
+ margin-top: -10px; // Slight negative margin to overlap with container's top border-radius
+
+ .student-column {
+ flex: 1;
+ text-align: center;
+ font-weight: bold;
+ color: #0e0f0e;
+ position: relative;
+ padding: 10px 0; // Add vertical padding to ensure the entire element is clickable
+
+ &:first-child {
+ border-radius: 10px 0 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 10px 0 0;
+ }
+
+ &:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 1px;
+ background-color: #fff;
+ }
+
+ &.active {
+ background-color: #ead94c;
+ color: #0e0f0e;
+
+ &:first-child {
+ border-radius: 10px 0 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 10px 0 0;
+ }
+ }
+ }
+}
+
+.mentor-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ background-color: #d8dcdc;
+ padding: 20px;
+ border-radius: 0 0 10px 10px; // Add rounded edges
+}
+
+.inner-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.top-container {
+ display: grid;
+ grid-template-areas: "chart logged-times";
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+
+ .chart {
+ grid-area: chart;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: auto;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 10px;
+ }
+ }
+
+ .logged-times {
+ grid-area: logged-times;
+ border-radius: 10px;
+ padding: 20px;
+
+ h3 {
+ margin-bottom: 10px;
+ }
+
+ .time-spent {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ font-size: 16px;
+ margin: 5px 0;
+ }
+ }
+
+ .add-points-button {
+ background-color: #7fcc26;
+ color: #0e0f0e;
+ border: none;
+ border-radius: 5px;
+ padding: 10px 20px;
+ cursor: pointer;
+ margin-top: 10px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+
+ .add-points-button:hover {
+ background-color: #6ebc23;
+ }
+ }
+}
+
+.bottom-container {
+ display: grid;
+ grid-template-areas: "tabs tabcontent";
+ grid-template-columns: 1fr 10fr;
+
+ .tabs-container {
+ grid-area: tabs;
+ display: flex;
+ flex-direction: column;
+ margin: 0; // Ensure no margin around the tabs container
+ background-color: transparent; // Ensure the background is transparent
+
+ .tab {
+ display: flex;
+ flex-direction: column;
+ width: 200px;
+
+ button {
+ background: none;
+ border: none;
+ margin-bottom: 0; // Remove margin between tab buttons
+ padding: 0; // Ensure no padding for tab buttons
+ cursor: pointer;
+ border-radius: 0; // Remove default border-radius
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ &:first-child img {
+ border-radius: 10px 0 0 0; // Rounded top-left corner for the first tab
+ }
+
+ &:last-child img {
+ border-radius: 0 0 0 10px; // Rounded bottom-left corner for the last tab
+ }
+
+ &.active img {
+ border: 5px solid;
+ border-image: linear-gradient(
+ 90deg,
+ #ff4747 0%,
+ #3faeff 38%,
+ #7fff30 68%,
+ #a8ec16 100%
+ );
+ border-image-slice: 1;
+ border-radius: 0;
+
+ &:first-child {
+ border-radius: 10px 0 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 10px 0;
+ }
+ }
+ }
+ }
+ }
+
+ .tab-content-container {
+ grid-area: tabcontent;
+ background-color: #c8f2ae;
+ width: 100%;
+ border-radius: 0 10px 10px 0; // Rounded edges at top-right and bottom-right
+
+ .tabcontent {
+ display: none;
+
+ &.active {
+ display: block;
+ }
+ }
+
+ .rb-container {
+ font-family: "PT Sans", sans-serif;
+ margin: auto;
+ display: block;
+ position: relative;
+
+ ul.rb {
+ margin: 2.5em 0;
+ padding: 0;
+ display: inline-block;
+
+ li {
+ list-style: none;
+ margin: auto;
+ margin-left: 3em;
+ min-height: 50px;
+ border-left: 1px dashed #000;
+ padding: 0 0 50px 30px;
+ position: relative;
+
+ &:last-child {
+ border-left: 0;
+ }
+
+ &::before {
+ position: absolute;
+ left: -16px;
+ top: -5px;
+ content: " ";
+ border: 8px solid rgb(10, 10, 10);
+ border-radius: 500%;
+ background: #7fcc26;
+ height: 28px;
+ width: 28px;
+ transition: all 500ms ease-in-out;
+ }
+
+ &:hover::before {
+ border-color: #232931;
+ transition: all 1000ms ease-in-out;
+ }
+
+ .timestamp {
+ color: #0e0f0e;
+ position: relative;
+ width: 100px;
+ font-size: 12px;
+ }
+
+ .item-title {
+ color: #000;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.jsx b/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.jsx
new file mode 100644
index 00000000..d170c873
--- /dev/null
+++ b/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.jsx
@@ -0,0 +1,293 @@
+import React, { useEffect } from "react";
+import "./Student-Profile.scss";
+
+// Import images
+import activityTab from "../../images/student/activity_tab.png";
+import mentorTab from "../../images/student/mento_tab.PNG";
+import prodevTab from "../../images/student/prodev_tab.PNG";
+import chessTab from "../../images/student/chess_tab.PNG";
+import gamesTab from "../../images/student/games_tab.PNG";
+import puzzlesTab from "../../images/student/puzzles_tab.PNG";
+import playTab from "../../images/student/play_tab.PNG";
+import recordingsTab from "../../images/student/recordings_tab.PNG";
+import inventoryTab from "../../images/student/inventory_tab.png";
+import progressChart from "../../images/student/chart.PNG";
+import profileButton from "../../images/student/profile_button.svg";
+import streakButton from "../../images/student/streak_button.svg";
+import activitiesButton from "../../images/student/activities_button.svg";
+import badgesButton from "../../images/student/badges_button.svg";
+import leaderboardButton from "../../images/student/leaderboard_button.svg";
+
+const StudentProfile = ({
+ firstName = "First",
+ lastName = "Last",
+ accountCreatedAt = "N/A",
+ recordingList = [],
+ }) => {
+ useEffect(() => {
+ openTab("Activity");
+ }, []);
+
+ const openTab = (tabName) => {
+ const tabcontent = document.getElementsByClassName("tabcontent");
+ for (let i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none";
+ }
+ const tablinks = document.getElementsByClassName("tablinks");
+ for (let i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+ const tab = document.getElementById(tabName);
+ if (tab) {
+ tab.style.display = "block";
+ tab.classList.add("active");
+ } else {
+ console.error(`Tab with ID ${tabName} not found`);
+ }
+ const btn = document.getElementById(tabName + "Btn");
+ if (btn) {
+ btn.classList.add("active");
+ } else {
+ console.error(`Button with ID ${tabName}Btn not found`);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ 
+
+ {`Hello, ${firstName} ${lastName}!`}
+
+ {students.map((student, index) => (
+
+
+ handleStudentClick(student.name)}
+ >
+ {student.name}
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+
+
+ Time Spent:
+-
+
- Website: {activeStudentStats.website} +
- Playing: {activeStudentStats.playing} +
- Lessons: {activeStudentStats.lesson} +
- Puzzle: {activeStudentStats.puzzle} +
- Mentoring: {activeStudentStats.mentoring} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+ + 23rd July 2022 ++
7:00 PM ++ Solved 2 tactical puzzles ++
+ -
+ + 19th July 2022 ++
3:00 PM ++ Practiced 7 positions on{" "} + Piece Checkmates I ++
+ -
+ + 17st July 2022 ++
7:00 PM ++ Signed up to{" "} + + ystemandchess.com + ++
+
+
+ Mentor Sessions
+Details about mentor sessions will go here.
+
+
+ Professional Development
+Details about professional development will go here.
+
+
+ Chess Lesson
+Details about chess lessons will go here.
+
+
+ Games
+Details about games will go here.
+
+
+ Puzzles
+Details about puzzles will go here.
+
+
+ Computer
+Details about computer activities will go here.
+
+
+ Recordings
+ {recordingList.map((record, index) => ( +
+
+ ))}
+ {record.title}
+{record.description}
+
+
+ );
+};
+
+export default StudentProfile;
diff --git a/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.scss b/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.scss
new file mode 100644
index 00000000..0ee6e7e1
--- /dev/null
+++ b/react-ystemandchess/src/Pages/StudentProfile/Student-Profile.scss
@@ -0,0 +1,273 @@
+body {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.background-wrapper {
+ min-height: 100vh; /* Ensure it covers the whole viewport */
+ margin: 0 auto;
+ text-align: center;
+ background-image: url("../../images/student/bg-image.png");
+ background-repeat: repeat; /* Options: repeat, repeat-x, repeat-y, no-repeat */
+ background-size: 100em; /* Set a specific size for the repeating image */
+ min-height: 100vh; /* Ensure it covers the whole viewport */
+}
+
+.userProfileDiv {
+ text-align: left;
+ padding: 40px;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+.profile-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+}
+
+.profile-image img {
+ border-radius: 50%;
+ width: 100px;
+ height: 100px;
+ margin-bottom: 10px; /* Add some space between the image and the text */
+}
+
+.profile-image h2 {
+ margin: 0;
+ font-size: 24px;
+}
+
+.container {
+ position: relative; /* Add relative positioning to parent */
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ background-color: #d8dcdc;
+ padding: 20px;
+ margin-top: 20px; /* Adjust margin-top to provide space for the bar */
+ border-radius: 0 0 10px 10px; /* Add rounded edges */
+}
+
+.container::before {
+ content: "";
+ position: absolute;
+ top: -16px; /* Position the bar above the container */
+ left: 0;
+ width: 100%;
+ height: 20px;
+ background-color: #7fcc26;
+ border-radius: 10px 10px 0 0; /* Add border radius for rounded corners */
+}
+
+.green-bar {
+ display: flex;
+ justify-content: space-around;
+ background-color: #7fcc26;
+ padding: 10px;
+ margin-bottom: 20px; /* Adjust spacing below the green bar */
+}
+
+.green-bar-button {
+ border: none;
+ padding: 10px 20px;
+ background: none;
+ cursor: pointer;
+}
+
+.green-bar-button img {
+ display: block;
+ width: 100%;
+ height: auto;
+}
+
+.inner-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.top-container {
+ display: grid;
+ grid-template-areas: "chart logged-times";
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+.bottom-container {
+ display: grid;
+ grid-template-areas: "tabs tabcontent";
+ grid-template-columns: 1fr 10fr;
+}
+
+.chart {
+ grid-area: chart;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: auto;
+}
+
+.chart img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 10px;
+}
+
+.logged-times {
+ grid-area: logged-times;
+ border-radius: 10px;
+ padding: 20px;
+}
+
+.logged-times h3 {
+ margin-bottom: 10px;
+}
+
+.time-spent {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.time-spent li {
+ font-size: 16px;
+ margin: 5px 0;
+}
+
+.tabs-container {
+ grid-area: tabs;
+ display: flex;
+ flex-direction: column;
+ margin: 0; /* Ensure no margin around the tabs container */
+ background-color: transparent; /* Ensure the background is transparent */
+}
+
+.tab {
+ display: flex;
+ flex-direction: column;
+ width: 200px;
+}
+
+.tab button {
+ background: none;
+ border: none;
+ margin-bottom: 0; /* Remove margin between tab buttons */
+ padding: 0; /* Ensure no padding for tab buttons */
+ cursor: pointer;
+ border-radius: 0; /* Remove default border-radius */
+}
+
+.tab button img {
+ width: 100%;
+ height: auto;
+}
+
+.tab button:first-child img {
+ border-radius: 10px 0 0 0; /* Rounded top-left corner for the first tab */
+}
+
+.tab button:last-child img {
+ border-radius: 0 0 0 10px; /* Rounded bottom-left corner for the last tab */
+}
+
+.tab-content-container {
+ grid-area: tabcontent;
+ background-color: #c8f2ae;
+ width: 100%;
+ border-radius: 0 10px 10px 0; /* Rounded edges at top-right and bottom-right */
+}
+
+.tabcontent {
+ display: none;
+}
+
+.tabcontent.active {
+ display: block;
+}
+
+.rb-container {
+ font-family: "PT Sans", sans-serif;
+ margin: auto;
+ display: block;
+ position: relative;
+}
+
+.rb-container ul.rb {
+ margin: 2.5em 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.rb-container ul.rb li {
+ list-style: none;
+ margin: auto;
+ margin-left: 3em;
+ min-height: 50px;
+ border-left: 1px dashed #000;
+ padding: 0 0 50px 30px;
+ position: relative;
+}
+
+.rb-container ul.rb li:last-child {
+ border-left: 0;
+}
+
+.rb-container ul.rb li::before {
+ position: absolute;
+ left: -16px;
+ top: -5px;
+ content: " ";
+ border: 8px solid rgb(10, 10, 10);
+ border-radius: 500%;
+ background: #7fcc26;
+ height: 28px;
+ width: 28px;
+ transition: all 500ms ease-in-out;
+}
+
+.rb-container ul.rb li:hover::before {
+ border-color: #232931;
+ transition: all 1000ms ease-in-out;
+}
+
+ul.rb li .timestamp {
+ color: #0e0f0e;
+ position: relative;
+ width: 100px;
+ font-size: 12px;
+}
+
+.item-title {
+ color: #000;
+}
+
+.tab button.active img {
+ border: 5px solid;
+ border-image: linear-gradient(
+ 90deg,
+ #ff4747 0%,
+ #3faeff 38%,
+ #7fff30 68%,
+ #a8ec16 100%
+ );
+ border-image-slice: 1;
+ border-radius: 0;
+}
+
+.tab button:first-child.active img {
+ border-radius: 10px 0 0 0;
+}
+
+.tab button:last-child.active img {
+ border-radius: 0 0 10px 0;
+}
diff --git a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.jsx b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.jsx
new file mode 100644
index 00000000..baec062f
--- /dev/null
+++ b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.jsx
@@ -0,0 +1,236 @@
+import React, { useEffect, useState } from 'react';
+import { useCookies } from 'react-cookie';
+import { environment } from '../../../environments/environment';
+import PlayLesson from '../play-lesson/PlayLesson';
+import './lesson-overlay.scss';
+
+const LessonOverlay = () => {
+ const [lessonStartFEN, setLessonStartFEN] = useState('8/8/8/8/P7/5p2/8/8');
+ const [lessonEndFEN, setLessonEndFEN] = useState('');
+ const [lessonStarted, setLessonStarted] = useState(false);
+ const [endSquare, setEndSquare] = useState('');
+ const [previousEndSquare, setPreviousEndSquare] = useState('');
+ const [lessonNum, setLessonNum] = useState(0);
+ const [totalLessons, setTotalLessons] = useState(0);
+ const [currentFEN, setCurrentFEN] = useState('');
+ const [messageQueue, setMessageQueue] = useState([]);
+ const [color, setColor] = useState('white');
+ const [level, setLevel] = useState(5);
+ const [isReady, setIsReady] = useState(false);
+ const [cookies] = useCookies(['piece', 'login']);
+ const piece = cookies.piece;
+ const displayPiece = piece ? piece.toUpperCase() : 'UNKNOWN PIECE';
+ const [displayLessonNum, setDisplayLessonNum] = useState(0);
+
+ useEffect(() => {
+ const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
+ const eventer = window[eventMethod];
+ const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
+
+ const handleMessage = async (e) => {
+ if (e.origin === environment.urls.chessClientURL) {
+ if (e.data === 'ReadyToRecieve') {
+ setIsReady(true);
+ sendFromQueue();
+ }
+
+ if (!lessonStarted) {
+ await getLessonsCompleted();
+ setLessonStarted(true);
+ } else if (e.data === lessonEndFEN) {
+ updateLessonCompletion();
+ alert(`Lesson ${displayLessonNum} completed!`);
+ await getLessonsCompleted();
+ } else {
+ setCurrentFEN(e.data);
+ let newLevel = level;
+ if (newLevel <= 1) newLevel = 1;
+ else if (newLevel >= 30) newLevel = 30;
+
+ httpGetAsync(
+ `${environment.urls.stockFishURL}/?level=${newLevel}&fen=${currentFEN}`,
+ (response) => {
+ const chessBoard = document.getElementById('chessBd').contentWindow;
+ const message = JSON.stringify({ boardState: response, color });
+ if (isReady) {
+ chessBoard.postMessage(message, environment.urls.chessClientURL);
+ } else {
+ setMessageQueue([...messageQueue, message]);
+ }
+ }
+ );
+ }
+ }
+ };
+
+ eventer(messageEvent, handleMessage, false);
+
+ getTotalLesson();
+
+ return () => {
+ eventer(messageEvent, handleMessage, false);
+ };
+ }, [lessonStarted, lessonEndFEN, currentFEN, isReady, level, messageQueue]);
+
+ const getLessonsCompleted = async () => {
+ const url = `${environment.urls.middlewareURL}/getCompletedLesson.php/?jwt=${cookies.login}&piece=${piece}`;
+ httpGetAsync(url, (response) => {
+ const data = JSON.parse(response);
+ setLessonNum(data);
+ getCurrentLesson();
+ });
+ };
+
+ const getCurrentLesson = async () => {
+ const url = `${environment.urls.middlewareURL}/getLesson.php/?jwt=${cookies.login}&piece=${piece}&lessonNumber=${lessonNum}`;
+ setPreviousEndSquare(endSquare);
+ httpGetAsync(url, (response) => {
+ const data = JSON.parse(response);
+ setLessonStartFEN(data.startFen);
+ setLessonEndFEN(data.endFen);
+ setDisplayLessonNum(data.lessonNumber);
+ if (checkIfLessonsAreCompleted()) return;
+ setEndSquare(data.endSquare);
+ sendLessonToChessBoard();
+ });
+ };
+
+ const checkIfLessonsAreCompleted = () => {
+ if (displayLessonNum === undefined) {
+ alert(
+ 'Congratulations all current lessons for this piece have been completed!\n' +
+ 'Come back soon for more lessons or go over previous lessons.'
+ );
+ return true;
+ }
+ return false;
+ };
+
+ const getTotalLesson = async () => {
+ const url = `${environment.urls.middlewareURL}/getTotalPieceLesson.php/?jwt=${cookies.login}&piece=${piece}`;
+ httpGetAsync(url, (response) => {
+ const data = JSON.parse(response);
+ setTotalLessons(data);
+ });
+ };
+
+ const sendFromQueue = () => {
+ messageQueue.forEach((element) => {
+ const chessBoard = document.getElementById('chessBd').contentWindow;
+ chessBoard.postMessage(element, environment.urls.chessClientURL);
+ });
+ };
+
+ const newGameInit = () => {
+ setCurrentFEN(lessonStartFEN);
+
+ const chessBoard = document.getElementById('chessBd').contentWindow;
+ const message = JSON.stringify({ boardState: lessonStartFEN, color });
+ if (isReady) {
+ chessBoard.postMessage(message, environment.urls.chessClientURL);
+ } else {
+ setMessageQueue([...messageQueue, message]);
+ }
+
+ if (color === 'white') {
+ setLevel(5);
+ setColor('black');
+ let newLevel = level;
+ if (newLevel <= 1) newLevel = 1;
+ else if (newLevel >= 30) newLevel = 30;
+
+ httpGetAsync(
+ `${environment.urls.stockFishURL}/?level=${newLevel}&fen=${currentFEN}`,
+ (response) => {
+ const chessBoard = document.getElementById('chessBd').contentWindow;
+ const message = JSON.stringify({ boardState: response, color: 'black' });
+ if (isReady) {
+ chessBoard.postMessage(message, environment.urls.chessClientURL);
+ } else {
+ setMessageQueue([...messageQueue, message]);
+ }
+ }
+ );
+ }
+ };
+
+ const sendLessonToChessBoard = () => {
+ const chessBoard = document.getElementById('chessBd').contentWindow;
+ const message = JSON.stringify({
+ boardState: lessonStartFEN,
+ endState: lessonEndFEN,
+ lessonFlag: true,
+ endSquare,
+ color,
+ previousEndSquare,
+ });
+ chessBoard.postMessage(message, environment.urls.chessClientURL);
+ };
+
+ const previousLesson = () => {
+ if (lessonNum > 0) {
+ setLessonNum(lessonNum - 1);
+ setPreviousEndSquare(endSquare);
+ getCurrentLesson();
+ }
+ };
+
+ const nextLesson = () => {
+ if (lessonNum + 1 < totalLessons) {
+ setLessonNum(lessonNum + 1);
+ setPreviousEndSquare(endSquare);
+ getCurrentLesson();
+ }
+ };
+
+ const updateLessonCompletion = async () => {
+ const url = `${environment.urls.middlewareURL}/updateLessonCompletion.php/?jwt=${cookies.login}&piece=${piece}&lessonNumber=${lessonNum}`;
+ httpGetAsync(url, () => {});
+ };
+
+ const httpGetAsync = (theUrl, callback) => {
+ const xmlHttp = new XMLHttpRequest();
+ xmlHttp.onreadystatechange = function () {
+ if (xmlHttp.readyState === 4 && xmlHttp.status === 200) callback(xmlHttp.responseText);
+ };
+ xmlHttp.open('POST', theUrl, true);
+ xmlHttp.send(null);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {`Hello, ${firstName} ${lastName}!`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Time Spent:
+-
+
- Website: 45 minutes +
- Lesson: 10 minutes +
- Puzzle: 5 minutes +
- Playing: 15 minutes +
- Mentoring: 15 minutes +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+ + 23rd July 2022 ++
7:00 PM ++ Solved 2 tactical puzzles ++
+ -
+ + 19th July 2022 ++
3:00 PM ++ Practiced 7 positions on{" "} + Piece Checkmates I ++
+ -
+ + 17st July 2022 ++
7:00 PM ++ Signed up to{" "} + + ystemandchess.com + ++
+
+
+ Mentor Sessions
+Details about mentor sessions will go here.
+
+
+ Professional Development
+Details about professional development will go here.
+
+
+ Chess Lesson
+Details about chess lessons will go here.
+
+
+ Games
+Details about games will go here.
+
+
+ Puzzles
+Details about puzzles will go here.
+
+
+ Computer
+Details about computer activities will go here.
+
+
+ Recordings
+ {recordingList.map((record, index) => ( +
+
+ ))}
+ {record.title}
+{record.description}
+
+
+ );
+};
+
+export default LessonOverlay;
diff --git a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.scss b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.scss
new file mode 100644
index 00000000..347118ff
--- /dev/null
+++ b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.scss
@@ -0,0 +1,174 @@
+#lesson-container {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ grid-template-rows: auto 1fr auto;
+ gap: 10px;
+ margin-top: 2%;
+ //make a left margin negative
+ margin-left: -3%;
+ width: 90%;
+ border-radius: 10px;
+ padding: 20px;
+ align-content: center;
+
+ #chess-board {
+ grid-row: 1 / span 2;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+ padding: 10px;
+ //make all content smaller
+ width: 50%;
+ //make all content centered
+ margin: 0 auto;
+
+
+ #chess-board-top {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ margin-bottom: 10px;
+
+ .play-button {
+ font-family: 'Lato', sans-serif;
+ font-weight: 900;
+ font-size: 18px;
+ padding: 10px;
+ color: #FFF;
+ background-color: #7fcc26;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ .lesson-button{
+ font-family: 'Lato', sans-serif;
+ font-weight: 900;
+ font-size: 18px;
+ padding: 10px;
+ color: #000000;
+ background-color: #e2cc44;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ .play-button:hover {
+ color: #7fcc26;
+ background-color: #fff;
+ border: 1px solid #7fcc26;
+ }
+
+ .lesson-button:hover {
+ color: #e2cc44;
+ background-color: #000000;
+ border: 1px solid #e2cc44;
+ }
+ }
+ }
+
+ #lesson-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 10px;
+ border-radius: 10px;
+ text-align: left;
+ //move content to the left
+ margin-left: 0;
+
+ h2 {
+ font-family: 'Roboto', sans-serif;
+ color: #4A4A4A;
+ }
+
+ #try-this {
+ background-color: #bfd99e;
+ padding: 10px;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ margin-left: 30px;
+ margin-right: 30px;
+
+ p {
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+ color: #4A4A4A;
+ }
+ }
+
+ #bottom {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 20px;
+
+ button {
+ flex: 1;
+ margin: 0 5px;
+ font-family: 'Lato', sans-serif;
+ font-weight: 900;
+ font-size: 18px;
+ padding: 10px;
+ color: #FFF;
+ background-color: #7fcc26;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ button:hover {
+ color: #7fcc26;
+ background-color: #fff;
+ border: 1px solid #7fcc26;
+ }
+ }
+ }
+
+ #lesson-selector {
+ grid-column: 1 / -1;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+ margin-left: 20%;
+ margin-right: 4%;
+
+ .lesson-tab {
+ flex: 1;
+ margin: 0 5px;
+ font-family: 'Lato', sans-serif;
+ font-weight: 900;
+ font-size: 18px;
+ padding: 10px;
+ color: #FFF;
+ background-color: #7fcc26;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ .lesson-tab:hover {
+ color: #7fcc26;
+ background-color: #fff;
+ border: 1px solid #7fcc26;
+ }
+ }
+}
+
+#movesAhead {
+ width: 100px;
+}
+
+#tag {
+ padding: 20px;
+ font-family: 'Roboto', sans-serif;
+ background-color: #ADD8E6;
+ border-radius: 5px;
+ color: #4A4A4A;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
diff --git a/react-ystemandchess/src/Pages/piece-lessons/play-lesson/PlayLesson.jsx b/react-ystemandchess/src/Pages/piece-lessons/play-lesson/PlayLesson.jsx
new file mode 100644
index 00000000..0da879c7
--- /dev/null
+++ b/react-ystemandchess/src/Pages/piece-lessons/play-lesson/PlayLesson.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import "./lesson-content.scss";
+
+const PlayLesson = ({ chessLessonSrc }) => {
+ return (
+
+
+
+
+
+
+
+
+ Pawn-It moves forward only
+
+
+ Try this!
+Pawns move one square only. But when they reach the other side of the board, they become a stronger piece!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PlayLesson;
diff --git a/react-ystemandchess/src/Pages/piece-lessons/play-lesson/lesson-content.scss b/react-ystemandchess/src/Pages/piece-lessons/play-lesson/lesson-content.scss
new file mode 100644
index 00000000..1b4b3028
--- /dev/null
+++ b/react-ystemandchess/src/Pages/piece-lessons/play-lesson/lesson-content.scss
@@ -0,0 +1,67 @@
+.cont {
+ width: 100%;
+ .lichess {
+ position: relative;
+ width: 100%;
+ padding-bottom: 100%;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height:100%;
+ }
+ }
+ .jitsi {
+ width: 30%;
+ height: 300px;
+ padding: 2px;
+ }
+
+ @media only screen and (max-width: 1550px) {
+ .lichess {
+ width:70%;
+ padding-bottom: 70%;
+ }
+ }
+
+ @media only screen and (max-width:1000px) {
+ .lichess {
+ width: 50%;
+ padding-bottom: 50%;
+
+ iframe {
+ overflow: hidden;
+ }
+ }
+
+ .jitsi {
+ width: 30%;
+ height: 300px;
+ padding: 2px;
+ }
+ }
+
+ @media only screen and (max-width:800px) {
+ .lichess {
+ width: 80%;
+ padding-bottom: 83%;
+ }
+
+ .jitsi {
+ width: 0%;
+ height: 0;
+ padding: 0;
+ }
+ }
+
+ @media only screen and (max-width: 650px) {
+ .lichess {
+ width: 100%;
+ padding-bottom: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ystemandchess/src/images/student/STEMy_Mascot.png b/react-ystemandchess/src/images/student/STEMy_Mascot.png
new file mode 100644
index 00000000..72d799e1
Binary files /dev/null and b/react-ystemandchess/src/images/student/STEMy_Mascot.png differ
diff --git a/react-ystemandchess/src/images/student/activities_button.svg b/react-ystemandchess/src/images/student/activities_button.svg
new file mode 100644
index 00000000..66ad4b94
--- /dev/null
+++ b/react-ystemandchess/src/images/student/activities_button.svg
@@ -0,0 +1,22 @@
+
diff --git a/react-ystemandchess/src/images/student/activity_tab.png b/react-ystemandchess/src/images/student/activity_tab.png
new file mode 100644
index 00000000..2fb6879a
Binary files /dev/null and b/react-ystemandchess/src/images/student/activity_tab.png differ
diff --git a/react-ystemandchess/src/images/student/badges_button.svg b/react-ystemandchess/src/images/student/badges_button.svg
new file mode 100644
index 00000000..410b9353
--- /dev/null
+++ b/react-ystemandchess/src/images/student/badges_button.svg
@@ -0,0 +1,55 @@
+
diff --git a/react-ystemandchess/src/images/student/bg-image.png b/react-ystemandchess/src/images/student/bg-image.png
new file mode 100644
index 00000000..97029b0e
Binary files /dev/null and b/react-ystemandchess/src/images/student/bg-image.png differ
diff --git a/react-ystemandchess/src/images/student/chart.PNG b/react-ystemandchess/src/images/student/chart.PNG
new file mode 100644
index 00000000..d9a8423b
Binary files /dev/null and b/react-ystemandchess/src/images/student/chart.PNG differ
diff --git a/react-ystemandchess/src/images/student/chess_tab.PNG b/react-ystemandchess/src/images/student/chess_tab.PNG
new file mode 100644
index 00000000..3b480b4b
Binary files /dev/null and b/react-ystemandchess/src/images/student/chess_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/chess_tab1.png b/react-ystemandchess/src/images/student/chess_tab1.png
new file mode 100644
index 00000000..a9cb900b
Binary files /dev/null and b/react-ystemandchess/src/images/student/chess_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/games_tab.PNG b/react-ystemandchess/src/images/student/games_tab.PNG
new file mode 100644
index 00000000..baecda94
Binary files /dev/null and b/react-ystemandchess/src/images/student/games_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/games_tab1.png b/react-ystemandchess/src/images/student/games_tab1.png
new file mode 100644
index 00000000..617c4ab3
Binary files /dev/null and b/react-ystemandchess/src/images/student/games_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/inventory_tab.png b/react-ystemandchess/src/images/student/inventory_tab.png
new file mode 100644
index 00000000..295c050e
Binary files /dev/null and b/react-ystemandchess/src/images/student/inventory_tab.png differ
diff --git a/react-ystemandchess/src/images/student/leaderboard_button.svg b/react-ystemandchess/src/images/student/leaderboard_button.svg
new file mode 100644
index 00000000..4005228a
--- /dev/null
+++ b/react-ystemandchess/src/images/student/leaderboard_button.svg
@@ -0,0 +1,42 @@
+
diff --git a/react-ystemandchess/src/images/student/mento_tab.PNG b/react-ystemandchess/src/images/student/mento_tab.PNG
new file mode 100644
index 00000000..e8db5dd5
Binary files /dev/null and b/react-ystemandchess/src/images/student/mento_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/mento_tab1.png b/react-ystemandchess/src/images/student/mento_tab1.png
new file mode 100644
index 00000000..09b39918
Binary files /dev/null and b/react-ystemandchess/src/images/student/mento_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/play_tab.PNG b/react-ystemandchess/src/images/student/play_tab.PNG
new file mode 100644
index 00000000..a7f3cd0f
Binary files /dev/null and b/react-ystemandchess/src/images/student/play_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/play_tab1.png b/react-ystemandchess/src/images/student/play_tab1.png
new file mode 100644
index 00000000..8ba8696d
Binary files /dev/null and b/react-ystemandchess/src/images/student/play_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/prodev_tab.PNG b/react-ystemandchess/src/images/student/prodev_tab.PNG
new file mode 100644
index 00000000..93f80b7d
Binary files /dev/null and b/react-ystemandchess/src/images/student/prodev_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/prodev_tab1.png b/react-ystemandchess/src/images/student/prodev_tab1.png
new file mode 100644
index 00000000..00e85722
Binary files /dev/null and b/react-ystemandchess/src/images/student/prodev_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/profile_button.svg b/react-ystemandchess/src/images/student/profile_button.svg
new file mode 100644
index 00000000..518f6944
--- /dev/null
+++ b/react-ystemandchess/src/images/student/profile_button.svg
@@ -0,0 +1,318 @@
+
diff --git a/react-ystemandchess/src/images/student/pupil.svg b/react-ystemandchess/src/images/student/pupil.svg
new file mode 100644
index 00000000..f333d965
--- /dev/null
+++ b/react-ystemandchess/src/images/student/pupil.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/react-ystemandchess/src/images/student/puzzles_tab.PNG b/react-ystemandchess/src/images/student/puzzles_tab.PNG
new file mode 100644
index 00000000..2295a7cc
Binary files /dev/null and b/react-ystemandchess/src/images/student/puzzles_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/puzzles_tab1.png b/react-ystemandchess/src/images/student/puzzles_tab1.png
new file mode 100644
index 00000000..8f8aa7ca
Binary files /dev/null and b/react-ystemandchess/src/images/student/puzzles_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/recordings_tab.PNG b/react-ystemandchess/src/images/student/recordings_tab.PNG
new file mode 100644
index 00000000..3b9ec6c0
Binary files /dev/null and b/react-ystemandchess/src/images/student/recordings_tab.PNG differ
diff --git a/react-ystemandchess/src/images/student/recordings_tab1.png b/react-ystemandchess/src/images/student/recordings_tab1.png
new file mode 100644
index 00000000..ee65bb1b
Binary files /dev/null and b/react-ystemandchess/src/images/student/recordings_tab1.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_1.png b/react-ystemandchess/src/images/student/sponsor_1.png
new file mode 100644
index 00000000..fdbc1dec
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_1.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_2.png b/react-ystemandchess/src/images/student/sponsor_2.png
new file mode 100644
index 00000000..544f9e59
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_2.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_3.png b/react-ystemandchess/src/images/student/sponsor_3.png
new file mode 100644
index 00000000..27a32696
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_3.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_4.png b/react-ystemandchess/src/images/student/sponsor_4.png
new file mode 100644
index 00000000..40ed3dc5
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_4.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_5.png b/react-ystemandchess/src/images/student/sponsor_5.png
new file mode 100644
index 00000000..457f0626
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_5.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_6.png b/react-ystemandchess/src/images/student/sponsor_6.png
new file mode 100644
index 00000000..ae136fc6
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_6.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_7.png b/react-ystemandchess/src/images/student/sponsor_7.png
new file mode 100644
index 00000000..4e4cad35
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_7.png differ
diff --git a/react-ystemandchess/src/images/student/sponsor_8.png b/react-ystemandchess/src/images/student/sponsor_8.png
new file mode 100644
index 00000000..96703b44
Binary files /dev/null and b/react-ystemandchess/src/images/student/sponsor_8.png differ
diff --git a/react-ystemandchess/src/images/student/streak_button.svg b/react-ystemandchess/src/images/student/streak_button.svg
new file mode 100644
index 00000000..e3d5443b
--- /dev/null
+++ b/react-ystemandchess/src/images/student/streak_button.svg
@@ -0,0 +1,24 @@
+
diff --git a/react-ystemandchess/src/images/student/sunrise.png b/react-ystemandchess/src/images/student/sunrise.png
new file mode 100644
index 00000000..565fbe0e
Binary files /dev/null and b/react-ystemandchess/src/images/student/sunrise.png differ
+
+
+
+
+