sync, too many changes to list out

ui/components/demos/tap.js

@@ -0,0 +1,12 @@
+// @flow
+import * as React from 'react'
+// import styled from 'styled-components'
+import Role from '../role/demo'
+
+const roles = [
+  'cute', 'vanity', 'brave', 'proud', 'wonderful', '日本語'
+]
+
+export default () => <div>
+  { roles.map((v, i) => <Role key={i} role={{ name: `a ${v} role ♡`, color: `hsl(${(360 / roles.length) * i},40%,70%)` }} />) }
+</div>

ui/components/demos/typing.js

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import moment from 'moment'
+import Typist from 'react-typist'
+import styled from 'styled-components'
+
+const Outer = styled.div`
+  --not-quite-black: #23272A;
+  --dark-but-not-black: #2C2F33;
+  --greyple: #99AAB5;
+  --blurple: var(--c-discord);
+
+  background-color: var(--dark-but-not-black);
+  padding: 10px;
+  text-align: left;
+  color: var(--c-white);
+`
+
+const Chat = styled.div`
+  padding: 10px 0;
+  & span {
+    display: inline-block;
+    margin-left: 5px;
+  }
+`
+
+const TextArea = styled.div`
+  background-color: hsla(218,5%,47%,.3);
+  border-radius: 5px;
+  padding: 10px;
+
+  & .Typist .Cursor {
+
+    display: inline-block;
+    color: transparent;
+    border-left: 1px solid var(--c-white);
+    user-select: none;
+
+    &--blinking {
+
+      opacity: 1;
+      animation: blink 2s ease-in-out infinite;
+
+      @keyframes blink {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+`
+
+const Timestamp = styled.span`
+  font-size: 0.7em;
+  color: hsla(0,0%,100%,.2);
+`
+
+const Username = styled.span`
+  font-weight: bold;
+`
+
+const Typing = () => <Outer>
+  <Chat>
+    <Timestamp className='timestamp'>{moment().format('LT')}</Timestamp>
+    <Username className='username'>okano「岡野」</Username>
+    <span className='text'>Hey, I want some roles!</span>
+  </Chat>
+  <TextArea>
+    <Typist cursor={{ blink: true }}>
+      <span>.iam a cute role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a vanity role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a brave role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a proud role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a wonderful role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a 日本語 role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>i have too many roles.</span>
+    </Typist>
+  </TextArea>
+</Outer>
+
+export default Typing

ui/components/discord-guild-pic.js

@@ -0,0 +1,61 @@
+// @flow
+// export default ({ id, icon, ...rest }) => <img src={`https://cdn.discordapp.com/icons/${id}/${icon}.png`} {...rest} />
+import * as React from 'react'
+import styled from 'styled-components'
+
+export type GuildPicProps = {
+  id: string,
+  icon: string,
+  name: string
+}
+
+export type GuildPicState = {
+  src: ?string,
+  ok: boolean
+}
+
+const Fallback = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: hsl(${(props: any) => '' + (props.serverName.codePointAt(0) % 360)},50%,50%);
+`
+
+export default class DiscordGuildPic extends React.Component<GuildPicProps, GuildPicState> {
+  state = {
+    src: this.src,
+    ok: false
+  }
+
+  get src () {
+    return `https://cdn.discordapp.com/icons/${this.props.id}/${this.props.icon}.png`
+  }
+
+  renderFallback () {
+    const { name, id, icon, ...rest } = this.props
+    return <Fallback serverName={name} {...rest}>{name[0]}</Fallback>
+  }
+
+  onError = () => {
+    // console.log('onError')
+    this.setState({
+      src: null
+    })
+  }
+
+  onLoad = () => {
+    this.setState({
+      ok: true
+    })
+  }
+
+  renderImg () {
+    const { name, id, icon, ...rest } = this.props
+    return <img src={this.state.src} onError={this.onError} onLoad={this.onLoad} {...rest} />
+  }
+
+  render () {
+    return (this.state.src === null) ? this.renderFallback() : this.renderImg()
+  }
+}

ui/components/header/auth.js

@@ -2,12 +2,85 @@
 import * as React from 'react'
 import HeaderBarCommon, { Logomark } from './common'
 import { type User } from '../../containers/user'
