Day 10: Organized middle section, begin deck viewing

imisaacwu · Jul 5, 2024 · 0e47ed3 · 0e47ed3
1 parent 17ec45a
commit 0e47ed3
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 22 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 body {
     margin: 0;
+    user-select: none;
 }
 
 :root {
@@ -41,9 +42,21 @@ body {
 }
 
 #top {
+    display: flex;
+    flex-direction: row;    
+}
+
+#lower {
     display: flex;
     flex-direction: row;
-    flex: 1;
+    align-items: flex-end;
+    flex: 3.5
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 #mid {
@@ -79,6 +92,10 @@ body {
     margin: 0 6px 0 0;
 }
 
+#joker-area {
+    height: 175px;
+}
+
 #joker-label {
     margin: 0 0 0 8px;
 }
@@ -91,6 +108,10 @@ body {
     margin: 0 0 0 6px;
 }
 
+#consumables-area {
+    height: 175px;
+}
+
 #consumables-label {
     margin: 0 8px 0 0;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -101,17 +101,21 @@ export default function App() {
                         <div id='consumables-label' className='counter'>0/2</div>
                     </div>
                 </div>
-                <div id='mid'>
-                    {cards.submitted}
-                </div>
-                <div id='bot'>
-                    <HandSizeContext.Provider value={8}>
-                        <Hand
-                            sort={sort}
-                            setSort={setSort}
-                        />
-                        <Deck deck={cards.deck} />
-                    </HandSizeContext.Provider>
+                <div id='lower'>
+                    <div id='content'>
+                        <div id='mid'>
+                            {cards.submitted}
+                        </div>
+                        <div id='bot'>
+                            <HandSizeContext.Provider value={8}>
+                                <Hand
+                                    sort={sort}
+                                    setSort={setSort}
+                                />
+                            </HandSizeContext.Provider>
+                        </div>
+                    </div>
+                    <Deck deck={cards.deck} />
                 </div>
             </div>
         </div>

diff --git a/src/components/Card.css b/src/components/Card.css
@@ -1,13 +1,12 @@
 .card {
-    width: 75px;
-    height: 100px;
+    width: 142px;
+    height: 175px;
     border: 1px solid white;
     border-radius: 8px;
     background-color: aliceblue;
     font-size: 32px;
     text-align: center;
     transition: .25s;
-    user-select: none;
 }
 
 .card:hover {

diff --git a/src/components/Deck.css b/src/components/Deck.css
@@ -6,6 +6,22 @@
     margin: 0 2px;
 }
 
+#face-down {
+    width: 142px;
+    height: 175px;
+    border: 1px solid white;
+    border-radius: 8px;
+    background-color: aliceblue;
+    font-size: 32px;
+    text-align: center;
+    transition: .25s;
+    margin: 0 0 0 8px;
+}
+
+#face-down:hover {
+    cursor: pointer;
+}
+
 #deck-label {
     margin: 0 8px 0 0;
 }
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
@@ -6,9 +6,16 @@ type DeckProps = {
 }
 
 export const Deck = (props: DeckProps) => {
+    const viewDeck = () => {
+        // console.log(document.getElementById('container'))
+        // document.getElementById('root')?.appendChild()
+    }
+
     return (
         <div id='deck' className='card-container'>
-            <div id='deck-area' className='card-area'></div>
+            <div id='deck-area' className='card-area'>
+                <div id='face-down' onClick={viewDeck}></div>
+            </div>
             <div id='deck-label' className='counter'>{props.deck.length}/52</div>
         </div>
     )

diff --git a/src/components/DeckMenu.tsx b/src/components/DeckMenu.tsx
@@ -0,0 +1,9 @@
+export default function DeckMenu() {
+    return (
+        <div id='menu'>
+            <div id='top'></div>
+            <div id='main'></div>
+            <button id='back'>Back</button>
+        </div>
+    )
+}
diff --git a/src/components/Hand.css b/src/components/Hand.css
@@ -22,7 +22,6 @@
     padding: 8px 32px;
     border-radius: 8px;
     background-color: var(--light-grey);
-    user-select: none;
 }
 
 .button.true:hover {
@@ -52,7 +51,6 @@
     display: flex;
     flex-direction: row;
     font-size: 22px;
-    user-select: none;
 }
 
 .sort-button {

diff --git a/src/components/Round.tsx b/src/components/Round.tsx
@@ -16,10 +16,6 @@ export const Round = () => {
         }
     }, [cards.submitted])
 
-    // useEffect(() => {
-    //     if(hand > )
-    // })
-
     return (
         <div id='round-score'>
             <div id='round-score-text'>Round<br/>score</div>