gabehf
/
owltier.com
mirror of https://github.com/gabehf/owltier.com.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

list state tracking

Browse Source
main
Gabe Farrell 3 years ago
parent 3233834df6
commit b80ed99d6c
18 changed files with 223 additions and 110 deletions
Show Stats Download Patch File Download Diff File

3
client/README.md
Unescape View File

@ -1,2 +1,3 @@
# Dev Notes
should use this probably https://react-dnd.github.io/
## Tasks
https://www.notion.so/Client-Tasks-5ebfdaf9855144a78b975f960201ddfb

4
client/src/Components/Css/Menus.css
Unescape View File

@ -3,6 +3,7 @@
width: 200px;
display: flex;
flex-direction: column;
margin-bottom: 35px;
}
.nav-right {
align-items: flex-end;
@ -22,3 +23,6 @@
border-bottom: 1px solid white;
margin-bottom: 5px;
}
.pointer:hover {
cursor: pointer;
}

2
client/src/Components/Css/TeamCard.css
Unescape View File

@ -5,7 +5,7 @@
height: 48px; */
width: 240px;
height: 36px;
margin: -2px auto -2px auto;
margin: -4px auto -4px auto;
cursor: grab;
background-size: contain;
}

19
client/src/Components/Menu.tsx
Unescape View File