+import DiscordIcon from '../discord-guild-pic'
+import styled from 'styled-components'
+import { Hide } from '../../kit/media'
+import Link from 'next/link'
+
+const temporaryServer = {
+  id: '423497622876061707',
+  name: 'Placeholder',
+  icon: '8d03476c186ec8b2f6a1a4f5e55b13fe'
+}
+
+const LogoBox = styled.a`
+  flex: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const StyledServerPic = styled(DiscordIcon)`
+  border-radius: 100%;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
+  height: 35px;
+  width: 35px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const StyledAvatar = styled.img`
+  border-radius: 100%;
+  border: 1px solid var(--c-green);
+  height: 35px;
+  width: 35px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ServerSelector = (props) => <div {...props}>
+  <div>
+    <StyledServerPic {...temporaryServer} />
+  </div>
+  <div>
+    { temporaryServer.name }
+  </div>
+</div>
+
+const StyledServerSelector = styled(ServerSelector)`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+`
+
+const UserSection = ({ user, ...props }) => <div {...props}>
+  <Hide.SM>{ user.username }</Hide.SM>
+  <StyledAvatar src={user.avatar} />
+</div>
+
+const StyledUserSection = styled(UserSection)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+`
 
 const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => (
   <HeaderBarCommon>
     <>
-      <Logomark />
+      <Link href='/s/add' prefetch>
-      Hey there, {user.username}#{user.discriminator}
+        <LogoBox>
+          <Logomark />
+        </LogoBox>
+      </Link>
+      <StyledServerSelector />
+      <StyledUserSection user={user} />
     </>
   </HeaderBarCommon>
 )

ui/components/header/common.js

@@ -5,12 +5,14 @@ import styled from 'styled-components'
 import * as logo from '../logo'
 
 export type CommonProps = {
-  children: React.Element<any>
+  children: React.Element<any>,
+  noBackground: boolean
 }
 
 const Header = styled.div`
-  background-color: var(--c-dark);
+  ${({ noBackground }: any) => noBackground === false ? 'background-color: var(--c-dark);' : ''}
-
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
 `
 
 const HeaderInner = styled.div`
@@ -21,6 +23,13 @@ const HeaderInner = styled.div`
   width: 100vw;
   margin: 0 auto;
   height: 50px;
+  padding: 3px 5px;
+  position: relative;
+  top: -1px;
+
+  & > div {
+    margin: 0 0.5em;
+  }
 `
 
 export const Logotype = styled(logo.Logotype)`
@@ -28,16 +37,16 @@ export const Logotype = styled(logo.Logotype)`
 `
 
 export const Logomark = styled(logo.Logomark)`
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 `
-
+//
 const DebugBreakpoints = dynamic(() => import('../../kit/debug-breakpoints'))
 
