User-selected indicators for skill level and seriousness when creating games

server.coffee

@@ -88,7 +88,7 @@ lobby = io.of('/lobby').on 'connection', (socket) ->
   socket.on 'netrunner', (msg) ->
     switch msg.action
       when "create"
-        game = {date: new Date(), gameid: ++gameid, title: msg.title,\
+        game = {date: new Date(), gameid: ++gameid, title: msg.title, skill: msg.skill, type:msg.type,\
                 players: [{user: socket.request.user, id: socket.id, side: "Corp"}]}
         games[gameid] = game
         socket.join(gameid)

src/cljs/netrunner/gamelobby.cljs

@@ -43,7 +43,9 @@
 (defn new-game [cursor owner]
   (authenticated
    (fn [user]
-     (om/set-state! owner :title (str (:username user) "'s game"))
+     (om/set-state! owner :title "Friendly game")
+     (om/set-state! owner :skill "Intermediate")
+     (om/set-state! owner :game-type "Friendly")
      (om/set-state! owner :editing true)
      (-> ".game-title" js/$ .select))))
 
@@ -54,7 +56,8 @@
        (om/set-state! owner :flash-message "Please fill a game title.")
        (do (om/set-state! owner :editing false)
            (swap! app-state assoc :messages [])
-           (send {:action "create" :title (om/get-state owner :title)}))))))
+           (send {:action "create" :title (om/get-state owner :title) :skill (om/get-state owner :skill)
+                  :type (om/get-state owner :game-type)}))))))
 
 (defn join-game [gameid owner]
   (authenticated
@@ -139,6 +142,12 @@
           [:input {:ref "msg-input" :placeholder "Say something" :accessKey "l"}]
           [:button "Send"]]]]))))
 
+(defn auto-game-title [skill game-type]
+  (cond
+    (= game-type "Private") "Private game"
+    (= skill "Intermediate") (str game-type " game")
+    :else (str game-type " game for " (clojure.string/lower-case skill) "s")))
+
 (defn game-lobby [{:keys [games gameid messages user] :as cursor} owner]
   (reify
     om/IRenderState
@@ -168,6 +177,20 @@
             [:div.button-bar
              [:button {:type "button" :on-click #(create-game cursor owner)} "Create"]
              [:button {:type "button" :on-click #(om/set-state! owner :editing false)} "Cancel"]]
+            [:h4 "Game Type"]
+            [:select.game-type {:value (:game-type state)
+                                :on-change #(do (om/set-state! owner :game-type (.. % -target -value))
+                                                (om/set-state! owner :title (auto-game-title (:skill state)
+                                                                                             (.. % -target -value))))}
+             (for [option ["Private" "Friendly" "Serious" "Tournament"]]
+               [:option {:value option :dangerouslySetInnerHTML #js {:__html option}}])]
+            [:h4 "Skill Level"]
+            [:select.game-skill {:value (:skill state)
+                                 :on-change #(do (om/set-state! owner :skill (.. % -target -value))
+                                                 (om/set-state! owner :title (auto-game-title (.. % -target -value)
+                                                                                              (:game-type state))))}
+             (for [option ["Beginner" "Intermediate" "Expert"]]
+               [:option {:value option :dangerouslySetInnerHTML #js {:__html option}}])]
             [:h4 "Title"]
             [:input.game-title {:on-change #(om/set-state! owner :title (.. % -target -value))
                                 :value (:title state) :placeholder "Title"}]

src/css/base.styl

@@ -922,6 +922,57 @@ nav ul
 
   .game-title
     width: 250px
+    margin-bottom: 5px
+
+  .game-skill
+    width: 150px
+
+  .game-type
+    width: 150px
+
+  .game-icons
+    position: absolute
+    right: 70px
+    top: 16px
+
+  .game-icon-type
+    float: right
+    color: black
+    float: right
+    text-align: center
+    vertical-align: middle
+    height: 20px
+    width: 20px
+    border-radius: 50%
+    border: 1px solid black
+    margin-right: 2px
+
+  .game-icon-skill
+    float: right
+    color: black
+    text-align: center
+    vertical-align: middle
+    height: 19px
+    width: 19px
+    border: 1px solid black
+
+  .private
+    color: white
+    background-color: black
+  .beginner
+    background-color: green
+  .intermediate
+    background-color: yellow
+
+  .expert
+    background-color: red
+  .friendly
+    background-color: green
+  .serious
+    background-color: yellow
+  .tournament
+    background-color: red
+
 
   .deck-collection
     width: 496px