Resize is better

components/src/React/Basic/Hooks/UseGesture.purs

@@ -36,13 +36,13 @@ type GenericOptions r
   = { domTarget ∷ Maybe (Ref (Nullable Node)) | r }
 
 type DragOptions
-  = GenericOptions ()
+  = GenericOptions ( filterTaps ∷ Maybe Boolean )
 
 type DragOptionsImpl
-  = GenericOptionsImpl ()
+  = GenericOptionsImpl ( filterTaps ∷ Boolean )
 
 dragOptionsToImpl ∷ DragOptions -> DragOptionsImpl
-dragOptionsToImpl { domTarget } = { domTarget: domTarget # orUndefined }
+dragOptionsToImpl { domTarget, filterTaps } = { domTarget: domTarget # orUndefined, filterTaps: filterTaps ?|| false }
 
 foreign import useDragImpl ∷ ∀ a. EffectFn2 (DragHandlerImpl a) DragOptionsImpl (a -> DragProps)
 

components/src/Yoga/Grimoire/Component.purs

@@ -4,24 +4,25 @@ import Prelude
 import Data.Array (mapWithIndex, zip, (!!))
 import Data.Array as Array
 import Data.FoldableWithIndex (findWithIndex)
+import Data.Interpolate as Interp
 import Data.Lens (set)
 import Data.Lens.Index (ix)
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Nullable (Nullable)
 import Data.Nullable as Nullable
+import Data.Symbol (SProxy(..))
 import Data.Traversable (for, sequence)
 import Data.Tuple.Nested ((/\), type (/\))
-import Debug.Trace (spy)
 import Effect (Effect)
-import Effect.Aff (Milliseconds(..), delay, launchAff_)
 import Justifill (justifill)
 import React.Basic (ReactComponent)
 import React.Basic.DOM (css)
 import React.Basic.Helpers (jsx)
-import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)
+import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Spring (animatedDiv, useSprings)
 import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
+import Record as Record
 import Record.Extra (pick)
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Node)
@@ -81,8 +82,20 @@ makeComponent = do
   useStyles <- makeStylesJSS styles
   component "Grimoire" \(props ∷ Props) -> React.do
     {} <- useStyles (pick props)
-    springs <- useSprings (Array.length props.spells) \_ -> { x: 0.0, y: 0.0, zIndex: 0, immediate: false, transform: "scale3d(1.0,1.0,1.0)" }
-    nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))
+    let
+      defaultSprings = \_ ->
+        { x: 0.0
+        , y: 0.0
+        , height: "100px"
+        , shadow: 2
+        , borderRadius: "var(--s-2)"
+        , zIndex: 0
+        , immediate: const false
+        , transform: "scale3d(1.0,1.0,1.0)"
+        }
+    springs <-
+      useSprings (Array.length props.spells) defaultSprings
+    nodeRefs <- useRef (props.spells $> Nullable.null)
     positionsRef <- useRef ([] ∷ _ DOMRect)
     originalPositionsRef <- useRef ([] ∷ _ DOMRect)
     initialisedRef <- useRef false
@@ -95,19 +108,15 @@ makeComponent = do
           writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
           writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
           writeRef initialisedRef true
-    useEffect windowSize do
+    useLayoutEffect windowSize do
+      springs.stop
       writeRef initialisedRef false
-      positions <- readRef positionsRef
-      let
-        newOriginalPositions = positions
-      writeRef positionsRef newOriginalPositions
-      init
+      springs.set defaultSprings
       mempty
     theme ∷ CSSTheme <- useTheme
     bindDragProps <-
-      useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do
+      useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my } -> do
         init
-        rects <- getRects nodeRefs
         originalPositions <- readRef originalPositionsRef
         positionsBefore <- readRef positionsRef
         let
@@ -144,7 +153,10 @@ makeComponent = do
                 { x: originalPosDragged.left - value.left + leftOffset
                 , y: originalPosDragged.top - value.top + topOffset
                 , zIndex: 0
+                , shadow: 2
+                , height: "100px"
                 , transform: "scale3d(1.0, 1.0, 1.0)"
+                , borderRadius: "var(--s-2)"
                 , immediate: const false
                 }
             true, true, _ ->
