Added Sub Aura slots

src/components/ExtraSummons/index.scss

@@ -0,0 +1,32 @@
+#ExtraSummons {
+    background: #FFEBD9;
+    border-radius: 8px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    margin: 20px auto;
+    max-width: 727px;
+    padding: 16px 16px 16px 0;
+    position: relative;
+    left: 9px;
+
+    & > span {
+        color: #825B39;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1.2;
+        font-weight: 500;
+        margin-right: 16px;
+        text-align: center;
+        width: 387px;
+    }
+
+    .SummonUnit .SummonImage {
+        background: #D5D3F6;
+    }
+
+    .WeaponUnit .WeaponImage .icon svg {
+        fill: #8F8AC6;
+    }
+}

src/components/ExtraSummons/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import SummonUnit from '~components/SummonUnit'
+import './index.scss'
+
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
+// Props
+interface Props {
+    grid: GridArray<Summon>
+    editable: boolean
+    exists: boolean
+    found?: boolean
+    onSelect: (type: GridType, summon: Summon, position: number) => void
+}
+
+const ExtraSummons = (props: Props) => {
+    const numSummons: number = 2
+
+    function receiveWeapon(summon: Summon, position: number) {
+        props.onSelect(GridType.Summon, summon, position)
+    }
+
+    return (
+        <div id="ExtraSummons">
+            <span>Sub Aura Summons</span>
+            <ul id="grid_summons">
+                {
+                    Array.from(Array(numSummons)).map((x, i) => {
+                        return (
+                            <li key={`grid_unit_${i}`} >
+                                <SummonUnit 
+                                    editable={props.editable}
+                                    onReceiveData={receiveWeapon} 
+                                    position={i} 
+                                    unitType={1}
+                                    summon={props.grid[i]}
+                                />
+                            </li>
+                        )
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default ExtraSummons

src/components/SummonGrid/index.scss

@@ -1,27 +1,27 @@
 .SummonGrid {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-column-gap: $unit * 2;
     justify-content: center;
+
+    & .Label {
+        color: $grey-50;
+        font-size: 12px;
+        font-weight: $medium;
+        margin-bottom: $unit;
+        text-align: center;
+    }
 }
 
 #grid_summons {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: auto auto;
-    flex-wrap: wrap;
+    grid-column-gap: $unit * 2;
-    margin: 0 24px 0 0;
+    grid-template-rows: 1fr;
-    padding: 0;
+    grid-row-gap: $unit * 3;
-    width: 344px;
-}
-
-#grid_summons > * {
-    margin-bottom: 24px;
-    margin-right: 24px;
-
-}
-
-#grid_summons > *:nth-child(2n+2) {
-    margin-right: 0;
 }
 
 #grid_summons > li {
     list-style: none;
+    min-height: 180px;
 }

src/components/SummonGrid/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ExtraSummons from '~components/ExtraSummons'
 import SummonUnit from '~components/SummonUnit'
 
 import './index.scss'
@@ -32,41 +33,63 @@ const SummonGrid = (props: Props) => {
     }
 
     return (
-        <div className="SummonGrid">
+        <div>
-            <SummonUnit
+            <div className="SummonGrid">
-                editable={props.editable}
+                <div className="LabeledUnit">
-                key="grid_main_summon"
+                    <div className="Label">Main Summon</div>
-                onReceiveData={receiveSummon}
+                    <SummonUnit
-                position={-1}
+                        editable={props.editable}
-                unitType={0}
+                        key="grid_main_summon"
-                summon={props.main}
+                        onReceiveData={receiveSummon}
-            />
+                        position={-1}
+                        unitType={0}
+                        summon={props.main}
+                    />
+                </div>
 
-            <ul id="grid_summons">
+                <div className="LabeledUnit">
-                {
+                    <div className="Label">Friend Summon</div>
-                    Array.from(Array(numSummons)).map((x, i) => {
+                    <SummonUnit
-                        return (
+                        editable={props.editable}
-                            <li key={`grid_unit_${i}`} >
+                        key="grid_friend_summon"
-                                <SummonUnit 
+                        onReceiveData={receiveSummon}
-                                    editable={props.editable}
+                        position={4}
-                                    onReceiveData={receiveSummon} 
+                        unitType={2}
-                                    position={i} 
+                        summon={props.friend}
-                                    unitType={1}
+                    />
-                                    summon={props.grid[i]}
+                </div>
-                                />
+
-                            </li>
+                <div id="LabeledGrid">
-                        )
+                    <div className="Label">Summons</div>
-                    })
+                    <ul id="grid_summons">
+                        {
+                            Array.from(Array(numSummons)).map((x, i) => {
+                                return (
+                                    <li key={`grid_unit_${i}`} >
+                                        <SummonUnit 
+                                            editable={props.editable}
+                                            onReceiveData={receiveSummon} 
+                                            position={i} 
+                                            unitType={1}
+                                            summon={props.grid[i]}
+                                        />
+                                    </li>
+                                )
+                            })
+                        }
+                    </ul>
+                </div>
+            </div>
+            
+            <ExtraSummons 
+                grid={props.grid} 
+                editable={false} 
+                exists={false} 
+                onSelect={
+                    function (type: GridType, summon: Summon, position: number): void {
+                        throw new Error('Function not implemented.')
+                    } 
                 } 
-            </ul>
-
-            <SummonUnit
-                editable={props.editable}
-                key="grid_friend_summon"
-                onReceiveData={receiveSummon}
-                position={4}
-                unitType={2}
-                summon={props.friend}
             />
         </div>
     )

src/components/SummonUnit/index.scss

@@ -64,29 +64,24 @@
 }
 
 /* Mainhand */
-.SummonUnit.main,
-.SummonUnit.friend {
-    margin-right: 24px;
-    max-width: 200px;
-}
-
 .SummonUnit.friend {
     margin-right: 0;
 }
 
 .SummonUnit.main .SummonImage,
 .SummonUnit.friend .SummonImage {
-    height: 374px;
+    height: 315px;
-    width: 180px;
+    width: 182px;
 }
 
 /* Grid */
 .SummonUnit.grid {
-    max-width: 160px;
+    max-width: 148px;
+    min-height: 141px;
 }
 
 .SummonUnit.grid .SummonImage {
     list-style-type: none;
-    height: 92px;
+    height: 111px;
-    width: 160px;
+    width: 148px;
 }