add DnD and team cards

client/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1"

client/src/Components/Css/TeamCard.css

@@ -1,12 +1,18 @@
 .team-card {
     background-color: darkgray;
-    border-radius: 6px;
+    border-radius: 15px;
-    width: 260px;
+    width: 320px;
     height: 48px;
     margin: 10px auto;
+    cursor: grab;
+}
+
+.team-card:active {
+    cursor: grabbing;
 }
 
 h3 {
+    display: none;
     text-align: left;
     padding: 10px 0px 0px 15px;
     margin: 0px;

client/src/Components/Css/TeamStyles.css

@@ -1,17 +1,81 @@
 .sanfranciscoshock {
     background-color: black;
     background-image: url('../../assets/cards/sfs.png');
-    color: orange;
 }
 .houstonoutlaws {
-    background-color: rgb(39, 202, 69);
+    background-color: #97d700;
-    color: black;
+    background-image: url('../../assets/cards/hou.png');
 }
 .bostonuprising {
-    background-color: rgb(8, 51, 192);
+    background-color: #174b97;
-    color: white;
+    background-image: url('../../assets/cards/bos.png');
+    
 }
 .losangelesgladiators {
+    background-color: #3c1053;
+    background-image: url('../../assets/cards/lag.png');  
+}
+.newyorkexcelsior {
+    background-color: rgb(0, 0, 0);
+    background-image: url('../../assets/cards/nyxl.png');
+}
+.washingtonjustice {
+    background-color: #990034;
+    background-image: url('../../assets/cards/was.png');
+}
+.vegaseternal {
+    background-color: rgb(15, 15, 15);
+    background-image: url('../../assets/cards/vegas.png');
+}
+.torontodefiant {
+    background-color: rgb(0, 0, 0);
+    background-image: url('../../assets/cards/tor.png');
+}
+.atlantareign {
+    background-color: #c4c4c4;
+    background-image: url('../../assets/cards/atl.png');
+}
+.floridamayhem {
+    background-color: #cf4691;
+    background-image: url('../../assets/cards/flo.png');
+}
+.londonspitfire {
+    background-color: #59cbe8;
+    background-image: url('../../assets/cards/lon.png');
+}
+.losangelesvaliant {
+    background-color: #1888c6;
+    background-image: url('../../assets/cards/lav.png');
+}
+.vancouvertitans {
+    background-color: #09226b;
+    background-image: url('../../assets/cards/vanc.png');
+}
+.seoulinfernal {
+    background-color: #d5253a;
+    background-image: url('../../assets/cards/sin.png');
+}
+.guangzhoucharge {
+    background-color: #00101d;
+    background-image: url('../../assets/cards/gzc.png');
+}
+.hangzhouspark {
+    background-color: #fb739b;
+    background-image: url('../../assets/cards/hzs.png');
+}
+.shanghaidragons {
+    background-color: #ff0000;
+    background-image: url('../../assets/cards/shd.png');
+}
+.dallasfuel {
+    background-color: #142840;
+    background-image: url('../../assets/cards/fuel.png');
+}
+.seouldynasty {
+    background-color: #ac8a00;
+    background-image: url('../../assets/cards/dyn.png');
+}
+.chengduhunters {
     background-color: rgb(110, 23, 223);
-    color: white;
+    background-image: url('../../assets/cards/lag.png');
 }

client/src/Components/TeamCard.tsx

@@ -1,11 +1,30 @@
 import './Css/TeamCard.css'
 import './Css/TeamStyles.css'
+import { useSortable } from '@dnd-kit/sortable'
+import {CSS} from '@dnd-kit/utilities'
 
-export default function TeamCard(props: {team: string}) {
+// TODO figure out how to make transitions work smoothly
-    let teamCss = props.team.replaceAll(' ', '').toLowerCase()
+
+
+export default function TeamCard(props: {id: string}) {
+    let teamCss = props.id.replaceAll(' ', '').toLowerCase()
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+      } = useSortable({id: props.id,
+            transition: null});
+      const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1
+      };
     return (
-        <div className={`team-card ${teamCss}`}>
+        <div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
-            <h3>{props.team}</h3>
+            <h3>{props.id}</h3>
         </div>
     )
 }

client/src/Constants/ItemTypes.tsx

@@ -0,0 +1,3 @@
+export const ItemTypes = {
+    TEAMCARD: 'teamcard',
+}

client/src/Pages/Build/APACRegion.tsx

@@ -1,12 +1,67 @@
+import { useState } from 'react'
 import TeamCard from '../../Components/TeamCard'
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+    DndContext, 
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+  } from '@dnd-kit/core';
 
