roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 20:19:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

breakout demo data

Browse source
This commit is contained in:
41666 2019-03-20 00:24:19 -05:00
parent 29ea3279c9
commit 11a6e2d85c
3 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/components/demos/tap.js
View file

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

17
ui/components/demos/typing.js
View file

@ -3,6 +3,7 @@ import moment from 'moment'
import Typist from 'react-typist' import Typist from 'react-typist'
import styled from 'styled-components' import styled from 'styled-components'
import MediaQuery from '../../kit/media' import MediaQuery from '../../kit/media'
import demoRoles from '../../config/demo'
const Outer = styled.div` const Outer = styled.div`
background-color: var(--dark-but-not-black); background-color: var(--dark-but-not-black);
@ -72,18 +73,10 @@ const Typing = () => <Outer>
</Chat> </Chat>
<TextArea> <TextArea>
<Typist cursor={{ blink: true }}> <Typist cursor={{ blink: true }}>
<span>.iam a cute role ♡</span> { demoRoles.map(({ name }) => [
<Typist.Backspace count={30} delay={1500} /> <span>.iam {name}</span>,
<span>.iam a vanity role ♡</span> <Typist.Backspace count={30} delay={1500} />
<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> <span>i have too many roles.</span>
</Typist> </Typist>
</TextArea> </TextArea>

8
ui/config/demo.js Normal file
View file

@ -0,0 +1,8 @@
export default [
'cute',
'vanity',
'brave',
'proud',
'wonderful',
'日本語'
].map((name, i, roles) => ({ name: `a ${name} role ♡`, color: `hsl(${(360 / roles.length) * i},40%,70%)` }))