Pencil Adventure

f:id:ten0313:20200106001425p:plain
canvasでこういう画面を作りたいんだけど、

 context.fillStyle = "#0ff"; //まるい部分の色を指定
 context.scale(1,.5); //楕円にするために縦横比を指定
 context.arc(150, 150, 100, 0, 2*Math.PI, false); //丸を描画
 context.fill();  //中身を塗りつぶす
 context.scale(1,1); //縦横比を戻した

これだと
f:id:ten0313:20200106002806p:plain
こうなる。
ちなみになかに描画する文字を更新しても文字は描画されない上に波紋みたいなバグはどんどん酷くなっていく。
レンダリングされる度にcanvasの描画メソッドが作用してるって予測した。

なのでこうした。

 context.save();
 context.fillStyle = "#fff";
 context.scale(1,.5);
 context.arc(150, 150, 100, 0, 2*Math.PI, false);
 context.fill(); 
 context.scale(1,1); 
 context.restore();

save()とrestore()とかいうメソッドがあるのを知ったので書いた。ぶっちゃけ勘で書いたのでどう作用しているのか説明できない。良くなさそう。天性の才能でコードを書いた。
f:id:ten0313:20200106010028p:plain
丸い部分の色も直して文字も描画、更新できている。

f:id:ten0313:20200106013737p:plain
まあいいかんじかも。さっきエミュレーターでの確認中に画面サイズが変わったときの不具合を見付けたからそこも直したほうがいいかも。

f:id:ten0313:20200106045709p:plain
下の文言も追加した

##ボタンの管理
Submitボタンの状態管理

case UPDATE_NAME_INPUT:
    if(action.value && state.mission) {
      return {
        ...state,
        name: action.value,
        buttonDisabled: true
      }
    } else {
      return {
        ...state,
        name: action.value,
        buttonDisabled: false
      }
    }

inputフォームをコントロールしてるReducerでボタンの状態を管理するようにした。正しいのかは知らん。フォームの中身が存在すればボタンの状態を持っているbuttonDisabledというStateが動くようになってる

f:id:ten0313:20200106134943p:plain
フォームの内容が無いときはボタンもDisabled
f:id:ten0313:20200106134938p:plain
全部埋めたらEnable化させてる

f:id:ten0313:20200107001511j:plain
御座候食った(なにげに今SKKでフルの「ござそうろう」で一発変換できたのすごい)
太郎焼きとか今川焼きとかいろいろ名前がでておもろい