-export default function APACRegion() {
+const teams = [
+    "Seoul Infernal",
+    "Guangzhou Charge",
+    "Hangzhou Spark",
+    "Shanghai Dragons",
+    "Dallas Fuel",
+    "Seoul Dynasty",
+    // "Chengdu Hunters",
+]
+
+// TODO fix styles
+
+export default function Combined() {
+    const [items, setItems] = useState(teams)
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+          })
+        )
     return (
         <div>
-           <TeamCard team="San Francisco Shock" /> 
+           <DndContext
-           <TeamCard team="Houston Outlaws" /> 
+                sensors={sensors}
-           <TeamCard team="Boston Uprising" /> 
+                collisionDetection={closestCenter}
-           <TeamCard team="Los Angeles Gladiators" /> 
+                onDragEnd={handleDragEnd}
+            >
+                <SortableContext
+                    items={items}
+                    strategy={verticalListSortingStrategy}
+                >
+                        {items.map((id) => <TeamCard id={id} />)}
+                </SortableContext>
+            </DndContext>
         </div>
     )
+
+    function handleDragEnd(event: { active: any; over: any; }) {
+        const {active, over} = event;
+        
+        if (active.id !== over.id) {
+          setItems((is: string | any[]) => {
+            const oldIndex = is.indexOf(active.id);
+            const newIndex = is.indexOf(over.id);
+            
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+    }
 }

client/src/Pages/Build/Combined.tsx

@@ -1,6 +1,53 @@
+import { useState } from 'react'
 import TeamCard from '../../Components/TeamCard'
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+    DndContext, 
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    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"
+]
+
+// TODO fix styles
 
 export default function Combined() {
+    const [items, setItems] = useState(teams)
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+          })
+        )
     return (
         <div style={{
             display: 'flex',
@@ -10,26 +57,31 @@ export default function Combined() {
             flexWrap: 'wrap',
             alignContent: 'space-between',
             }}>
-           <TeamCard team="San Francisco Shock" /> 
+           <DndContext
-           <TeamCard team="Houston Outlaws" /> 
+                sensors={sensors}
-           <TeamCard team="Boston Uprising" /> 
+                collisionDetection={closestCenter}
-           <TeamCard team="Los Angeles Gladiators" /> 
+                onDragEnd={handleDragEnd}
-           <TeamCard team="New York Excelsior" /> 
+            >
-           <TeamCard team="Washington Justice" /> 
+                <SortableContext
-           <TeamCard team="Vegas Eternal" /> 
+                    items={items}
-           <TeamCard team="Toronto Defiant" /> 
+                    strategy={verticalListSortingStrategy}
-           <TeamCard team="Atlanta Reign" /> 
+                >
-           <TeamCard team="Florida Mayhem" /> 
+                        {items.map((id) => <TeamCard id={id} />)}
-           <TeamCard team="London Spitfire" /> 
+                </SortableContext>
-           <TeamCard team="Los Angeles Valiant" /> 
+            </DndContext>
-           <TeamCard team="Vancouver Titans" /> 
-           <TeamCard team="Seoul Infernal" /> 
-           <TeamCard team="Guangzhou Charge" /> 
-           <TeamCard team="Hangzhou Spark" /> 
-           <TeamCard team="Shanghai Dragons" /> 
-           <TeamCard team="Dallas Fuel" /> 
-           <TeamCard team="Seoul Dynasty" /> 
-           <TeamCard team="Chengdu Hunters" />
         </div>
     )
+
+    function handleDragEnd(event: { active: any; over: any; }) {
+        const {active, over} = event;
+        
+        if (active.id !== over.id) {
+          setItems((is: string | any[]) => {
+            const oldIndex = is.indexOf(active.id);
+            const newIndex = is.indexOf(over.id);
+            
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+    }
 }

client/src/Pages/Build/NARegion.tsx

@@ -1,21 +1,73 @@
+import { useState } from 'react'
 import TeamCard from '../../Components/TeamCard'
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+    DndContext, 
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+  } from '@dnd-kit/core';
 
-export default function NARegion() {
+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",
+]
+
+// TODO fix styles
+
+export default function Combined() {
+    const [items, setItems] = useState(teams)
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+          })
+        )
     return (
         <div>
-           <TeamCard team="San Francisco Shock" /> 
+           <DndContext
-           <TeamCard team="Houston Outlaws" /> 
+                sensors={sensors}
-           <TeamCard team="Boston Uprising" /> 
+                collisionDetection={closestCenter}
-           <TeamCard team="Los Angeles Gladiators" /> 
+                onDragEnd={handleDragEnd}
-           <TeamCard team="New York Excelsior" /> 
+            >
-           <TeamCard team="Washington Justice" /> 
+                <SortableContext
-           <TeamCard team="Vegas Eternal" /> 
+                    items={items}
-           <TeamCard team="Toronto Defiant" /> 
+                    strategy={verticalListSortingStrategy}
-           <TeamCard team="Atlanta Reign" /> 
+                >
-           <TeamCard team="Florida Mayhem" /> 
+                        {items.map((id) => <TeamCard id={id} />)}
-           <TeamCard team="London Spitfire" /> 
+                </SortableContext>
-           <TeamCard team="Los Angeles Valiant" /> 
+            </DndContext>
-           <TeamCard team="Vancouver Titans" /> 
         </div>
     )