-const HeaderBarCommon = ({ children }: CommonProps) => (
+const HeaderBarCommon = ({ children, noBackground }: CommonProps) => (
-  <Header>
+  <Header noBackground={noBackground}>
+    { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
     <HeaderInner>
-      { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
       { children }
     </HeaderInner>
   </Header>

ui/components/header/unauth.js

@@ -1,11 +1,25 @@
 // @flow
 import * as React from 'react'
-import HeaderBarCommon, { Logotype } from './common'
+import HeaderBarCommon, { Logotype, type CommonProps } from './common'
+import styled from 'styled-components'
+import Link from 'next/link'
 
-const HeaderBarUnauth: React.StatelessFunctionalComponent<{}> = () => (
+const LogoBox = styled.a`
-  <HeaderBarCommon>
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`
+
+const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props) => (
+  <HeaderBarCommon {...props}>
     <>
-      <Logotype />
+      <Link href='/' prefetch>
+        <LogoBox>
+          <Logotype />
+        </LogoBox>
+      </Link>
       Hey stranger.
     </>
   </HeaderBarCommon>

ui/components/layout.js

@@ -4,13 +4,26 @@ import GlobalColors from './global-colors'
 import SocialCards from './social-cards'
 import HeaderBar from '../containers/header-bar'
 import { type User } from '../containers/user'
+import styled from 'styled-components'
 
-const Layout = ({ children, user }: {children: React.Element<any>, user: User }) => <>
+const ContentBox = styled.div`
+  margin: 0 auto;
+  width: 960px;
+  max-width: 100vw;
+  padding: 5px;
+  /* padding-top: 50px; */
+  overflow-y: scroll;
+  max-height: calc(100vh - 50px);
+`
+
+const Layout = ({ children, user, noBackground }: {children: React.Element<any>, user: User, noBackground: boolean }) => <>
   <GlobalColors />
   <SocialCards />
   <div>
-    <HeaderBar user={user} />
+    <HeaderBar user={user} noBackground={noBackground} />
-    {children}
+    <ContentBox>
+      {children}
+    </ContentBox>
   </div>
 </>
 

ui/components/role/demo.js

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react'
+import Role, { type RoleData } from './index'
+
+export type DemoRoleProps = {
+  role: RoleData
+}
+
+type DemoRoleState = {
+  active: boolean
+}
+
+export default class RoleDemo extends React.Component<DemoRoleProps, DemoRoleState> {
+  state = {
+    active: false
+  }
+
+  onToggle = (n: boolean) => {
+    this.setState({ active: n })
+  }
+
+  render () {
+    return <Role role={this.props.role} onToggle={this.onToggle} active={this.state.active} />
+  }
+}

ui/components/role/index.js

@@ -0,0 +1,90 @@
+// @flow
+import * as React from 'react'
+import styled from 'styled-components'
+import MediaQuery from '../../kit/media'
+
+export type RoleData = {
+  color: string,
+  name: string,
+}
+
+export type RoleProps = {
+  active?: boolean, // is lit up as if it's in use
+  disabled?: boolean, // is interaction-disabled
+  type?: 'drag' | 'button',
+  role: RoleData,
+  isDragging?: boolean,
+  onToggle?: (nextState: boolean, lastState: boolean) => void,
+  connectDragSource?: (component: React.Node) => void
+}
+
+const Outer = styled.div`
+  box-sizing: border-box;
+  padding: 4px 0.5em;
+  padding-top: 2px;
+  border: solid 1px var(--outer-color);
+  display: inline-block;
+  border-radius: 1.2em;
+  margin: 0.3em;
+  font-size: 1.2em;
+  transition: box-shadow 0.3s ease-in-out;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
+  cursor: pointer;
+  user-select: none;
+  ${(props: any) => (props.active) ? 'box-shadow: inset 0 0 0 3em var(--outer-color);' : ''}
+  position: relative;
+
+  &:hover::after {
+    transform: translateY(-1px);
+    box-shadow: 0 0 1px rgba(0,0,0,0.75);
+  }
+
+  &:active::after {
+    transform: none;
+  }
+
+  &::after {
+    display: none;
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 4px;
+    left: 4px;
+    bottom: 2px;
+    border-radius: 100%;
+    width: 22px;
+    height: 22px;
+    clip-path: border-box circle(50% at 50% 50%); /* firefox fix */
+    transform: none;
+    border: 1px solid var(--outer-color);
+    transition: border 0.3s ease-in-out, transform 0.1s ease-in-out;
+    ${(props: any) => (props.active) ? 'border-left-width: 21px;' : ''}
+  }
+
+  ${(props: any) => MediaQuery({
+    md: `
+      font-size: 1em;
+      text-shadow: none;
+      padding-left: 32px;
+      ${(props.active) ? 'box-shadow: none;' : ''}
+      &::after {
+        display: block;
+      }
+    `
+  })}
+
+
+`
+
+export default class Role extends React.Component<RoleProps> {
+  onToggle = () => {
+    if (!this.props.disabled && this.props.onToggle) {
+      const { active = false } = this.props
+      this.props.onToggle(!active, active)
+    }
+  }
+
+  render () {
+    return <Outer active={this.props.active} onClick={this.onToggle} style={{ '--outer-color': this.props.role.color }}>{this.props.role.name}</Outer>
+  }
+}

ui/lib/redirect.js

@@ -0,0 +1,13 @@
+import Router from 'next/router'
+
+export default (context, target) => {
+  if (context.res) {
+    // server
+    // 303: "See other"
+    context.res.writeHead(303, { Location: target })
+    context.res.end()
+  } else {
+    // In the browser, we just pretend like this never even happened ;)
+    Router.replace(target)
+  }
+}

ui/pages/_internal/_server_add.js

@@ -0,0 +1 @@
+export default () => <h1>s/add</h1>

ui/pages/_test/landing-mock.js

@@ -4,6 +4,20 @@ import type { PageProps } from '../../types'
 
 export default class LandingTest extends React.Component<PageProps> {
   render () {
-    return <div />
+    return <div>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit accusantium quidem adipisci excepturi, delectus iure omnis, eos corrupti, ea ex iusto magnam! Incidunt accusamus repellat natus esse facilis animi aut.</p>
+    </div>
   }
 }

ui/pages/index.js

@@ -1,10 +1,32 @@
-import React from 'react'
+import * as React from 'react'
+import redirect from '../lib/redirect'
 // import Link from 'next/link'
 // import Head from '../components/head'
 // import Nav from '../components/nav'
+import TypingDemo from '../components/demos/typing'
+import TapDemo from '../components/demos/tap'
 
-const Home = () => (
+export default class Home extends React.Component {
-  <h1>Hi there.</h1>
+  static async getInitialProps (ctx, rpc) {
-)
+    if (ctx.user != null) {
+      redirect(ctx, '/s/add')
+    }
 
-export default Home
+    ctx.layout.noBackground = true
+  }
+
+  render () {
+    return <div>
+      <h2>A bot to tame your self-assignable Discord roles.</h2>
+      <div>
+        <TypingDemo />
+        <p>What is this? 2005?</p>
+      </div>
+      <div>
+        <TapDemo />
+        <p>Just click or tap.</p>
+      </div>
+
+    </div>
+  }
+}