feat: push

This commit is contained in:
Nick 2024-11-23 02:28:14 -06:00
parent 4d59a6997c
commit f79e2d9fca
5 changed files with 601 additions and 264 deletions

View file

@ -1,5 +1,9 @@
module Debate.Helpers exposing (..)
-- import Html exposing (div, hr)
-- import Html.Attributes as H exposing (style, title, wrap)
-- import Config.Types exposing (..)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Debate.Types exposing (..)
@ -9,217 +13,294 @@ import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Events as V exposing (..)
import Element.Font as F exposing (..)
import Html exposing (div, hr)
import Html.Attributes as H exposing (style, title, wrap)
import Layouts
import List.Extra exposing (..)
import Maybe exposing (withDefault)
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)
argumentMaker : Argument -> Element msg
argumentMaker argument =
-- argumentMaker : List Bool -> Argument -> Int -> Element msg
argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg
argumentMaker onClickMsg areArgsExpanded argument indexExpand =
let
argRows : List (Element msg)
argRows =
let
argumentFormatting : List (Attribute msg)
argumentFormatting =
[ centerX, F.center, spacing 3 ]
in
List.indexedMap
(\index argumentEntry ->
column (paragraphFormat ++ [ spacing 3, paddingEach { top = 0, right = 0, bottom = 0, left = 0 }, E.width <| px 550, centerX ])
(List.indexedMap
(\premiseIndex premiseWithNotation ->
column argumentFormatting
[ paragraph paragraphHightlightedBoldText
[ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
, text premiseWithNotation.premise
|> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
]
, paragraph argumentFormatting
[ text ("(" ++ premiseWithNotation.notation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ]
]
]
)
argumentEntry.premises
++ [ column argumentFormatting
[ paragraph paragraphHightlightedBoldText
[ text "C)"
, text argumentEntry.conclusion
|> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
]
, paragraph argumentFormatting
[ text ("(" ++ argumentEntry.conclusionNotation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ]
]
]
]
)
)
argument.argumentFormalization
maybeReductioField : Element msg
maybeReductioField =
case argument.propositionReductio of
"" ->
none
reductio ->
row []
[ column
[ E.alignTop, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
[ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ]
]
]
, column [ E.width fill, E.alignLeft ]
[ paragraph []
[ text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
]
]
]
isArgumentExpanded : Bool
isArgumentExpanded =
withDefault False <| getAt indexExpand areArgsExpanded
in
column
[ paragraphWidth, E.alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 0, left = 0 } ]
[ paragraph
(paragraphBoldFormat
++ [ F.size 20
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, alignBottom
, F.center
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
]
)
[ text argument.argumentTitle
--create expandable text for this in the future
]
, row []
[ column
[ E.alignTop, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
[ el [ tooltip below (myTooltip "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate.") ] (text "Proposition:") |> el [ F.color colourTheme.highlightText ] ]
]
, column
[ E.width fill, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
]
, maybeReductioField
, row [ E.alignTop ]
[ column
[ E.alignTop, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
[ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (text "Summary:") |> el [ F.color colourTheme.highlightText ]
]
]
, column
[ E.width fill, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
]
, wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill, paddingEach { top = 10, right = 0, bottom = 10, left = 0 } ])
[ E.table
[ spacing 0
, D.rounded 10
, D.width 2
, D.color colourTheme.nonHighlightedDarkText
, clip
]
{ data = argument.definitionTable
, columns =
[ { header =
el
[ F.bold
, D.widthEach { bottom = 1, top = 1, left = 1, right = 1 }
, D.color colourTheme.nonHighlightedDarkText
, padding 8
]
(text "Definiendum" |> el [ F.color colourTheme.highlightText ])
, width = fill |> maximum 50
, view =
\definition ->
row
[ F.color colourTheme.highlightText
, F.bold
, D.widthEach { bottom = 1, top = 0, left = 1, right = 1 }
, D.color colourTheme.nonHighlightedDarkText
, padding 8
, E.height fill
]
[ row [ centerX ]
[ paragraph [] [ text definition.definiendum ]
]
]
}
, { header =
el
[ F.bold
, D.widthEach { bottom = 1, top = 1, left = 0, right = 1 }
, D.color colourTheme.nonHighlightedDarkText
, padding 8
]
(text "Definiens" |> el [ F.color colourTheme.highlightText ])
, width = fill
, view =
\definition ->
paragraph
[ F.color colourTheme.nonHighlightedText
, F.regular
, D.widthEach { bottom = 1, top = 0, left = 0, right = 1 }
, D.color colourTheme.nonHighlightedDarkText
, padding 8
, E.height fill
]
[ row []
[ paragraph [] [ text definition.definiens ]
]
]
}
]
}
]
, column [ centerX ]
(argRows
++ [ column [ paragraphWidth, paddingEach { top = 5, right = 0, bottom = 0, left = 0 } ]
[ row [ centerX, E.width fill ]
[ column [ E.alignRight ]
[ newTabLink
(paragraphBoldFormat
++ [ F.size 18
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, E.width <| px 120
, F.center
, E.alignRight
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
]
)
{ url = argument.proofLink
, label = text "Proof Tree"
}
]
]
]
]
)
column [ explain Debug.todo ]
[ titleMaker onClickMsg indexExpand argument.argumentTitle
, paragraphMaker argument isArgumentExpanded
]
titleMaker : (Int -> msg) -> Int -> String -> Element msg
titleMaker onClickMsg indexExpand title =
paragraph
(paragraphBoldFormat
++ [ F.size 20
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, alignBottom
, F.center
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
, V.onClick <| onClickMsg indexExpand
]
)
[ text title
]
paragraphMaker : Argument -> Bool -> Element msg
paragraphMaker argument isArgumentExpanded =
row []
[ -- column
-- [ E.alignTop, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
-- [-- el [ tooltip below (myTooltip titleTooltip) ] (text title) |> el [ F.color colourTheme.highlightText ]
-- ]
-- ]
-- ,
paragraph
(if isArgumentExpanded then
[ F.size 0, transitionStyle ]
else
[ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
)
[ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ]
]
-- argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg
-- argumentMaker onClickMsg areArgsExpanded argument indexExpand =
-- let
-- maybeIsExpanded : Maybe Bool
-- maybeIsExpanded =
-- getAt indexExpand areArgsExpanded
-- argRows : List (Element msg)
-- argRows =
-- let
-- argumentFormatting : List (Attribute msg)
-- argumentFormatting =
-- [ centerX, F.center, spacing 3 ]
-- in
-- List.indexedMap
-- (\index argumentEntry ->
-- column (paragraphFormat ++ [ spacing 3, paddingEach { top = 0, right = 0, bottom = 0, left = 0 }, E.width <| px 550, centerX ])
-- (List.indexedMap
-- (\premiseIndex premiseWithNotation ->
-- column argumentFormatting
-- [ paragraph paragraphHightlightedBoldText
-- [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
-- , text premiseWithNotation.premise
-- |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
-- ]
-- , paragraph argumentFormatting
-- [ text ("(" ++ premiseWithNotation.notation ++ ")")
-- |> el [ F.color colourTheme.highlightText, F.bold ]
-- ]
-- ]
-- )
-- argumentEntry.premises
-- ++ [ column argumentFormatting
-- [ paragraph paragraphHightlightedBoldText
-- [ text "C)"
-- , text argumentEntry.conclusion
-- |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
-- ]
-- , paragraph argumentFormatting
-- [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")")
-- |> el [ F.color colourTheme.highlightText, F.bold ]
-- ]
-- ]
-- ]
-- )
-- )
-- argument.argumentFormalization
-- maybeReductioField : Element msg
-- maybeReductioField =
-- case argument.propositionReductio of
-- "" ->
-- none
-- reductio ->
-- row []
-- [ column
-- [ E.alignTop, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
-- [ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ]
-- ]
-- ]
-- , column [ E.width fill, E.alignLeft ]
-- [ paragraph []
-- [ text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
-- ]
-- ]
-- ]
-- in
-- column
-- [ paragraphWidth
-- , E.alignLeft
-- , spacing 8
-- , explain Debug.todo
-- ]
-- [ paragraph
-- (paragraphBoldFormat
-- ++ [ F.size 20
-- , F.color colourTheme.backgroundColour
-- , B.color colourTheme.highlightText
-- , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
-- , D.width 1
-- , D.rounded 20
-- , alignBottom
-- , F.center
-- , transitionStyle
-- , mouseOver
-- [ B.color colourTheme.highlightTextHover
-- , F.color colourTheme.nonHighlightedText
-- , D.color colourTheme.highlightTextHover
-- ]
-- , V.onClick <| onClickMsg indexExpand
-- ]
-- )
-- [ text argument.argumentTitle
-- ]
-- , paragraph
-- (case maybeIsExpanded of
-- Just True ->
-- [ F.size 0, transitionStyle ]
-- _ ->
-- [ transitionStyle, F.size 50 ]
-- )
-- [ row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
-- [ column
-- [ E.alignTop, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
-- [ el [ tooltip below (myTooltip "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate.") ] (text "Proposition:") |> el [ F.color colourTheme.highlightText ] ]
-- ]
-- , column
-- [ E.width fill, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
-- ]
-- , maybeReductioField
-- , row [ E.alignTop ]
-- [ column
-- [ E.alignTop, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
-- [ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (text "Summary:") |> el [ F.color colourTheme.highlightText ]
-- ]
-- ]
-- , column
-- [ E.width fill, E.alignLeft ]
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
-- ]
-- , wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill, paddingEach { top = 10, right = 0, bottom = 10, left = 0 } ])
-- [ E.table
-- [ spacing 0
-- , D.rounded 10
-- , D.width 2
-- , D.color colourTheme.nonHighlightedDarkText
-- , clip
-- ]
-- { data = argument.definitionTable
-- , columns =
-- [ { header =
-- el
-- [ F.bold
-- , D.widthEach { bottom = 1, top = 1, left = 1, right = 1 }
-- , D.color colourTheme.nonHighlightedDarkText
-- , padding 8
-- ]
-- (text "Definiendum" |> el [ F.color colourTheme.highlightText ])
-- , width = fill |> maximum 50
-- , view =
-- \definition ->
-- row
-- [ F.color colourTheme.highlightText
-- , F.bold
-- , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 }
-- , D.color colourTheme.nonHighlightedDarkText
-- , padding 8
-- , E.height fill
-- ]
-- [ row [ centerX ]
-- [ paragraph [] [ text definition.definiendum ]
-- ]
-- ]
-- }
-- , { header =
-- el
-- [ F.bold
-- , D.widthEach { bottom = 1, top = 1, left = 0, right = 1 }
-- , D.color colourTheme.nonHighlightedDarkText
-- , padding 8
-- ]
-- (text "Definiens" |> el [ F.color colourTheme.highlightText ])
-- , width = fill
-- , view =
-- \definition ->
-- paragraph
-- [ F.color colourTheme.nonHighlightedText
-- , F.regular
-- , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 }
-- , D.color colourTheme.nonHighlightedDarkText
-- , padding 8
-- , E.height fill
-- ]
-- [ row []
-- [ paragraph [] [ text definition.definiens ]
-- ]
-- ]
-- }
-- ]
-- }
-- ]
-- , column [ centerX ]
-- (argRows
-- ++ [ column [ paragraphWidth, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
-- [ row [ centerX, E.width fill ]
-- [ column [ E.alignRight ]
-- [ newTabLink
-- (paragraphBoldFormat
-- ++ [ F.size 18
-- , F.color colourTheme.backgroundColour
-- , B.color colourTheme.highlightText
-- , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
-- , D.width 1
-- , D.rounded 20
-- , E.width <| px 105
-- , F.center
-- , E.alignRight
-- , transitionStyle
-- , mouseOver
-- [ B.color colourTheme.highlightTextHover
-- , F.color colourTheme.nonHighlightedText
-- , D.color colourTheme.highlightTextHover
-- ]
-- ]
-- )
-- { url = argument.proofLink
-- , label = text "Proof Tree"
-- }
-- ]
-- ]
-- ]
-- -- , basicDivider
-- ]
-- )
-- ]
-- ]