僕、最弱でした!? ツイートでバトルするWebサイトを作って無双しようとしたら逆にボコボコにされた件 フォロワーを増やそうとしてももう遅い

概要

自分のツイートを選んでユーザーとバトルするwebサイトを作成

デモ

お試し動画。松本人志さんと対戦してみたらこのザマです

技術

• サーバサイド

  • Rails

• フロントエンド

  • React

• アニメーション

  • CSS
  • react-transition-group

• API

  • 公式TwitterAPI

• ホスティング

  • Heroku

• ssl

  • cloud flare

ルール

• 直近30件のツイートを使用できる(ランダム)
• フォロワー数でユーザーのHP、攻撃力が決まる
• リツイート、いいねの数で攻撃力が上がる
• リツイート数でクリティカル率が上がる
• いいね数で回復力が上がる

やりたかったけどやれなかったこと

アニメーション

もう少し攻撃アニメーションのバリエーションやクオリティを上げたかったけど時間技術とセンスがなかった。アニメって難しいんですね・・・

初めてreact-transition-groupを使ったけれど、チンプンカンプンでステータス変更のタイミングを掴むまでかなり時間を要した。

この記事を何回も読んでやっと実装できた感じ

Twitterロゴ

バトル要素にTwitterバードを使いたかったけど、ロゴの規約に違反するため断念。色を変えたりアニメーション利用はできないみたい

カルーセル

スマホ向けにツイートのリストをcssでscroll-snapにしている。本当はカルーセルライブラリのreact-slickとか使っていい感じにしたかったけど、ツイート削除すると以下のエラーが出てうまくいかなかった

removeChild' on 'Node': The node to be removed is not a child of this node.

あとスクロールの初期位置をscrollLeftで補正しようとしたけど全く動かない。怠惰スクロール状態。なぜだ

コンポーネントがファット

バトル画面のコンポーネントが600行くらいある。ソースが読みづらいから問題解析に時間がかかる。
コンポーネントを分けた上で実装すべきだった。

アニメーションの指定も関数指定だったり即時関数だったりでなんかごちゃごちゃしている。
もう終わりだよこのプログラム

weapon() {
  return (
    <CSSTransition
      // 攻撃完了後
      onEntered={() => {
        this.setState({
          canAttack: false
        });
        this.enemyTurn();
      }}
・・・
  )
}

enemy() {
  return (
    <CSSTransition
      onEntered={this.enemyAttack}
      onExited={this.setUserHp}
・・・
  )
}

まとめ

ほぼネタアプリ。暇つぶしにどうぞ