diff --git a/src/App.js b/src/App.js
index 49ea7d8..a01bbce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,173 @@
import React from 'react';
import './App.css';
-import { Trainee } from './Components';
+import { Board } from './Components';
const App = () => {
const trainees = [
- { name: 'Ahmed Hossam', handle: 'ahmed.7oskaa' },
- { name: 'Abdalla Tarek', handle: 'Bodipie' },
- { name: 'Yousab Esaa', handle: 'Yousab_Esaa' },
- { name: 'Abdalla Nasser', handle: 'abdallanaser1432000' },
- { name: 'Mahmoud Aboelsoud', handle: 'aboelsoudJr' },
- { name: 'Abdelrehman Mamdouh', handle: 'Abdelrehman' },
- { name: 'Mahmoud Elsayed', handle: 'Mahmoudelsayed00' },
- { name: 'Yousef Mohamed', handle: 'Pixelise' },
- { name: 'Hadir Alnajdy', handle: 'Hdrnjd' },
- { name: 'Lama Salah', handle: 'LamaSalah' }
+ {
+ name: 'Ahmed Hossam',
+ handle: 'ahmed.7oskaa',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Abdalla Tarek',
+ handle: 'Bodipie',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Yousab Esaa',
+ handle: 'Yousab_Esaa',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Abdalla Nasser',
+ handle: 'abdallanaser1432000',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Mahmoud Aboelsoud',
+ handle: 'aboelsoudJr',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Abdelrehman Mamdouh',
+ handle: 'Abdelrehman',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Mahmoud Elsayed',
+ handle: 'Mahmoudelsayed00',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Yousef Mohamed',
+ handle: 'Pixelise',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Hadir Alnajdy',
+ handle: 'Hdrnjd',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Lama Salah',
+ handle: 'LamaSalah',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Mariem Osama',
+ handle: 'Mariem_Osama',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Abdelrahman Elwardany',
+ handle: 'Abdelrahman_Elwardany',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Ibrahim Abdalrhman',
+ handle: 'ibrahimpepo',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Mohamed AboElkhair',
+ handle: 'Mohamed_AboELkhair',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Salma Ahmed',
+ handle: 'Sa310',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Hala Ibrahim',
+ handle: 'Hala_ibrahim7',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Omnia Adel',
+ handle: 'omnia_adel',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Merna Tarek',
+ handle: 'Merno',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Ahmed AbdElsalam',
+ handle: 'Genius22',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ },
+ {
+ name: 'Emad Moenes',
+ handle: 'emadmoenes',
+ states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+ }
+ ];
+
+ const sheets = [
+ {
+ id: '219158',
+ name: 'Sheet #1 (Data type - Conditions)',
+ problems: [
+ { id: 'A', name: 'Say Hello With C++' },
+ { id: 'B', name: 'Basic Data Types' },
+ { id: 'C', name: 'Extremely Basic' },
+ { id: 'D', name: 'Difference' },
+ { id: 'E', name: 'Four Numbers' }
+ ]
+ },
+ {
+ id: '219432',
+ name: 'Sheet #2 (Loops)',
+ problems: [
+ { id: 'A', name: '1 to N' },
+ { id: 'B', name: 'Even Numbers' },
+ { id: 'C', name: 'Summation using Loops' },
+ { id: 'D', name: 'Even, Odd, Positive and Negative' },
+ { id: 'E', name: 'Fixed Password' }
+ ]
+ },
+ {
+ id: '219856',
+ name: 'Sheet #4 (Strings)',
+ problems: [
+ { id: 'A', name: 'Create A New String' },
+ { id: 'B', name: 'Find Length' },
+ { id: 'C', name: "Let's use Getline" },
+ { id: 'D', name: 'Compare' },
+ { id: 'E', name: 'Strings' }
+ ]
+ },
+
+ {
+ id: 'fake-1',
+ name: 'Sheet #4 (Strings)',
+ problems: [
+ { id: 'A', name: 'Create A New String' },
+ { id: 'B', name: 'Find Length' },
+ { id: 'C', name: "Let's use Getline" },
+ { id: 'D', name: 'Compare' },
+ { id: 'E', name: 'Strings' }
+ ]
+ },
+ {
+ id: 'fake-2',
+ name: 'Sheet #4 (Strings)',
+ problems: [
+ { id: 'A', name: 'Create A New String' },
+ { id: 'B', name: 'Find Length' },
+ { id: 'C', name: "Let's use Getline" },
+ { id: 'D', name: 'Compare' },
+ { id: 'E', name: 'Strings' }
+ ]
+ }
];
return (
- {trainees.map(({ name, handle, photo }) => (
-
- ))}
+
);
};
diff --git a/src/Components/Board/Board.js b/src/Components/Board/Board.js
new file mode 100644
index 0000000..02a0c18
--- /dev/null
+++ b/src/Components/Board/Board.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TraineeList } from '../TraineeList';
+import Sheet from '../Sheet';
+import './styles.css';
+
+class Board extends React.Component {
+ render() {
+ const { sheets, trainees } = this.props;
+
+ return (
+
+
+
+
+
+
+ {sheets.map(({ id, name, problems }, index) => (
+
+
+
+ ))}
+
+
Hi
+
+
+ );
+ }
+}
+
+Board.propTypes = {
+ sheets: PropTypes.array.isRequired,
+ trainees: PropTypes.array.isRequired
+};
+
+export default Board;
diff --git a/src/Components/Board/index.js b/src/Components/Board/index.js
new file mode 100644
index 0000000..ae60d9a
--- /dev/null
+++ b/src/Components/Board/index.js
@@ -0,0 +1 @@
+export { default as Board } from './Board';
diff --git a/src/Components/Board/styles.css b/src/Components/Board/styles.css
new file mode 100644
index 0000000..8da4429
--- /dev/null
+++ b/src/Components/Board/styles.css
@@ -0,0 +1,28 @@
+.board {
+ display: flex;
+ flex-direction: row;
+ overflow: auto;
+}
+
+/* trainees */
+.board .trainees-section {
+ background-color: white;
+ position: sticky;
+ left: 0;
+}
+
+/* sheets */
+.board .sheets-section .sheets {
+ display: flex;
+ flex-direction: row;
+}
+
+.board .sheets-section .sheets .sheet-collection {
+ border-top: 1px solid #535353;
+ border-right: 1px solid #535353;
+ border-bottom: 1px solid #535353;
+}
+
+.board .sheets-section .sheets .sheet-collection:first-of-type {
+ border-left: 1px solid #535353;
+}
diff --git a/src/Components/Sheet/Sheet.js b/src/Components/Sheet/Sheet.js
new file mode 100644
index 0000000..6f5d4de
--- /dev/null
+++ b/src/Components/Sheet/Sheet.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sheetNameHeight, blockSize, sheetProblemIdHeight } from '../common';
+import './styles.css';
+
+class Sheet extends React.Component {
+ render() {
+ const { id, name, problems } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+Sheet.propTypes = {
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ problems: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+ })
+ ).isRequired
+};
+
+export default Sheet;
diff --git a/src/Components/Sheet/index.js b/src/Components/Sheet/index.js
new file mode 100644
index 0000000..9ad07cc
--- /dev/null
+++ b/src/Components/Sheet/index.js
@@ -0,0 +1 @@
+export { default } from './Sheet';
diff --git a/src/Components/Sheet/styles.css b/src/Components/Sheet/styles.css
new file mode 100644
index 0000000..b16f7f0
--- /dev/null
+++ b/src/Components/Sheet/styles.css
@@ -0,0 +1,49 @@
+.sheet .title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 14px;
+ text-decoration: none;
+ border-bottom: 1px solid #e1e1e1;
+ background-color: #e1e1e1;
+ color: #535353;
+}
+
+.sheet .problems {
+ display: flex;
+ flex-direction: row;
+}
+
+.sheet .problems .problem {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ background-color: #e1e1e1;
+}
+
+.sheet .problems .problem .status {
+ font-size: 10px;
+ color: gray;
+}
+
+.sheet .problems .problem .details {
+ position: absolute;
+ z-index: 10;
+ white-space: nowrap;
+ font-size: 10px;
+ background-color: lightyellow;
+ padding: 3px;
+ border: 1px solid darkgray;
+ opacity: 0;
+ transition: all 300ms;
+ visibility: hidden;
+}
+
+.sheet .problems .problem:hover .details {
+ opacity: 1;
+ visibility: visible;
+}
diff --git a/src/Components/Trainee/index.js b/src/Components/Trainee/index.js
index 26d9b78..e5e2551 100644
--- a/src/Components/Trainee/index.js
+++ b/src/Components/Trainee/index.js
@@ -1 +1 @@
-export { default as Trainee } from './Trainee';
+export { default } from './Trainee';
diff --git a/src/Components/TraineeList/TraineeList.js b/src/Components/TraineeList/TraineeList.js
index 96aa9f9..848fe63 100644
--- a/src/Components/TraineeList/TraineeList.js
+++ b/src/Components/TraineeList/TraineeList.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Trainee } from '../Trainee';
+import { sheetNameHeight, sheetProblemIdHeight } from '../common';
+import Trainee from '../Trainee';
import './styles.css';
class TraineeList extends React.Component {
@@ -11,7 +12,7 @@ class TraineeList extends React.Component {
-
+
Trainee |
Progress |
diff --git a/src/Components/common.js b/src/Components/common.js
new file mode 100644
index 0000000..6e76db1
--- /dev/null
+++ b/src/Components/common.js
@@ -0,0 +1,3 @@
+export const sheetNameHeight = 25;
+export const sheetProblemIdHeight = 35;
+export const blockSize = 55;
diff --git a/src/Components/index.js b/src/Components/index.js
index 46e3b15..780f0ed 100644
--- a/src/Components/index.js
+++ b/src/Components/index.js
@@ -1 +1,3 @@
export * from './Trainee';
+export * from './TraineeList';
+export * from './Board';