feat: board trainee problems status

icpc-scu-community · Feb 7, 2020 · 9a29045 · 9a29045
1 parent 0e15cc6
commit 9a29045
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 deletions.
diff --git a/src/Components/Board/Board.js b/src/Components/Board/Board.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { blockSize } from '../common';
 import { TraineeList } from '../TraineeList';
 import Sheet from '../Sheet';
 import './styles.css';
@@ -21,7 +22,22 @@ class Board extends React.Component {
               </div>
             ))}
           </div>
-          <div>Hi</div>
+          <div className="trainee-problems-status">
+            {trainees.map(() => (
+              <div className="trainee-problems-row">
+                {sheets.map(({ problems }) =>
+                  problems.map(({ id }) => (
+                    <div
+                      className="trainee-problems-cell ac"
+                      style={{ width: blockSize, height: blockSize }}
+                    >
+                      AC
+                    </div>
+                  ))
+                )}
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     );

diff --git a/src/Components/Board/styles.css b/src/Components/Board/styles.css
@@ -21,8 +21,56 @@
   border-top: 1px solid #535353;
   border-right: 1px solid #535353;
   border-bottom: 1px solid #535353;
+  box-sizing: border-box;
 }
 
 .board .sheets-section .sheets .sheet-collection:first-of-type {
   border-left: 1px solid #535353;
 }
+
+.board .sheets-section .trainee-problems-status {
+  display: flex;
+  flex-direction: column;
+}
+
+.board .sheets-section .trainee-problems-status .trainee-problems-row {
+  display: flex;
+  flex-direction: row;
+  padding: 5px 0;
+}
+
+.board
+  .sheets-section
+  .trainee-problems-status
+  .trainee-problems-row:first-of-type {
+  padding-top: 10px;
+}
+
+.board
+  .sheets-section
+  .trainee-problems-status
+  .trainee-problems-row:last-of-type {
+  padding-bottom: 10px;
+}
+
+.board .sheets-section .trainee-problems-status .trainee-problems-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  box-sizing: border-box;
+}
+
+.board
+  .sheets-section
+  .trainee-problems-status
+  .trainee-problems-cell:first-of-type {
+  border-left: 1px solid;
+}
+
+.board .sheets-section .trainee-problems-status .trainee-problems-cell.ac {
+  background-color: lightgreen;
+  border-color: green;
+}
diff --git a/src/Components/TraineeList/TraineeList.js b/src/Components/TraineeList/TraineeList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sheetNameHeight, sheetProblemIdHeight } from '../common';
+import { sheetNameHeight, sheetProblemIdHeight, blockSize } from '../common';
 import Trainee from '../Trainee';
 import './styles.css';
 
@@ -19,7 +19,7 @@ class TraineeList extends React.Component {
           </thead>
           <tbody>
             {trainees.map(({ name, handle, states }) => (
-              <tr key={handle}>
+              <tr key={handle} style={{ height: blockSize }}>
                 <td className="trainee-cell">
                   <Trainee name={name} handle={handle} states={states} />
                 </td>

diff --git a/src/Components/TraineeList/styles.css b/src/Components/TraineeList/styles.css
@@ -3,12 +3,11 @@
 }
 
 .trainee-list .trainee-list-table td {
-  /* background-color: red; */
   padding: 0;
 }
 
 .trainee-list .trainee-list-table .trainee-cell {
-  height: 55px;
+  height: 100%;
   padding-right: 25px;
 }
 
@@ -19,9 +18,9 @@
   align-items: center;
   justify-content: center;
   font-size: 14px;
+  height: 100%;
 
   background-color: lightgray;
-  height: 50px;
   width: 90px;
   z-index: 0;
 }