Merge branch 'main' into 'main'

feat: arg expansions working, lez go ma nigga

See merge request BRBWaffles/website!2

frontend/elm.json

@@ -14,6 +14,7 @@
             "elm/json": "1.1.3",
             "elm/url": "1.0.0",
             "elm-community/list-extra": "8.7.0",
+            "elm-community/maybe-extra": "5.3.0",
             "mdgriffith/elm-ui": "1.1.8"
         },
         "indirect": {

frontend/src/Debate/Helpers.elm

@@ -17,6 +17,7 @@ import Html.Attributes exposing (form, id)
 import Layouts
 import List.Extra exposing (..)
 import Maybe exposing (withDefault)
+import Maybe.Extra exposing (isNothing)
 import Page exposing (Page)
 import Route exposing (Route)
 import Shared
@@ -35,47 +36,57 @@ import View exposing (View)
 --         )
 
 
-argumentMaker : (Int -> msg) -> List Int -> Argument -> Int -> Element msg
+type alias ArgMakerInput msg =
-argumentMaker onClickMsg argHeights argument indexExpand =
+    { arg : Argument
-    let
+    , index : Int
-        isArgumentExpanded : Int
+    , isExpanded : Bool
-        isArgumentExpanded =
+    , maybeHeight : Maybe Int
-            withDefault 0 <| getAt indexExpand argHeights
+    , titleClickMsg : msg
-    in
+    }
+
+
+argumentMaker : ArgMakerInput msg -> Element msg
+argumentMaker argMakerInput =
     column
-        [ B.color colourTheme.cardBackground
+        (if isNothing argMakerInput.maybeHeight then
-        , rounded 10
+            [ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index) ]
-        , E.width <| px 700
+
-        , E.htmlAttribute (id <| "arg" ++ String.fromInt indexExpand)
+         else
-        ]
+            []
-        [ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded
-        , column
-            ([ E.width <| px 600, centerX, transitionStyle, spacing 10 ]
-             -- ++ (if not isArgumentExpanded then
-             --         [ transitionStyle
-             --         -- , height <| px 0
-             --         , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
-             --         , clip
-             --         ]
-             --     else
-             --         [ transitionStyle
-             --         , height <| px 300
-             --         , clip
-             --         ]
-             --    )
         )
-            [ propositionMaker argument isArgumentExpanded
+        [ titleMaker argMakerInput
-            , reductioMaker argument isArgumentExpanded
+        , column
-            , summaryMaker argument isArgumentExpanded
+            (case argMakerInput.maybeHeight of
-            , strengthMaker argument isArgumentExpanded
+                Just h ->
-            , tableMaker argument isArgumentExpanded
+                    [ B.color colourTheme.cardBackground
-            , proofTreeMaker argument isArgumentExpanded
+                    , clip
+                    , transitionStyle
+                    , height <|
+                        px <|
+                            if argMakerInput.isExpanded then
+                                h
+
+                            else
+                                0
+                    ]
+
+                Nothing ->
+                    [ transparent True ]
+            )
+          <|
+            List.map (\x -> x argMakerInput)
+                [ propositionMaker
+                , reductioMaker
+                , summaryMaker
+                , strengthMaker
+                , tableMaker
+                , proofTreeMaker
                 ]
         ]
 
 
-titleMaker : (Int -> msg) -> Int -> String -> Int -> Element msg
+titleMaker : ArgMakerInput msg -> Element msg
-titleMaker onClickMsg indexExpand title argHeight =
+titleMaker argMakerInput =
     paragraph
         (paragraphBoldFormat
             ++ [ F.size 20
@@ -93,21 +104,21 @@ titleMaker onClickMsg indexExpand title argHeight =
                     , F.color colourTheme.nonHighlightedText
                     , D.color colourTheme.highlightTextHover
                     ]
-               , V.onClick <| onClickMsg indexExpand
+               , V.onClick <| argMakerInput.titleClickMsg
                ]
-            ++ (if argHeight == 30 then
+            ++ (case argMakerInput.maybeHeight of
-                    [ rounded 10 ]
+                    Nothing ->
+                        [ transparent True ]
 
-                else
+                    Just _ ->
                         [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ]
                )
         )
-        [ text title
+        [ text argMakerInput.arg.argumentTitle ]
-        ]
 
 
-propositionMaker : Argument -> Int -> Element msg
+propositionMaker : ArgMakerInput msg -> Element msg
-propositionMaker argument argHeight =
+propositionMaker argMakerInput =
     row
         [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 }
         ]
@@ -124,7 +135,7 @@ propositionMaker argument argHeight =
         , column
             [ E.width fill, E.alignLeft ]
             [ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
-                [ text argument.propositionTitle
+                [ text argMakerInput.arg.propositionTitle
                     |> el
                         [ F.color colourTheme.nonHighlightedText
                         , F.regular
@@ -135,9 +146,9 @@ propositionMaker argument argHeight =
         ]
 
 
-reductioMaker : Argument -> Int -> Element msg
+reductioMaker : ArgMakerInput msg -> Element msg
-reductioMaker argument argHeight =
+reductioMaker argMakerInput =
-    case argument.propositionReductio of
+    case argMakerInput.arg.propositionReductio of
         "" ->
             none
 
@@ -156,8 +167,8 @@ reductioMaker argument argHeight =
                 ]
 
 
-summaryMaker : Argument -> Int -> Element msg
+summaryMaker : ArgMakerInput msg -> Element msg
-summaryMaker argument argHeight =
+summaryMaker argMakerInput =
     row []
         [ column
             [ E.alignTop, E.alignLeft ]
@@ -173,7 +184,7 @@ summaryMaker argument argHeight =
                        , spacing 3
                        ]
                 )
-                [ text argument.propositionSummary
+                [ text argMakerInput.arg.propositionSummary
                     |> el
                         [ F.color colourTheme.nonHighlightedText
                         , F.regular
@@ -184,8 +195,8 @@ summaryMaker argument argHeight =
         ]
 
 
-strengthMaker : Argument -> Int -> Element msg
+strengthMaker : ArgMakerInput msg -> Element msg
-strengthMaker argument argHeight =
+strengthMaker argMakerInput =
     let
         barMaker : Int -> Element msg
         barMaker num =
@@ -254,12 +265,12 @@ strengthMaker argument argHeight =
             ]
         , column
             [ E.width fill, E.alignLeft, centerY ]
-            [ barMaker argument.argumentCertainty ]
+            [ barMaker argMakerInput.arg.argumentCertainty ]
         ]
 
 
-tableMaker : Argument -> Int -> Element msg
+tableMaker : ArgMakerInput msg -> Element msg
-tableMaker argument argHeight =
+tableMaker argMakerInput =
     let
         formalizationMaker : List (Element msg)
         formalizationMaker =
@@ -300,7 +311,7 @@ tableMaker argument argHeight =
                                ]
                         )
                 )
