Made progress with homepage in WebApp.

Capstone-Projects-2024-Spring · Apr 8, 2024 · 1306fdd · 1306fdd
1 parent 92b8975
commit 1306fdd
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 5 deletions.
diff --git a/home/webapp/src/components/HomePage.jsx b/home/webapp/src/components/HomePage.jsx
@@ -1,9 +1,52 @@
-import { HomePageContainer } from "./styles/HomePage.styled"
+import { NewGameIcon, PlayIcon } from "./Icons"
+import { GalleryContainer, GameIcon, GameInfoContainer, HomePageContainer, GameMetaData, GameActionButtonsContainer, GameActionButton, GameActionButtonBackground, GameActionButtonForeground ,MetaDataText, MetaDataTitle} from "./styles/HomePage.styled"
 
 export default function HomePage() {
+
+  let gameNames = ["Mario Kart", "Legend of Zelda", "PacMan", "Tetris", "Pokemon"];
+
   return (
     <HomePageContainer>
-      Home Page
+
+      <GalleryContainer>
+
+        <GameIcon tabIndex={2}>
+          <NewGameIcon />
+        </GameIcon>
+
+        {gameNames.map((game, index)=>{
+            return(
+              <GameIcon tabIndex={2}>{game}</GameIcon>
+            )
+
+        })}
+
+
+
+      </GalleryContainer>
+
+      <GameInfoContainer>
+        <GameMetaData>
+            <MetaDataTitle><span>Super Mario</span></MetaDataTitle> 
+            <MetaDataText> Author: </MetaDataText>
+            <MetaDataText> Last Updated: </MetaDataText>
+
+        </GameMetaData>
+
+        <GameActionButtonsContainer>
+          <GameActionButton>
+            <GameActionButtonForeground>
+              <PlayIcon/>
+            </GameActionButtonForeground>
+
+            <GameActionButtonBackground></GameActionButtonBackground>
+
+          </GameActionButton>
+
+        </GameActionButtonsContainer>
+
+      </GameInfoContainer>
+
     </HomePageContainer>
   )
 }
diff --git a/home/webapp/src/components/Icons.jsx b/home/webapp/src/components/Icons.jsx
@@ -21,4 +21,19 @@ export function SettingsIcon() {
   return (<svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M43.9766 27.7877C44.081 27.0044 44.1332 26.1949 44.1332 25.3333C44.1332 24.4977 44.081 23.6622 43.9505 22.8788L49.251 18.7533C49.721 18.3877 49.8516 17.6827 49.5644 17.1605L44.551 8.4916C44.2377 7.91716 43.5849 7.73438 43.0105 7.91716L36.7699 10.4238C35.4643 9.4316 34.0805 8.59605 32.5399 7.96938L31.5999 1.33716C31.4955 0.71049 30.9732 0.266602 30.3466 0.266602H20.3199C19.6932 0.266602 19.1971 0.71049 19.0927 1.33716L18.1527 7.96938C16.6121 8.59605 15.2021 9.45771 13.9227 10.4238L7.68213 7.91716C7.10768 7.70827 6.45491 7.91716 6.14157 8.4916L1.15435 17.1605C0.841018 17.7088 0.945462 18.3877 1.46768 18.7533L6.76824 22.8788C6.63768 23.6622 6.53324 24.5238 6.53324 25.3333C6.53324 26.1427 6.58546 27.0044 6.71602 27.7877L1.41546 31.9133C0.945462 32.2788 0.814907 32.9838 1.10213 33.506L6.11546 42.1749C6.42879 42.7494 7.08157 42.9322 7.65602 42.7494L13.8966 40.2427C15.2021 41.2349 16.586 42.0705 18.1266 42.6972L19.0666 49.3294C19.1971 49.9561 19.6932 50.3999 20.3199 50.3999H30.3466C30.9732 50.3999 31.4955 49.9561 31.5738 49.3294L32.5138 42.6972C34.0543 42.0705 35.4644 41.2349 36.7438 40.2427L42.9844 42.7494C43.5588 42.9583 44.2116 42.7494 44.5249 42.1749L49.5382 33.506C49.8516 32.9316 49.721 32.2788 49.2249 31.9133L43.9766 27.7877ZM25.3332 34.7333C20.1632 34.7333 15.9332 30.5033 15.9332 25.3333C15.9332 20.1633 20.1632 15.9333 25.3332 15.9333C30.5032 15.9333 34.7332 20.1633 34.7332 25.3333C34.7332 30.5033 30.5032 34.7333 25.3332 34.7333Z" fill="white"/>
   </svg>)
+}
+
+export function NewGameIcon() {
+  return (<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M72.0832 38.625C72.0832 40.2819 70.74 41.625 69.0832 41.625H44.5832C42.9263 41.625 41.5832 42.9681 41.5832 44.625V69.375C41.5832 71.0319 40.24 72.375 38.5832 72.375H34.4165C32.7596 72.375 31.4165 71.0319 31.4165 69.375V44.625C31.4165 42.9681 30.0734 41.625 28.4165 41.625H3.9165C2.25965 41.625 0.916504 40.2819 0.916504 38.625V34.375C0.916504 32.7181 2.25965 31.375 3.9165 31.375H28.4165C30.0734 31.375 31.4165 30.0319 31.4165 28.375V3.625C31.4165 1.96815 32.7596 0.625 34.4165 0.625H38.5832C40.24 0.625 41.5832 1.96815 41.5832 3.625V28.375C41.5832 30.0319 42.9263 31.375 44.5832 31.375H69.0832C70.74 31.375 72.0832 32.7181 72.0832 34.375V38.625Z" fill="white"/>
+  </svg>
+  )
+}
+
+export function PlayIcon() {
+  return(<svg width="36" height="46" viewBox="0 0 36 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.833496 0.541748V45.4584L35.6668 23.0001L0.833496 0.541748Z" fill="white"/>
+  </svg>
+  )
+
 }
