[cw|#63] write ascii animation component, create pipi ascii art

asmr-hex · Nov 22, 2018 · fb13fed · fb13fed
1 parent b1794a6
commit fb13fed
Show file tree

Hide file tree

Showing 6 changed files with 351 additions and 2 deletions.
diff --git a/client/src/assets/welcome.ascii b/client/src/assets/welcome.ascii
@@ -0,0 +1,92 @@
+        _____________________ 
+       /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||  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||             ||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  ||
+    -------------------------------
+
+        _____________________ 
+       /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  ||
+    -------------------------------
+
+(●⌒∇⌒●)
diff --git a/client/src/components/app/index.js b/client/src/components/app/index.js
@@ -10,7 +10,6 @@ class app extends Component {
     return (
       <MuiThemeProvider>
         <Switch>
-          {/* we *must* specify routes in a specific order so the matching works -__- */}
           <Route path='/' component={Home}/>
         </Switch>
       </MuiThemeProvider>

diff --git a/client/src/components/ascii/animate.js b/client/src/components/ascii/animate.js
@@ -0,0 +1,85 @@
+import React, {Component} from 'react';
+import {map, range} from 'lodash'
+import './glitch.css'
+
+
+// this component is used to wrap ascii art sprites and apply animations
+export class Animation extends Component {  
+  constructor(props) {
+    super(props)
+
+    const defaultAnimationProps = {
+      speed: 1,  // in seconds
+      frames: ['Default A', 'Default B', 'Default C'],
+      sequence: null,
+      size: 'large',  // xx-small, x-small, small, ..., large, x-large, xx-large
+      glitchEnabled: true,
+      style: {
+        color: '#e58de8',
+        opacity: 1,
+      },
+      middleStyle: {
+        color: '#4ff9ff',
+        opacity: 0.9,
+        top: 1,
+      },
+      bottomStyle: {
+        color: '#e58de8',
+        opacity: 1,
+        top: -1,
+      },
+    }
+
+    this.animation = {
+      ...defaultAnimationProps,
+      ...this.props,
+    }
+
+    if (this.animation.sequence === null) {
+      this.animation.sequence = range(0, this.animation.frames.length) 
+    }
+
+    this.state = { idx: 0 }
+
+    if (this.animation.frames.length != 1) {
+      this.renderFrame()
+    }
+
+  }
+
+  renderFrame() {
+    this.setState({
+      idx: (this.state.idx+1) % this.animation.sequence.length,
+    })
+    setTimeout(this.renderFrame.bind(this), this.animation.speed * 1000)
+  }
+
+  render() {
+    const containerStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      textAlign: 'left',
+      fontSize: this.animation.size,
+    }
+
+    const layerStyles = [this.animation.style, this.animation.middleStyle, this.animation.bottomStyle]
+
+    return (
+      <div style={containerStyle}>
+        <div style={{position: 'relative', alignSelf: 'flex-start'}}>
+          {
+            map(
+              range(0, this.animation.glitchEnabled ? layerStyles.length : 1),
+              idx => (
+                <pre className={`glitch-txt-${idx}`} style={layerStyles[idx]} key={idx}>
+                  {this.animation.frames[this.animation.sequence[this.state.idx]]}
+                </pre>                
+              )
+            )
+          }
+        </div>
+      </div>
+    )    
+  }
+}
diff --git a/client/src/components/ascii/glitch.css b/client/src/components/ascii/glitch.css
@@ -0,0 +1,37 @@
+.glitch-txt-0 {
+    position: relative;
+    float: left;
+    z-index: 3;
+}
+
+.glitch-txt-1 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    animation: glitch-anim-1 2s steps(15) infinite alternate-reverse;
+    transform: translateZ(0px);
+}
+
+@keyframes glitch-anim-1 {
+    0% {transform: translateY(0px);}
+    100% {transform: translate(2px, 4px);}
+}
+
+.glitch-txt-2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    animation: glitch-anim-2 4s steps(15) infinite alternate-reverse;
+    transform: translateZ(0px);
+}
+
+@keyframes glitch-anim-2 {
+    0% {transform: translateY(0px);}
+    100% {transform: translateY(-3px);}
+}
diff --git a/client/src/components/ascii/pipi.js b/client/src/components/ascii/pipi.js
@@ -0,0 +1,134 @@
+import React, {Component} from 'react';
+import {get, map, range} from 'lodash'
+import {Animation} from './animate'
+
+
+export const PipiSauvage = (props) => {
+  const TALKING = 'talking'
+  const SWOONING = 'swooning'
+  const WHISTLING = 'whistling'
+
+  const defaults = {
+    action: TALKING
+  }
+
+  const config = {
+    ...defaults,
+    ...props,
+  }
+
+  const actionFrames = {
+    [TALKING]: getTalkingFrames(),
+    [SWOONING]: getSwooningFrames(),
+    [WHISTLING]: getWhistlingFrames(),
+  }
+
+  return (
+    <Animation
+      frames={get(actionFrames, config.action)}
+      sequence={[0,1,2,1,2,1]}
+      size={'x-large'}
+      speed={1}
+      {...config}
+      />
+  )
+}
+
+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  ||
+    -------------------------------`,
+    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  ||
+    -------------------------------`,
+    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  ||
+    -------------------------------`,
+   ])
+
+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  ||
+    -------------------------------
+`])
+
+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  ||
+    ------------------------------- 
+`])
diff --git a/client/src/components/home/index.js b/client/src/components/home/index.js
@@ -12,6 +12,7 @@ import {Issue} from '../issues/issue'
 import {Issues} from '../issues/issues'
 import {Poet} from '../poets/poet'
 import {Poets} from '../poets/poets'
+import {PipiSauvage} from '../ascii/pipi'
 
 
 const mapStateToProps = state => ({
@@ -63,7 +64,8 @@ class Welcome extends Component {
     return (
       <div>
         for ai, by ai
-        <Issue volume='latest'/>
+        <PipiSauvage action='swooning'/>
+        {/* <Issue volume='latest'/> */}
       </div>
     )
   }