Method render

app/components/ChooseStageScene.tsx:74–130

()

  }

  render() {
    const { match, dispatch, stages } = this.props
    const stageNames = stages.map(s => s.name)
    const { stageName } = match.params
    if (!stageNames.includes(stageName)) {
      return <Redirect to={`${match.url}/${stageNames.first()}`} />
    }
    const index = stageNames.indexOf(stageName)
    return (
      <Screen background="#333">
        <Text content="choose stage:" x={0.5 * B} y={0.5 * B} />
        <StagePreview
          key={index - 1}
          stage={index === 0 ? null : stages.get(index - 1)}
          x={0.75 * B}
          y={4.375 * B}
          scale={1 / 4}
        />
        <StagePreview
          key={index}
          stage={stages.get(index)}
          x={4.75 * B}
          y={2.75 * B}
          scale={1 / 2}
        />
        <StagePreview
          key={index + 1}
          stage={stages.get(index + 1)}
          x={12 * B}
          y={4.375 * B}
          scale={1 / 4}
        />
        <Text content={`stage ${stageName}`} x={6.5 * B} y={9.75 * B} />
        <g className="button-areas" transform={`translate(${2.5 * B}, ${12 * B})`}>
          <TextButton
            content="prev"
            disabled={index === 0}
            x={0}
            y={0}
            onClick={this.onChoosePrevStage}
          />
          <TextButton
            content="next"
            disabled={index === stageNames.size - 1}
            x={3 * B}
            y={0}
            onClick={this.onChooseNextStage}
          />
          <TextButton content="play" stroke="#96d332" x={6 * B} y={0} onClick={this.onStartPlay} />
          <TextButton content="back" x={9 * B} y={0} onClick={() => dispatch(replace('/'))} />
        </g>
        <g className="hint" transform={`translate(${0.5 * B},${14.5 * B}) scale(0.5)`}>
          <Text fill="#999" content="Press left or right to choose stages. Press fire to start." />
        </g>
      </Screen>
    )
  }
}