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 Maybe.Extra exposing (isNothing) 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 -- [ -- ] -- ) type alias ArgMakerInput msg = { arg : Argument , index : Int , isExpanded : Bool , maybeHeight : Maybe Int , titleClickMsg : msg } argumentMaker : ArgMakerInput msg -> Element msg argumentMaker argMakerInput = column (if isNothing argMakerInput.maybeHeight then [ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index) ] else [] ) [ titleMaker argMakerInput , column (case argMakerInput.maybeHeight of Just h -> [ B.color colourTheme.cardBackground , 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 : ArgMakerInput msg -> Element msg titleMaker argMakerInput = 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 <| argMakerInput.titleClickMsg ] ++ (case argMakerInput.maybeHeight of Nothing -> [ transparent True ] Just _ -> [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ] ) ) [ text argMakerInput.arg.argumentTitle ] propositionMaker : ArgMakerInput msg -> Element msg propositionMaker argMakerInput = 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 argMakerInput.arg.propositionTitle |> el [ F.color colourTheme.nonHighlightedText , F.regular , F.size 16 ] ] ] ] reductioMaker : ArgMakerInput msg -> Element msg reductioMaker argMakerInput = case argMakerInput.arg.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 : ArgMakerInput msg -> Element msg summaryMaker argMakerInput = 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 argMakerInput.arg.propositionSummary |> el [ F.color colourTheme.nonHighlightedText , F.regular , F.size 16 ] ] ] ] strengthMaker : ArgMakerInput msg -> Element msg strengthMaker argMakerInput = 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 argMakerInput.arg.argumentCertainty ] ] tableMaker : ArgMakerInput msg -> Element msg tableMaker argMakerInput = 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 ] ] ] ] ) ) argMakerInput.arg.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 = argMakerInput.arg.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 : ArgMakerInput msg -> Element msg proofTreeMaker argMakerInput = 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 = argMakerInput.arg.proofLink , label = text "Proof Tree" } ] ]