junto status is live on map cards XD

app/assets/stylesheets/mapcard.scss.erb

@@ -1,144 +1,163 @@
 /* Map Cards */
 
 .map {
-    display:inline-block;
+  display:inline-block;
-    width:220px;
+  width:220px;
-    height:340px;
+  height:340px;
-    font-size: 12px;
+  font-size: 12px;
-    text-align: left;
+  text-align: left;
-    overflow: visible;
+  overflow: visible;
-    background: #e8e8e8;
+  background: #e8e8e8;
-    border-radius:2px;
+  border-radius:2px;
-    margin:16px;
+  margin:16px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-.map.newMap {
-  float: left;
-  position: relative;
-}
-.map.newMap:hover {
-  background: #dcdcdc;
-}
-.map.newMap a {
-  height: 340px;
-  display: block;
-  position: relative;
-}
-.newMap .newMapImage {
-  display: block;
-  width: 72px;
-  height: 72px;
-  background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
-  background-repeat: no-repeat;
-  background-position: 0 0; 
-  position: absolute;
-  left: 50%;
-  margin-left: -36px;
-  top: 50%;
-  margin-top: -36px;
-}
-.map:hover .newMapImage {
-  background-position: 0 -72px;
-}
-.newMap span {
-    font-family: 'din-regular', sans-serif;
-    font-size: 18px;
-    line-height: 22px;
-    text-align: center;
-    display: block;
-    padding-top: 220px;
-}
 
-.mapCard {
+  &.newMap {
-  position:relative;
+    float: left;
-  width:100%;
+    position: relative;
-  height:308px;
-  padding: 0 0 16px 0;
-  color: #424242;
 
-.mapScreenshot {
+    &:hover {
-  width: 100%;
+      background: #dcdcdc;
-  height: 220px;
-}
 
-.mapScreenshot img {
+      .newMapImage {
-  width: 100%;
+	background-position: 0 -72px;
-}
+      }
+    }
 
-.title {
+    a {
-  word-wrap: break-word;
+      height: 340px;
-  font-size:18px;
+      display: block;
-  line-height:22px;
+      position: relative;
-  height: 71px;
+    }
-  display:table;
+
-  padding: 0 16px;
+    .newMapImage {
-  font-family: 'din-regular', sans-serif;
+      display: block;
-  margin: 0 auto;
+      width: 72px;
+      height: 72px;
+      background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
+      background-repeat: no-repeat;
+      background-position: 0 0; 
+      position: absolute;
+      left: 50%;
+      margin-left: -36px;
+      top: 50%;
+      margin-top: -36px;
+    }
+
+    span {
+	font-family: 'din-regular', sans-serif;
+	font-size: 18px;
+	line-height: 22px;
+	text-align: center;
+	display: block;
+	padding-top: 220px;
+    }
+  }
+
+  .mapCard {
+    position:relative;
+    width:100%;
+    height:308px;
+    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;
+    }
+
+    .mapScreenshot img {
+      width: 100%;
+    }
+
+    .title {
+      word-wrap: break-word;
+      font-size:18px;
+      line-height:22px;
+      height: 71px;
+      display:table;
+      padding: 0 16px;
+      font-family: 'din-regular', sans-serif;
+      margin: 0 auto;
+
+      .innerTitle {
+	display: table-cell;
+	vertical-align: middle;
+	text-align: center;
+      }
+    }
+
+    .creatorAndPerm {
+      padding: 8px;
+    }
+
+    .creatorImage {
+      display: inline-block;
+      border-radius: 16px;
+      vertical-align: middle;
+      width: 32px;
+      height: 32px;
+    }
+
+    span.creatorName {
+      margin-left: 8px;
+    }
+
+
+    .scroll {
+       display:block;
+       font-family: helvetica, sans-serif;
+       font-size: 12px;
+       word-wrap: break-word;
+       text-align: center;
+       margin-top: 16px;
+    }
+
+    &:hover .mainContent {
+      filter: blur(2px);
+    }
+
+    &:hover .mapMetadata {
+      display: block;
+    }
+
+    .mapMetadata {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 40px 20px 0;
+      height: 300px;
+      font-family: 'din-regular', sans-serif;
+      font-size: 12px;
+      color: #FFF;
+      background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
+      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 {
+      padding: 16px 0;
+      width: 90px;
+      float: left;
+      font-family: 'din-medium', sans-serif;
+      text-align: center;
+    }
 
-  .innerTitle {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
   }
 }
-
-.creatorAndPerm {
-  padding: 8px;
-}
-
-.creatorImage {
-  display: inline-block;
-  border-radius: 16px;
-  vertical-align: middle;
-  width: 32px;
-  height: 32px;
-}
-
-span.creatorName {
-  margin-left: 8px;
-}
-
-
-.scroll {
-   display:block;
-   font-family: helvetica, sans-serif;
-   font-size: 12px;
-   word-wrap: break-word;
-   text-align: center;
-   margin-top: 16px;
-}
-
-&:hover .mainContent {
-  filter: blur(2px);
-}
-
-&:hover .mapMetadata {
-  display: block;
-}
-
-.mapMetadata {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 40px 20px 0;
-  height: 300px;
-  font-family: 'din-regular', sans-serif;
-  font-size: 12px;
-  color: #FFF;
-  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
-  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 {
-  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,12 +22,15 @@ import {
 
 
 module.exports = function (io, store) {
+
+  store.subscribe(() => {
+    console.log(store.getState())
+    io.sockets.emit(JUNTO_UPDATED, store.getState())
+  })
+
   io.on('connection', function (socket) {
 
-    store.subscribe(() => {
+    io.sockets.emit(JUNTO_UPDATED, store.getState())
-      console.log(store.getState())
-      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 }))