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;
-}
+
-.map.newMap a {
+      .newMapImage {
+	background-position: 0 -72px;
+      }
+    }
+
+    a {
       height: 340px;
       display: block;
       position: relative;
-}
+    }
-.newMap .newMapImage {
+
+    .newMapImage {
       display: block;
       width: 72px;
       height: 72px;
@@ -36,36 +42,49 @@
       margin-left: -36px;
       top: 50%;
       margin-top: -36px;
-}
+    }
-.map:hover .newMapImage {
+
-  background-position: 0 -72px;
+    span {
-}
-.newMap span {
 	font-family: 'din-regular', sans-serif;
 	font-size: 18px;
 	line-height: 22px;
 	text-align: center;
 	display: block;
 	padding-top: 220px;
-}
+    }
+  }
 
-.mapCard {
+  .mapCard {
     position:relative;
     width:100%;
     height:308px;
     padding: 0 0 16px 0;
     color: #424242;
 
-.mapScreenshot {
+    .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;
-}
+    }
 
-.mapScreenshot img {
+    .mapScreenshot img {
       width: 100%;
-}
+    }
 
-.title {
+    .title {
       word-wrap: break-word;
       font-size:18px;
       line-height:22px;
@@ -80,43 +99,43 @@
 	vertical-align: middle;
 	text-align: center;
       }
-}
+    }
 
-.creatorAndPerm {
+    .creatorAndPerm {
       padding: 8px;
-}
+    }
 
-.creatorImage {
+    .creatorImage {
       display: inline-block;
       border-radius: 16px;
       vertical-align: middle;
       width: 32px;
       height: 32px;
-}
+    }
 
-span.creatorName {
+    span.creatorName {
       margin-left: 8px;
-}
+    }
 
 
-.scroll {
+    .scroll {
        display:block;
        font-family: helvetica, sans-serif;
        font-size: 12px;
        word-wrap: break-word;
        text-align: center;
        margin-top: 16px;
-}
+    }
 
-&:hover .mainContent {
+    &:hover .mainContent {
       filter: blur(2px);
-}
+    }
 
-&:hover .mapMetadata {
+    &:hover .mapMetadata {
       display: block;
-}
+    }
 
-.mapMetadata {
+    .mapMetadata {
       display: none;
       position: absolute;
       top: 0;
@@ -130,15 +149,15 @@ span.creatorName {
       background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
       background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-}
+    }
 
-.metadataSection {
+    .metadataSection {
       padding: 16px 0;
       width: 90px;
       float: left;
       font-family: 'din-medium', sans-serif;
       text-align: center;
-}
+    }
 
+  }
 }
-

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 }))