module Pages.Debate.Arguments exposing (Model, Msg, page) import Config.Data.Identity exposing (pageNames) import Config.Helpers.Cards.Helpers exposing (cardMaker) import Config.Helpers.Cards.Types as C import Config.Helpers.Converters exposing (toTitleCase) import Config.Helpers.Format exposing ( headerFontSizeSmall , paragraphFontSize , paragraphSpacing ) import Config.Helpers.Headers.Helpers exposing (..) import Config.Helpers.Headers.Records exposing (argumentHeader) import Config.Helpers.Headers.Types as R exposing (..) import Config.Helpers.ImageFolders as M exposing (..) import Config.Helpers.Response exposing ( pageList , topLevelContainer ) import Config.Helpers.StrengthBar exposing ( barMaker , barPadding ) import Config.Helpers.ToolTip exposing (tooltip) import Config.Helpers.Viewport exposing (resetViewport) import Config.Pages.Debate.Arguments.List exposing ( argumentList ) import Config.Pages.Debate.Arguments.Types exposing (..) import Config.Style.Colour exposing (colourTheme) import Config.Style.Glow exposing ( glowDeepDarkGrey , glowDeepDarkOrange ) import Config.Style.Transitions exposing (transitionStyleSlow) import Effect exposing (Effect) import Element as E exposing (..) import Element.Background as B import Element.Border as D import Element.Font as F import Html exposing (div, hr) import Html.Attributes as H exposing (style, title, wrap) import Layouts import Page exposing (Page) import Route exposing (Route) import Shared import View exposing (View) page : Shared.Model -> Route () -> Page Model Msg page shared route = Page.new { init = init , update = update , subscriptions = subscriptions , view = view shared } |> Page.withLayout toLayout toLayout : Model -> Layouts.Layout Msg toLayout model = Layouts.Navbar {} -- INIT type alias Model = {} init : () -> ( Model, Effect Msg ) init () = ( {} , Effect.batch [ Effect.map (\_ -> NoOp) (Effect.sendCmd resetViewport) , Effect.none ] ) -- UPDATE type Msg = NoOp update : Msg -> Model -> ( Model, Effect Msg ) update msg model = case msg of NoOp -> ( model , Effect.none ) -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = Sub.none -- VIEW view : Shared.Model -> Model -> View Msg view shared model = { title = "debate (" ++ pageNames.pageArguments ++ ")" , attributes = [] , element = debateContainer shared.device } debateContainer : Device -> Element msg debateContainer device = topLevelContainer (debateList device) debateList : Device -> Element msg debateList device = column (case ( device.class, device.orientation ) of _ -> pageList device ) <| List.concat [ [ headerMaker (R.Arguments argumentHeader) ] , List.map (\argument -> cardMaker device (C.Argument argument) (contentList device argument) ) argumentList ] contentList : Device -> Argument -> List (Element msg) contentList device argument = [ row [ width fill , paddingEach { top = case ( device.class, device.orientation ) of ( Phone, Portrait ) -> 8 ( Tablet, Portrait ) -> 8 _ -> 0 , right = 0 , bottom = 0 , left = 0 } ] [ column [ width fill, spacing 8 ] [ summaryMakerDesktop device argument , strengthBar device argument ] , case ( device.class, device.orientation ) of ( Phone, Portrait ) -> none ( Tablet, Portrait ) -> none _ -> argumentImageMaker argument ] , tableMaker device argument , desktopFormalizationMaker argument , proofTreeButton argument.proofLink ] argumentImageMaker : Argument -> Element msg argumentImageMaker argument = el [ alignRight , alignTop , centerY , paddingEach { top = 0 , right = 0 , bottom = 0 , left = 20 } ] <| el [ D.rounded 10 , D.width 3 , D.color colourTheme.backgroundLightGrey , B.color colourTheme.backgroundLightGrey ] <| E.image [ alignRight , alignTop , D.rounded 10 , clip , E.width <| px 65 , E.height <| px 65 ] { src = imagePathMaker M.Argument argument.argumentImage , description = "" } proofTreeButton : String -> Element msg proofTreeButton url = newTabLink [ alignTop , alignRight , paddingXY 0 5 ] { url = url , label = el [ F.color colourTheme.textLightGrey , B.color colourTheme.textDarkOrange , D.rounded 10 , paddingEach { top = 6 , bottom = 3 , left = 10 , right = 10 } , mouseOver [ F.color colourTheme.textLightOrange , B.color colourTheme.textDeepDarkOrange ] , transitionStyleSlow , headerFontSizeSmall , F.bold ] <| text "Proof Tree" } infoSpacing = E.width <| px 100 propositionMaker : Element msg propositionMaker = column [ E.alignTop, E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , headerFontSizeSmall , F.bold , infoSpacing ] [ el [ tooltip "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.textLightOrange ] ] ] propositionTitleMaker : Argument -> Element msg propositionTitleMaker argument = column [ E.width fill, E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , headerFontSizeSmall , F.bold ] [ text argument.propositionTitle |> el [ F.color colourTheme.textLightGrey , F.regular , paragraphFontSize ] ] ] reductioMakerDesktop : Argument -> Element msg reductioMakerDesktop argument = case argument.propositionReductio of "" -> none reductio -> row [] [ reductioMaker , reductioMakerTitle reductio ] reductioMaker : Element msg reductioMaker = column [ E.alignTop, E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , headerFontSizeSmall , F.bold , infoSpacing ] [ el [ tooltip "This is the position from which the reductio ad absurdum is derived." ] (text "Reductio:") |> el [ F.color colourTheme.textLightOrange ] ] ] reductioMakerTitle : String -> Element msg reductioMakerTitle reductio = column [ E.width fill, E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , paragraphFontSize , spacing 3 ] [ text reductio ] ] summaryMakerDesktop : Device -> Argument -> Element msg summaryMakerDesktop device argument = (case ( device.class, device.orientation ) of ( Phone, Portrait ) -> column ( Tablet, Portrait ) -> column _ -> row ) [] [ summaryMaker , summaryMakerTitle argument ] summaryMaker : Element msg summaryMaker = column [ E.alignTop , E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , paragraphFontSize , F.bold , infoSpacing , headerFontSizeSmall ] [ el [ tooltip "The following information provides additional context and insight into the reasoning behind the argument." ] (text "Summary:") |> el [ F.color colourTheme.textLightOrange ] ] ] summaryMakerTitle : Argument -> Element msg summaryMakerTitle argument = column [ E.width fill , E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , F.bold , spacing 3 , headerFontSizeSmall ] [ text argument.propositionSummary |> el [ F.color colourTheme.textLightGrey , F.regular , paragraphFontSize ] ] ] strengthBar : Device -> Argument -> Element msg strengthBar device argument = (case ( device.class, device.orientation ) of ( Phone, Portrait ) -> column ( Tablet, Portrait ) -> column _ -> row ) [ E.width fill ] [ strengthMaker , strengthMakerBar argument ] strengthMaker : Element msg strengthMaker = column [ E.alignTop , E.alignLeft ] [ paragraph [ F.color colourTheme.textLightGrey , paragraphSpacing , paragraphFontSize , F.bold , E.width fill , headerFontSizeSmall ] [ el [ tooltip "This represents my confidence in the soundness of the argument." ] (el [ paddingEach { top = 0 , right = 5 , bottom = 0 , left = 0 } ] <| text "Confidence:" ) |> el [ F.color colourTheme.textLightOrange ] ] ] strengthMakerBar : Argument -> Element msg strengthMakerBar argument = barPadding [ barMaker getConfidenceTooltip argument.argumentCertainty ] getConfidenceTooltip : Int -> String getConfidenceTooltip num = case num of 0 -> "Extremely low. Speculative reasoning." 1 -> "Very low. Extremely weak reasoning." 2 -> "Low. Weak reasoning." 3 -> "Kinda low. Somewhat weak reasoning." 4 -> "Below average. More weak than strong." 5 -> "Moderate. OK reasoning." 6 -> "Above average. More strong than weak." 7 -> "Kinda high. Somewhat strong reasoning." 8 -> "High. Robust reasoning." 9 -> "Very high. Extremely robust reasoning." 10 -> "Extremely high. Air tight reasoning." _ -> "Confidence level out of expected range." tableMaker : Device -> Argument -> Element msg tableMaker device argument = let cellPadding : Attribute msg cellPadding = paddingXY 10 5 in column [ centerX , E.width fill ] [ el [ F.color colourTheme.textLightGrey , paragraphSpacing , paragraphFontSize , F.bold , E.alignLeft , E.width fill , htmlAttribute <| H.style "position" "relative" ] <| E.table ([ D.rounded 10 , D.width 2 , D.color colourTheme.textDarkGrey , clip ] ++ (case ( device.class, device.orientation ) of ( Phone, Portrait ) -> [ B.color colourTheme.backgroundSpreadsheet ] ( Tablet, Portrait ) -> [ B.color colourTheme.backgroundSpreadsheet ] _ -> [] ) ) { data = argument.definitionTable , columns = [ { header = el [ F.bold , D.widthEach { bottom = 1 , top = 1 , left = 1 , right = 1 } , D.color colourTheme.textDarkGrey , cellPadding , E.width fill ] <| el [ F.color colourTheme.textLightOrange ] <| text "Definiendum" , width = fill |> maximum 30 , view = \definition -> el [ F.color colourTheme.textLightOrange , F.bold , D.widthEach { bottom = 1 , top = 0 , left = 1 , right = 1 } , D.color colourTheme.textDarkGrey , cellPadding , E.height fill ] <| el [ centerX ] <| paragraph [] [ text definition.definiendum ] } , { header = el [ F.bold , D.widthEach { bottom = 1 , top = 1 , left = 0 , right = 1 } , D.color colourTheme.textDarkGrey , cellPadding , E.width fill ] <| el [ F.color colourTheme.textLightOrange ] <| text "Definiens" , width = fill , view = \definition -> el [ F.color colourTheme.textLightGrey , F.regular , D.widthEach { bottom = 1 , top = 0 , left = 0 , right = 1 } , D.color colourTheme.textDarkGrey , cellPadding , E.height fill ] <| el [] <| paragraph [] [ text definition.definiens ] } ] } ] argumentDesktopPadding : Attribute msg argumentDesktopPadding = paddingXY 40 3 desktopFormalizationMaker : Argument -> Element msg desktopFormalizationMaker argument = formalizationMaker argument argumentDesktopPadding formalizationMaker : Argument -> Attribute msg -> Element msg formalizationMaker argument padding = column [ centerX , E.width fill , spacing 10 ] (List.indexedMap (\index argumentEntry -> column [ F.color colourTheme.textLightGrey , paragraphSpacing , paragraphFontSize , spacing 3 , centerX , E.width fill , padding ] (List.indexedMap (\entryIndex entryWithNotation -> column [ centerX , F.center , spacing 3 , E.width fill ] [ paragraph [ F.color colourTheme.textLightOrange , F.bold , spacing 3 , paragraphFontSize ] [ text (if entryIndex < List.length argumentEntry.premises then "P" ++ String.fromInt (entryIndex + 1) ++ ") " else "C) " ) , text (if entryIndex < List.length argumentEntry.premises then entryWithNotation.premise else argumentEntry.conclusion ) |> el [ F.color colourTheme.textLightGrey , F.regular , E.width fill ] ] , paragraph [ centerX , F.center , spacing 3 , E.width fill , F.color colourTheme.textLightOrange , F.bold ] [ text (if entryIndex < List.length argumentEntry.premises then "(" ++ entryWithNotation.notation ++ ")" else "(∴" ++ argumentEntry.conclusionNotation ++ ")" ) ] ] ) (argumentEntry.premises ++ [ { premise = argumentEntry.conclusion, notation = argumentEntry.conclusionNotation } ]) ) ) argument.argumentFormalization )