-                argument.argumentFormalization
+                argMakerInput.arg.argumentFormalization
     in
     column [ centerX, E.width <| px 600 ]
         [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
@@ -311,7 +322,7 @@ tableMaker argument argHeight =
                 , D.color colourTheme.nonHighlightedDarkText
                 , clip
                 ]
-                { data = argument.definitionTable
+                { data = argMakerInput.arg.definitionTable
                 , columns =
                     [ { header =
                             el
@@ -368,8 +379,8 @@ tableMaker argument argHeight =
         ]
 
 
-proofTreeMaker : Argument -> Int -> Element msg
+proofTreeMaker : ArgMakerInput msg -> Element msg
-proofTreeMaker argument argHeight =
+proofTreeMaker argMakerInput =
     row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ]
         [ column [ E.alignRight ]
             [ newTabLink
@@ -391,7 +402,7 @@ proofTreeMaker argument argHeight =
                             ]
                        ]
                 )
-                { url = argument.proofLink
+                { url = argMakerInput.arg.proofLink
                 , label = text "Proof Tree"
                 }
             ]

frontend/src/Pages/Arguments.elm

@@ -64,7 +64,7 @@ import Html.Attributes as H exposing (style, title, wrap)
 import Layouts
 import List.Extra as L exposing (..)
 import Page exposing (Page)
-import Ports
+import Ports exposing (gotArgHeight)
 import Route exposing (Route)
 import Shared
 import View exposing (View)
@@ -91,12 +91,21 @@ toLayout model =
 
 
 type alias Model =
-    { argHeights : List Int }
+    { argExpansions : List Bool
+    , argHeights : List Int
+    }
 
 
 init : () -> ( Model, Effect Msg )
 init () =
-    ( { argHeights = List.repeat (List.length argumentList) 30 }
+    let
+        numArgs : Int
+        numArgs =
+            List.length argumentList
+    in
+    ( { argExpansions = List.repeat numArgs False
+      , argHeights = List.repeat numArgs 0
+      }
     , Effect.none
     )
 
@@ -106,30 +115,36 @@ init () =
 
 
 type Msg
-    = ToggleExpandArg Int
+    = GotArgHeight (List Int)
+    | ToggleExpandArg Int
 
 
 update : Msg -> Model -> ( Model, Effect Msg )
 update msg model =
+    Debug.log (Debug.toString model.argHeights) <|
         case msg of
+            GotArgHeight argHeights ->
+                ( { model | argHeights = argHeights }, Effect.none )
+
             ToggleExpandArg index ->
-            ( case getAt index model.argHeights of
+                ( case getAt index model.argExpansions of
                     Nothing ->
                         model
 
-                Just elHeight ->
+                    Just isExpanded ->
-                    { model | argHeights = setAt index elHeight model.argHeights }
+                        { model
-            , Effect.sendCmd <| Ports.getArgHeight ()
+                            | argExpansions =
+                                setAt index
+                                    (not isExpanded)
+                                    model.argExpansions
+                        }
+                , Effect.sendCmd <| Ports.getArgHeight <| List.length model.argHeights
                 )
 
 
-
--- SUBSCRIPTIONS
-
-
 subscriptions : Model -> Sub Msg
 subscriptions model =
-    Sub.none
+    gotArgHeight GotArgHeight
 
 
 
@@ -156,14 +171,39 @@ debateContainer shared model =
 
 debateList : Model -> Element Msg
 debateList model =
+    let
+        argColumn : Bool -> Element Msg
+        argColumn isHidden =
             column
-        pageList
+                -- (explain Debug.todo ::
+                [ padding 30
+                , spacing 10
+                ]
             <|
-        List.map2 (argumentMaker ToggleExpandArg model.argHeights)
+                List.map argumentMaker <|
+                    List.map4
+                        (\w x y z ->
+                            { arg = w
+                            , index = x
+                            , isExpanded = y
+                            , maybeHeight =
+                                if isHidden then
+                                    Nothing
+
+                                else
+                                    z
+                            , titleClickMsg = ToggleExpandArg x
+                            }
+                        )
                         argumentList
+                        (List.range 0 <| List.length model.argHeights)
+                        model.argExpansions
+                        (List.map Just model.argHeights)
+    in
+    el
+        [ behindContent <| argColumn True ]
     <|
-            List.range 0 <|
+        argColumn False
-                List.length model.argHeights
 
 
 argumentList : List Argument

frontend/src/Ports.elm

@@ -1,7 +1,7 @@
-port module Ports exposing (getArgHeight)
+port module Ports exposing (getArgHeight, gotArgHeight)
 
 
-port getArgHeight : () -> Cmd msg
+port getArgHeight : Int -> Cmd msg
 
 
-port gotArgHeight : (() -> msg) -> Sub msg
+port gotArgHeight : (List Int -> msg) -> Sub msg

frontend/src/interop.js

@@ -15,16 +15,20 @@ export const flags = ({ env }) => {
 // to your Elm application, or subscribe to incoming
 // messages from Elm
 export const onReady = ({ app, env }) => {
-    app.ports.getArgHeight.subscribe(() => {
+    app.ports.getArgHeight.subscribe((numArgs) => {
+        const heights = [];
 
-        setTimeout(() => {
+        for (let i = 0; i < numArgs; i++) {
-            const element = document.getElementById('arg1');
+            const element = document.getElementById(`arg${i}`);
 
             if (element) {
-            const height = element.offsetHeight;
+                heights.push(element.offsetHeight);
-            console.log(`Height of the element: ${height}px`);
             } else {
-            console.error('Element not found.');
+                console.error(`Element with ID 'arg${i}' not found.`);
+                heights.push(null); // Add null or any placeholder for missing elements
             }
-        }, 0)
+        }
-    })}
+        
+        app.ports.gotArgHeight.send(heights);
+    });
+};

parts/config/devshells.nix

@@ -21,6 +21,13 @@
           elm-review
           elm-test
           ;
+
+        inherit
+          (pkgs.nodePackages)
+          "@commitlint/config-conventional"
+          npm
+          typescript-language-server
+          ;
       };
     };
   };