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 (..) import Effect exposing (Effect) import Element as E exposing (..) 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.Attributes exposing (form, id) import Layouts import List.Extra exposing (..) import Maybe exposing (withDefault) import Page exposing (Page) import Route exposing (Route) import Shared import View exposing (View) -- (if isArgumentExpanded then -- [ height <| px 0 -- , transitionStyle -- , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 } -- ] -- else -- [ -- ] -- ) argumentMaker : (Int -> msg) -> List Int -> Argument -> Int -> Element msg argumentMaker onClickMsg argHeights argument indexExpand = let isArgumentExpanded : Int isArgumentExpanded = withDefault 0 <| getAt indexExpand argHeights in column [ B.color colourTheme.cardBackground , rounded 10 , E.width <| px 700 , E.htmlAttribute (id <| "arg" ++ String.fromInt indexExpand) ] [ 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 , reductioMaker argument isArgumentExpanded , summaryMaker argument isArgumentExpanded , strengthMaker argument isArgumentExpanded , tableMaker argument isArgumentExpanded , proofTreeMaker argument isArgumentExpanded ] ] titleMaker : (Int -> msg) -> Int -> String -> Int -> Element msg titleMaker onClickMsg indexExpand title argHeight = 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 , roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } , alignBottom , F.center , transitionStyle , pointer , mouseOver [ B.color colourTheme.highlightTextHover , F.color colourTheme.nonHighlightedText , D.color colourTheme.highlightTextHover ] , V.onClick <| onClickMsg indexExpand ] ++ (if argHeight == 30 then [ rounded 10 ] else [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ] ) ) [ text title ] propositionMaker : Argument -> Int -> Element msg propositionMaker argument argHeight = 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 ] ] ] ] reductioMaker : Argument -> Int -> Element msg reductioMaker argument argHeight = 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 (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) [ text reductio ] ] ] summaryMaker : Argument -> Int -> Element msg summaryMaker argument argHeight = row [] [ 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 , spacing 3 ] ) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText , F.regular , F.size 16 ] ] ] ] strengthMaker : Argument -> Int -> Element msg strengthMaker argument argHeight = let barMaker : Int -> Element msg barMaker num = el [ E.height <| px 12 , E.width <| px 500 , D.rounded 10 , D.color colourTheme.nonHighlightedDarkText , D.width 2 , B.gradient { angle = 90 , steps = List.concat [ List.repeat num colourTheme.barGreen , List.repeat (10 - num) colourTheme.barRed ] } , tooltip below (myTooltip (getConfidenceTooltip num)) ] none getConfidenceTooltip : Int -> String getConfidenceTooltip num = case num of 0 -> "Extremely low. Speculative reasoning." 1 -> "Very low. Extremely weak reasoning." 2 -> "Kinda low. Weak reasoning." 3 -> "Low. Somewhat weak reasoning." 4 -> "Below average. More weak than strong." 5 -> "Moderate. OK reasoning." 6 -> "Above average. More strong than weak." 7 -> "High. Somewhat strong reasoning." 8 -> "Kinda high. Robust reasoning." 9 -> "Very high. Extremely robust reasoning." 10 -> "Extremely high. Air tight reasoning." _ -> "Confidence level out of expected range." in 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 "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ] ] , column [ E.width fill, E.alignLeft, centerY ] [ barMaker argument.argumentCertainty ] ] tableMaker : Argument -> Int -> Element msg tableMaker argument argHeight = let formalizationMaker : List (Element msg) formalizationMaker = let argumentFormatting : List (Attribute msg) argumentFormatting = [ centerX, F.center, spacing 3 ] in List.indexedMap (\index argumentEntry -> column (paragraphFormat ++ [ spacing 3, centerX, E.width <| px 500, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]) (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 in column [ centerX, E.width <| px 600 ] [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ]) [ 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 ] formalizationMaker ] proofTreeMaker : Argument -> Int -> Element msg proofTreeMaker argument argHeight = row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, 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 10 , 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" } ] ]