+
+    function handleDragEnd(event: { active: any; over: any; }) {
+        const {active, over} = event;
+        
+        if (active.id !== over.id) {
+          setItems((is: string | any[]) => {
+            const oldIndex = is.indexOf(active.id);
+            const newIndex = is.indexOf(over.id);
+            
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+    }
 }

client/src/Pages/Build/SplitRegion.tsx

@@ -1,36 +1,116 @@
+import { useState } from 'react'
 import TeamCard from '../../Components/TeamCard'
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+    DndContext, 
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    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",
+]
 
 export default function SplitRegion() {
+    const [nateams, setNA] = useState(na)
+    const [apacteams, setAPAC] = useState(apac)
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+          })
+        )
     return (
         <div style={{
             display: 'flex',
-            width: '600px',
+            width: '800px',
             justifyContent: 'space-between',
             }}>
-            <div className="na">
+            <DndContext
-           <TeamCard team="San Francisco Shock" /> 
+                sensors={sensors}
-           <TeamCard team="Houston Outlaws" /> 
+                collisionDetection={closestCenter}
-           <TeamCard team="Boston Uprising" /> 
+                onDragEnd={handleDragEnd}
-           <TeamCard team="Los Angeles Gladiators" /> 
+            >
-           <TeamCard team="New York Excelsior" /> 
+                <div className="na">
-           <TeamCard team="Washington Justice" /> 
+                    <SortableContext
-           <TeamCard team="Vegas Eternal" /> 
+                        items={nateams}
-           <TeamCard team="Toronto Defiant" /> 
+                        strategy={verticalListSortingStrategy}
-           <TeamCard team="Atlanta Reign" /> 
+                    >
-           <TeamCard team="Florida Mayhem" /> 
+                            {nateams.map((id) => <TeamCard id={id} />)}
-           <TeamCard team="London Spitfire" /> 
+                    </SortableContext>
-           <TeamCard team="Los Angeles Valiant" /> 
+                </div>
-           <TeamCard team="Vancouver Titans" /> 
+            </DndContext>
-           </div>
+            <DndContext
-            <div className="apac">
+                sensors={sensors}
-           <TeamCard team="Seoul Infernal" /> 
+                collisionDetection={closestCenter}
-           <TeamCard team="Guangzhou Charge" /> 
+                onDragEnd={handleDragEndApac}
-           <TeamCard team="Hangzhou Spark" /> 
+            >
-           <TeamCard team="Shanghai Dragons" /> 
+                <div className="apac">
-           <TeamCard team="Dallas Fuel" /> 
+                    <SortableContext
-           <TeamCard team="Seoul Dynasty" /> 
+                        items={apacteams}
-           <TeamCard team="Chengdu Hunters" /> 
+                        strategy={verticalListSortingStrategy}
-           </div>
+                    >
+                            {apacteams.map((id) => <TeamCard id={id} />)}
+                    </SortableContext>
+                </div>
+            </DndContext>
         </div>
     )
+
+    function handleDragEnd(event: { active: any; over: any; }) {
+        const {active, over} = event;
+        
+        if (active.id !== over.id) {
+          setNA((items: string | any[]) => {
+            const oldIndex = items.indexOf(active.id);
+            const newIndex = items.indexOf(over.id);
+            
+            return arrayMove(nateams, oldIndex, newIndex);
+          });
+        }
+    }
+    
+    function handleDragEndApac(event: { active: any; over: any; }) {
+        const {active, over} = event;
+        
+        if (active.id !== over.id) {
+          setAPAC((items: string | any[]) => {
+            const oldIndex = items.indexOf(active.id);
+            const newIndex = items.indexOf(over.id);
+            
+            return arrayMove(apacteams, oldIndex, newIndex);
+          });
+        }
+    }
+    
 }

client/src/Pages/Css/Main.css

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