From b3209be1dd3d7dc84db6bc05c98e8e08b563bc5b Mon Sep 17 00:00:00 2001
From: Oskar Marquardt <oskar.marquardt@student.uni-halle.de>
Date: Wed, 12 Jun 2024 17:34:41 +0200
Subject: [PATCH] Clicking on dots sets dots - Removed increase/decrease dots
button
---
public/main.js | 136 +++++++++++++++++++++----------------------------
src/Main.elm | 35 ++++++-------
2 files changed, 77 insertions(+), 94 deletions(-)
diff --git a/public/main.js b/public/main.js
index 5f923ed..45ef21f 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5530,17 +5530,9 @@ var $author$project$Main$viewModal = function (model) {
]));
}
};
-var $author$project$Main$ChangeSphere = function (a) {
- return {$: 'ChangeSphere', a: a};
-};
-var $author$project$BoundedInt$change = F2(
- function (boundedInt, value) {
- return ((_Utils_cmp(value, boundedInt.min) < 0) || (_Utils_cmp(value, boundedInt.max) > 0)) ? boundedInt : _Utils_update(
- boundedInt,
- {value: value});
- });
var $elm$core$String$fromFloat = _String_fromNumber;
var $elm$svg$Svg$Attributes$height = _VirtualDom_attribute('height');
+var $elm$core$List$map3 = _List_map3;
var $elm$core$Basics$pow = _Basics_pow;
var $elm$core$Basics$sqrt = _Basics_sqrt;
var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
@@ -5550,9 +5542,18 @@ var $author$project$Main$toDotPosition = F4(
var marginalIncrease = (size + gap) / 2;
return _Utils_Tuple2((id * marginalIncrease) + offset, (((id + 1) % 2) * marginalIncrease) + offset);
});
+var $author$project$Main$ChangeSphere = function (a) {
+ return {$: 'ChangeSphere', a: a};
+};
var $author$project$Main$boolAsIntString = function (bool) {
return bool ? '1' : '0';
};
+var $author$project$BoundedInt$change = F2(
+ function (boundedInt, value) {
+ return ((_Utils_cmp(value, boundedInt.min) < 0) || (_Utils_cmp(value, boundedInt.max) > 0)) ? boundedInt : _Utils_update(
+ boundedInt,
+ {value: value});
+ });
var $elm$core$String$concat = function (strings) {
return A2($elm$core$String$join, '', strings);
};
@@ -5613,8 +5614,12 @@ var $author$project$Main$tupleToString = function (tuple) {
var first = $elm$core$String$fromFloat(tuple.a);
return first + (',' + second);
};
-var $author$project$Main$viewDot = F4(
- function (size, strokeWidth, isFilled, position) {
+var $author$project$Main$valueOrReset = F2(
+ function (dots, value) {
+ return _Utils_eq(dots.value, value) ? dots.min : value;
+ });
+var $author$project$Main$viewDot = F6(
+ function (sphere, size, strokeWidth, isFilled, id, position) {
return A2(
$elm$svg$Svg$polygon,
_List_fromArray(
@@ -5653,41 +5658,52 @@ var $author$project$Main$viewDot = F4(
$author$project$Main$boolAsIntString(isFilled)),
$elm$svg$Svg$Attributes$stroke('var(--bulma-body-color)'),
$elm$svg$Svg$Attributes$strokeWidth(
- $elm$core$String$fromFloat(strokeWidth))
+ $elm$core$String$fromFloat(strokeWidth)),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$ChangeSphere(
+ _Utils_update(
+ sphere,
+ {
+ dots: A2(
+ $author$project$BoundedInt$change,
+ sphere.dots,
+ A2($author$project$Main$valueOrReset, sphere.dots, id + 1))
+ })))
]),
_List_Nil);
});
var $elm$svg$Svg$Attributes$width = _VirtualDom_attribute('width');
-var $author$project$Main$viewDots = F2(
- function (totalDotCount, filledDotCount) {
- var isFilledList = A2(
- $elm$core$List$map,
- $elm$core$Basics$gt(filledDotCount),
- A2($elm$core$List$range, 0, totalDotCount - 1));
- var dotSize = 12;
- var dotOutline = 0.05 * dotSize;
- var svgOutlineMargin = $elm$core$Basics$sqrt(
- 2 * A2($elm$core$Basics$pow, dotOutline, 2)) / 2;
- var dotGap = 4;
- var marginalIncrease = (dotSize + dotGap) / 2;
- return A2(
- $elm$svg$Svg$svg,
- _List_fromArray(
- [
- $elm$svg$Svg$Attributes$width(
- $elm$core$String$fromFloat((dotSize + (marginalIncrease * (totalDotCount - 1))) + (2 * svgOutlineMargin))),
- $elm$svg$Svg$Attributes$height(
- $elm$core$String$fromFloat((dotSize + marginalIncrease) + (2 * svgOutlineMargin)))
- ]),
- A3(
- $elm$core$List$map2,
- A2($author$project$Main$viewDot, dotSize, dotOutline),
- isFilledList,
- A2(
- $elm$core$List$map,
- A3($author$project$Main$toDotPosition, dotSize, dotGap, svgOutlineMargin),
- A2($elm$core$List$range, 0, totalDotCount - 1))));
- });
+var $author$project$Main$viewDots = function (sphere) {
+ var rangeList = A2($elm$core$List$range, 0, sphere.dots.max - 1);
+ var isFilledList = A2(
+ $elm$core$List$map,
+ $elm$core$Basics$gt(sphere.dots.value),
+ rangeList);
+ var dotSize = 12;
+ var dotOutline = 0.05 * dotSize;
+ var svgOutlineMargin = $elm$core$Basics$sqrt(
+ 2 * A2($elm$core$Basics$pow, dotOutline, 2)) / 2;
+ var dotGap = 4;
+ var marginalIncrease = (dotSize + dotGap) / 2;
+ return A2(
+ $elm$svg$Svg$svg,
+ _List_fromArray(
+ [
+ $elm$svg$Svg$Attributes$width(
+ $elm$core$String$fromFloat((dotSize + (marginalIncrease * (sphere.dots.max - 1))) + (2 * svgOutlineMargin))),
+ $elm$svg$Svg$Attributes$height(
+ $elm$core$String$fromFloat((dotSize + marginalIncrease) + (2 * svgOutlineMargin)))
+ ]),
+ A4(
+ $elm$core$List$map3,
+ A3($author$project$Main$viewDot, sphere, dotSize, dotOutline),
+ isFilledList,
+ rangeList,
+ A2(
+ $elm$core$List$map,
+ A3($author$project$Main$toDotPosition, dotSize, dotGap, svgOutlineMargin),
+ rangeList)));
+};
var $author$project$Main$viewSphere = function (sphere) {
return A2(
$elm$html$Html$div,
@@ -5702,45 +5718,11 @@ var $author$project$Main$viewSphere = function (sphere) {
$elm$html$Html$text(sphere.name)
])),
A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('button is-small'),
- $elm$html$Html$Events$onClick(
- $author$project$Main$ChangeSphere(
- _Utils_update(
- sphere,
- {
- dots: A2($author$project$BoundedInt$change, sphere.dots, sphere.dots.value - 1)
- })))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('-')
- ])),
- A2(
$elm$html$Html$span,
_List_Nil,
_List_fromArray(
[
- A2($author$project$Main$viewDots, sphere.dots.max, sphere.dots.value)
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('button is-small'),
- $elm$html$Html$Events$onClick(
- $author$project$Main$ChangeSphere(
- _Utils_update(
- sphere,
- {
- dots: A2($author$project$BoundedInt$change, sphere.dots, sphere.dots.value + 1)
- })))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('+')
+ $author$project$Main$viewDots(sphere)
]))
]));
};
diff --git a/src/Main.elm b/src/Main.elm
index c6408aa..c129fea 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -112,15 +112,7 @@ viewSphere : Sphere -> Html Msg
viewSphere sphere =
div []
[ span [] [ text sphere.name ]
- , button
- [ class "button is-small"
- , onClick ( ChangeSphere { sphere | dots = BoundedInt.change sphere.dots (sphere.dots.value - 1) } )
- ] [ text "-" ]
- , span [] [ viewDots sphere.dots.max sphere.dots.value ]
- , button
- [ class "button is-small"
- , onClick ( ChangeSphere { sphere | dots = BoundedInt.change sphere.dots (sphere.dots.value + 1) } )
- ] [ text "+" ]
+ , span [] [ viewDots sphere ]
]
viewModal : Model -> Html Msg
@@ -173,8 +165,8 @@ modalValue modalType character =
case modalType of
Name -> character.name
-viewDots : Int -> Int -> Html Msg
-viewDots totalDotCount filledDotCount =
+viewDots : Sphere -> Html Msg
+viewDots sphere =
let
dotSize = 12
dotGap = 4
@@ -182,15 +174,17 @@ viewDots totalDotCount filledDotCount =
marginalIncrease = ( dotSize + dotGap ) / 2
svgOutlineMargin = ( sqrt ( 2 * ( dotOutline ^ 2 ) ) ) / 2
- isFilledList = List.range 0 ( totalDotCount - 1 ) |> List.map ( (>) filledDotCount )
+ rangeList = List.range 0 ( sphere.dots.max - 1 )
+
+ isFilledList = rangeList |> List.map ( (>) sphere.dots.value )
in
svg
- [ Svg.Attributes.width ( String.fromFloat ( dotSize + marginalIncrease * toFloat ( totalDotCount - 1 ) + 2 * svgOutlineMargin ) )
+ [ Svg.Attributes.width ( String.fromFloat ( dotSize + marginalIncrease * toFloat ( sphere.dots.max - 1 ) + 2 * svgOutlineMargin ) )
, Svg.Attributes.height ( String.fromFloat ( dotSize + marginalIncrease + 2 * svgOutlineMargin ) )
]
- ( List.range 0 ( totalDotCount - 1 )
+ ( rangeList
|> List.map ( toDotPosition dotSize dotGap svgOutlineMargin )
- |> List.map2 ( viewDot dotSize dotOutline ) isFilledList
+ |> List.map3 ( viewDot sphere dotSize dotOutline ) isFilledList rangeList
)
toDotPosition : Float -> Float -> Float -> Int -> ( Float, Float )
@@ -202,8 +196,8 @@ toDotPosition size gap offset id =
, toFloat ( remainderBy 2 ( id + 1 ) ) * marginalIncrease + offset
)
-viewDot : Float -> Float -> Bool -> ( Float, Float ) -> Html Msg
-viewDot size strokeWidth isFilled position =
+viewDot : Sphere -> Float -> Float -> Bool -> Int -> ( Float, Float ) -> Html Msg
+viewDot sphere size strokeWidth isFilled id position =
Svg.polygon
[ Svg.Attributes.points
( [ ( 0.5, 0.0 )
@@ -222,6 +216,7 @@ viewDot size strokeWidth isFilled position =
, Svg.Attributes.fillOpacity ( boolAsIntString isFilled )
, Svg.Attributes.stroke "var(--bulma-body-color)"
, Svg.Attributes.strokeWidth ( String.fromFloat strokeWidth )
+ , onClick ( ChangeSphere { sphere | dots = BoundedInt.change sphere.dots ( valueOrReset sphere.dots ( id + 1 ) ) } )
] []
tupleToString : ( Float, Float ) -> String
@@ -238,6 +233,12 @@ boolAsIntString bool =
then "1"
else "0"
+valueOrReset : BoundedInt -> Int -> Int
+valueOrReset dots value =
+ if dots.value == value
+ then dots.min
+ else value
+
subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
--
GitLab