mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
735 lines
20 KiB
Elm
Executable file
735 lines
20 KiB
Elm
Executable file
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 argument
|
|
, strengthBar 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
|
|
, paragraphFontSize
|
|
, F.bold
|
|
]
|
|
++ [ F.size 18 ]
|
|
)
|
|
[ text argument.propositionTitle
|
|
|> el
|
|
[ F.color colourTheme.textLightGrey
|
|
, F.regular
|
|
, F.size 16
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
reductioMakerDesktop : Argument -> Element msg
|
|
reductioMakerDesktop argument =
|
|
case argument.propositionReductio of
|
|
"" ->
|
|
none
|
|
|
|
reductio ->
|
|
row
|
|
[]
|
|
[ reductioMaker
|
|
, reductioMakerTitle reductio
|
|
]
|
|
|
|
|
|
reductioMakerMobile : Argument -> Element msg
|
|
reductioMakerMobile 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
|
|
, paragraphFontSize
|
|
, F.bold
|
|
]
|
|
++ [ F.size 18
|
|
, 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
|
|
]
|
|
++ [ F.size 16
|
|
, spacing 3
|
|
]
|
|
)
|
|
[ text reductio ]
|
|
]
|
|
|
|
|
|
summaryMakerDesktop : Argument -> Element msg
|
|
summaryMakerDesktop argument =
|
|
row []
|
|
[ summaryMaker
|
|
, summaryMakerTitle argument
|
|
]
|
|
|
|
|
|
summaryMakerMobile : Argument -> Element msg
|
|
summaryMakerMobile argument =
|
|
column []
|
|
[ summaryMaker
|
|
, summaryMakerTitle argument
|
|
]
|
|
|
|
|
|
summaryMaker : Element msg
|
|
summaryMaker =
|
|
column
|
|
[ E.alignTop
|
|
, E.alignLeft
|
|
]
|
|
[ paragraph
|
|
([ F.color colourTheme.textLightGrey
|
|
, paragraphSpacing
|
|
, paragraphFontSize
|
|
, F.bold
|
|
]
|
|
++ [ F.size 18
|
|
, infoSpacing
|
|
]
|
|
)
|
|
[ 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
|
|
, paragraphFontSize
|
|
, F.bold
|
|
]
|
|
++ [ F.size 18
|
|
, spacing 3
|
|
]
|
|
)
|
|
[ text argument.propositionSummary
|
|
|> el
|
|
[ F.color colourTheme.textLightGrey
|
|
, F.regular
|
|
, F.size 16
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
strengthBar : Argument -> Element msg
|
|
strengthBar argument =
|
|
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
|
|
]
|
|
++ [ F.size 18
|
|
, E.width fill
|
|
]
|
|
)
|
|
[ 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
|
|
)
|