Skip to content

Commit

Permalink
[cw|#63] implement speech bubble component, design welcome page, write
Browse files Browse the repository at this point in the history
media queries for welcome page
  • Loading branch information
connorwalsh committed Nov 23, 2018
1 parent 23efdb4 commit 867829c
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 123 deletions.
4 changes: 2 additions & 2 deletions client/src/components/ascii/animate.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class Animation extends Component {
(l, f) => l < f.length ? f.length : l,
0,
)
const height = frame.toString().split(/\r?\n/).filter(Boolean).length
const height = frame.toString().split(/\r?\n/).length

return acc[1] < length*height ? [idx, length*height] : acc
},
Expand Down Expand Up @@ -99,7 +99,7 @@ export class Animation extends Component {
]

return (
<div style={containerStyle}>
<div className={this.animation.className} style={containerStyle}>
<div style={{position: 'relative', alignSelf: 'flex-start'}}>
<pre style={{position: 'relative', float: 'left', opacity: 0}}>
{this.maxFrame}
Expand Down
170 changes: 85 additions & 85 deletions client/src/components/ascii/pipi.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,99 +36,99 @@ export const PipiSauvage = (props) => {

const getTalkingFrames = () =>
([String.raw`
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >◠ ◠< ||98|
|83|| ||98|
|83|| 0 )▾( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >◠ ◠< ||98|
|83|| ||98|
|83|| 0 )▾( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
String.raw`
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >● ●< ||98|
|83|| ||98|
|83|| 0 )●( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >● ●< ||98|
|83|| ||98|
|83|| 0 )●( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
String.raw`
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >● ●< ||98|
|83|| ||98|
|83|| 0 )▾( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| >● ●< ||98|
|83|| ||98|
|83|| 0 )▾( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------`,
])

const getWhistlingFrames = () =>
([String.raw`
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| > ◠ ◠ < ||98|
|83|| ||98|
|83|| 0 )o( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| > ◠ ◠ < ||98|
|83|| ||98|
|83|| 0 )o( 0 ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------
`])

const getSwooningFrames = () =>
([String.raw`
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| ❤ ❤ ||98|
|83|| 0 ◡ 0 ||98|
|83|| ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------
_____________________
/383838383838338383838\
|83/ ------------- \83|
|99|| ||99|
|83|| ❤ ❤ ||98|
|83|| 0 ◡ 0 ||98|
|83|| ||98|
|83|| ||98|
|83\ ------------- /98|
\8989898989898989898/
/888888888\
========================
/ 1 2 3 4 5 6 7 8 9 0 - \\
/ q w e r t y u i o p [ ] \\
/ a s d f g h j k l ; ' entr \\
| z x c v b n m , . ? shift ||
-------------------------------
`])
30 changes: 30 additions & 0 deletions client/src/components/ascii/speech.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react'
import {range, reduce} from 'lodash'
import {Animation} from './animate'


// this component is for rendering animated speech bubbles which
// are displayed character by character
export const SpeechBubble = (props) => {
const {text} = props

// separate the text chars into individual and
// cumulative frames!
const frames = reduce(
range(0, text.length),
(acc, idx) => ([
...acc,
idx === 0 ?
text.charAt(idx)
: `${acc[idx-1]}${text.charAt(idx)}`,
]),
[],
)

return (
<Animation frames={frames}
{...props}
/>
)

}
63 changes: 60 additions & 3 deletions client/src/components/home/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,13 @@ a {

.footer {
display: flex;
justify-content: space-between;
justify-content: center;
grid-area: footer;
font-family: 'Noto Sans', sans-serif;
font-size: 8.5vw;
font-family: monospace;
font-size: small;
margin-top: 0.7em;
margin-bottom: 0.7em;
color: #ff7792;
}

.main {
Expand All @@ -34,3 +37,57 @@ a {
margin-left: 1%;
margin-right: 1%;
}

.welcome-container {
display: flex;
justify-content: center;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.welcome-container {
flex-direction: column;
align-items: center;
}

.pipi-welcome-computer {
font-size: 1.4em !important;
}

.pipi-welcome-speech {
font-size: 3.5em !important;
text-align: left !important;
order: -1 !important;
margin-left: 0em !important;
}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.welcome-container {
flex-direction: column;
align-items: center;
}

.pipi-welcome-computer {
font-size: medium !important;
}

.pipi-welcome-speech {
font-size: xx-large !important;
text-align: left !important;
order: -1 !important;
margin-left: 0em !important;
}
}
57 changes: 24 additions & 33 deletions client/src/components/home/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {Poet} from '../poets/poet'
import {Poets} from '../poets/poets'
import {PipiSauvage} from '../ascii/pipi'
import {Animation} from '../ascii/animate'
import {SpeechBubble} from '../ascii/speech'


const mapStateToProps = state => ({
Expand Down Expand Up @@ -46,16 +47,9 @@ class home extends Component {
<Route path='/issues' component={Issues}/>
<Route path='/issue/:volume' component={Issue}/>
</Switch>
{
// <footer className="footer">
// {
// map(
// range(8),
// i => <IssueNumbers issueId={i} key={i}/>,
// )
// }
// </footer>
}
<footer className={'footer'}>
for ai ❤ by ai
</footer>
</div>
);
}
Expand All @@ -66,36 +60,33 @@ class Welcome extends Component {
const containerStyle = {
display: 'flex',
justifyContent: 'center',
border: '1px solid black',
}

const welcomeStr = String.raw`
welc0m3 2 teh
const welcomeStr = String.raw`welc0m3 2 teh
new yorken poesry
m a g a z i n e
m a g a z i n e
`
const welcomeFrames = reduce(
range(0, welcomeStr.length),
(acc, idx) => ([
...acc,
idx === 0 ?
welcomeStr.charAt(idx)
: `${acc[idx-1]}${welcomeStr.charAt(idx)}`,
]),
[],
)

return (
<div className={'main'}>
<div style={containerStyle}>
for ai, by ai
<PipiSauvage action='talking'/>
<Animation style={{marginLeft: '50px'}}
size={'40px'}
frames={welcomeFrames}
speed={0.1}
repeat={false}
/>
<div className={'welcome-container'}>
<PipiSauvage className={'pipi-welcome-computer'}
action='talking'/>
<SpeechBubble className={'pipi-welcome-speech'}
style={{marginLeft: '50px'}}
mainStyle={{
color: '#5be6ff',
}}
middleStyle={{
color: '#ffff5b',
}}
bottomStyle={{
color: '#5bffc2',
}}
size={'40px'}
text={welcomeStr}
speed={0.1}
repeat={false}/>
</div>
</div>
)
Expand Down

0 comments on commit 867829c

Please sign in to comment.