sync

UI/src/components/dev-tools/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey="`"
+               changePositionKey="ctrl-w">
+    <LogMonitor />
+  </DockMonitor>
+)

UI/src/components/logotype/index.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 const Logotype = ({fill = 'var(--c-7)', width, height, circleFill, typeFill, style, className}) => (
   <svg style={style} className={className} viewBox='0 0 1566 298' version='1.1' xmlns='http://www.w3.org/2000/svg'>
-    <g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
-      <text id='Roleypoly' font-family='HelveticaNeue-Medium, Helvetica Neue' font-size='288' font-weight='400' fill={typeFill || fill}>
+    <g id='Page-1' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+      <text id='Roleypoly' fontFamily='HelveticaNeue-Medium, Helvetica Neue' fontSize='288' fontWeight='400' fill={typeFill || fill}>
         <tspan x='249' y='238'>Roleypoly</tspan>
       </text>
       <defs>

UI/src/components/oauth-callback/index.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import { Redirect } from 'react-router-dom'
 import superagent from 'superagent'
 
@@ -23,14 +23,16 @@ class OauthCallback extends Component {
 
     // pass token to backend, await it to finish it's business.
     try {
-      await superagent.post('/api/auth/token').send({ token })
+      const rsp = await superagent.post('/api/auth/token').send({ token })
+      this.setState({ notReady: false })
+      this.props.onLogin(rsp.body)
     } catch (e) {
       console.error('token pass error', e)
       this.setState({ message: 'g-gomen nasai... i broke it...' })
       return
     } 
     
-    this.setState({ notReady: false })
+
     // update user stuff here
   }
 

UI/src/components/role-picker/RolePicker.sass

@@ -0,0 +1,6 @@
+.role-picker 
+  transition: opacity 0.3s ease-in-out
+  opacity: 1
+  
+  .hidden 
+    opacity: 0

UI/src/components/role-picker/index.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import superagent from 'superagent'
+import './RolePicker.sass'
+
+import Role from '../role'
+
+class RolePicker extends Component {
+  state = {
+    roles: [],
+    categories: {},
+    hidden: true,
+    serverMessage: `Hey there. This is a cool UI you can pick your roles from. If you have any questions, ask the mods on Discord!`
+  }
+
+  async componentDidUpdate (prevProps) {
+    if (prevProps.match.params.server !== this.props.match.params.server) {
+      this.setState({ hidden: true })
+      setTimeout(async () => {
+        this.setState({ roles: [] })      
+        this.setState({ roles: await this.getRoles(this.props.match.params.server), hidden: false })
+      }, 350)
+    }
+  }
+
+  async componentWillMount () {
+    this.setState({ roles: await this.getRoles(this.props.match.params.server), hidden: false })    
+  }
+
+  async getRoles (id) {
+    const rsp = await superagent.get(`/api/server/${id}`)
+    return rsp.body//.map(r => { r.selected = false; return r })
+  }
+
+  onChange = k => (newVal, oldVal) => {
+    this.setState((prevState) => {
+      return { roles: prevState.roles.map(r => {
+        if (r.id === k) {
+          r.selected = newVal
+        }
+
+        return r
+      })}
+    })
+  }
+
+  render () {
+    return <div className={`role-picker ${(this.state.hidden) ? 'hidden' : ''}`}>
+      <section>
+        <h3>Server Message</h3>
+        <p>{this.state.serverMessage}</p>
+      </section>
+      <section>
+        <h3>Roles</h3>
+          {
+            this.state.roles.map((r, k) => {
+
+              return <Role key={k} role={r} onToggle={this.onChange(r.id)} />
+            })
+          }
+      </section>
+    </div>
+  }
+}
+
+export default RolePicker

UI/src/components/role/Role.sass

@@ -0,0 +1,56 @@
+.role
+  border: 1px solid var(--role-color-rgba)
+  border-radius: 32px
+  box-sizing: border-box
+  height: 32px
+  margin: 0 6px 6px 0
+  padding: 4px
+  display: inline-flex
+  font-weight: 600
+  align-content: center
+  justify-content: center
+  font-size: 16px
+  vertical-align: baseline
+  transition: border-color 0.2s ease-in-out
+
+  &:hover
+    .role__option
+      transform: translateY(-1px)
+      box-shadow: 0 1px 1px var(--c-dark)
+      border-color: var(--role-color-hover)
+      background-color: transparent 
+      &:active
+        box-shadow: none  
+
+  &__option
+    border-radius: 50%
+    height: 22px
+    margin-right: 6px
+    width: 22px
+    box-sizing: border-box
+    /* display: inline-block */
+    background-color: transparent
+    overflow: hidden
+    border: 1px solid var(--role-color-hex)
+    transition: background-color 0.1s ease-in-out, border-left-width 0.3s ease-in-out, border-right-width 0.5s ease-in-out, border-color 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-out
+                
+    &.selected
+      background-color: var(--role-color-hex)
+    
+      // This **must** be width-1, otherwise blink adds width to the boundaries.
+      border-left-width: 21px 
+
+    &:hover
+      cursor: pointer
+
+
+  &__name
+    margin-right: 6px
+    max-width: 200px
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    user-select: none
+
+.role__option:active, .role:active .role__option:not(:active)
+  transform: translateY(0) !important  

UI/src/components/role/index.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import Radium from 'radium'
+import Color from 'color'
+import './Role.sass'
+
+const whiteColor = Color('#efefef')
+
+class Role extends Component {
+  render () {
+    const { role } = this.props
+    let color = Color(role.color)
+
+    if (color.rgbNumber() === 0) {
+      color = whiteColor
+    }
+
+    const c = color
+    let hc = color.lighten(0.1)
+
+    return <div
+      onClick={this.props.onToggle.bind(null, !role.selected, role.selected)}
+      className='role'
+      style={{
+        '--role-color-hex': c.string(),
+        '--role-color-hover': hc.string(),
+        '--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`
+      }}>
+      {/* circle svg */}
+      <div className={`role__option ${(role.selected) ? 'selected' : ''}`}/>
+      <div className='role__name'>
+        {role.name}
+      </div>
+    </div>
+  }
+}
+
+export default Radium(Role)

UI/src/components/servers/Navigation.js

@@ -1,13 +1,18 @@
 import React, { Component, Fragment } from 'react'
-import Radium from 'radium'
-import serverStyles, { navigation as styles } from './styles'
-
+import PropTypes from 'prop-types'
 import ServerCard from './ServerCard'
 import UserCard from './UserCard'
 
 class ServersNavigation extends Component {
+
+  static propTypes = {
+    user: PropTypes.object.isRequired,
+    servers: PropTypes.arrayOf(PropTypes.object).isRequired,
+    className: PropTypes.string
+  }
+
   render () {
-    console.log(this.props.servers)
+    // console.log(this.props.servers)
     return <Fragment>
       <UserCard user={this.props.user} />
       <div className={this.props.className}>
@@ -17,4 +22,4 @@ class ServersNavigation extends Component {
   }
 }
 
-export default Radium(ServersNavigation)
+export default ServersNavigation

UI/src/components/servers/ServerCard.css

@@ -1,47 +0,0 @@
-.server-list__item {
-  display: flex;
-  /* border-bottom: 1px solid var(--c-3); */
-  padding: 25px 15px;
-  padding-right: 0;
-  align-items: center;
-  /* justify-content: center; */
-}
-
-a.server-list__item {
-  color: var(--c-white);
-  text-decoration: none;
-}
-
-a.server-list__item.active {
-  cursor: default
-}
-
-.server-list__item.active {
-  background-color: var(--c-3);
-}
-
-.server-list__item:hover:not(.active) {
-  background-color: rgba(0,0,0,0.25) !important;
-  cursor: pointer;
-  transform: translateX(1px); 
-  transition: background 0.05s ease-in-out, transform 0.1s ease-in-out;  
-}
-
-.server-list__item:last-of-type {
-  border: 0
-}
-
-.server-list__item:nth-of-type(even):not(.active) {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.server-list__item__icon img {
-  border-radius: 100%;
-  width: 50px;
-  height: 50px;
-  border: 2px solid transparent;  
-}
-
-.server-list__item__info {
-  padding: 0 10px
-}

UI/src/components/servers/ServerCard.js

@@ -1,25 +1,25 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import Radium from 'radium'
-import './ServerCard.css'
+import './ServerCard.sass'
 
 class ServerCard extends Component {
   render () {
     const { server: { server, id, gm, perms }, user } = this.props
 
     let icon = ''
-    
+
     if (perms.canManageRoles) {
-      icon = <span title='Role Manager' uk-tooltip=''>🔰</span>
+      icon = <span title='Role Manager' uk-tooltip='' role='img' aria-label='Role Manager'>🔰</span>
     }
 
     if (perms.isAdmin) {
-      icon = <span title='Server Admin' uk-tooltip=''>🔰⭐️</span>
+      icon = <span title='Server Admin' uk-tooltip='' role='img' aria-label='Server Admin'>🔰⭐️</span>
     }
 
     return <NavLink className='server-list__item' activeClassName='active' to={`/s/${id}`}>
       <div className='server-list__item__icon'>
-        <img src={`https://cdn.discordapp.com/icons/${id}/${server.icon}.png`} />
+        <img src={`https://cdn.discordapp.com/icons/${id}/${server.icon}.png`} alt={server.name} />
       </div>
       <div className='server-list__item__info'>
         <b>{server.name}</b><br />

UI/src/components/servers/ServerCard.sass

@@ -0,0 +1,41 @@
+.server-list
+  &__item
+    display: flex
+    /* border-bottom: 1px solid var(--c-3) */
+    padding: 25px 15px
+    padding-right: 0
+    align-items: center
+    /* justify-content: center */
+    
+    .active
+      background-color: var(--c-3)
+
+    &:hover:not(.active)
+      background-color: rgba(0,0,0,0.25) !important
+      cursor: pointer
+      transform: translateX(1px) 
+      transition: background 0.05s ease-in-out, transform 0.1s ease-in-out  
+
+    &:nth-of-type(even)
+      background-color: rgba(0,0,0,0.1)
+
+    &:last-of-type
+      border: 0
+
+    &__icon img
+      border-radius: 100%
+      width: 50px
+      height: 50px
+      border: 2px solid transparent  
+
+    &__info
+      padding: 0 10px
+
+a.server-list__item
+  color: var(--c-white)
+  text-decoration: none
+  
+  .active
+    cursor: default
+
+

UI/src/components/servers/UserCard.css

@@ -1,53 +0,0 @@
-.user-card {
-  position: relative;
-  display: flex;
-  background-color: rgba(0,0,0,0.3);
-  /* border-bottom: 1px solid var(--c-3);   */
-  padding: 25px 15px;
-  grid-area: user;
-}
-
-.user-card__icon img {
-  width: 50px;
-  height: 50px;
-  border-radius: 100%;
-  border: 2px solid #5fc66d;
-}
-
-.user-card__info {
-  padding: 0 10px;
-  line-height: 50px
-}
-
-.user-card__info__discrim {
-  font-weight: 100;
-  font-size: 0.7rem;
-  color: var(--c-7);
-}
-
-.user-card__info__name {
-  /* font-size */
-  /* font-weight: ; */
-}
-
-.user-card__actions {
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  bottom: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.user-card__actions svg {
-  transition: transform 0.05s ease-in-out;
-}
-
-.user-card__actions svg:hover {
-  transform: scale(1.15);
-}
-
-.user-card__actions polygon {
-  fill: var(--c-7);
-}

UI/src/components/servers/UserCard.js

@@ -1,18 +1,33 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { NavLink } from 'react-router-dom'
-import Radium from 'radium'
-import './UserCard.css'
+import './UserCard.sass'
 
 class UserCard extends Component {
+  static propTypes = {
+    user: PropTypes.object.isRequired
+  }
+
+  get avatar () {
+    const { user } = this.props
+    if (user.avatar === '' || user.avatar == null) {
+      return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) % 4}.png`
+    }
+
+    return `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
+  }
+
   render () {
     const { user } = this.props
 
+    // console.log(this.props)
+
     return <div className='user-card'>
       <div className='user-card__icon'>
-        <img src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`} />
+        <img src={this.avatar} alt={user.username} />
       </div>
       <div className='user-card__info'>
-      <span className='user-card__info__name'>{user.username}</span><span className='user-card__info__discrim'>#{user.discriminator}</span>
+        <span className='user-card__info__name'>{user.username}</span><span className='user-card__info__discrim'>#{user.discriminator}</span>
       </div>
       <div className='user-card__actions'>
         <ul className='uk-iconnav uk-iconnav-vertical'>
@@ -28,4 +43,4 @@ class UserCard extends Component {
   }
 }
 
-export default Radium(UserCard)
+export default UserCard

UI/src/components/servers/UserCard.sass

@@ -0,0 +1,44 @@
+.user-card
+  position: relative
+  display: flex
+  background-color: var(--c-dark)
+  /* border-bottom: 1px solid var(--c-3)   */
+  padding: 25px 15px
+  grid-area: user
+
+  &__icon img
+    width: 50px
+    height: 50px
+    border-radius: 100%
+    border: 2px solid #5fc66d
+
+  &__info
+    padding: 0 10px
+    line-height: 50px
+
+    &__discrim
+      font-weight: 100
+      font-size: 0.7rem
+      color: var(--c-7)
+
+    &__name
+      /* font-size */
+      /* font-weight:  */
+
+  &__actions
+    position: absolute
+    right: 5px
+    top: 5px
+    bottom: 5px
+    display: flex
+    align-items: center
+    justify-content: center
+
+    svg
+      transition: transform 0.05s ease-in-out
+
+    svg:hover
+      transform: scale(1.15)
+
+    polygon
+      fill: var(--c-7)

UI/src/components/servers/index.css

@@ -1,20 +0,0 @@
-.servers {
-  display: grid;
-  grid-template-rows: 100px calc(100vh - 75px);
-  grid-template-columns: 300px 1fr;
-  grid-template-areas:  "user    content"
-                        "listing content";
-}
-
-.servers__nav {
-  grid-area: listing;
-  overflow-y: scroll;
-  height: calc(100vh - 175px);
-}
-
-.servers__content {
-  grid-area: content;
-  background-color: var(--c-3);
-  padding: 15px;
-  overflow-y: scroll;
-}

UI/src/components/servers/index.js

@@ -1,29 +1,27 @@
 import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
 import Radium from 'radium'
 import superagent from 'superagent'
-import './index.css'
+import './index.sass'
 
 import Navigation from './Navigation'
+import RolePicker from '../role-picker'
 
-import mockData from './mockData'
+// import mockData from './mockData'
 
 class Servers extends Component {
-  state = {
-    user: mockData.user,
-    servers: [],
-  }
-
   async componentWillMount () {
-    const rsp = await superagent.get(`/api/~/relevant-servers/62601275618889728`)
+    const rsp = await superagent.get(`/api/servers`)
 
     this.setState({ servers: rsp.body })
   }
 
   render () {
     return <div className="servers">
-      <Navigation className="servers__nav" servers={this.state.servers} user={this.state.user} />
+      <Navigation className="servers__nav" servers={[]} user={{}} />
       <div className="servers__content">
-        {/* another router probably. */}
+        <Route path='/s/:server' component={RolePicker} />
+        <Route path='/s/:server/edit' component={RolePicker} />
       </div>
     </div>
   }

UI/src/components/servers/index.sass

@@ -0,0 +1,21 @@
+.servers
+
+  $fullH: calc(100vh - 75px)
+
+  display: grid
+  grid-template-rows: 100px $fullH
+  grid-template-columns: 300px 1fr
+  grid-template-areas: "user content" "listing content"
+
+
+  &__nav
+    grid-area: listing
+    overflow-y: scroll
+    height: $fullH
+
+
+  &__content
+    grid-area: content
+    background-color: var(--c-3)
+    padding: 15px
+    overflow-y: scroll

UI/src/components/wrapper/index.js

@@ -14,8 +14,8 @@ class Wrapper extends Component {
           <div className='uk-navbar-left'>
             <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
           </div>
-          <div class='uk-navbar-right'>
-            <ul class='uk-navbar-nav'>
+          <div className='uk-navbar-right'>
+            <ul className='uk-navbar-nav'>
               <li><Link to='/start'>Get Started</Link></li>
               <li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li>
             </ul>