diff --git a/out/main.js b/out/main.js index c1d00253bfc44fb1dc389e69be693fa45efce33c..802726062996692053e07a5beb37a3d206f0aec7 100644 --- a/out/main.js +++ b/out/main.js @@ -8693,22 +8693,22 @@ var $author$project$About$aboutView = A2( _List_Nil, _List_fromArray( [ - $elm$html$Html$text('\r\n Die wenigsten Geschichten im Pen & Paper Rollenspiel DSA kommen ohne einen Kampf aus.\r\n Die Mechanik unterscheidet sich allerdings etwas vom normalen Spielgeschehen.\r\n '), + $elm$html$Html$text('\n Die wenigsten Geschichten im Pen & Paper Rollenspiel DSA kommen ohne einen Kampf aus.\n Die Mechanik unterscheidet sich allerdings etwas vom normalen Spielgeschehen.\n '), A2($elm$html$Html$br, _List_Nil, _List_Nil), - $elm$html$Html$text('\r\n Zur Vorbereitung wird die Reihenfolge der Kämpfenden bestimmt. Dazu wird der die Initiative (INI) ausgewürfelt.\r\n Der Spielleiter würfelt für alle NSCs.\r\n '), + $elm$html$Html$text('\n Zur Vorbereitung wird die Reihenfolge der Kämpfenden bestimmt. Dazu wird der die Initiative (INI) ausgewürfelt.\n Der Spielleiter würfelt für alle NSCs.\n '), A2($elm$html$Html$br, _List_Nil, _List_Nil), - $elm$html$Html$text('\r\n Dieser Reihenfolge nach dürfen die Charaktere jetzt je einen Gegner angreifen.\r\n ') + $elm$html$Html$text('\n Dieser Reihenfolge nach dürfen die Charaktere jetzt je einen Gegner angreifen.\n ') ])), A2( $elm$html$Html$p, _List_Nil, _List_fromArray( [ - $elm$html$Html$text('\r\n Um anzugreifen muss zunächst eine Probe mit einem W20 auf den AT-Wert bestanden werden.\r\n Gleichzeitig wirft der Angegriffene auf PA oder AW. Gelingt die Probe bricht der Angriff an dieser Stelle ab.\r\n '), + $elm$html$Html$text('\n Um anzugreifen muss zunächst eine Probe mit einem W20 auf den AT-Wert bestanden werden.\n Gleichzeitig wirft der Angegriffene auf PA oder AW. Gelingt die Probe bricht der Angriff an dieser Stelle ab.\n '), A2($elm$html$Html$br, _List_Nil, _List_Nil), - $elm$html$Html$text('\r\n War der Angriff erfolgreich und die Verteidigung ein Fehlschlag wird der Schaden berechnet.\r\n Das ist die Gelegenheit den \"Angriff\"-Button zu klicken.\r\n Entsprechend der Angabe der Waffe (z.B 1W6+4) wird der Angriffswert erwürfelt.\r\n Von diesem wird der RS-Wert des Angegriffenen subtrahiert und das Ergebnis von den LeP abgezogen.\r\n '), + $elm$html$Html$text('\n War der Angriff erfolgreich und die Verteidigung ein Fehlschlag wird der Schaden berechnet.\n Das ist die Gelegenheit den \"Angriff\"-Button zu klicken.\n Entsprechend der Angabe der Waffe (z.B 1W6+4) wird der Angriffswert erwürfelt.\n Von diesem wird der RS-Wert des Angegriffenen subtrahiert und das Ergebnis von den LeP abgezogen.\n '), A2($elm$html$Html$br, _List_Nil, _List_Nil), - $elm$html$Html$text('\r\n Die Berechnung übernimmt der Manager vollständig!\r\n ') + $elm$html$Html$text('\n Die Berechnung übernimmt der Manager vollständig!\n ') ])), A2( $elm$html$Html$p, @@ -12048,6 +12048,12 @@ var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Attrs = function (a) { var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$attrs = function (attrs_) { return $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Attrs(attrs_); }; +var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$RowAttrs = function (a) { + return {$: 'RowAttrs', a: a}; +}; +var $rundis$elm_bootstrap$Bootstrap$Grid$Row$attrs = function (attrs_) { + return $rundis$elm_bootstrap$Bootstrap$Grid$Internal$RowAttrs(attrs_); +}; var $rundis$elm_bootstrap$Bootstrap$Grid$Column = function (a) { return {$: 'Column', a: a}; }; @@ -12058,12 +12064,6 @@ var $rundis$elm_bootstrap$Bootstrap$Grid$col = F2( }); var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Disabled = {$: 'Disabled'}; var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$disabled = $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Disabled; -var $rundis$elm_bootstrap$Bootstrap$Table$TableAttr = function (a) { - return {$: 'TableAttr', a: a}; -}; -var $rundis$elm_bootstrap$Bootstrap$Table$attr = function (attr_) { - return $rundis$elm_bootstrap$Bootstrap$Table$TableAttr(attr_); -}; var $rundis$elm_bootstrap$Bootstrap$Table$Bordered = {$: 'Bordered'}; var $rundis$elm_bootstrap$Bootstrap$Table$bordered = $rundis$elm_bootstrap$Bootstrap$Table$Bordered; var $author$project$Model$AddCharacterIcon = function (a) { @@ -12072,15 +12072,12 @@ var $author$project$Model$AddCharacterIcon = function (a) { var $author$project$Model$MouseDraw = function (a) { return {$: 'MouseDraw', a: a}; }; -<<<<<<< HEAD var $rundis$elm_bootstrap$Bootstrap$Table$RowAttr = function (a) { return {$: 'RowAttr', a: a}; }; var $rundis$elm_bootstrap$Bootstrap$Table$rowAttr = function (attr_) { return $rundis$elm_bootstrap$Bootstrap$Table$RowAttr(attr_); }; -======= ->>>>>>> style var $rundis$elm_bootstrap$Bootstrap$Table$Roled = function (a) { return {$: 'Roled', a: a}; }; @@ -12115,8 +12112,6 @@ var $author$project$DungeonMap$characters2rows = F2( _Utils_ap( _List_fromArray( [ - $rundis$elm_bootstrap$Bootstrap$Table$rowAttr( - $elm$html$Html$Attributes$class('tr')), $rundis$elm_bootstrap$Bootstrap$Table$rowAttr( $author$project$DungeonMap$stopBubbling( $author$project$Model$AddCharacterIcon( @@ -12159,8 +12154,6 @@ var $author$project$DungeonMap$characters2rows = F2( _Utils_ap( _List_fromArray( [ - $rundis$elm_bootstrap$Bootstrap$Table$rowAttr( - $elm$html$Html$Attributes$class('tr')), $rundis$elm_bootstrap$Bootstrap$Table$rowAttr( $author$project$DungeonMap$stopBubbling( $author$project$Model$AddCharacterIcon( @@ -12199,31 +12192,16 @@ var $author$project$DungeonMap$characters2rows = F2( }), $elm$core$Array$toList(chars)); }); -<<<<<<< HEAD -var $rundis$elm_bootstrap$Bootstrap$Table$Responsive = function (a) { - return {$: 'Responsive', a: a}; -}; -var $rundis$elm_bootstrap$Bootstrap$Table$responsive = $rundis$elm_bootstrap$Bootstrap$Table$Responsive($elm$core$Maybe$Nothing); -======= ->>>>>>> style var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) { return A2( $elm$html$Html$div, - _List_fromArray( - [ - $elm$html$Html$Attributes$class('container') - ]), + _List_Nil, _List_fromArray( [ $rundis$elm_bootstrap$Bootstrap$Table$table( { options: _List_fromArray( - [ - $rundis$elm_bootstrap$Bootstrap$Table$hover, - $rundis$elm_bootstrap$Bootstrap$Table$bordered, - $rundis$elm_bootstrap$Bootstrap$Table$attr( - $elm$html$Html$Attributes$class('map-table')) - ]), + [$rundis$elm_bootstrap$Bootstrap$Table$hover, $rundis$elm_bootstrap$Bootstrap$Table$bordered]), tbody: A2( $rundis$elm_bootstrap$Bootstrap$Table$tbody, _List_Nil, @@ -12236,7 +12214,7 @@ var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) { _List_fromArray( [ $rundis$elm_bootstrap$Bootstrap$Table$cellAttr( - $elm$html$Html$Attributes$class('th')) + $elm$html$Html$Attributes$class('mediumCopper')) ]), _List_fromArray( [ @@ -12247,7 +12225,7 @@ var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) { _List_fromArray( [ $rundis$elm_bootstrap$Bootstrap$Table$cellAttr( - $elm$html$Html$Attributes$class('th')) + $elm$html$Html$Attributes$class('mediumCopper')) ]), _List_fromArray( [ @@ -12258,7 +12236,7 @@ var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) { _List_fromArray( [ $rundis$elm_bootstrap$Bootstrap$Table$cellAttr( - $elm$html$Html$Attributes$class('th')) + $elm$html$Html$Attributes$class('mediumCopper')) ]), _List_fromArray( [ @@ -12950,11 +12928,10 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) { $elm$html$Html$div, _List_fromArray( [ - $elm$html$Html$Attributes$class('container'), A2( $elm$html$Html$Attributes$style, 'border', - model.hover ? '6px dashed purple' : '6px dashed #bfbfbf'), + model.hover ? '6px dashed #b87333' : '6px dashed #bfbfbf'), A2( $author$project$DungeonMap$hijackOn, 'dragenter', @@ -12973,10 +12950,7 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) { [ A2( $elm$html$Html$figure, - _List_fromArray( - [ - $elm$html$Html$Attributes$class('image') - ]), + _List_Nil, _List_fromArray( [ A2( @@ -12985,7 +12959,7 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) { _List_fromArray( [ $elm$svg$Svg$Attributes$width('100%'), - $elm$svg$Svg$Attributes$viewBox('0 0 800 600'), + $elm$svg$Svg$Attributes$viewBox('0 0 800 550'), $elm$svg$Svg$Attributes$version('1.1') ]), $author$project$DungeonMap$mouseDrawEvents(model.addCharacterIcon)), @@ -12997,7 +12971,7 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) { _List_fromArray( [ $elm$svg$Svg$Attributes$width('800'), - $elm$svg$Svg$Attributes$height('600'), + $elm$svg$Svg$Attributes$height('550'), $elm$svg$Svg$Attributes$title('DungeonMap'), $elm$svg$Svg$Attributes$xlinkHref( A2( @@ -13775,7 +13749,7 @@ var $author$project$DungeonMap$newObjectIconModal = function (model) { $rundis$elm_bootstrap$Bootstrap$Modal$footer, _List_fromArray( [ - $elm$html$Html$Attributes$class('colored-header-footer') + $elm$html$Html$Attributes$class('mediumCopper') ]), _List_fromArray( [ @@ -13790,9 +13764,8 @@ var $author$project$DungeonMap$newObjectIconModal = function (model) { $author$project$Model$AddCharacterIcon( $author$project$Model$MouseClick( $author$project$DungeonMap$getCharIcon(model.addCharacterIcon)))), - $elm$html$Html$Attributes$class('metalButton map-buttons'), - A2($elm$html$Html$Attributes$style, 'margin-top', '5px'), - A2($elm$html$Html$Attributes$style, 'width', '140px') + $elm$html$Html$Attributes$class('metalButton'), + A2($elm$html$Html$Attributes$style, 'margin-top', '5px') ])), $rundis$elm_bootstrap$Bootstrap$Button$disabled(!model.radioCheckedID) ]), @@ -13892,7 +13865,7 @@ var $author$project$DungeonMap$newObjectIconModal = function (model) { $rundis$elm_bootstrap$Bootstrap$Modal$header, _List_fromArray( [ - $elm$html$Html$Attributes$class('colored-header-footer') + $elm$html$Html$Attributes$class('mediumCopper') ]), _List_fromArray( [ @@ -14820,7 +14793,7 @@ var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Value = function (a) { var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$value = function (value_) { return $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Value(value_); }; -var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col4 = {$: 'Col4'}; +var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col8 = {$: 'Col8'}; var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$ColWidth = function (a) { return {$: 'ColWidth', a: a}; }; @@ -14829,9 +14802,7 @@ var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$width = F2( return $rundis$elm_bootstrap$Bootstrap$Grid$Internal$ColWidth( A2($rundis$elm_bootstrap$Bootstrap$Grid$Internal$Width, size, count)); }); -var $rundis$elm_bootstrap$Bootstrap$Grid$Col$xs4 = A2($rundis$elm_bootstrap$Bootstrap$Grid$Internal$width, $rundis$elm_bootstrap$Bootstrap$General$Internal$XS, $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col4); -var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col5 = {$: 'Col5'}; -var $rundis$elm_bootstrap$Bootstrap$Grid$Col$xs5 = A2($rundis$elm_bootstrap$Bootstrap$Grid$Internal$width, $rundis$elm_bootstrap$Bootstrap$General$Internal$XS, $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col5); +var $rundis$elm_bootstrap$Bootstrap$Grid$Col$xs8 = A2($rundis$elm_bootstrap$Bootstrap$Grid$Internal$width, $rundis$elm_bootstrap$Bootstrap$General$Internal$XS, $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col8); var $author$project$DungeonMap$dungeonMapView = function (model) { return A2( $elm$html$Html$section, @@ -14851,15 +14822,22 @@ var $author$project$DungeonMap$dungeonMapView = function (model) { [ A2( $rundis$elm_bootstrap$Bootstrap$Grid$row, - _List_Nil, + _List_fromArray( + [ + $rundis$elm_bootstrap$Bootstrap$Grid$Row$attrs( + _List_fromArray( + [ + A2($elm$html$Html$Attributes$style, 'margin-bottom', '2%') + ])) + ]), _List_fromArray( [ A2( $rundis$elm_bootstrap$Bootstrap$Grid$col, - _List_Nil, + _List_fromArray( + [$rundis$elm_bootstrap$Bootstrap$Grid$Col$xs8]), _List_fromArray( [ - A2($elm$html$Html$br, _List_Nil, _List_Nil), $rundis$elm_bootstrap$Bootstrap$Form$Textarea$textarea( _List_fromArray( [ @@ -14871,93 +14849,70 @@ var $author$project$DungeonMap$dungeonMapView = function (model) { [ $elm$html$Html$Attributes$class('text-area') ])) - ])), - A2($elm$html$Html$br, _List_Nil, _List_Nil), - $author$project$DungeonMap$dungeonMap_Svg(model) + ])) ])), A2( $rundis$elm_bootstrap$Bootstrap$Grid$col, - _List_fromArray( -<<<<<<< HEAD - [$rundis$elm_bootstrap$Bootstrap$Grid$Col$xs4]), - _List_fromArray( - [ - $author$project$DungeonMap$dungeonMap_MonsterList(model) - ])) - ])) - ])), - A2( - $rundis$elm_bootstrap$Bootstrap$Button$button, - _List_fromArray( - [ - $rundis$elm_bootstrap$Bootstrap$Button$info, - $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$ClearCharacterList) - ]), - _List_fromArray( - [ - $elm$html$Html$text('Clear Map') - ])), -======= - [$rundis$elm_bootstrap$Bootstrap$Grid$Col$xs5]), + _List_Nil, _List_fromArray( [ A2( - $rundis$elm_bootstrap$Bootstrap$Grid$row, - _List_Nil, + $rundis$elm_bootstrap$Bootstrap$Button$button, _List_fromArray( [ - A2( - $rundis$elm_bootstrap$Bootstrap$Grid$col, - _List_Nil, + $rundis$elm_bootstrap$Bootstrap$Button$attrs( _List_fromArray( [ - A2($elm$html$Html$br, _List_Nil, _List_Nil), - $author$project$DungeonMap$dungeonMap_MonsterList(model) + $elm$html$Html$Attributes$class('metalButton'), + A2($elm$html$Html$Attributes$style, 'height', '52px'), + A2($elm$html$Html$Attributes$style, 'margin-right', '2%') ])), - A2( - $rundis$elm_bootstrap$Bootstrap$Grid$col, - _List_fromArray( - [$rundis$elm_bootstrap$Bootstrap$Grid$Col$xs4]), + $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$Pick) + ]), + _List_fromArray( + [ + $elm$html$Html$text('Upload Map') + ])), + A2( + $rundis$elm_bootstrap$Bootstrap$Button$button, + _List_fromArray( + [ + $rundis$elm_bootstrap$Bootstrap$Button$attrs( _List_fromArray( [ - A2($elm$html$Html$br, _List_Nil, _List_Nil), - A2( - $rundis$elm_bootstrap$Bootstrap$Button$button, - _List_fromArray( - [ - $rundis$elm_bootstrap$Bootstrap$Button$attrs( - _List_fromArray( - [ - $elm$html$Html$Attributes$class('metalButton map-buttons') - ])), - $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$Pick) - ]), - _List_fromArray( - [ - $elm$html$Html$text('Upload Map') - ])), - A2( - $rundis$elm_bootstrap$Bootstrap$Button$button, - _List_fromArray( - [ - $rundis$elm_bootstrap$Bootstrap$Button$attrs( - _List_fromArray( - [ - $elm$html$Html$Attributes$class('metalButton map-buttons'), - A2($elm$html$Html$Attributes$style, 'margin-top', '5px') - ])), - $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$ClearCharacterList) - ]), - _List_fromArray( - [ - $elm$html$Html$text('Clear Map') - ])) - ])) + $elm$html$Html$Attributes$class('metalButton'), + A2($elm$html$Html$Attributes$style, 'height', '52px') + ])), + $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$ClearCharacterList) + ]), + _List_fromArray( + [ + $elm$html$Html$text('Clear Map') ])) ])) + ])), + A2( + $rundis$elm_bootstrap$Bootstrap$Grid$row, + _List_Nil, + _List_fromArray( + [ + A2( + $rundis$elm_bootstrap$Bootstrap$Grid$col, + _List_fromArray( + [$rundis$elm_bootstrap$Bootstrap$Grid$Col$xs8]), + _List_fromArray( + [ + $author$project$DungeonMap$dungeonMap_Svg(model) + ])), + A2( + $rundis$elm_bootstrap$Bootstrap$Grid$col, + _List_Nil, + _List_fromArray( + [ + $author$project$DungeonMap$dungeonMap_MonsterList(model) + ])) ])) ])), ->>>>>>> style $author$project$DungeonMap$newObjectIconModal(model) ])); }; diff --git a/res/Stylesheet.css b/res/Stylesheet.css index 01748cc221b8173800df9ed7a8e4af6d6c51930e..988c4ddb8b5113b39d6a9ee4f000388789574145 100644 --- a/res/Stylesheet.css +++ b/res/Stylesheet.css @@ -99,10 +99,14 @@ tr:nth-child(odd) {background-color: #faf2eb;} font-size: 1rem; } -.metalButton:hover{ +.metalButton:hover { background-image: repeating-linear-gradient(to right bottom, #acacac , #bfbfbf 10%, #acacac 40% ); } +.metalButton:disabled { + background-color: #acacac; +} + .PlayerIcon { fill: black; stroke: red; @@ -110,6 +114,14 @@ tr:nth-child(odd) {background-color: #faf2eb;} fill-opacity:0; } +.PlayerIcon:hover { + fill: grey-darker; + opacity:0.5; + fill-opacity:0.5; + width:25px; + height:25px; +} + .MonsterIcon { fill: black; stroke: red; @@ -124,13 +136,7 @@ tr:nth-child(odd) {background-color: #faf2eb;} width:30px; height:30px; } -.PlayerIcon:hover { - fill: grey-darker; - opacity:0.5; - fill-opacity:0.5; - width:25px; - height:25px; -} + .ObjectIcon:hover { fill: grey-darker; opacity:0.5; @@ -147,4 +153,23 @@ tr:nth-child(odd) {background-color: #faf2eb;} h1.about { padding-top: 2%; font-variant: small-caps; +} + +.content-box { + margin-right: 20px; + margin-left: 20px; + padding: 15px; +} + +.form-control:disabled, .form-control[readonly] { + color: black; + background-color: #e4be9b; +} + +.map-table { + border: 2px solid #bfbfbf; +} + +figure { + margin: 0 0 0 0; } \ No newline at end of file diff --git a/src/DungeonMap.elm b/src/DungeonMap.elm index 68e9bf38569478ce9d571c846a4f1f7a2fec5ad6..166c1678930dd7eeaa90cef66db288b3a8a3180d 100644 --- a/src/DungeonMap.elm +++ b/src/DungeonMap.elm @@ -11,6 +11,7 @@ import Svg.Events import Json.Decode import Bootstrap.Grid as Grid import Bootstrap.Grid.Col as Col +import Bootstrap.Grid.Row as Row import Bootstrap.Table as Table import Bootstrap.Button as Button import Bootstrap.Modal as Modal @@ -29,50 +30,42 @@ dungeonMapView : Model -> Html Msg dungeonMapView model = Html.section [ class "content-box is-widescreen" ] [ div [ class "section" ] - [ Grid.row [] - [ Grid.col [] - [ Html.br [] [] - ,Textarea.textarea - [ Textarea.rows 1 - , Textarea.disabled - , Textarea.value model.activeTooltip - , Textarea.attrs [ class "text-area" ] - ] - , Html.br [] [] - , dungeonMap_Svg model - ] - , Grid.col [ Col.xs5 ] - [ Grid.row [] - [ Grid.col [] - [ Html.br [] [] - , dungeonMap_MonsterList model - ] - , Grid.col [ Col.xs4 ] - [ Html.br [] [] - , Button.button - [ Button.attrs [ class "metalButton map-buttons"] - , Button.onClick Pick ] - [ text "Upload Map" ] - , Button.button - [ Button.attrs [ class "metalButton map-buttons", style "margin-top" "5px" ] - , Button.onClick ClearCharacterList ] - [ text "Clear Map" ] - ] - ] - ] - ] - ] - , newObjectIconModal model + [ Grid.row [ Row.attrs <| [style "margin-bottom" "2%"] ] + [ Grid.col [ Col.xs8 ] + [ Textarea.textarea + [ Textarea.rows 1 + , Textarea.disabled + , Textarea.value model.activeTooltip + , Textarea.attrs [ class "text-area" ] + ] + ] + , Grid.col [ ] + [ Button.button + [ Button.attrs [ class "metalButton", style "height" "52px", style "margin-right" "2%" ] + , Button.onClick Pick ] + [ text "Upload Map" ] + , Button.button + [ Button.attrs [ class "metalButton", style "height" "52px" ] + , Button.onClick ClearCharacterList ] + [ text "Clear Map" ] + ] + ] + , Grid.row [ ] + [ Grid.col [ Col.xs8 ] [ dungeonMap_Svg model ] + , Grid.col [] [ dungeonMap_MonsterList model] + ] + ] + , newObjectIconModal model ] dungeonMap_MonsterList : Model -> Html Msg dungeonMap_MonsterList model = - div [ class "container" ] - [ Table.table { options = [ Table.hover, Table.bordered, Table.attr (class "map-table") ] + div [ ] + [ Table.table { options = [ Table.hover, Table.bordered ] , thead = Table.simpleThead - [ Table.th [Table.cellAttr <| class "th"] [ Html.text "ID" ] - , Table.th [Table.cellAttr <| class "th"] [ Html.text "Name" ] - , Table.th [Table.cellAttr <| class "th"] [ Html.text "LeP" ] + [ Table.th [Table.cellAttr <| class "mediumCopper"] [ Html.text "ID" ] + , Table.th [Table.cellAttr <| class "mediumCopper"] [ Html.text "Name" ] + , Table.th [Table.cellAttr <| class "mediumCopper"] [ Html.text "LeP" ] ] , tbody = Table.tbody [] @@ -87,7 +80,7 @@ characters2rows chars highlighted = (\i c -> case c of Enemy name health _ _ _ -> - Table.tr ([ Table.rowAttr <| class "tr", Table.rowAttr (stopBubbling (AddCharacterIcon (MouseDraw (MonsterIcon (i+1) "-100" "-100" name)))) ] + Table.tr ([ Table.rowAttr (stopBubbling (AddCharacterIcon (MouseDraw (MonsterIcon (i+1) "-100" "-100" name)))) ] ++ if highlighted==i+1 then [ Table.rowSecondary ] else []) [ Table.td [] [Html.text <| String.fromInt (i+1)] , Table.td [] [Html.text name] @@ -95,7 +88,7 @@ characters2rows chars highlighted = ] Hero name health -> - Table.tr ([ Table.rowAttr <| class "tr", Table.rowAttr (stopBubbling (AddCharacterIcon (MouseDraw (PlayerIcon (i+1) "-100" "-100" name)))) ] + Table.tr ([ Table.rowAttr (stopBubbling (AddCharacterIcon (MouseDraw (PlayerIcon (i+1) "-100" "-100" name)))) ] ++ if highlighted==i+1 then [ Table.rowSecondary ] else []) [ Table.td [] [Html.text <| String.fromInt (i+1)] , Table.td [] [Html.text name] @@ -108,19 +101,24 @@ characters2rows chars highlighted = dungeonMap_Svg : Model -> Html Msg dungeonMap_Svg model = - div [ class "container" - , style "border" (if model.hover then "6px dashed purple" else "6px dashed #bfbfbf") + div [ style "border" (if model.hover then "6px dashed #b87333" else "6px dashed #bfbfbf") , hijackOn "dragenter" (Json.Decode.succeed DragEnter) , hijackOn "dragover" (Json.Decode.succeed DragEnter) , hijackOn "dragleave" (Json.Decode.succeed DragLeave) , hijackOn "drop" dropDecoder ] - [ Html.figure [ class "image" ] + [ Html.figure [ ] [ Svg.svg - ([ SvgAtt.width "100%", SvgAtt.viewBox "0 0 800 600", SvgAtt.version "1.1" ] + ([ SvgAtt.width "100%", SvgAtt.viewBox "0 0 800 550", SvgAtt.version "1.1" ] ++ mouseDrawEvents model.addCharacterIcon ) - ([ Svg.image [ SvgAtt.width "800", SvgAtt.height "600", SvgAtt.title "DungeonMap", SvgAtt.xlinkHref (Maybe.withDefault "" (List.head model.previews)) ] [] ] + ([ Svg.image + [ SvgAtt.width "800" + , SvgAtt.height "550" + , SvgAtt.title "DungeonMap" + , SvgAtt.xlinkHref (Maybe.withDefault "" (List.head model.previews)) + ] [] + ] ++ svgIconList model ++ newIconsView model.addCharacterIcon ) @@ -131,7 +129,7 @@ newObjectIconModal : Model -> Html Msg newObjectIconModal model = Modal.config (CloseModal ObjectIconModal) |> Modal.hideOnBackdropClick True - |> Modal.header [class "colored-header-footer"] + |> Modal.header [class "mediumCopper"] [ Html.h3 [][text "Neues Icon"] ] |> Modal.body [class "body"] @@ -160,9 +158,9 @@ newObjectIconModal model = ) ] ] - |> Modal.footer [class "colored-header-footer"] + |> Modal.footer [class "mediumCopper"] [ Button.button - [ Button.attrs [onClick <| AddCharacterIcon (MouseClick (getCharIcon model.addCharacterIcon)), class "metalButton map-buttons", style "margin-top" "5px", style "width" "140px" ] + [ Button.attrs [onClick <| AddCharacterIcon (MouseClick (getCharIcon model.addCharacterIcon)), class "metalButton", style "margin-top" "5px" ] , Button.disabled (model.radioCheckedID==0) ] [ text "Icon hinzufügen" ]