description.md

ゲームっぽく一文字ずつ文字を表示するメッセージウィンドウ。 メッセージ再生中にクリックで読み飛ばす。

index.scss

.message-container {
  width: 80%;
  position: absolute;
  bottom: 50px;
  left: 30px;
  margin: 26px auto;
  // margin-bottom: 30px;
  .text-container {
    border-radius: 3px;
    padding: 10px;
    height: 100px;
    background-color: white;
  }
}

message-window.coffee

$ = React.createElement

# script: {messages: string[]}
# resolve: Function

module.exports = React.createClass
  getInitialState: ->
    page: 0
    visibleCursor: 0

  getCurrentText: ->
    @props.script.messages[@state.page]

  onVisibleProgress: ->
    @state.visibleCursor < @getCurrentText().length - 1

  componentDidMount: ->
    @startMessage()

  componentDidUpdate: ->
    @startMessage()

  startMessage: ->
    text = @getCurrentText()
    # if @state.visibleCursor
    currentLineText = @getCurrentText()
    if @state.visibleCursor is 0 and currentLineText.length > 0
      targetPage = @state.page
      do f = =>
        # @state.visibleCursor++
        setTimeout =>
          if @onVisibleProgress() and targetPage is @state.page
            @setState visibleCursor: @state.visibleCursor + 1
            f()
        , 60

  onClickNext: ->
    if @onVisibleProgress()
      @setState visibleCursor: @getCurrentText().length - 1
    else if @state.page < @props.script.messages.length - 1
      @setState
        page: @state.page + 1
        visibleCursor: 0
    else
      @props.resolve()

  render: ->
    $ 'div', {
      className: 'message-container'
      onClick: @onClickNext
    }, [
      $ 'div', className: 'text-container', [
        $ 'span', {}, @props.script.messages[@state.page][0..@state.visibleCursor]
      ]
    ]