クソカードゲームを作るクソアプリを作った(React) #JavaScript

作ったモノ

実際に印刷したもの

ここで実際にクソゲーを作れます
アナログゲームプロトタイプメーカー
 github

何故作ったのか

ちょうどreactを勉強したいが、せっかくなので何か作りたい。
同人活動でアナログゲームを作っているが、プロトタイプを作るのが毎回大変だった。
海外産の遊戯王ジェネレータ等を使っても日本語だと文字化けしたり、改行がズレたりといまいち。
そういうわけで、作った。
あと、当時正式版が公開されたばかりのbootstrap4も使ってみたかった。

工夫した点

印刷して使う事が前提だったので、
切り離しやすいよう1枚目の紙と2枚目の紙でカードの位置がズレないようにした。

技術的な点

・印刷時は9枚単位で改ページする
CSSに'page-break-after: always'なるものがいる、便利なものは使う。

・カード3つ毎にdivで囲む。カード9つ毎にまたdivで囲む。
3つで次の行、9つで前述のpage-break-afterをするため、divで階層化したかった。
今思えばCSS疑似クラスでいけそうだけど気にしない。
こういう感じにしたかった。

for(var i=0;i < カードの枚数;i++){
    if(i%9 === 0) {
        <div className="page-break"> //9枚ごとに次の紙に印刷
            if(i%3 === 0) {
                <div className="row">//3枚ごとに改行
            }
            <Card>
            if(i%3 === 0) {
                </div>
            }
        </div>
    }
}

JSXの中ではforが使えず、上記のコードは上手くいかない。困った。
というわけでこうなった。

{
    //this.card_row_limitは3
    Object.keys(this.cardlist).filter(key => key%this.card_row_limit === 0).map(
        (carddata,i) => { 
            return React.createElement('div',{className:'row'},((row_data,num) =>
                Object.keys(this.cardlist).filter(key => ((key >= num*this.card_row_limit) && (key <= num*this.card_row_limit+(this.card_row_limit-1)))).map(
                    (row_card_data,in_row_number) =>  {
                        var card_num = num*this.card_row_limit+in_row_number
                        return React.createElement(CardBox, {data:this.cardlist[card_num], index:card_num, ref:"card"+(card_num)})
                    }
                )
            )(this.cardlist,i))
        }
    )
 }

皆さんはそれぞれのネストが何しているか分かりますか？
マジな話、オレは分からない

半年前の俺によると
this.cardlistがカードのデータ。3枚目のカードならthis.cardlist[3]。
cardlistからキーを取得して、filterで3の倍数だけ取得、それを1回目のmapでループ。
return React.createElement('div' で divを作る。
第三引数で今度はカードリストのうち、123 や　456 など3つを返すようにしてあげるためまたfilterとmap

らしい。へーすごいね。

・JSXの中でforは使えず、ループはmapで行う
・mapの返り値としてReact.createElementオブジェクトを返す事で,タグとかコンポーネントが生成できる

という感じ。
このときちょうどlaravelも学習しており、JSXもbladeみたいなテンプレートエンジン族だと思っていた。
実際にはjavascriptの拡張記法。
margin-leftがmarginLeftだったりclassがclassNameな事にキレ散らかしていたが、classはjavascriptの予約語だし当然である。

あと、bootstrap4普通にいい感じだった。

今後なんとかしたい点

・バグ潰し(xの調整がうまくいってない)

・canvasにして画像として保存できるようにする

頑張って作ったので使ってね。

クソアプリその２

「React完全に理解したし次いこう」
となってディープラーニングに手を出した。

エロゲの立ち絵っぽいか判定するマン
めっちゃ頑張って正解率96%まで伸ばしたが、
あんまりイイネがつかなくて悲しかったので誰か使ってほしい
何に使うかわからないが、せめて学習済みモデルだけでも。

ちなみに、冒頭で作ったカードゲームはつまらなかった。