diff --git a/client/src/Components/Footer.tsx b/client/src/Components/Footer.tsx index 581f594..6974543 100644 --- a/client/src/Components/Footer.tsx +++ b/client/src/Components/Footer.tsx @@ -6,9 +6,9 @@ export default function Footer() {
view the source code on github
-
© MNRVA 2023
+
©Min2rva 2023
- follow owltier on twitter + follow owltier on twitter (or dont idc)
) diff --git a/client/src/Components/Header.tsx b/client/src/Components/Header.tsx index a551729..eba4d54 100644 --- a/client/src/Components/Header.tsx +++ b/client/src/Components/Header.tsx @@ -1,7 +1,7 @@ export default function Header() { return (
-

owltier

+

owltier.com

) } \ No newline at end of file diff --git a/client/src/Components/Share.tsx b/client/src/Components/Share.tsx index 6bc189b..908b65a 100644 --- a/client/src/Components/Share.tsx +++ b/client/src/Components/Share.tsx @@ -9,10 +9,14 @@ function exportImage() { export default function Share(props: {current?: string, listContext: ListContext}) { const [list] = props.listContext const Items = [ + {action: save, text: 'save tier list'}, {action: publish, text: 'publish tier list'}, {link: 'https://twitter.com', text: 'share on twitter'}, {action: exportImage, text: 'export as image'}, ] + function save() { + alert('saved!') + } function publish() { console.log(list) } diff --git a/client/src/Components/TeamCard.tsx b/client/src/Components/TeamCard.tsx index f91b178..bd74ccc 100644 --- a/client/src/Components/TeamCard.tsx +++ b/client/src/Components/TeamCard.tsx @@ -2,7 +2,6 @@ import './Css/TeamCard.css' import './Css/TeamStyles.css' import { useSortable } from '@dnd-kit/sortable' import {CSS} from '@dnd-kit/utilities' -import TierBreak from './TierBreak' import { ListContext } from '../Pages/Build' // TODO figure out how to make transitions work smoothly @@ -29,7 +28,6 @@ export default function TeamCard(props: {id: string, listContext: ListContext, b

{props.id}

- ) } \ No newline at end of file diff --git a/client/src/Pages/Build.tsx b/client/src/Pages/Build.tsx index 8833a80..92f448c 100644 --- a/client/src/Pages/Build.tsx +++ b/client/src/Pages/Build.tsx @@ -4,6 +4,7 @@ import Nav from '../Components/Nav' import './Css/Main.css' import Share from '../Components/Share' import React from 'react' +import ListDefaults from './Build/ListDefaults' // TODO: List state only updates when a team is moved, SO // we should define the initial state of the list here, and @@ -14,35 +15,20 @@ import React from 'react' // TODO: Prop drilling list context all the way into TierBreak // components feels super gross, should figure out a better way -export type ListState = { format: string, na: Array, apac: Array, breaks: Array } +export type ListState = { + format: string, + na: Array, + apac: Array, + combined: Array, + breaks: Array +} export type ListContext = [list: ListState, setter: React.Dispatch>] let initialList = { format: 'split', - na: [ - "Boston Uprising", - "San Francisco Shock", - "Houston Outlaws", - "Los Angeles Gladiators", - "New York Excelsior", - "Washington Justice", - "Vegas Eternal", - "Toronto Defiant", - "Atlanta Reign", - "Florida Mayhem", - "London Spitfire", - "Los Angeles Valiant", - "Vancouver Titans" - ], - apac: [ - "Dallas Fuel", - "Seoul Infernal", - "Guangzhou Charge", - "Hangzhou Spark", - "Shanghai Dragons", - "Seoul Dynasty", - // "Chengdu Hunterss" - ], + na: ListDefaults.na, + apac: ListDefaults.apac, + combined: ListDefaults.apac.concat(ListDefaults.na), // 20 teams + first blank spot breaks: new Array(21).fill(0) } diff --git a/client/src/Pages/Build/APACRegion.tsx b/client/src/Pages/Build/APACRegion.tsx index 6734c98..1ae94ad 100644 --- a/client/src/Pages/Build/APACRegion.tsx +++ b/client/src/Pages/Build/APACRegion.tsx @@ -16,8 +16,7 @@ import { } from '@dnd-kit/core'; import { ListContext } from '../Build'; import { useOutletContext } from 'react-router-dom'; - -// TODO fix styles +import TierBreak from '../../Components/TierBreak'; export default function Combined() { const lc = useOutletContext() @@ -30,7 +29,7 @@ export default function Combined() { coordinateGetter: sortableKeyboardCoordinates, }) ) - let breakId = 0 + let breakId = -1 return (
{items.map((id) => { breakId += 1 - return + return ( + <> + + {/* should not render the very last tier break */} + {breakId != items.length-1 ? : null} + + ) })} @@ -64,6 +69,7 @@ export default function Combined() { format: 'apac', na: list.na, apac: narr, + combined: list.combined, breaks: list.breaks }) return narr diff --git a/client/src/Pages/Build/Combined.tsx b/client/src/Pages/Build/Combined.tsx index 003e01a..4b74a4b 100644 --- a/client/src/Pages/Build/Combined.tsx +++ b/client/src/Pages/Build/Combined.tsx @@ -16,14 +16,15 @@ import { } from '@dnd-kit/core'; import { ListContext } from '../Build'; import { useOutletContext } from 'react-router-dom'; +import TierBreak from '../../Components/TierBreak'; -// TODO fix styles +// TODO fix bottom margin export default function Combined() { const lc = useOutletContext() const [list, setList] = lc - const {na, apac} = list - const teams = na.concat(apac) + const {combined} = list + const teams = combined const [items, setItems] = useState(teams) const sensors = useSensors( useSensor(PointerSensor), @@ -31,7 +32,7 @@ export default function Combined() { coordinateGetter: sortableKeyboardCoordinates, }) ) - let breakId = 0 + let breakId = -1 return (
{items.map((id) => { breakId++ - return + return ( + <> + + {/* should not render the very last tier break */} + {breakId != items.length-1 ? : null} + + ) })} @@ -63,8 +70,9 @@ export default function Combined() { let narr = arrayMove(items, oldIndex, newIndex); setList({ format: 'combined', - na: narr, + na: list.na, apac: list.apac, + combined: narr, breaks: list.breaks }) return narr diff --git a/client/src/Pages/Build/ListDefaults.tsx b/client/src/Pages/Build/ListDefaults.tsx new file mode 100644 index 0000000..7aaebff --- /dev/null +++ b/client/src/Pages/Build/ListDefaults.tsx @@ -0,0 +1,27 @@ +const ListDefaults = { + na: [ + "Boston Uprising", + "San Francisco Shock", + "Houston Outlaws", + "Los Angeles Gladiators", + "New York Excelsior", + "Washington Justice", + "Vegas Eternal", + "Toronto Defiant", + "Atlanta Reign", + "Florida Mayhem", + "London Spitfire", + "Los Angeles Valiant", + "Vancouver Titans" + ], + apac: [ + "Dallas Fuel", + "Seoul Infernal", + "Guangzhou Charge", + "Hangzhou Spark", + "Shanghai Dragons", + "Seoul Dynasty", + // "Chengdu Hunterss" + ], +} +export default ListDefaults \ No newline at end of file diff --git a/client/src/Pages/Build/NARegion.tsx b/client/src/Pages/Build/NARegion.tsx index f9c8bc2..fc299cf 100644 --- a/client/src/Pages/Build/NARegion.tsx +++ b/client/src/Pages/Build/NARegion.tsx @@ -16,6 +16,7 @@ import { } from '@dnd-kit/core'; import { ListContext } from '../Build'; import { useOutletContext } from 'react-router-dom'; +import TierBreak from '../../Components/TierBreak'; // TODO fix styles @@ -30,7 +31,7 @@ export default function Combined() { coordinateGetter: sortableKeyboardCoordinates, }) ) - let breakId = 0 + let breakId = -1 return (
{items.map((id) => { breakId += 1 - return + return ( + <> + + {/* should not render the very last tier break */} + {breakId != items.length-1 ? : null} + + ) })} @@ -64,6 +71,7 @@ export default function Combined() { format: 'na', na: narr, apac: list.apac, + combined: list.combined, breaks: list.breaks }) return narr diff --git a/client/src/Pages/Build/SplitRegion.tsx b/client/src/Pages/Build/SplitRegion.tsx index 187539c..c66612e 100644 --- a/client/src/Pages/Build/SplitRegion.tsx +++ b/client/src/Pages/Build/SplitRegion.tsx @@ -16,6 +16,7 @@ import { useSensors, } from '@dnd-kit/core'; import { useOutletContext } from 'react-router-dom'; +import TierBreak from '../../Components/TierBreak'; export default function SplitRegion() { const lc = useOutletContext() @@ -29,7 +30,8 @@ export default function SplitRegion() { coordinateGetter: sortableKeyboardCoordinates, }) ) - let breakId = 0 + // start at -1 so that the first break is id 0 + let breakId = -1 return (
{nateams.map((id) => { breakId += 1 - return + return ( + <> + + {/* should not render the very last tier break */} + {breakId != nateams.length-1 ? : null} + + ) })}
@@ -66,7 +74,13 @@ export default function SplitRegion() { > {apacteams.map((id) => { breakId += 1 - return + return ( + <> + + {/* should not render the very last tier break */} + {breakId != (nateams.length+apacteams.length)-1 ? : null} + + ) })}
@@ -87,6 +101,7 @@ export default function SplitRegion() { format: 'split', na: narr, apac: list.apac, + combined: list.combined, breaks: list.breaks }) return narr @@ -107,6 +122,7 @@ export default function SplitRegion() { format: 'split', na: list.na, apac: narr, + combined: list.combined, breaks: list.breaks }) return narr diff --git a/client/src/Utils/Cookies.ts b/client/src/Utils/Cookies.ts new file mode 100644 index 0000000..4de58e4 --- /dev/null +++ b/client/src/Utils/Cookies.ts @@ -0,0 +1,23 @@ +export function getCookie(name: string): string|null { + const nameLenPlus = (name.length + 1); + return document.cookie + .split(';') + .map(c => c.trim()) + .filter(cookie => { + return cookie.substring(0, nameLenPlus) === `${name}=`; + }) + .map(cookie => { + return decodeURIComponent(cookie.substring(nameLenPlus)); + })[0] || null; +} + +export function setCookie(name: string, val: string) { + const date = new Date(); + const value = val; + + // Set it expire in 7 days + date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); + + // Set it + document.cookie = name+"="+value+"; expires="+date.toUTCString()+"; path=/"; +} \ No newline at end of file