initial file upload - components/pages/main

App.css

@@ -0,0 +1,6 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}

App.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import SignupPage from './pages/Signup';
+import LoginPage from './pages/Login';
+import HomePage from './pages/Homepage';
+
+function App() {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div>
+        <BrowserRouter>
+          <Routes>
+            <Route path='/' element={<LoginPage />} />
+            <Route path='/signup' element={<SignupPage />} />
+            <Route path='/home' element={<HomePage />} />
+          </Routes>
+        </BrowserRouter>
+      </div>
+    </DndProvider>
+  );
+}
+
+export default App;

components/ChordDisplay.css

@@ -0,0 +1,33 @@
+.chord-item {
+  position: relative;
+  display: inline-block;
+  padding: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.overlay-circle {
+  position: absolute;
+  z-index: 1;
+  background-color: rgb(33, 140, 167);
+  border-radius: 50%;
+  display: flex;
+  width: 15px;
+  height: 15px;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.fret-position {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(0, 0, 0);
+  font-size: 16px;
+  font-weight: bold;
+}

components/ChordDisplay.jsx

@@ -0,0 +1,183 @@
+// ChordDisplay.jsx
+import React from 'react';
+import DraggableChord from './DraggableChord';
+import { allC } from '../../../chords/C-chords.mjs';
+import './ChordDisplay.css';
+import { frets } from '../../../chords/Frets.mjs';
+
+export default function ChordDisplay({ selectedOption }) {
+  function findChordByName(objectsArray, targetName) {
+    return objectsArray.find((obj) => obj.name === targetName);
+  }
+
+  const chordData = [];
+  if (selectedOption) {
+    let currentChord = findChordByName(allC, selectedOption);
+    function mapChord(chord) {
+      for (let i = 1; i < Object.values(chord).length; i++) {
+        const reversedChordLine = (
+          <div key={i} className='chord-line'>
+            {chord[i]
+              .slice()
+              .reverse()
+              .map((char, index) => (
+                <React.Fragment key={index}>
+                  {char}
+                  <br />
+                </React.Fragment>
+              ))}
+          </div>
+        );
+        chordData.push(reversedChordLine);
+      }
+    }
+    // function mapChord(chord) {
+    //   function extractFirstElements(arrayOfArrays) {
+    //     return arrayOfArrays.map((subarray) => subarray[0]);
+    //   }
+    //   function processArray(arr) {
+    //     const findMinMaxValues = (arr) => {
+    //       const numericArray = arr
+    //         .filter((value) => value !== 'X' && value !== '0')
+    //         .map((value) => parseInt(value, 10));
+
+    //       if (numericArray.length === 0) {
+    //         return { smallest: null, largest: null };
+    //       }
+
+    //       const smallest = Math.min(...numericArray);
+    //       const largest = Math.max(...numericArray);
+
+    //       return { smallest, largest };
+    //     };
+
+    //     const adjustArray = (arr) => {
+    //       let adjustedArr = arr.slice();
+
+    //       const { smallest, largest } = findMinMaxValues(arr);
+
+    //       if (smallest > 1 && largest > 4) {
+    //         const reductionAmount = smallest - 1;
+
+    //         // Adjust the values in the new array
+    //         for (let i = 0; i < adjustedArr.length; i++) {
+    //           const value = adjustedArr[i];
+    //           if (value !== 'X' && value !== '0') {
+    //             adjustedArr[i] = (
+    //               parseInt(value, 10) - reductionAmount
+    //             ).toString();
+    //           }
+    //         }
+    //       }
+
+    //       return [adjustedArr, smallest];
+    //     };
+
+    //     return adjustArray(arr);
+    //   }
+    //   for (let i = 1; i < Object.values(chord).length; i++) {
+    //     const tempChordArray = extractFirstElements(chord[i]);
+    //     const tempChord = processArray(tempChordArray);
+    //     console.log(tempChord);
+    //     const chordItem = (
+    //       <div key={i} className='chord-item'>
+    //         <img
+    //           src={'src/frontend/assets/Images/blankTab.png'}
+    //           alt={`Chord ${i}`}
+    //         />
+    //         <div
+    //           className='fret-position'
+    //           style={{
+    //             top: `22px`,
+    //             left: `-3px`,
+    //           }}
+    //         >
+    //           {tempChord[1] > 1 ? tempChord[1] : null}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['1' + tempChord[0][0][0]][0]}`,
+    //             left: `${frets['1' + tempChord[0][0][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][0][1]}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['2' + tempChord[0][1][0]][0]}`,
+    //             left: `${frets['2' + tempChord[0][1][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][1][1]}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['3' + tempChord[0][2][0]][0]}`,
+    //             left: `${frets['3' + tempChord[0][2][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][2][1]}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['4' + tempChord[0][3][0]][0]}`,
+    //             left: `${frets['4' + tempChord[0][3][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][3][1]}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['5' + tempChord[0][4][0]][0]}`,
+    //             left: `${frets['5' + tempChord[0][4][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][4][1]}
+    //         </div>
+    //         <div
+    //           className='overlay-circle'
+    //           style={{
+    //             top: `${frets['6' + tempChord[0][5][0]][0]}`,
+    //             left: `${frets['6' + tempChord[0][5][0]][1]}`,
+    //           }}
+    //         >
+    //           {chord[i][5][1]}
+    //         </div>
+    //       </div>
+    //     );
+    //     chordData.push(chordItem);
+    //   }
+    // }
+
+    mapChord(currentChord);
+  }
+
+  const chunkArray = (arr, size) => {
+    const result = [];
+    for (let i = 0; i < arr.length; i += size) {
+      result.push(arr.slice(i, i + size));
+    }
+    return result;
+  };
+
+  const chunkedChordData = chunkArray(chordData, 4);
+
+  return (
+    <div className='grid-container'>
+      {chunkedChordData.map((row, rowIndex) => (
+        <div key={rowIndex} style={{ display: 'flex' }}>
+          {row.map((chord, colIndex) => (
+            <div key={colIndex} className='grid-item'>
+              <DraggableChord chordName={chord} />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

components/ChordSelect.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { allCNames } from '../../../chords/C-chords.mjs';
+
+export default function ChordSelect({ onSelect }) {
+  const [selectedOption, setSelectedOption] = useState('');
+  const handleSelect = (event) => {
+    const selectedChord = event.target.value;
+    setSelectedOption(selectedChord);
+    onSelect(selectedChord);
+  };
+
+  const options = allCNames;
+
+  return (
+    <div>
+      <label htmlFor='dropdown'>Select a chord </label>
+      <select id='dropdown' value={selectedOption} onChange={handleSelect}>
+        <option value=''>choose</option>
+        {options.map((option, index) => (
+          <option key={index} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

components/DraggableChord.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useDrag } from 'react-dnd';
+
+const DraggableChord = ({ chordName }) => {
+  const [{ isDragging }, drag] = useDrag({
+    type: 'CHORD',
+    item: { chordName },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  return (
+    <div
+      ref={drag}
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        cursor: 'move',
+        border: '1px solid black',
+        padding: '8px',
+        margin: '4px',
+      }}
+    >
+      {chordName}
+    </div>
+  );
+};
+
+export default DraggableChord;

components/FormAction.jsx

@@ -0,0 +1,24 @@
+export default function FormAction({
+    handleSubmit,
+    type='Button',
+    action='submit',
+    text
+}){
+    return(
+        <>
+        {
+            type==='Button' ?
+            <button
+                type={action}
+                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"
+                onSubmit={handleSubmit}
+            >
+
+                {text}
+            </button>
+            :
+            <></>
+        }
+        </>
+    )
+}

components/FormExtra.jsx

@@ -0,0 +1,24 @@
+export default function FormExtra(){
+    return(
+        <div className="flex items-center justify-between ">
+        <div className="flex items-center">
+          <input
+            id="remember-me"
+            name="remember-me"
+            type="checkbox"
+            className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
+          />
+          <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
+            Remember me
+          </label>
+        </div>
+
+        <div className="text-sm">
+          <a href="#" className="font-medium text-purple-600 hover:text-purple-500">
+            Forgot your password?
+          </a>
+        </div>
+      </div>
+
+    )
+}

components/Header.jsx

@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom';
+
+export default function Header({
+  heading,
+  paragraph,
+  linkName,
+  linkUrl = '#',
+}) {
+  return (
+    <div className='mb-10'>
+      <div className='flex justify-center'>
+        <img
+          alt='logo'
+          className='h-13 w-13'
+          src='src/frontend/assets/art lily.png'
+        />
+      </div>
+      <h2 className='mt-6 text-center text-3xl font-extrabold text-gray-900'>
+        {heading}
+      </h2>
+      <p className='mt-2 text-center text-sm text-gray-600 mt-5'>
+        {paragraph}{' '}
+        <Link
+          to={linkUrl}
+          className='font-medium text-purple-600 hover:text-purple-500'
+        >
+          {linkName}
+        </Link>
+      </p>
+    </div>
+  );
+}