@@ -152,11 +164,17 @@ makeComponent = do
               , y: my + topOffset
               , zIndex: 1
               , transform: "scale3d(1.1, 1.1, 1.1)"
+              , borderRadius: "var(--s-2)"
+              , height: "100px"
+              , shadow: 20
               , immediate: \n -> n == "x" || n == "y" || n == "zIndex"
               }
             _, _, _ ->
               { x: leftOffset
               , y: topOffset
+              , shadow: 2
+              , height: "100px"
+              , borderRadius: "var(--s-2)"
               , zIndex: 0
               , transform: "scale3d(1.0, 1.0, 1.0)"
               , immediate: const false
@@ -165,7 +183,7 @@ makeComponent = do
       renderSpells =
         mapWithIndex \i (spell /\ style) ->
           animatedDiv
-            $ { style: css style
+            $ { style: css (Record.insert (SProxy ∷ _ "boxShadow") ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String)) style)
               , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
               , children:
                 [ element

components/src/Yoga/Grimoire/Spell/Spec.purs

@@ -2,7 +2,6 @@ module Yoga.Spell.Spec where
 
 import Prelude
 import Justifill (justifill)
-import React.Basic.DOM as R
 import React.TestingLibrary (describeComponent, renderComponent)
 import Test.Spec (Spec, it)
 import Yoga.Grimoire.Spell.Component as Spell

components/src/Yoga/Grimoire/Spell/Styles.purs

@@ -1,12 +1,16 @@
 module Yoga.Grimoire.Spell.Styles where
 
 import Prelude hiding (top)
-import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)
+import CSS (backgroundColor, black, block, boxShadow, color, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, lineHeight, maxHeight, pct, px, sansSerif, textOverflow, textWhitespace, unitless, whitespaceNoWrap, width)
 import CSS.FontStyle (italic)
+import CSS.Overflow (overflow, overflowY)
+import CSS.Overflow as Overflow
+import CSS.Text.Overflow (ellipsis)
 import CSS.TextAlign (rightTextAlign, textAlign)
 import Data.Array (fromFoldable)
 import Data.NonEmpty as NonEmpty
 import JSS (JSSClasses, JSSElem, jss, jssClasses)
+import Text.Parsing.StringParser.CodePoints (whiteSpace)
 import Yoga.Theme.Types (YogaTheme)
 
 type PropsR
@@ -30,11 +34,12 @@ styles =
       do
         width (100.0 # pct)
         height (100.0 # pct)
+        boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black
     , container:
-      jss { userSelect: "none" }
-        <> jss do
-            backgroundColor theme.backgroundColourLighter
-            height (100.0 # pct)
+      jss do
+        backgroundColor theme.backgroundColourLighter
+        (key $ fromString "user-select") "none"
+        height (100.0 # pct)
     , signature:
       do
         color theme.textColour
@@ -48,6 +53,10 @@ styles =
         fontSize s1
     , description:
       do
+        display inlineBlock
         color theme.grey
         fontStyle italic
+        overflow Overflow.hidden
+        textWhitespace whitespaceNoWrap
+        textOverflow ellipsis
     }

components/src/Yoga/Grimoire/Stories.purs

@@ -21,17 +21,5 @@ spells =
   [ { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
   , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
   , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
-  , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
-  , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
-  , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
-  , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
-  , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
-  , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
-  , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
-  , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
-  , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
-  , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
-  , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
-  , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
-  , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
+  , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }
   ]

components/src/Yoga/Theme/Default.purs

@@ -22,7 +22,7 @@ fontFaces = jss (Rubik.fontFamilies <> VictorMono.fontFamilies)
 
 darkTheme ∷ Theme
 darkTheme =
-  { backgroundColour: Color.hsl 238.0 0.18 0.20
+  { backgroundColour: Color.hsl 238.0 0.18 0.30
   , textColour: Color.hsl 225.0 0.28 0.90
   , interfaceColour: Color.hsl 225.0 0.48 0.12
   , highlightColour: Color.hsl 285.0 0.88 0.72