create technically working

1 files changed, 97 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index bda72b2d6..bf26ad4b5 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -37,7 +37,7 @@ export class CollectionCardView extends CollectionSubView() {
 
     translateHover = (index: number): number => {
         if (this.hoveredNodeIndex == index && !this.isSelected(index)) {
-            return -50 * this.fitContentScale;
+            return -50;
         }
         return 0;
     };
@@ -109,6 +109,10 @@ export class CollectionCardView extends CollectionSubView() {
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
+
+
+    
+
     rotate = (amCards: number, index: number) => {
         // console.log(amCards + "wtf")
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
@@ -163,7 +167,7 @@ export class CollectionCardView extends CollectionSubView() {
     // };
 
     translateSelected = (index: number): number => {
-        if (this.isSelected(index)) {
+        // if (this.isSelected(index)) {
             const middleOfPanel = this._props.PanelWidth() / 2;
             const scaledNodeWidth = this.panelWidth() * 1.25;
 
@@ -173,12 +177,12 @@ export class CollectionCardView extends CollectionSubView() {
             const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2;
 
             // Calculate the translation needed to align the scaled node's center with the panel's center
-            const translation = middleOfPanel - scaledNodeCenter;
+            const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - (scaledNodeWidth /4);
 
             return translation;
-        }
+        // }
 
-        return 0;
+        // return 0;
     };
 
     @computed get sortedDocsType() {
@@ -197,15 +201,20 @@ export class CollectionCardView extends CollectionSubView() {
                 return this.sort(sorted, "type", desc)
             case "color":
                 return this.sort(sorted, "color", desc)
-            case "links":
-                console.log("hi")
+            // case "links":
+            //     console.log("hi")
 
-                   let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
+                //    let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
 
-                   console.log(links)
+                //    console.log(links)
                    
                    // }
 
+            case "custom":
+                console.log("hiiiii")
+                return this.sort(sorted, "custom", desc)
+            
+
             default:
                 docs =  this.myChildLayoutPairs
                 return {docs}
@@ -254,6 +263,14 @@ export class CollectionCardView extends CollectionSubView() {
                     typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
                     break
 
+                case "custom":
+                    typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? ''
+                    // console.log(typeA + "A")
+                    typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? ''
+                    // console.log(typeB + 'b')
+                    break
+
+
                 default:
                     typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
                     typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
@@ -341,10 +358,24 @@ export class CollectionCardView extends CollectionSubView() {
         }
 
         return (10 - calcRowCards) * (this.panelWidth()/2)
+    }
 
+   
+    calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) {
 
+        let trans = 0;
+        if (isHovered) {
+            trans += this.translateHover(realIndex);
+        }
+        
+        trans += this.translateY(amCards, calcRowIndex, realIndex);
+        
 
+        if (isSelected) {
+            trans = 50 * this.fitContentScale;
+        }
 
+        return trans
     }
 
     @computed get contentSorted() {
@@ -357,6 +388,7 @@ export class CollectionCardView extends CollectionSubView() {
 
 
             const isHovered = this.hoveredNodeIndex === index;
+            const childPairIndex = this.myChildLayoutPairs.indexOf(childPair)
             const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
             const calcRowIndex = this.overflowIndexCalc(realIndex)
 
@@ -379,21 +411,72 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px)
+                            translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px)
+                            translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
                     }}
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+                    onMouseEnter={() => this.setHoveredNodeIndex(index)}
+                    
+                    >
                     {this.displayDoc(childPair, childScreenToLocal)}
 
-                    {/* <circle r="45" cx="50" cy="50" fill="red" /> */}
+                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''}
 
                 </div>
             );
         });
     }
 
+    @observable amGroups = 0
+    @observable customGroupDictionary = new Map<
+       number, number>();
+
+
+    @action toggleButton(childPairIndex: number, buttonID: number) {
+    
+        this.customGroupDictionary.set(childPairIndex, buttonID);
+    }
+
+    renderButtons (childPairIndex: number) {
+        const buttons = []; // Array to hold the button elements
+
+        let amButtons = 4
+
+        if (this.amGroups > 4){
+            amButtons = this.amGroups
+        }
+
+        let activeButtonIndex = this.customGroupDictionary.get(childPairIndex)
+
+        for (let i = 0; i < amButtons; i++) {
+            const isActive = activeButtonIndex == i
+      
+            buttons.push(
+                <button key={i}
+                    style = {{backgroundColor: `${isActive ?  "#4476f7" : "#323232"}`}}
+                    onClick={() => this.toggleButton(childPairIndex, i)} >
+                </button>); 
+        }
+
+        const totalWidth = amButtons * 35 + (amButtons * 2* 5) + 6;
+        return (
+            <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
+                {buttons}
+            </div>
+        );  
+    }
+
+
+    
+
+
+
+
+
+
+
+
     
 
     // @computed get content() {
@@ -450,7 +533,7 @@ export class CollectionCardView extends CollectionSubView() {
 
         let translate = 0
 
-        if (this.inactiveDocs().length != this.myChildLayoutPairs.length) {
+        if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) {
             translate += this.panelWidth() / 2;
         }