f:id:ckoshien:20200309103947j:plain

サービスのURL

https://pawapro-gen.netlify.com/

どんなサービスか

下記のようなフォームを埋めると、 f:id:ckoshien:20200309104337j:plain 野球における自分の能力をパワプロ風に表現できるというサービスです。

キャップ野球に対応

一般的な野球と、キャップ野球にも対応しています。例：「蓋」速など。

その他の機能

左右での変化球の反転に対応
入力内容をブラウザに保存できる

使っている技術

ReactJS
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;
      }
    }
  }