Carousel selection button adds avatar to model #53 #105

src/elm/Data/Avatar.elm

@@ -1,7 +1,8 @@
 module Data.Avatar exposing (..)
 
-import Types exposing (..)
+import Helpers.Utils exposing (fileNameFromURL)
 import Json.Decode exposing (..)
+import Types exposing (..)
 
 
 decodeAvatar : Decoder Avatar
@@ -54,3 +55,28 @@ avatarHeadSelection avatar =
 
         Avatar6 ->
             "./assets/avatar_6_head.svg"
+
+
+avatarSrcToAvatar : String -> Avatar
+avatarSrcToAvatar string =
+    case fileNameFromURL string of
+        "avatar_1.svg" ->
+            Avatar1
+
+        "avatar_2.svg" ->
+            Avatar2
+
+        "avatar_3.svg" ->
+            Avatar3
+
+        "avatar_4.svg" ->
+            Avatar4
+
+        "avatar_5.svg" ->
+            Avatar5
+
+        "avatar_6.svg" ->
+            Avatar6
+
+        _ ->
+            Avatar1

src/elm/Helpers/Utils.elm

@@ -64,3 +64,17 @@ isNewListEntry a list =
 onCheckboxInput : (String -> Bool -> msg) -> Html.Attribute msg
 onCheckboxInput tagger =
     on "change" (Decode.map2 tagger targetValue targetChecked)
+
+
+fileNameFromURL : String -> String
+fileNameFromURL url =
+    let
+        splitURL =
+            String.split "/" url
+
+        splitLength =
+            List.length splitURL
+    in
+        List.drop (splitLength - 1) splitURL
+            |> List.head
+            |> Maybe.withDefault ""

src/elm/Ports.elm

@@ -14,6 +14,12 @@ port initCarousel : () -> Cmd msg
 port videoCarousel : () -> Cmd msg
 
 
+port retrieveChosenAvatar : () -> Cmd msg
+
+
+port receiveChosenAvatar : (String -> msg) -> Sub msg
+
+
 port saveLog : DBLog -> Cmd msg
 
 
@@ -51,6 +57,7 @@ subscriptions model =
         [ receiveHotspotCoords (decodeHotspots >> ReceiveHotspotCoords)
         , timeSubscription model
         , receiveUpdatedLogs ReceiveUpdatedLogs
+        , receiveChosenAvatar ReceiveChosenAvatar
         , receiveInitialData (decodeInitialData >> ReceiveInitialData)
         , Transit.subscriptions TransitMsg model
         ]

src/elm/State.elm

@@ -2,6 +2,7 @@ module State exposing (..)
 
 import Data.Database exposing (dbDataToModel)
 import Data.Hotspots exposing (..)
+import Data.Avatar exposing (avatarSrcToAvatar)
 import Data.Log exposing (addFace, addFeeling, addTimeTaken, defaultLog, normaliseDBLog, normaliseLog, updateStimId)
 import Data.Stim exposing (addBodypart, addExerciseName, addHowTo, defaultStim)
 import Data.Time exposing (adjustTime, trackCounter)
@@ -120,6 +121,9 @@ update msg model =
                 :> update (AdjustTimer Stop)
                 :> update (ChangeView view)
 
+        SelectAvatar ->
+            model ! [ retrieveChosenAvatar () ]
+
         SaveLog ->
             { model
                 | newLog = defaultLog
@@ -148,6 +152,11 @@ update msg model =
         ReceiveInitialData (Err err) ->
             model ! []
 
+        ReceiveChosenAvatar src ->
+            { model | avatar = avatarSrcToAvatar src }
+                ! []
+                :> update (ChangeView NameAvatar)
+
         GoToStim stim ->
             { model
                 | selectedStim = stim

src/elm/Types.elm

@@ -248,9 +248,11 @@ type Msg
     | NavigateTo View
     | ReceiveHotspotCoords (Result String Hotspots)
     | ReceiveUpdatedLogs (List DBLog)
+    | ReceiveChosenAvatar String
     | ToggleStimMenu BodyPart
     | ToggleBodypart BodyPart
     | ReceiveInitialData (Result String DBData)
     | GoToStim Stim
     | AddExerciseName String
     | AddHowTo String
+    | SelectAvatar

src/elm/Views/CreateAvatar.elm

@@ -1,15 +1,16 @@
 module Views.CreateAvatar exposing (..)
 
-import Helpers.Style exposing (horizontalTransition)
+import Helpers.Style exposing (classes, backgroundImageStyle, horizontalTransition)
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 import Types exposing (..)
 
 
 createAvatar : Model -> Html Msg
 createAvatar model =
     section [ class "smooth", horizontalTransition model ]
-        [ header [ class "flex justify-center flex-column items-center pt3 ph3 pb2" ] [ h1 [ class "f3 b green avenir center ma0 lh-f3" ] [ text "My Stimmy friend" ], h2 [ class "ma0 avenir fw2 f5 lh-f5" ] [ text "Choose your avatar" ] ]
+        [ header [ class "flex justify-between items-center pt3 ph3 pb2" ] [ div [ class "h3 w3" ] [], div [] [ h1 [ class "f3 b green avenir center ma0 lh-f3 tc" ] [ text "My Stimmy friend" ], h2 [ class "ma0 avenir fw2 f5 lh-f5 tc" ] [ text "Choose your avatar" ] ], button [ classes [ "bg-transparent", "bn", "h3", "w3" ], backgroundImageStyle "./assets/CreateAvatar/done_green_small.svg" 100, onClick SelectAvatar ] [] ]
         , div
             [ class "db makecarousel mv2" ]
             [ avatarCaroCell "./assets/CreateAvatar/avatar_1.svg"

src/js/elm-ports.js

@@ -7,6 +7,7 @@ import defaultStims from '../json/defaultStims.json';
 
 app.ports.initCarousel.subscribe(flickity.initCarousel);
 app.ports.videoCarousel.subscribe(flickity.videoCarousel);
+app.ports.retrieveChosenAvatar.subscribe(flickity.retrieveChosenAvatar);
 
 app.ports.initHotspots.subscribe(hotspots.initHotspots);
 app.ports.initDB.subscribe(() => idb.initDB(defaultStims));

src/js/flickity-handlers.js

@@ -27,4 +27,9 @@ const videoCarousel = () => {
   });
 };
 
-export default { initCarousel, videoCarousel };
+const retrieveChosenAvatar = () => {
+  const chosenElement = document.querySelector('.is-selected');
+  app.ports.receiveChosenAvatar.send(chosenElement.src);
+};
+
+export default { initCarousel, videoCarousel, retrieveChosenAvatar };