chess board challenge

react/src/helpers/challenges.ts

@@ -381,6 +381,17 @@ export const challenges = new Map<string, Challenge>([
       isNew: true,
     }
   ],
+  [
+    'chess-board',
+    {
+      title: 'Chess Board',
+      link: 'chess-board',
+      difficulty: 'medium',
+      developer: 'AbhilashMadi',
+      tags: [],
+      isNew: true,
+    }
+  ],
   [
     'food-recipe',
     {

react/src/machine-coding/chess-board/App.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import ChessBoard from './ChessBoard';
+import styles from './chess-board.module.scss';
+
+const App: FC = () => {
+  return (
+    <main className={styles.app}>
+      <ChessBoard />
+    </main>
+  );
+};
+
+export default App;

react/src/machine-coding/chess-board/ChessBoard.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import styles from './chess-board.module.scss';
+import { colorTile } from './utils';
+
+const ChessBoard: FC = () => {
+  //instead of using an object here we can use Map too
+  /**
+   * R - Rook
+   * N - Knight
+   * B - Bishop
+   * Q - Queen
+   * K - King
+   * P - Pawn
+   */
+  const chessPieces: { readonly [key: string]: string } = {
+    R: '♜',
+    N: '♞',
+    B: '♝',
+    Q: '♛', 
+    K: '♚',
+    P: '♟',
+    r: '♖',
+    n: '♘',
+    b: '♗',
+    q: '♕',
+    k: '♔',
+    p: '♙',
+    ' ': ' ',
+  };
+
+  const boardRows: string =
+    'RNBQKBNR' +
+    'PPPPPPPP' +
+    '        ' +
+    '        ' +
+    '        ' +
+    '        ' +
+    'pppppppp' +
+    'rnbqkbnr';
+
+  return (
+    <section className={styles.chess}>
+      {boardRows.split('').map((piece: string, i: number) => {
+        return (
+          <div key={i} className={`${styles.tile} ${colorTile(i) ? styles.tile_color : ''}`}>
+            {chessPieces[piece]}
+          </div>
+        );
+      })}
+    </section>
+  );
+};
+
+export default ChessBoard;

react/src/machine-coding/chess-board/chess-board.module.scss

@@ -0,0 +1,61 @@
+//variables
+$white: #FFFFFF;
+$black: #151417;
+$gray: #333642;
+$bord-size: 30rem;
+$shadow: rgba(0, 0, 0, 0.2) 0px 0px 25px;
+$base-font-size: 16px;
+
+.app {
+  width: 100%;
+  height: 85dvh;
+  background-color: red;
+}
+
+//mixins
+@mixin flex($direction: row, $justify: center, $align: center, $wrap: nowrap, $gap: 0) {
+  display: flex;
+  align-items: $align;
+  justify-content: $justify;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+@mixin grid($columsn, $rows, $gap: 0) {
+  display: grid;
+  grid-template-columns: $columsn;
+  grid-template-rows: $rows;
+  gap: $gap;
+}
+
+//styles
+.app {
+  height: 85dvh;
+  width: 100%;
+  background-color: $gray;
+  @include flex();
+}
+
+.chess {
+  width: $bord-size;
+  height: $bord-size;
+  background-color: $black;
+  @include grid(repeat(8, 1fr), repeat(8, 1fr));
+  box-shadow: $shadow;
+  overflow: hidden;
+  background-color: $black;
+  color: $white;
+}
+
+.tile {
+  @include flex;
+  width: 100%;
+  height: 100%;
+  font-size: $base-font-size*2.5;
+}
+
+.tile_color {
+  background-color: $white;
+  overflow: hidden;
+  color: $black;
+}

react/src/machine-coding/chess-board/utils.ts

@@ -0,0 +1,13 @@
+
+export const colorTile = (n: number): boolean => {
+  /**
+   * shorthand 
+   * return (n % 2 ^ ((n / 8) % 2 < 1) ? true : false;
+   */
+  const isEvenRow = Math.floor(n / 8) % 2 === 0;
+  const isEvenTile = n % 2 === 0;
+
+  return (isEvenRow && isEvenTile) || (!isEvenRow && !isEvenTile)
+    ? true
+    : false;
+} 

react/src/pages/Challenge.tsx

@@ -41,7 +41,8 @@ import EmojiPicker from '@/machine-coding/emoji-picker/App';
 import ProgrammingLanguageMultiverse from '@/machine-coding/programming-languages-multiverse';
 import Otp from '@/machine-coding/otp/App';
 import TrafficLights from '@/machine-coding/traffic-light/App';
-import QuizApp from "@/machine-coding/quiz-app/App";
+import QuizApp from '@/machine-coding/quiz-app/App';
+import ChessBoard from '@/machine-coding/chess-board/App';
 import { challenges } from '@/helpers/challenges';
 import { useParams } from 'react-router-dom';
 
@@ -89,6 +90,7 @@ const reactChallenges = {
   otp: <Otp />,
   'traffic-lights': <TrafficLights />,
   'quiz-app': <QuizApp />,
+  'chess-board': <ChessBoard />,
 };
 
 function Challenge() {