import logo from './logo.svg';
import './App.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import week5 from './week5.png';
import week9 from './week9.png';
import week11 from './week11.png';
import week12 from './week12.png';
import week13 from './week13.png';
import week14 from './week14.png';

// Clear the existing HTML content
// document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <app>
</app>);

let mydata = [
  { 
      title: "Quiz Game", 
      description: "This project was on a game I made quizzing other people about my life using events and objects.",
      image_path: week5
  },
  { 
      title: "Mobile Map-Based App", 
      description: "This project was on a map I made that detailed the different dorms there were on Cornell University campuses using overleaf.",
      image_path: week9
  },
  { 
      title: "Ice Cream Chart", 
      description: "This project was on a chart I made using d3.js based on data derived from people's favorite ice cream flavor.",
      image_path: week11
  },
  { 
      title: "Friendship Graph", 
      description: "This project was on a connected undirected graph I made showing all of the friends I have in relation to myself and each other using d3.js.",
      image_path: week12
  },
  { 
    title: "Tutorial Game", 
    description: "This project was a tutorial I followed of a simple platformer collecting stars and avoiding obstacles using Phaser.js.",
    image_path: week13
  },
  { 
    title: "My Game", 
    description: "This project is modeled off of a tutorial of a paddle bouncing a ball off of blocks to break them using Phaser.js.",
    image_path: week14
  }
];

// console.log(mydata[0].image_path);

function Project() {
  return (
    <ul>
      {mydata.map((projects) => (
          <li key={projects}>{projects.title} <br></br>{projects.description} <img width="50%" height="20%" src={projects.image_path} alt="project image"></img></li>
      ))
      }
    </ul>
  );
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to my CS 50C Projects</h1>
      <Project />
    </div>
  );
  // return (
  //   <div className="App">
  //     <header className="App-header">
  //       <img src={logo} className="App-logo" alt="logo" />
  //       <p>
  //         Edit <code>src/App.js</code> and save to reload.
  //       </p>
  //       <a
  //         className="App-link"
  //         href="https://reactjs.org"
  //         target="_blank"
  //         rel="noopener noreferrer"
  //       >
  //         Learn React
  //       </a>
  //     </header>
  //   </div>
  // );
}

export default App;
