Small improvements

components/src/Yoga/Grimoire/Component.purs

@@ -13,7 +13,6 @@ 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.Class.Console (log)
 import Justifill (justifill)
@@ -88,6 +87,19 @@ swap i j arr = swapped # orDie "Couldn't swap"
     valueJ <- arr !! j
     pure $ (set (ix i) valueJ <<< set (ix j) valueI) arr
 
+regularScale = "scale3d(1.0, 1.0, 1.0)"
+
+scaledUp = "scale3d(1.1, 1.1, 1.1)"
+
+defaultSprings =
+  { x: 0.0
+  , y: 0.0
+  , shadow: 5
+  , zIndex: 0
+  , immediate: const true
+  , transform: "scale3d(1.0,1.0,1.0)"
+  }
+
 springsteen init rectsRef positionsRef arg mx my down springs = do
   init
   rects <- readRef rectsRef
@@ -96,55 +108,43 @@ springsteen init rectsRef positionsRef arg mx my down springs = do
     rectDragged = rects !!! (positionsBefore !!! arg)
     currentPosDragged = rectDragged # translate (mx /\ my)
     orderedRectsBefore = positionsBefore <#> (rects !!! _)
-    overlapsOtherBefore = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect
-  case down, overlapsOtherBefore of
+    overlapsOther = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect
+  case down, overlapsOther of
     false, Just { index } -> do
       let
         newPositions = swap arg index positionsBefore
-      writeRef positionsRef $ spy "new posis" newPositions
+      writeRef positionsRef newPositions
     _, _ -> mempty
-  -- alles gut bis hierher, glaube ich
   positions <- readRef positionsRef
   springs.set \i -> do
     let
-      j = positions !!! i
-      isTheDraggedOne = i == arg
       originalRect = rects !!! i
-      currentRect = rects !!! j
+      currentRect = rects !!! (positions !!! i)
       leftOffset = currentRect.left - originalRect.left
       topOffset = currentRect.top - originalRect.top
-    case isTheDraggedOne, down, overlapsOtherBefore of
+    case i == arg, down, overlapsOther of
       true, true, _ ->
-        { x: mx + leftOffset
-        , 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"
-        }
+        defaultSprings
+          { x = mx + leftOffset
+          , y = my + topOffset
+          , zIndex = 1
+          , transform = scaledUp
+          , shadow = 20
+          , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
+          }
       false, true, Just { index, value }
         | index == i ->
-          { x: rectDragged.left - currentRect.left + leftOffset
-          , y: rectDragged.top - currentRect.top + topOffset
-          , zIndex: 0
-          , shadow: 2
-          , height: "100px"
-          , transform: "scale3d(1.0, 1.0, 1.0)"
-          , borderRadius: "var(--s-2)"
-          , immediate: const false
-          }
+          defaultSprings
+            { x = rectDragged.left - currentRect.left + leftOffset
+            , y = rectDragged.top - currentRect.top + topOffset
+            , immediate = const false
+            }
       _, _, _ ->
-        { 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
-        }
+        defaultSprings
+          { x = leftOffset
+          , y = topOffset
+          , immediate = const false
+          }
 
 makeComponent ∷ Effect (ReactComponent Props)
 makeComponent = do
@@ -152,19 +152,8 @@ makeComponent = do
   spellComponent <- GrimoireSpell.makeComponent
   useStyles <- makeStylesJSS styles
   component "Grimoire" \(props ∷ Props) -> React.do
-    {} <- useStyles (pick props)
-    let
-      defaultSprings = \_ ->
-        { x: 0.0
-        , y: 0.0
-        , height: "100px"
-        , shadow: 2
-        , borderRadius: "var(--s-2)"
-        , zIndex: 0
-        , immediate: const true
-        , transform: "scale3d(1.0,1.0,1.0)"
-        }
-    springs <- useSprings (Array.length props.spells) defaultSprings
+    classes <- useStyles (pick props)
+    springs <- useSprings (Array.length props.spells) (const defaultSprings)
     nodeRefs ∷ Ref (Array (Nullable (_))) <- useRef (props.spells $> Nullable.null)
     spells /\ updateSpells <- useState props.spells
     positionsRef <- useRef ([] ∷ _ Int)
@@ -184,7 +173,7 @@ makeComponent = do
           writeRef rectsRef rects
           writeRef initialisedRef true
     useLayoutEffect windowSize do
-      springs.set defaultSprings
+      springs.set (const defaultSprings)
       positionsBefore <- readRef positionsRef
       when (positionsBefore == []) do
         log "resetting positions"
@@ -204,15 +193,14 @@ makeComponent = do
       renderSpells =
         mapWithIndex \i (spell /\ style) ->
           animatedDiv
