作ったサービス

パワプロ風画面ジェネレータ

作った背景

趣味で「キャップ野球」というマイナースポーツをやっているのですが、「選手のステータスをパワプロ風に表現できると面白いね」という話があり、その話に着想を得て作りました。
web1weekの「Home」と野球の「Homerun」をかけた次第にございます。

架空の選手を作って遊ぶのもよし、誰かを客観的に評価するのもよし、自分の能力をパワプロ風に表現してみるのもよし、是非遊んでみてください。

使った技術

ReactJS(Create React App)
SASS
netlify

一番苦労したところ

変化球の変化量をどのようにHTML/CSSで表現するか、というところが一番の難関だったのですが、基本的にCSSのtransform(rotate)だけで何とかなりました。入力内容に応じて、tdにclassを与えてCSSで色を定義しています。

td.breaking_ball{
    background-color:#6ba5e7ba;
    border: #0e5eb9 2px solid;
    height: 8px;
    margin: 0px;
    padding: 0px;
    min-width: 8px;
    &.change{
      &:nth-child(1){
        background-color: #df6a0bab;
      }
      &:nth-child(2){
        background-color: #e9be4ac2;
      }
      &:nth-child(3){
        background-color: #ffeb3bd6;
      }
      &:nth-child(4){
        background-color: #e9be4ac2;
      }
      &:nth-child(5){
        background-color: #df6a0bab;
      }
      &:nth-child(6){
        background-color: red;
      }
    }
  }