fixed weird centering, finally got the y positioning working, and am (unsuccesfully) working on creating rows

2 files changed, 162 insertions, 21 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index ebd7f9856..ff9c0a569 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -14,6 +14,15 @@
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
+.card-row{
+    display: flex;
+    position: absolute;
+    align-items: center;
+    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+
+}
+
 .card-item-active,
 .card-item {
     transition: transform 0.3s ease-in-out;
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index b636b878e..98b4e8ec9 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -92,26 +92,55 @@ export class CollectionCardView extends CollectionSubView() {
 
     rotate = (amCards: number, index: number) => {
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
+        const stepMag = Math.abs(-30 + ((amCards/2)- 1) * (30 / ((amCards - (amCards % 2)) / 2)));
+
+        // console.log(possRotate + "poss")
 
         if (amCards % 2 == 0 && possRotate == 0) {
-            console.log('whaddup');
-            return possRotate + Math.abs(-30 + (index - 1) * (30 / ((amCards - 1) / 2)));
+            // console.log('whaddup');
+            return possRotate + Math.abs(-30 + (index - 1) * (30 / ((amCards) / 2)));
+        }
+
+        else if (amCards %2 == 0 && index > (amCards+1)/2){
+            // console.log("sup" + stepMag);
+            
+            return possRotate + stepMag;
         }
 
         return possRotate;
     };
 
-    // translateY = (amCards: number, index: number) => {
-    //     // Assuming you want a default value when index > amCards/2
-    //     // Adjust the logic as necessary for your use case
-    //     if (index <= amCards / 2) {
-    //         return -((50 / ((amCards - (amCards % 2)) / 2)) * index);
-    //     } else {
-    //         // Return a default or calculated value for indices greater than amCards/2
-    //         // This is just an example; adjust the logic as needed
-    //         return -((50 / ((amCards - (amCards % 2)) / 2)) * (amCards - index - 1));
-    //     }
-    // };
+    translateY = (amCards: number, index: number) => {
+        const evenOdd =amCards% 2 
+        const apex = (amCards-evenOdd)/2
+        const stepMag = (200 / ((amCards - evenOdd)/2))
+         + Math.abs(((apex-index) *25))
+
+        console.log("steo" + stepMag)
+
+        if (evenOdd == 1 || index < apex -1){
+            console.log('hi' + index)
+            return Math.abs(stepMag * (apex - index))
+        }
+
+        else{
+            if (index == apex || index == apex -1){
+                return 0
+            }
+
+            return Math.abs(stepMag * (apex - index -1))
+
+        }
+
+    };
+
+    translateOverFlowY = (amCards: number, index: number) => {
+        if (amCards>8 && index > amCards/2){
+            return 100
+
+        }
+        return 0
+    }
 
     translateSelected = (index: number): number => {
         if (this.isSelected(index)) {
@@ -151,9 +180,80 @@ export class CollectionCardView extends CollectionSubView() {
 
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
-    @computed get content() {
+    // @computed get content() {
+    //     // const currentIndex = NumCast(this.layoutDoc._carousel_index);
+    //     const amCards = this.inactiveDocs().length;
+    //     // const myInactives =
+    //     const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
+    //         return (
+    //             <DocumentView
+    //                 {...this._props}
+    //                 ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
+    //                 Document={childPair.layout}
+    //                 TemplateDataDocument={childPair.data}
+    //                 // onClickScript={this.toggleIcon}
+    //                 //suppressSetHeight={true}
+    //                 NativeWidth={returnZero}
+    //                 NativeHeight={returnZero}
+    //                 layout_fitWidth={returnFalse}
+    //                 onDoubleClickScript={this.onChildDoubleClick}
+    //                 renderDepth={this._props.renderDepth + 1}
+    //                 LayoutTemplate={this._props.childLayoutTemplate}
+    //                 LayoutTemplateString={this._props.childLayoutString}
+    //                 // focus={this.focus}
+    //                 ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
+    //                 isContentActive={this.isChildContentActive}
+    //                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+    //                 PanelWidth={this.panelWidth}
+    //                 PanelHeight={this.panelHeight(childPair.layout)}
+    //             />
+    //         );
+    //     };
+
+    //     return this.childLayoutPairs.map((childPair, index) => {
+    //         const isSelected = this.isSelected(index);
+    //         const isHovered = this.hoveredNodeIndex === index;
+    //         const isOverflow = amCards > 8 && index > amCards/2
+    //         const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
+    //         // const yOffset = this.verticalOffset(index);
+
+    //         const childScreenToLocal = () => {
+    //             const dref = this.docRefs.get(childPair.layout);
+    //             const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
+    //             // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
+    //             return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+    //         };
+
+    //         return (
+    //             <div
+    //                 key={childPair.layout[Id]}
+    //                 className={`card-item${isSelected ? '-active' : ''}`}
+    //                 style={{
+    //                     width: this.panelWidth(),
+    //                     height: this.panelHeight(childPair.layout)(),
+    //                     transform: `
+    //                         rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
+    //                         translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex) + this.translateOverFlowY(amCards, inactiveIndex)}px)
+    //                         translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+
+    //                         scale(${isSelected ? 1.25 : 1})
+                            
+    //                         `, //scale has to be applied last or selected offset gets messed up
+    //                 }}
+    //                 // onClick={() => this.setSelectedNodeIndex(index)}
+
+    //                 onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+    //                 {/* {this.lol(childPair.data, index)} */}
+
+    //                 {displayDoc(childPair, childScreenToLocal)}
+    //             </div>
+    //         );
+    //     });
+    // }
+
+    @action content(amCards: number, startIndex: number, stopIndex: number) {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        const amCards = this.inactiveDocs().length;
+        // const amCards = this.inactiveDocs().length;
         // const myInactives =
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
             return (
@@ -181,9 +281,13 @@ export class CollectionCardView extends CollectionSubView() {
             );
         };
 
-        return this.childLayoutPairs.map((childPair, index) => {
+        const inactiveDocs = this.inactiveDocs();
+        return this.childLayoutPairs.filter((childPair, index) => { const inactiveIndex = inactiveDocs.indexOf(childPair.layout); return inactiveIndex >= startIndex && inactiveIndex <= stopIndex;
+            }).map((childPair, index) => {
+
             const isSelected = this.isSelected(index);
             const isHovered = this.hoveredNodeIndex === index;
+            const isOverflow = amCards > 8 && index > amCards/2
             const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
             // const yOffset = this.verticalOffset(index);
 
@@ -203,8 +307,10 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : 0}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth / 2 : 0}px)
+                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)
+                                //  + this.translateOverFlowY(amCards, inactiveIndex)
+                                }px)
+                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
 
                             scale(${isSelected ? 1.25 : 1})
                             
@@ -221,9 +327,35 @@ export class CollectionCardView extends CollectionSubView() {
         });
     }
 
+    renderRows() {
+        const cards = this.inactiveDocs();
+        const totalCards = cards.length;
+        const rowsNeeded = Math.ceil(totalCards / 8);
+        
+        let rows = [];
+    
+        for (let rowIndex = 0; rowIndex < rowsNeeded; rowIndex++) {
+            let rowStartIndex = rowIndex * 8;
+            let rowEndIndex = rowStartIndex + 8;
+            let rowCards = cards.slice(rowStartIndex, rowEndIndex);
+    
+            rows.push(this.renderRowCards(rowCards, rowIndex));
+        }
+    
+        return rows;
+    }
+
+    renderRowCards(rowCards: Doc[], rowIndex: number) {
+        return (
+            <div className={`card-row row-${rowIndex}`} key={rowIndex} style = {{transform: `translateY(${rowIndex*60})`}}>
+                {this.content(rowCards.length, rowIndex*8, rowIndex*8+8)}
+            </div>
+        );
+    }
+
     @computed get translateWrapperX() {
         if (this.inactiveDocs().length != this.childLayoutPairs.length) {
-            return this.panelWidth();
+            return this.panelWidth()/2;
         }
 
         return 0;
@@ -241,12 +373,12 @@ export class CollectionCardView extends CollectionSubView() {
                 <div
                     className="card-wrapper"
                     style={{
-                        transform: ` scale(${1 / this.fitContentScale})`,
+                        transform: ` scale(${1 / this.fitContentScale}) translateX(${this.translateWrapperX}px)`,
                         transformOrigin: 'top left',
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.content}
+                    {this.renderRows()}
                 </div>
 
                 {/* {this.focusContent} */}