junto status is live on map cards XD

app/assets/stylesheets/mapcard.scss.erb

@@ -11,20 +11,26 @@
   border-radius:2px;
   margin:16px;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-.map.newMap {
+
+  &.newMap {
     float: left;
     position: relative;
-}
-.map.newMap:hover {
+
+    &:hover {
       background: #dcdcdc;
+
+      .newMapImage {
+	background-position: 0 -72px;
       }
-.map.newMap a {
+    }
+
+    a {
       height: 340px;
       display: block;
       position: relative;
     }
-.newMap .newMapImage {
+
+    .newMapImage {
       display: block;
       width: 72px;
       height: 72px;
@@ -37,10 +43,8 @@
       top: 50%;
       margin-top: -36px;
     }
-.map:hover .newMapImage {
-  background-position: 0 -72px;
-}
-.newMap span {
+
+    span {
 	font-family: 'din-regular', sans-serif;
 	font-size: 18px;
 	line-height: 22px;
@@ -48,6 +52,7 @@
 	display: block;
 	padding-top: 220px;
     }
+  }
 
   .mapCard {
     position:relative;
@@ -56,6 +61,20 @@
     padding: 0 0 16px 0;
     color: #424242;
 
+    .mapHasMapper, .mapHasConversation {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: 32px;
+      height: 32px;
+    }
+    .mapHasMapper {
+      background: url('<%= asset_path('junto.png') %>');
+    }
+    .mapHasConversation {
+      background: url('<%= asset_path('junto.gif') %>');
+    }
+
     .mapScreenshot {
       width: 100%;
       height: 220px;
@@ -141,4 +160,4 @@ span.creatorName {
     }
 
   }
-
+}

frontend/src/Metamaps/Views/index.js

@@ -6,7 +6,7 @@ import { JUNTO_UPDATED } from '../Realtime/events'
 
 const Views = { 
   init: () => {
-    $(document).on(JUNTO_UPDATED, ExploreMaps.render()) 
+    $(document).on(JUNTO_UPDATED, () => ExploreMaps.render()) 
   },
   ExploreMaps,
   ChatView,

frontend/src/components/Maps/MapCard.js

@@ -1,8 +1,19 @@
 import React, { Component, PropTypes } from 'react'
+import { find, values } from 'lodash'
+
+const IN_CONVERSATION = 1 // shared with /realtime/reducer.js
+
+const MapperList = (props) => {
+
+}
 
 class MapCard extends Component {
   render = () => {
-    const { map, currentUser } = this.props
+    const { map, juntoState, currentUser } = this.props
+
+    const hasMap = juntoState.liveMaps[map.id]
+    const hasConversation = hasMap && find(values(hasMap), v => v === IN_CONVERSATION) 
+    const hasMapper = hasMap && !hasConversation
 
     function capitalize (string) {
       return string.charAt(0).toUpperCase() + string.slice(1)
@@ -59,6 +70,8 @@ class MapCard extends Component {
                   </div>
                 </div>
               </div>
+              { hasMapper && <div className='mapHasMapper'></div> }
+              { hasConversation && <div className='mapHasConversation'></div> }
             </div>
           </div>
         </a>
@@ -69,6 +82,7 @@ class MapCard extends Component {
 
 MapCard.propTypes = {
   map: PropTypes.object.isRequired,
+  juntoState: PropTypes.object,
   currentUser: PropTypes.object
 }
 

frontend/src/components/Maps/index.js

@@ -33,7 +33,7 @@ class Maps extends Component {
   }
 
   resize = () => {
-    const { maps, juntoState, user, currentUser } = this.props
+    const { maps, user, currentUser } = this.props
     const numCards = maps.length + (user || currentUser ? 1 : 0)
     const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
     const mapsWidth = Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
@@ -41,7 +41,7 @@ class Maps extends Component {
   }
 
   render = () => {
-    const { maps, currentUser, section, user, moreToLoad, loadMore } = this.props
+    const { maps, currentUser, juntoState, section, user, moreToLoad, loadMore } = this.props
     const style = { width: this.state.mapsWidth + 'px' }
 
     return (
@@ -50,7 +50,7 @@ class Maps extends Component {
           <div style={ style }>
             { user ? <MapperCard user={ user } /> : null }
             { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
-            { maps.models.map(map => <MapCard key={ map.id } map={ map } currentUser={ currentUser } />) }
+            { maps.models.map(map => <MapCard key={ map.id } map={ map } juntoState={ juntoState } currentUser={ currentUser } />) }
             <div className='clearfloat'></div>
             {!moreToLoad ? null : [
               <button className="button loadMore" onClick={ loadMore }>load more</button>,

realtime/global.js

@@ -22,13 +22,16 @@ import {
 
 
 module.exports = function (io, store) {
-  io.on('connection', function (socket) {
 
   store.subscribe(() => {
     console.log(store.getState())
     io.sockets.emit(JUNTO_UPDATED, store.getState())
   })
 
+  io.on('connection', function (socket) {
+
+    io.sockets.emit(JUNTO_UPDATED, store.getState())
+
     socket.on(JOIN_MAP, data => store.dispatch({ type: JOIN_MAP, payload: data}))
     socket.on(LEAVE_MAP, () => store.dispatch({ type: LEAVE_MAP, payload: socket }))
     socket.on(JOIN_CALL, data => store.dispatch({ type: JOIN_CALL, payload: data }))