Add memes theme

assets/css/app.css

@@ -173,6 +173,9 @@ li.right {
   width: 80%;
   height: 80%;
 }
+.back img.gif {
+  object-fit: cover;
+}
 
 .centerer {
   display: inline-block;
@@ -547,6 +550,10 @@ img.screenshot {
   margin-right: 5px;
 }
 
+.theme-icon.gif {
+  width: 24px; 
+}
+
 .btn-go-wrapper {
   margin-top: 20px;
   margin-bottom: 10px;

assets/elm/BoardView.elm

@@ -119,7 +119,8 @@ card model dimension row col ( cardId, card ) =
                     [ class "back" ]
                     [ div [ class "centerer" ] []
                     , img
-                        [ src ("/images/" ++ model.game.theme ++ "/" ++ (toString card.value) ++ ".svg")
+                        [ src ("/images/" ++ model.game.theme.name ++ "/" ++ (toString card.value) ++ "." ++ model.game.theme.extension)
+                        , class model.game.theme.extension
                         ]
                         []
                     ]

assets/elm/Game.elm

@@ -51,7 +51,7 @@ init : Params -> ( Model, Cmd Msg )
 init { id, playerId, host, isSsl, playerName, themes, locale } =
     let
         game =
-            Game "" (CardData [] [] [] []) [] 0 0 "eighties" False "public"
+            Game "" (CardData [] [] [] []) [] 0 0 {name = "eighties", extension = "svg"} False "public"
 
         payload =
             JE.object

assets/elm/GameList.elm

@@ -13,6 +13,9 @@ import Json.Encode as JE
 import Json.Decode as JD exposing (field)
 import Dict exposing (Dict)
 
+import Types.Theme exposing (ThemeData)
+import Types.Game exposing (themeDataEncoder)
+
 
 -- Submodules
 
@@ -34,7 +37,7 @@ type alias GameId =
 
 type alias Game =
     { id : GameId
-    , theme : String
+    , theme : ThemeData
     , size : String
     , players : List Player
     }
@@ -111,7 +114,7 @@ games model =
                     a [ class "game-list__game", href <| "/" ++ model.locale ++ "/games/" ++ game.id ]
                         [ div
                             [ class "game__visual" ]
-                            [ img [ src <| "/images/" ++ game.theme ++ "/1.svg" ] []
+                            [ img [ src <| "/images/" ++ game.theme.name ++ "/1." ++ game.theme.extension ] []
                             , div []
                                 [ strong [] [ text game.size ]
                                 ]
@@ -174,7 +177,10 @@ gameDecoder : JD.Decoder Game
 gameDecoder =
     JD.map4 Game
         (field "id" JD.string)
-        (field "theme" JD.string)
+        (field "theme" (JD.map2 ThemeData
+                (field "name" (JD.string))
+                (field "extension" (JD.string))
+            ))
         (field "size" JD.string)
         (field "players" (JD.list playerDecoder))
 

assets/elm/GameSettings.elm

@@ -356,12 +356,15 @@ themeButton model =
     in
         div []
             [ div [ class <| "btn btn-default btn-lg btn-game-setting " ++ (levelCls model.theme.difficulty), onClick ShowThemeSelector ]
-                [ img [ class "theme-icon", src <| "/images/" ++ model.theme.name ++ "/1.svg" ]
+                [ img [ class "theme-icon", src <| "/images/" ++ model.theme.name ++ "/1." ++ model.theme.extension 
+                      , class model.theme.extension 
+                    ]
                     []
                 , i [ class "fa fa-caret-down" ]
                     []
                 ]
-            , input [ type_ "hidden", name "game[theme]", value model.theme.name ] []
+            , input [ type_ "hidden", name "game[theme][name]", value model.theme.name ] []
+            , input [ type_ "hidden", name "game[theme][extension]", value model.theme.extension ] []
             ]
 
 
@@ -452,7 +455,7 @@ themeView theme =
                 ""
     in
         label [ class <| "btn btn-default btn-theme " ++ (levelCls theme.difficulty), onClick <| SelectTheme theme.name ]
-            [ img [ src <| "/images/" ++ theme.name ++ "/1.svg", width 50, height 50 ] []
+            [ img [ src <| "/images/" ++ theme.name ++ "/1." ++ theme.extension, width 50, height 50 ] []
             , div [ class "theme-title" ]
                 [ text theme.title
                 , sup [ class "text-danger", style [ ( "font-weight", "bold" ) ] ] [ text newBadgeText ]

assets/elm/ThemeSelectorView.elm

@@ -16,7 +16,7 @@ import Types.Msg exposing (..)
 themeSelectorView : Model -> Html Msg
 themeSelectorView model =
     div [ class "theme-selector" ]
-        (List.map (themeButton model.game.theme) model.themes)
+        (List.map (themeButton model.game.theme.name) model.themes)
 
 
 themeButton : String -> Theme -> Html Msg
@@ -34,7 +34,7 @@ themeButton activeTheme theme =
             else
                 ""
     in
-        label [ class <| "btn btn-default btn-theme " ++ (levelCls theme.difficulty) ++ activeClass, onClick <| ChangeTheme theme.name ]
+        label [ class <| "btn btn-default btn-theme " ++ (levelCls theme.difficulty) ++ activeClass, onClick <| ChangeTheme theme.name theme.extension ]
             [ img [ src <| "/images/" ++ theme.name ++ "/1.svg", width 50, height 50 ] []
             , div [ class "theme-title" ]
                 [ text theme.title

assets/elm/Types/Game.elm

@@ -10,6 +10,7 @@ import Dict exposing (Dict)
 
 import Types.Player exposing (..)
 import Types.Card exposing (..)
+import Types.Theme exposing (ThemeData)
 
 
 type alias GameId =
@@ -25,14 +26,21 @@ cardDataEncoder cardData =
         , ( "values", (List.map JE.int cardData.values) |> JE.list )
         ]
 
+themeDataEncoder : ThemeData -> JE.Value
+themeDataEncoder themeData =
+    JE.object
+        [( "name", (JE.string themeData.name) )
+        , ( "extension", (JE.string themeData.extension) )
+        ]
+
 
 type alias Game =
     { id : GameId
     , cards : CardData
     , players : List Player
     , flips : Int
     , turn : Int
-    , theme : String
+    , theme : ThemeData
     , random : Bool
     , visibility : String
     }
@@ -45,7 +53,7 @@ gameEncoder game =
         , ( "players", (List.map playerEncoder game.players) |> JE.list )
         , ( "flips", game.flips |> JE.int )
         , ( "turn", game.turn |> JE.int )
-        , ( "theme", game.theme |> JE.string )
+        , ( "theme", game.theme |> themeDataEncoder )
         ]
 
 
@@ -64,7 +72,10 @@ gameDecoder =
         (field "players" (JD.list playerDecoder))
         (field "flips" JD.int)
         (field "turn" JD.int)
-        (field "theme" JD.string)
+        (field "theme" (JD.map2 ThemeData
+                (field "name" (JD.string))
+                (field "extension" (JD.string))
+            ))
         (field "random" JD.bool)
         (field "visibility" JD.string)
 

assets/elm/Types/Msg.elm

@@ -17,7 +17,7 @@ type Msg
     | SendCompressedGame JE.Value
       -- | UpdatePlayer String
     | FlipCard Int
-    | ChangeTheme String
+    | ChangeTheme String String
     | CopyUrl
     | SelectGameUrlInput
     | Replay

assets/elm/Types/Theme.elm

@@ -6,9 +6,14 @@ type alias Theme =
     , title : String
     , difficulty : Int
     , new : Bool
+    , extension : String
     }
 
+type alias ThemeData =
+    { name : String
+    , extension : String
+    }
 
 defaultTheme : Theme
 defaultTheme =
-    Theme "eighties" "80's" 0 False
+    Theme "eighties" "80's" 0 False "svg"

assets/elm/Update.elm

@@ -15,7 +15,7 @@ import Types.Game exposing (..)
 import Types.Model exposing (..)
 import Types.Msg exposing (..)
 import Types.Player exposing (..)
-
+import Types.Theme exposing (ThemeData)
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
@@ -125,13 +125,17 @@ update msg model =
             else
                 model ! []
 
-        ChangeTheme theme ->
+        ChangeTheme themeName themeExtension ->
             let
                 game =
                     model.game
+
+                newTheme : ThemeData
+                newTheme =
+                    { name = themeName, extension = themeExtension }
 
                 game_ =
-                    { game | theme = theme }
+                    { game | theme = newTheme }
             in
             { model | game = game_ } ! []
 

assets/js/app.js

@@ -132,7 +132,7 @@ $(function(){
   $(".elm-game-selector").each(
     function(i, el){
       var defaultSettings = {
-        theme: "eighties",
+        theme: { name: "eighties", extension: "svg"},
         size: 6,
         players: 2,
         visibility: "public"

lib/pairs_one/game.ex

@@ -12,7 +12,7 @@ defmodule PairsOne.Game do
   defstruct id: "",
             cards: %{cleared: [], flipped: [], seen: [], values: []},
             players: [],
-            theme: "eighties",
+            theme: %{ name: "eighties", extension: "svg"},
             flips: 2,
             turn: -1,
             visibility: "public",
@@ -40,7 +40,7 @@ defmodule PairsOne.Game do
   def create(%{
         "board_size" => board_size,
         "players_number" => players_number,
-        "theme" => theme_name,
+        "theme" => theme,
         "visibility" => visibility,
         "random" => random
       }) do
@@ -64,9 +64,9 @@ defmodule PairsOne.Game do
 
     game = %PairsOne.Game{
       id: id,
-      cards: cards(board_size, Theme.cards_number(theme_name)),
+      cards: cards(board_size, Theme.cards_number(theme["name"])),
       players: players,
-      theme: theme_name,
+      theme: theme,
       visibility: visibility,
       random: random,
       turn: turn
@@ -89,13 +89,13 @@ defmodule PairsOne.Game do
   @doc """
   Given new params, reset completed game
   """
-  def replay(game, %{"theme" => theme_name}) do
+  def replay(game, %{"theme" => theme_data}) do
     players =
       Enum.map(game["players"], fn player ->
         %{player | "score" => 0, "turns" => 0, "inaccurateTurns" => 0}
       end)
 
-    theme = Theme.get(theme_name)
+    theme = Theme.get(theme_data.name)
 
     cards =
       game["cards"]["values"]
@@ -104,7 +104,7 @@ defmodule PairsOne.Game do
       |> round
       |> cards(theme.cards)
 
-    game = %{game | "cards" => cards, "players" => players, "theme" => theme_name}
+    game = %{game | "cards" => cards, "players" => players, "theme" => theme_data.name}
 
     save!(game["id"], game)
   end

lib/pairs_one/theme.ex

@@ -34,6 +34,13 @@ defmodule PairsOne.Theme do
       difficulty: 0,
       new: false
     },
+    memes: %{
+      title: "Memes",
+      cards: 40,
+      difficulty: 0,
+      new: true,
+      extension: "gif"
+    },
     ecology: %{
       title: "Ecology",
       cards: 50,
@@ -88,7 +95,7 @@ defmodule PairsOne.Theme do
   Given theme name, returns number of cards in that theme
   """
   def cards_number(name) when is_binary(name) do
-    @themes[String.to_atom(name)].cards
+    themes()[String.to_atom(name)].cards
   end
 
   @doc """
@@ -103,12 +110,17 @@ defmodule PairsOne.Theme do
   """
   def themes do
     @themes
+    |> Enum.map(fn {name, theme} ->
+      extension = (theme |> Map.get(:extension)) || "svg"
+      new_theme = theme |> Map.put(:extension, extension)
+      {name, new_theme}
+    end)
   end
 
   @doc """
   Themes as a list
   """
   def list do
-    @themes |> Enum.map(fn {theme, data} -> Map.merge(data, %{name: theme}) end)
+    themes() |> Enum.map(fn {theme, data} -> Map.merge(data, %{name: theme}) end)
   end
 end

lib/pairs_one_web/controllers/game_controller.ex

@@ -54,7 +54,7 @@ defmodule PairsOneWeb.GameController do
     else
       game =
         %{
-          "theme" => "eighties",
+          "theme" => %{"name" => "eighties", "extension" => "svg"},
           "board_size" => "6",
           "players_number" => "2",
           "visibility" => "public",

lib/pairs_one_web/templates/page/index.de.html.eex

@@ -20,7 +20,8 @@
             Spielen Sie alleine, um Ihre Genauigkeit zu verbessern!
             <br/>
             <input type="hidden" name="_csrf_token" value="<%= get_csrf_token() %>">
-            <input type="hidden" name="game[theme]" value="eighties">
+            <input type="hidden" name="game[theme][name]" value="eighties">
+            <input type="hidden" name="game[theme][extension]" value="svg">
             <input type="hidden" name="game[board_size]" value="6">
             <input type="hidden" name="game[players_number]" value="1">
             <input type="hidden" name="game[visibility]" value="private">
@@ -55,7 +56,8 @@
             Senden Sie einfach einen Link an Ihren Online-Freund, um zu beginnen!
             <br/>
             <input type="hidden" name="_csrf_token" value="<%= get_csrf_token() %>">
-            <input type="hidden" name="game[theme]" value="eighties">
+            <input type="hidden" name="game[theme][name]" value="eighties">
+            <input type="hidden" name="game[theme][extension]" value="svg">
             <input type="hidden" name="game[board_size]" value="6">
             <input type="hidden" name="game[players_number]" value="2">
             <input type="hidden" name="game[visibility]" value="private">
@@ -75,7 +77,8 @@
             Spielen Sie mit Ihrem Freund auf demselben Gerät!
             <br/>
             <input type="hidden" name="_csrf_token" value="<%= get_csrf_token() %>">
-            <input type="hidden" name="game[theme]" value="eighties">
+            <input type="hidden" name="game[theme][name]" value="eighties">
+            <input type="hidden" name="game[theme][extension]" value="svg">
             <input type="hidden" name="game[board_size]" value="6">
             <input type="hidden" name="game[players_number]" value="2">
             <input type="hidden" name="game[visibility]" value="local">