Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add robot images and sponsor stuff #31

Merged
merged 3 commits into from
Dec 13, 2024
Merged

Add robot images and sponsor stuff #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bf780c
Updated the amount for gold tier sponsorship
attackGoose Feb 17, 2024
3340875
Merge pull request #30 from Team5599/production
DeveloperBlue Dec 13, 2024
64ac522
Add thumbnail images to the Robots page
DeveloperBlue Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/Robots/[robot]/MediaContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const MediaContainer = ({robotItem}) => {
dynamicHeight={false}
preventMovementUntilSwipeScrollTolerance={true}
swipeScrollTolerance={50}
showThumbs={true}
style={{
position: 'relative',
display: 'flex',
Expand Down
157 changes: 99 additions & 58 deletions app/Robots/[robot]/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client"
import styles from './page.module.css'
import { useState, useEffect } from 'react'
import Image from 'next/image';

import Navbar from '@components/Navbar/Navbar'
import Footer from '@components/Footer/Footer'
Expand Down Expand Up @@ -44,6 +45,66 @@ const EventItem = ({eventData}) => {
)
}

const RobotNavigationButtons = ({visible, previousRobotItem, nextRobotItem}) => {
return (
<div
className={styles.navigationButtons}
visible={visible}
style={{marginTop : visible == 'mobile' ? 40 : 0}}
>
<ButtonLink
className={styles.button}
href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={previousRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap'
}}
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
</svg>
<span>
Previous Robot
</span>
</span>
</ButtonLink>
<ButtonLink
className={styles.button}
href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={nextRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap',
}}
>
<span>
Next Robot
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
</svg>
</span>
</ButtonLink>
</div>
)
}

export default function Robot({params}) {

Expand All @@ -67,9 +128,40 @@ export default function Robot({params}) {
}, [])

if (robotData == null){
return <span>
Loading
</span>
return (
<div
style={{
display : 'flex',
width : '100dvw',
height : '80dvh',
justifyContent : 'center',
alignItems : 'center'
}}
>
<div
style={{
display : 'flex',
flexDirection : 'column',
gap : 20,
justifyContent : 'center',
alignItems : 'center'
}}
>
<Image
src="/images/logo.png"
width={128}
height={128}
alt="The Sentinels Logo"
style={{
backgroundColor : '#0054b1'
}}
/>
<span>
Loading
</span>
</div>
</div>
)
}

const {robotItem, previousRobotItem, nextRobotItem} = (() => {
Expand All @@ -89,7 +181,8 @@ export default function Robot({params}) {
<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify'}}>
<div
style={{
display : 'flex'
display : 'flex',
justifyContent : 'space-between'
}}
>
<ButtonLink
Expand Down Expand Up @@ -118,6 +211,7 @@ export default function Robot({params}) {
</span>
</span>
</ButtonLink>
<RobotNavigationButtons visible='desktop' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
</div>

<h3>{robotItem.name}</h3>
Expand Down Expand Up @@ -190,60 +284,7 @@ export default function Robot({params}) {
</div>
</div>
</div>
<div
className={styles.navigationButtons}
>
<ButtonLink
className={styles.button}
href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={previousRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap'
}}
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
</svg>
<span>
Previous Robot
</span>
</span>
</ButtonLink>
<ButtonLink
className={styles.button}
href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={nextRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap',
}}
>
<span>
Next Robot
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
</svg>
</span>
</ButtonLink>
</div>
<RobotNavigationButtons visible='mobile' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
</div>
<SponsorshipIncentivesBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
<Footer/>
Expand Down
16 changes: 15 additions & 1 deletion app/Robots/[robot]/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@

.navigationButtons {
display: flex;
margin-top: 80px;
flex-direction: row;
justify-content: flex-end;
gap : 20px;
}

.navigationButtons[visible='mobile'] {
display: 'none';
visibility: hidden;
}

.sideDataContainer {
width : 320px;
display: flex;
Expand Down Expand Up @@ -63,4 +67,14 @@
flex-direction: column;
}

.navigationButtons[visible='desktop'] {
display: 'none';
visibility: hidden;
}

.navigationButtons[visible='mobile'] {
display: 'initial';
visibility: visible;
}

}
2 changes: 1 addition & 1 deletion app/Sponsors/Incentives/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default function SponsorIncentivesPage() {
Gold
</h3>
<h5>
$5000 — $9999
$10,000+
</h5>
</div>
<ul>
Expand Down
40 changes: 30 additions & 10 deletions app/components/RobotItem/RobotItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ const RobotItem = ({robotItem, index}) => {

const [isHovering, setHovering] = useState(false);

console.log("thumb", robotItem.thumbnail)

const thumbnail = (robotItem.thumbnail) ? `url(${robotItem.thumbnail})` : "url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)"

return (
<Link
href={`/Robots/${robotItem.name.replace(/ /g, "")}`}
Expand All @@ -20,7 +24,7 @@ const RobotItem = ({robotItem, index}) => {
backgroundColor : 'red',
aspectRatio : '1 / 1',
position : 'relative',
transform: `scale(${isHovering ? 1.05 : 1})`,
transform: `scale(${isHovering ? 1.05 : 1})`,
}}
onMouseEnter={() => {
setHovering(true);
Expand All @@ -37,11 +41,12 @@ const RobotItem = ({robotItem, index}) => {
bottom : 8,
left : -8,
right : 8,
backgroundColor : bgColor,
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)'
backgroundPosition : 'center center',
backgroundBlendMode: 'multiply',
backgroundImage : thumbnail
}}
>
</div>
Expand All @@ -51,21 +56,36 @@ const RobotItem = ({robotItem, index}) => {
position: 'relative',
width : '100%',
height : '100%',
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)',
overflow : 'hidden',
display : 'flex',
justifyContent: 'center',
alignItems : 'center'
}}
>
<div
className={styles.robotItemImageBox}
style={{
position: 'relative',
width : isHovering ? '105%' : '100%',
height : isHovering ? '105%' : '100%',
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition : 'center center',
backgroundBlendMode: 'multiply',
backgroundImage : thumbnail,
transition : 'width 0.4s, height 0.4s'
}}
/>
</div>
<div
style={{
display : 'flex',
flexDirection : 'column',
padding : 20,
position : 'absolute',
left : 0, right : 0,
left : 0,
right : 0,
bottom : 0,
background : 'linear-gradient(transparent, #000000ee)',
color : '#fff'
Expand Down
Loading