VimConf用に表記を変更

react/src/js/app.jsx

@@ -5,6 +5,7 @@ import Header from './header'
 import Config from './config'
 import Timer from './timer'
 import Toolbar from './toolbar'
+import Footer from './footer'
 import SE from './se'
 
 export default class App extends Component {
@@ -17,6 +18,7 @@ export default class App extends Component {
   getDefaultState() {
     return {
       limit: this.props.choices[0].total,
+      timerProgress: 0,
       restTimeClassName: '',
       running: false
     }
@@ -33,6 +35,7 @@ export default class App extends Component {
           <Config disabled={this.state.running} choices={this.props.choices} onChange={this.handleChangeLimit.bind(this)} />
           <button onClick={this.handleClickStop.bind(this)}>Stop</button>
         </Toolbar>
+        <Footer timerProgress={this.state.timerProgress} />
       </div>
     )
   }
@@ -49,7 +52,10 @@ export default class App extends Component {
   handleClickStop() {
     this.refs.timer.stop()
     this.refs.se.pause()
-    this.setState({ running: false })
+    this.setState({
+      timerProgress: 0,
+      running: false
+    })
   }
 
   handleChangeLimit(limit) {
@@ -59,6 +65,7 @@ export default class App extends Component {
 
   handleTick(past) {
     this.setState({
+      timerProgress: past / this.state.limit,
       restTimeClassName: this.getRestTimeClass(past)
     })
   }

react/src/js/footer.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default ({ timerProgress }) => {
+  const style = {
+    transform: `rotate(${360 * timerProgress}deg)`
+  }
+
+  return (
+    <div id="footer">
+      <p>
+        <img src="./logo-flat.png" style={style} />
+        <span>Powered by <a href="https://builderscon.io" target="_blank">builderscon</a></span>
+      </p>
+    </div>
+  )
+}

react/src/js/timer.jsx

@@ -30,15 +30,12 @@ export default class Timer extends Component {
 
   render() {
     const rest = this.getRestTime()
-    const style = {
-      'transform': `rotate(${360 * (rest)}deg)`
-    }
 
     return (
       <div style={{ height: '100%' }}>
         <div className='logo second-hand'>
-          <h1>Builderscon</h1>
-          <img src='./logo-flat.png' style={style}/>
+          <h1>VimConf 2016</h1>
+          <img src='./logo-vimconf.png' />
         </div>
         <time>{humanize(this.props.limit - this.state.past)}</time>
       </div>

react/src/stylesheets/all.scss

@@ -5,6 +5,8 @@ $size_toolbar_button: 100px;
 $color_toolbar_button: #fff;
 $size_toolbar: 150px;
 $bg_toolbar: #434343;
+$size_footer: 40px;
+$bg_footer: $bg_toolbar;
 
 html,
 body {
@@ -52,6 +54,7 @@ nav a {
   width: 100%;
   height: $size_toolbar;
   bottom: 0;
+  margin-bottom: $size_footer;
   background: $bg_toolbar;
   text-align: center;
 }
@@ -82,6 +85,25 @@ nav a {
   text-indent: 8%;
 }
 
+#footer {
+  position: fixed;
+  height: $size_footer;
+  width: 100%;
+  bottom: 0;
+  background: $bg_footer;
+}
+#footer p {
+  margin: 0;
+}
+#footer img {
+  height: $size_footer - 6px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+#footer a {
+  color: #fff;
+}
+
 time {
   display: flex;
   align-items: center;