From a38f7ea40bc44e5e213dc03b687a4be32592b4a2 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Sat, 9 Mar 2024 11:39:35 -0500
Subject: flashcard flips

---
 src/client/views/nodes/ComparisonBox.tsx | 46 +++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index bdf92038f..eaf7419fc 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -8,12 +8,14 @@ import { DocCast, NumCast, StrCast } from '../../../fields/Types';
 import { DocUtils, Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
+import { SnappingManager } from '../../util/SnappingManager';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
 import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
+import { IntegerType } from 'mongodb';
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -157,6 +159,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     remDoc1 = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_1'), true);
     remDoc2 = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_2'), true);
     _closeRef = React.createRef<HTMLDivElement>();
+
+    cycleAlternateText = () => {
+        const usePath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
+        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : undefined;
+        //: usePath === 'alternate' ? 'alternate:hover' : undefined;
+        //usePath === undefined ? 'alternate' :
+        //undefined;
+        //: usePath === 'alternate' ? 'alternate:hover' : undefined;
+        // console.log('CYCLE' + this.layoutDoc[`_${this._props.fieldKey}_usePath`]);
+    };
+
+    @computed get overlayAlternateIcon() {
+        const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
+        return (
+            <div
+                className="formattedTextBox-alternateButton"
+                onPointerDown={e =>
+                    setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => {
+                        //side = side === 1 ? 0 : 1;
+                        this.cycleAlternateText();
+                        console.log('HEREEEEE');
+                    })
+                }
+                style={{
+                    //display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none',
+                    background: usepath === 'alternate' ? 'white' : 'black',
+                    //usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray',
+                    color: usepath === 'alternate' ? 'black' : 'white',
+                    //usePath === undefined ? 'black' : 'white',
+                }}>
+                <FontAwesomeIcon icon="turn-up" size="sm" />
+            </div>
+        );
+    }
+
     render() {
         const clearButton = (which: string) => {
             return (
@@ -207,7 +244,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         };
 
         if (this.Document._layout_isFlashcard) {
-            return <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>{displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}</div>;
+            const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
+            console.log('SIDEEEE' + side);
+            return (
+                <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
+                    {displayBox(`${this.fieldKey}_${side}`, side, this._props.PanelWidth() - 3)}
+                    {this.overlayAlternateIcon}
+                </div>
+            );
         } else {
             return (
                 <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
-- 
cgit v1.2.3-70-g09d2