Merge pull request #105 from TreeHacks/treehacks-2023

Treehacks 2023

Author: sathviknallamalli

package-lock.json

@@ -9,8 +9,8 @@ import Projects from "./js/projects.jsx";
 import Hackpacks from "./js/hackpacks.jsx";
 import RoomStatus from "./js/room-status.jsx";
 import Apis from "./js/apis/Apis.jsx";
-
 import Challenge from "./js/challenge.jsx";
+
 import "./favicons/favicons";
 import "./index.scss";
 import {
@@ -21,6 +21,9 @@ import {
 } from "react-router-dom";
 import Prizes from "./js/prizes/Prizes.jsx";
 import Leaderboard from "./js/leaderboard.jsx";
+import Maps from "./js/maps/Maps.jsx";
+import Top10 from "./js/top10.jsx";
+import ScavLocation from "./js/scavLocation.jsx";
 
 const reload = () => window.location.reload();
 
@@ -52,9 +55,12 @@ class Main extends React.Component {
             <Hackpacks />
           </div>
         </div>
-        <div id="group">
+        {/* <div id="group">
           <Leaderboard />
-        </div>
+          <div id="sidebar">
+            <Top10 />
+          </div>
+        </div> */}
       </div>
     );
   }
@@ -83,14 +89,17 @@ function App() {
             from="/faq"
             to="https://treehacks.quip.com/FHPoABlrGBLN"
           />
-          <CustomRedirect
+          {/* <CustomRedirect
             from="/maps"
             to="https://treehacks.quip.com/tOUKAghhGiby/Maps-"
-          />
+          /> */}
           <CustomRedirect from="/expo" to="https://treehacks.github.io/expo" />
           <Route exact path="/" component={Main} />
-          <Route exact path="/_room/:roomId" component={RoomStatus} />
+          {/*  <Route exact path="/_room/:roomId" component={RoomStatus} /> */}
+          <Route exact path="/scavhunt/:locationID" component={ScavLocation} />
           <Route exact path="/apisresources" component={Apis} />
+          <Route exact path="/maps" component={Maps} />
+          <Route exact path="/leaderboard" component={Top10} />
           <Route exact path="/prizes" component={Prizes} />
           <Route exact path="/challenges/:challengeId" component={Challenge} />
           <Route path="/apple-app-site-association" onEnter={reload} />

src/index.js

@@ -88,3 +88,4 @@ body {
 @import "sass/apis";
 @import "sass/challenge";
 @import "sass/leaderboard";
+@import "sass/maps";

src/index.scss

@@ -7,19 +7,19 @@ class Announcements extends React.Component {
     super(props);
 
     this.state = {
-      announcements: []
+      announcements: [],
     };
 
     this.md = new Remarkable({
       breaks: true,
-      linkify: true
+      linkify: true,
     });
   }
 
   componentWillMount() {
     fetch("https://root.treehacks.com/api/announcements")
-      .then(r => r.json())
-      .then(announcements => {
+      .then((r) => r.json())
+      .then((announcements) => {
         if (announcements.error) {
           throw new Error(JSON.stringify(announcements.error));
         }
@@ -30,18 +30,18 @@ class Announcements extends React.Component {
             content: this.md
               .render(emojify(text, { output: "unicode" }))
               .replace(/\s*<!(?:channel|here)>\s*/g, "") // remove @channel
-              .replace(/<.*?\|(.*?)>/g, "#$1") // reformat slack links
+              .replace(/<.*?\|(.*?)>/g, "#$1"), // reformat slack links
           };
         });
         this.setState({ announcements });
         this.props.setAnnouncementData(announcements);
       })
-      .catch(e => {
+      .catch((e) => {
         let announcements = [
           {
             content: `Failed to fetch announcements :( ${e}`,
-            ts: Date.now() / 1000
-          }
+            ts: Date.now() / 1000,
+          },
         ];
         this.setState({ announcements });
         this.props.setAnnouncementData(announcements);

src/js/announcements.jsx

@@ -61,6 +61,40 @@
       "link": "https://github.com/TreeHacks/hackpack-web-next"
     }
   ],
+  "preHackathonWorkshops": [
+    {
+      "name": "Education Technology with Professor Dan Schwartz",
+      "link": "https://drive.google.com/file/d/1FvLw7bmcZt64pr3SK0IUZs6vQzqBt4hG/view?usp=sharing"
+    },
+    {
+      "name": "Healthcare and Technology with Dr. Timothy Chou",
+      "link": "https://stanford.zoom.us/rec/share/dGaRxfSRv0h691Q72tf4WwtJ5ieEfErov_e6FD00-O2iWL-_weuXi3syj8sKWx8J.63k553i3yMCCE_OS"
+    },
+    {
+      "name": "Web Development",
+      "link": "https://stanford.zoom.us/rec/share/xFJwDSMvMfisALgV3qIy6ZxJD1dUoo-eCFzcJbQpBxgmrswBMyIKazT-WLdLLqYG.0hWMsW9cM7VgPCDk"
+    },
+    {
+      "name": "Web Development Source Code",
+      "link": "https://github.com/TreeHacks/treehacks-wordle-clone-2023"
+    },
+    {
+      "name": "ZetaChain: What is interoperability? What is an omnichain smart contract?",
+      "link": "https://stanford.zoom.us/rec/share/-bAuhxxC0zb3dr8KXC_6Z960q3LwZE5WDxqotIs7AoPKmM13rNJh6RBk1vME8hs.GPb_FdsvQPygLmDd"
+    },
+    {
+      "name": "RF Design in Microwave Office",
+      "link": "https://stanford.zoom.us/rec/share/H3_xJoMCx11ocYB9GX7nWpH2O7z1BZhJrGXh-3anRyZk21wcyMHNZVU31dijKoS1.Jnj4_qom3Jb5RBYR"
+    },
+    {
+      "name": "Android App Development",
+      "link": "https://stanford.zoom.us/rec/share/WcPLsitD3ePpbM7kPz9KbKp-4PmD6Lbl1zN222Qses2HDOBfYF15Tc36pOvxbnWj.1SzQ4zUEuJPdOuy5"
+    },
+    {
+      "name": "Android App Development Source Code",
+      "link": "https://github.com/TreeHacks/android-firebase-todo-list-workshop-src-code"
+    }
+  ],
   "projects": [
     {
       "name": "Healthcare",

src/js/content.json

@@ -115,7 +115,6 @@ export default Vue.component("event-schedule", {
     )
       .then((r) => r.json())
       .then((data) => {
-        console.log(data);
         // Schedule shell
         var schedule = [
           {

src/js/event-schedule.js

@@ -1,24 +1,35 @@
-import React from 'react';
-import {hackpacks} from './content.json';
+import React from "react";
+import { hackpacks, preHackathonWorkshops } from "./content.json";
 
 function Hackpacks() {
   var content = [];
   for (var i = 0; i < hackpacks.length; i++) {
-    content.push(HackPack(hackpacks[i].name, hackpacks[i].link))
+    content.push(HackPack(hackpacks[i].name, hackpacks[i].link));
+  }
+
+  var content2 = [];
+  for (var i = 0; i < preHackathonWorkshops.length; i++) {
+    content2.push(
+      HackPack(preHackathonWorkshops[i].name, preHackathonWorkshops[i].link)
+    );
   }
   return (
     <div id="hackpacks" className="section">
       <h1 className="section-heading">Hackpacks</h1>
       <hr />
-      <div className="container">
-        {content}
+      <div className="container">{content}</div>
+      <br />
+      <div id="preHackathon">
+        <h1 className="section-heading">Pre-Hackathon Workshops</h1>
+        <hr />
+        <div className="container">{content2}</div>
       </div>
     </div>
   );
 }
 
 function HackPack(name, link) {
-  return(
+  return (
     <a href={link} target="_blank">
       <button className="main-button inverted-button">{name}</button>
     </a>

src/js/hackpacks.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import floor1 from "./floor1.png";
+import floor2 from "./floor2.png";
+import floor3 from "./floor3.png";
+import basement from "./basement.png";
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tag: null,
+      searchInput: "",
+    };
+  }
+
+  componentDidMount() {}
+
+  render() {
+    return (
+      <div>
+        <div
+          style={{ paddingTop: "0px", paddingBottom: "40px" }}
+          className="prizes"
+        >
+          <h1
+            className="api-title"
+            style={{ marginTop: "0px", paddingTop: "20px" }}
+          >
+            Maps
+          </h1>
+          <p>
+            Take a look at the floor plans for each floor of the Huang Center
+          </p>
+          <div id="map">
+            <div id="floorContainer">
+              <h3>Basement</h3>
+              <img src={basement} alt="logo" />
+            </div>
+            <div id="floorContainer">
+              <h3>First Floor</h3>
+              <img src={floor1} alt="logo" />
+            </div>
+            <div id="floorContainer">
+              <h3>Second Floor</h3>
+              <img src={floor2} alt="logo" />
+            </div>
+            <div id="floorContainer">
+              <h3>Third Floor</h3>
+              <img src={floor3} alt="logo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}