-            $ { 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)
+            $ { 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
+              , className: classes.container
               , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
-              , children:
-                [ element
-                    spellComponent
-                    { spell
-                    , cardRef: Nothing
-                    }
-                ]
+              , children: [ element spellComponent { spell } ]
               }
                 `withDragProps`
                   bindDragProps i

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

@@ -3,16 +3,13 @@ module Yoga.Grimoire.Spell.Component where
 import Prelude
 import CSS (AlignItemsValue, JustifyContentValue, spaceBetween)
 import CSS.Common (baseline)
-import Data.Maybe (Maybe)
-import Data.Nullable (Nullable)
 import Effect (Effect)
 import React.Basic (ReactComponent)
 import React.Basic.DOM as R
 import React.Basic.Helpers (classSpan, jsx)
-import React.Basic.Hooks (Ref, component)
+import React.Basic.Hooks (component)
 import React.Basic.Hooks as React
 import Record.Extra (pick)
-import Web.DOM (Node)
 import Yoga.Box.Component as Box
 import Yoga.Card.Component (mkCard)
 import Yoga.Centre.Component as Centre
@@ -27,7 +24,6 @@ import Yoga.Theme.Types (CSSTheme)
 
 type Props
   = { spell ∷ Spell
-    , cardRef ∷ Maybe (Ref (Nullable Node))
     | Style.PropsR
     }
 
@@ -56,7 +52,7 @@ makeComponent = do
               ]
           ]
     pure
-      $ jsx card { divRef: props.cardRef, className: style.card }
+      $ jsx card { className: style.card }
           [ jsx box { className: style.container, padding: "var(--s-1)" }
               [ jsx stack { space: "var(--s-3)" }
                   [ headerCluster

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

@@ -1,9 +1,9 @@
 module Yoga.Grimoire.Spell.Styles where
 
 import Prelude hiding (top)
-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 (backgroundColor, black, boxShadow, color, darken, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, pct, rgba, sansSerif, textOverflow, textWhitespace, unitless, white, whitespaceNoWrap, width)
 import CSS.FontStyle (italic)
-import CSS.Overflow (overflow, overflowY)
+import CSS.Overflow (overflow)
 import CSS.Overflow as Overflow
 import CSS.Text.Overflow (ellipsis)
 import CSS.TextAlign (rightTextAlign, textAlign)
@@ -34,10 +34,12 @@ styles =
       do
         width (100.0 # pct)
         height (100.0 # pct)
-        boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black
+        boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) white
+        backgroundColor $ rgba 0 0 0 0.0
     , container:
       jss do
-        backgroundColor theme.backgroundColourLighter
+        backgroundColor $ rgba 0 0 0 0.0
+        width (100.0 # pct)
         (key $ fromString "user-select") "none"
         height (100.0 # pct)
     , signature:

components/src/Yoga/Grimoire/Styles.purs

@@ -1,7 +1,7 @@
 module Yoga.Grimoire.Styles where
 
 import Prelude hiding (top)
-import CSS (backgroundColor, borderRadius)
+import CSS (backgroundColor, borderRadius, height, px)
 import JSS (JSSClasses, JSSElem, jssClasses)
 import Yoga.Theme.Types (YogaTheme)
 
@@ -17,9 +17,10 @@ type Classes a
 
 styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))
 styles =
-  jssClasses \theme@{ s0 } ->
+  jssClasses \theme@{ s0, s_2 } ->
     { container:
       do
-        borderRadius s0 s0 s0 s0
-        backgroundColor theme.backgroundColourDarker
+        height (100.0 # px)
+        borderRadius s_2 s_2 s_2 s_2
+        backgroundColor $ theme.interfaceColour
     }

components/src/Yoga/Theme/Default.purs

@@ -24,7 +24,7 @@ darkTheme ∷ Theme
 darkTheme =
   { 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
+  , interfaceColour: Color.hsl 235.0 0.22 0.28
   , highlightColour: Color.hsl 285.0 0.88 0.72
   , altHighlightColour: Color.hsl 84.0 0.617 0.631
   , textFontFamily: cons' "Rubik" systemFontStack
@@ -47,8 +47,8 @@ lightTheme ∷ Theme
 lightTheme =
   darkTheme
     { textColour = Color.hsl 220.0 0.18 0.30
-    , backgroundColour = Color.hsl 30.0 0.50 0.96
-    , interfaceColour = Color.hsl 210.0 0.10 0.89
+    , backgroundColour = Color.hsl 30.0 0.50 0.97
+    , interfaceColour = Color.hsl 350.0 0.40 0.97
     , highlightColour = Color.hsl 350.0 0.93 0.67
     , altHighlightColour = Color.hsl 84.0 0.617 0.631
     , green = Color.hsl 170.0 0.39 0.40