@ -1,14 +1,29 @@
import { Link } from 'react-router-dom'
interface MenuItem {
link: string
link?: string
action?: React.MouseEventHandler<HTMLAnchorElement>
text: string
}
export default function Menu(props: {title: string, items: Array<MenuItem>, current: string, align: string}) {
export default function Menu(props: {
title: string,
items: Array<MenuItem>,
current?: string,
align: string,
internal?: boolean
}) {
let menuitems = []
for (let item of props.items) {
if (props.internal) {
menuitems.push(<Link to={`${item['link']}`} className='nav-link'>{item['text']}</Link>)
} else {
if (item.action !== undefined) {
menuitems.push(<a onClick={item.action} className='nav-link pointer'>{item['text']}</a>)
} else {
menuitems.push(<a href={`${item['link']}`} className='nav-link'>{item['text']}</a>)
}
}
}
let align = props.align == 'left' ? 'nav-left' : 'nav-right'
return (

1
client/src/Components/Nav.tsx
Unescape View File

@ -13,6 +13,7 @@ export default function Options(props: {current: string}) {
items={Items}
current={props.current}
align='right'
internal
/>
)
}

1
client/src/Components/Options.tsx
Unescape View File

@ -15,6 +15,7 @@ export default function Options(props: {current: string}) {
items={Items}
current={props.current}
align='left'
internal
/>
)
}

27
client/src/Components/Share.tsx
Unescape View File

@ -0,0 +1,27 @@
import Menu from './Menu'
import './Css/Menus.css'
import type { ListContext } from '../Pages/Build'
function exportImage() {
alert('Image exported!')
}
export default function Share(props: {current?: string, listContext: ListContext}) {
const [list] = props.listContext
const Items = [
{action: publish, text: 'publish tier list'},
{link: 'https://twitter.com', text: 'share on twitter'},
{action: exportImage, text: 'export as image'},
]
function publish() {
console.log(list)
}
return (
<Menu
title='Share'
items={Items}
current={props.current}
align='left'
/>
)
}

5
client/src/Components/TeamCard.tsx
Unescape View File

@ -3,11 +3,12 @@ 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
export default function TeamCard(props: {id: string}) {
export default function TeamCard(props: {id: string, listContext: ListContext, breakId: number}) {
let teamCss = props.id.replaceAll(' ', '').toLowerCase()
const {
attributes,
@ -28,7 +29,7 @@ export default function TeamCard(props: {id: string}) {
<div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
<h3>{props.id}</h3>
</div>
<TierBreak />
<TierBreak listContext={props.listContext} id={props.breakId} />
</>
)
}

16
client/src/Components/TierBreak.tsx
Unescape View File

@ -1,13 +1,25 @@
import { useState } from 'react';
import './Css/TierBreak.css'
import { ListContext } from '../Pages/Build';
export default function TierBreak() {
export default function TierBreak(props: {listContext: ListContext, id: number}) {
const [isActive, setActive] = useState(false);
const [list, setList] = props.listContext
return (
<div className='tier-break'>
<div
className={'triangle-right' + (isActive ? ' active' : '')}
onClick={() => setActive(!isActive)}
onClick={() => {
setActive(!isActive)
let nb = list.breaks
nb[props.id] = isActive ? 0 : 1
setList({
format: list.format,
na: list.na,
apac: list.apac,
breaks: nb
})
}}
>
</div>
<hr className={'break-line' + (isActive ? ' active' : '')}/>

48
client/src/Pages/Build.tsx
Unescape View File

@ -2,14 +2,60 @@ import { Outlet } from 'react-router-dom'
import Options from '../Components/Options'
import Nav from '../Components/Nav'
import './Css/Main.css'
import Share from '../Components/Share'
import React from 'react'
// TODO: List state only updates when a team is moved, SO
// we should define the initial state of the list here, and
// the build components will use that list as initial state
// TODO: Need to track tier splits
// 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<string>, apac: Array<string>, breaks: Array<number> }
export type ListContext = [list: ListState, setter: React.Dispatch<React.SetStateAction<ListState>>]
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"
],
// 20 teams + first blank spot
breaks: new Array(21).fill(0)
}
export default function Build() {
const listContext = React.useState<ListState>(initialList)
return (
<div className="page-content">
<div className="left-menus">
<Options current='split-region' />
<Share listContext={listContext} />
</div>
<Outlet />
<Outlet context={listContext}/>
<div className="right-menus">
<Nav current='build' />
</div>

32
client/src/Pages/Build/APACRegion.tsx
Unescape View File

@ -14,27 +14,23 @@ import {
useSensor,
useSensors,
} from '@dnd-kit/core';
const teams = [
"Seoul Infernal",
"Guangzhou Charge",
"Hangzhou Spark",
"Shanghai Dragons",
"Dallas Fuel",
"Seoul Dynasty",
// "Chengdu Hunters",
]
import { ListContext } from '../Build';
import { useOutletContext } from 'react-router-dom';
// TODO fix styles
export default function Combined() {
const [items, setItems] = useState(teams)
const lc = useOutletContext<ListContext>()
const [list, setList] = lc
const {apac} = list
const [items, setItems] = useState(apac)
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
)
let breakId = 0
return (
<div>
<DndContext
@ -46,7 +42,10 @@ export default function Combined() {
items={items}
strategy={verticalListSortingStrategy}
>
{items.map((id) => <TeamCard id={id} />)}
{items.map((id) => {
breakId += 1
return <TeamCard id={id} listContext={lc} breakId={breakId} />
})}
</SortableContext>
</DndContext>
</div>
@ -60,7 +59,14 @@ export default function Combined() {
const oldIndex = is.indexOf(active.id);
const newIndex = is.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
let narr = arrayMove(items, oldIndex, newIndex);
setList({
format: 'apac',
na: list.na,
apac: narr,
breaks: list.breaks
})
return narr
});
}
}

54
client/src/Pages/Build/Combined.tsx
Unescape View File

@ -14,33 +14,16 @@ import {
useSensor,
useSensors,
} from '@dnd-kit/core';
const teams = [
"San Francisco Shock",
"Houston Outlaws",
"Boston Uprising",
"Los Angeles Gladiators",
"New York Excelsior",
"Washington Justice",
"Vegas Eternal",
"Toronto Defiant",
"Atlanta Reign",
"Florida Mayhem",
"London Spitfire",
"Los Angeles Valiant",
"Vancouver Titans",
"Seoul Infernal",
"Guangzhou Charge",
"Hangzhou Spark",
"Shanghai Dragons",
"Dallas Fuel",
"Seoul Dynasty",
// "Chengdu Hunters"
]
import { ListContext } from '../Build';
import { useOutletContext } from 'react-router-dom';
// TODO fix styles
export default function Combined() {
const lc = useOutletContext<ListContext>()
const [list, setList] = lc
const {na, apac} = list
const teams = na.concat(apac)
const [items, setItems] = useState(teams)
const sensors = useSensors(
useSensor(PointerSensor),
@ -48,16 +31,9 @@ export default function Combined() {
coordinateGetter: sortableKeyboardCoordinates,
})
)
let breakId = 0
return (
<div
// style={{
// display: 'flex',
// flexDirection: 'column',
// flexWrap: 'wrap',
// height: '600px',
// width: '700px',
// }}
>
<div>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
@ -67,7 +43,10 @@ export default function Combined() {
items={items}
strategy={verticalListSortingStrategy}
>
{items.map((id) => <TeamCard id={id} />)}
{items.map((id) => {
breakId++
return <TeamCard id={id} listContext={lc} breakId={breakId} />
})}
</SortableContext>
</DndContext>
</div>
@ -81,7 +60,14 @@ export default function Combined() {
const oldIndex = is.indexOf(active.id);
const newIndex = is.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
let narr = arrayMove(items, oldIndex, newIndex);
setList({
format: 'combined',
na: narr,
apac: list.apac,
breaks: list.breaks
})
return narr
});
}
}

38
client/src/Pages/Build/NARegion.tsx
Unescape View File

@ -14,33 +14,23 @@ import {
useSensor,
useSensors,
} from '@dnd-kit/core';
const teams = [
"San Francisco Shock",
"Houston Outlaws",
"Boston Uprising",
"Los Angeles Gladiators",
"New York Excelsior",
"Washington Justice",
"Vegas Eternal",
"Toronto Defiant",
"Atlanta Reign",
"Florida Mayhem",
"London Spitfire",
"Los Angeles Valiant",
"Vancouver Titans",
]
import { ListContext } from '../Build';
import { useOutletContext } from 'react-router-dom';
// TODO fix styles
export default function Combined() {
const [items, setItems] = useState(teams)
const lc = useOutletContext<ListContext>()
const [list, setList] = lc
const {na} = list
const [items, setItems] = useState(na)
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
)
let breakId = 0
return (
<div>
<DndContext
@ -52,7 +42,10 @@ export default function Combined() {
items={items}
strategy={verticalListSortingStrategy}
>
{items.map((id) => <TeamCard id={id} />)}
{items.map((id) => {
breakId += 1
return <TeamCard id={id} listContext={lc} breakId={breakId} />
})}
</SortableContext>
</DndContext>
</div>
@ -66,7 +59,14 @@ export default function Combined() {
const oldIndex = is.indexOf(active.id);
const newIndex = is.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
let narr = arrayMove(items, oldIndex, newIndex);
setList({
format: 'na',
na: narr,
apac: list.apac,
breaks: list.breaks
})
return narr
});
}
}

62
client/src/Pages/Build/SplitRegion.tsx
Unescape View File

@ -1,5 +1,6 @@
import { useState } from 'react'
import { useState, } from 'react'
import TeamCard from '../../Components/TeamCard'
import type { ListContext } from '../Build'
import {
arrayMove,
SortableContext,
@ -14,34 +15,12 @@ import {
useSensor,
useSensors,
} from '@dnd-kit/core';
const na = [
"San Francisco Shock",
"Houston Outlaws",
"Boston Uprising",
"Los Angeles Gladiators",
"New York Excelsior",
"Washington Justice",
"Vegas Eternal",
"Toronto Defiant",
"Atlanta Reign",
"Florida Mayhem",
"London Spitfire",
"Los Angeles Valiant",
"Vancouver Titans"
]
const apac = [
"Seoul Infernal",
"Guangzhou Charge",
"Hangzhou Spark",
"Shanghai Dragons",
"Dallas Fuel",
"Seoul Dynasty",
// "Chengdu Hunters",
]
import { useOutletContext } from 'react-router-dom';
export default function SplitRegion() {
const lc = useOutletContext<ListContext>()
const [list, setList] = lc
const {na, apac} = list
const [nateams, setNA] = useState(na)
const [apacteams, setAPAC] = useState(apac)
const sensors = useSensors(
@ -50,6 +29,7 @@ export default function SplitRegion() {
coordinateGetter: sortableKeyboardCoordinates,
})
)
let breakId = 0
return (
<div style={{
display: 'flex',
@ -67,7 +47,10 @@ export default function SplitRegion() {
items={nateams}
strategy={verticalListSortingStrategy}
>
{nateams.map((id) => <TeamCard id={id} />)}
{nateams.map((id) => {
breakId += 1
return <TeamCard listContext={lc} id={id} breakId={breakId}/>
})}
</SortableContext>
</div>
</DndContext>
@ -81,7 +64,10 @@ export default function SplitRegion() {
items={apacteams}
strategy={verticalListSortingStrategy}
>
{apacteams.map((id) => <TeamCard id={id} />)}
{apacteams.map((id) => {
breakId += 1
return <TeamCard listContext={lc} id={id} breakId={breakId}/>
})}
</SortableContext>
</div>
</DndContext>
@ -96,7 +82,14 @@ export default function SplitRegion() {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(nateams, oldIndex, newIndex);
let narr = arrayMove(nateams, oldIndex, newIndex);
setList({
format: 'split',
na: narr,
apac: list.apac,
breaks: list.breaks
})
return narr
});
}
}
@ -109,7 +102,14 @@ export default function SplitRegion() {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(apacteams, oldIndex, newIndex);
let narr = arrayMove(apacteams, oldIndex, newIndex);
setList({
format: 'split',
na: list.na,
apac: narr,
breaks: list.breaks
})
return narr
});
}
}

2
client/src/Pages/Css/Main.css
Unescape View File

@ -1,5 +1,5 @@
.page-content {
width: 1060px;
width: 920px;
display: flex;
justify-content: space-between;
}

10
client/src/Pages/Home.tsx
Unescape View File

@ -1,8 +1,16 @@
import { Outlet } from 'react-router-dom'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import Header from '../Components/Header'
import Footer from '../Components/Footer'
import { useEffect } from 'react'
export default function Home() {
const navigate = useNavigate()
const location = useLocation()
useEffect(() => {
if (location.pathname == '/') {
navigate('/build/split-region')
}
})
return (
<>
<div className='full-container'>

2
go.mod
Unescape View File

@ -4,6 +4,7 @@ go 1.20
require (
github.com/aws/aws-sdk-go-v2 v1.18.0
github.com/aws/aws-sdk-go-v2/credentials v1.13.23
github.com/go-chi/chi/v5 v5.0.8
github.com/golang-jwt/jwt/v5 v5.0.0
github.com/google/uuid v1.3.0
@ -14,7 +15,6 @@ require (
)
require (
github.com/aws/aws-sdk-go-v2/credentials v1.13.23 // indirect
github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.13.3 // indirect
github.com/aws/aws-sdk-go-v2/internal/configsources v1.1.33 // indirect
github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.4.27 // indirect

5
go.sum
Unescape View File

@ -32,19 +32,23 @@ github.com/aws/aws-sdk-go-v2/service/sts v1.19.0 h1:2DQLAKDteoEDI8zpCzqBMaZlJuoE
github.com/aws/aws-sdk-go-v2/service/sts v1.19.0/go.mod h1:BgQOMsg8av8jset59jelyPW7NoZcZXLVpDsXunGDrk8=
github.com/aws/smithy-go v1.13.5 h1:hgz0X/DX0dGqTYpGALqXJoRKRj5oQ7150i5FdTePzO8=
github.com/aws/smithy-go v1.13.5/go.mod h1:Tg+OJXh4MB2R/uN61Ko2f6hTZwB/ZYGOtib8J3gBHzA=
github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/go-chi/chi/v5 v5.0.8 h1:lD+NLqFcAi1ovnVZpsnObHGW4xb4J8lNmoYVfECH1Y0=
github.com/go-chi/chi/v5 v5.0.8/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
github.com/google/go-cmp v0.5.8 h1:e6P7q2lk1O+qJJb4BtCQXlK8vWEO8V1ZeuEdJNOqZyg=
github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/jmespath/go-jmespath v0.4.0 h1:BEgLn5cpjn8UN1mAw4NjwDrS35OdebyEtFe+9YPoQUg=
github.com/jmespath/go-jmespath v0.4.0/go.mod h1:T8mJZnbsbmF+m6zOOFylbeCJqk5+pHWvzYPziyZiYoo=
github.com/jmespath/go-jmespath/internal/testify v1.5.1 h1:shLQSRRSCCPj3f2gpwzGwWFoC7ycTf1rcQZHOlsJ6N8=
github.com/jmespath/go-jmespath/internal/testify v1.5.1/go.mod h1:L3OGu8Wl2/fWfCI6z80xFu9LTZmf1ZRjMHUOPmWr69U=
github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
github.com/wagslane/go-password-validator v0.3.0 h1:vfxOPzGHkz5S146HDpavl0cw1DSVP061Ry2PX0/ON6I=
@ -54,4 +58,5 @@ golang.org/x/crypto v0.8.0/go.mod h1:mRqEX+O9/h5TFCrQhkgjo2yKi0yYA+9ecGkdQoHrywE
golang.org/x/exp v0.0.0-20230425010034-47ecfdc1ba53 h1:5llv2sWeaMSnA3w2kS57ouQQ4pudlXrR0dCgw51QK9o=
golang.org/x/exp v0.0.0-20230425010034-47ecfdc1ba53/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

Write Preview
Loading…
Cancel
Save