diff --git a/home/webapp/src/components/styles/HomePage.styled.jsx b/home/webapp/src/components/styles/HomePage.styled.jsx
@@ -3,9 +3,118 @@ import styled from "styled-components";
 export const HomePageContainer = styled.div`
   width: 100%;
   height: 100%;
-
-  background: rgba(0, 0, 0, 0.23);
+  background-color: ${({ theme }) => theme.colors.foreground};
   border-radius: 20px;
+  padding: 17px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 20px;
+`;
+
+export const GalleryContainer = styled.div`
+  display: flex;
+  gap: 9px;
+  // outline: 3px solid red;
+  width: 100%;
+  overflow: scroll;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+`;
+
+export const GameIcon = styled.div`
+  // outline: 3px solid green;
+  width: 165px;
+  height: 165px;
+  border-radius: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.active};
+  
+  outline: 4px solid ${({ theme }) => theme.colors.foreground};
+  outline-offset: -4px;
+
+  &:focus {
+    outline: none;
+    outline-offset: -4px;
+  }
+
+  flex-grow: 0;
+  flex-shrink: 0;
+`;
+
+export const GameInfoContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  outline: 3px solid yellow;
+  gap: 20px;
+  align-items: center;
+`;
+
+export const GameMetaData = styled.div`
+  outline: 3px solid red;
+  width: 50%;
+  gap: 10px;
+`;
+
+export const GameActionButtonsContainer = styled.div`
+  // outline: 3px solid green;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  height: fit-content;
+
+`;
+
+export const GameActionButton = styled.div`
+  position: relative;
+  width: 100px; 
+  height: 110px;
+`;
+
+export const GameActionButtonBackground = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // transform: translate(5px, 5px); /* Adjust for desired shadow offset */
+  z-index: 1;
+  background-color: ${({ theme }) => theme.colors.playSecondary};
+  border-radius: 15px;
+
+`;
 
-  padding: 20px;
+export const GameActionButtonForeground = styled.div`
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 100px;
+  // transform: translate(5px, 5px); /* Adjust for desired shadow offset */
+  z-index: 2;
+  background-color: ${({ theme }) => theme.colors.playPrimary};
+  border-radius: 15px;
+  justify-content: center;
+  align-items: center;
+
+  
+
+`;
+
+
+
+export const MetaDataText = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 28px;
+  font-weight: 600;
 `;
+
+export const MetaDataTitle = styled(MetaDataText)`
+  font-size: 39px;
+  font-weight:700;
+`;