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

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

作ったモノ

実際に印刷したもの

ここで実際にクソゲーを作れます
アナログゲームプロトタイプメーカー
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%まで伸ばしたが、

あんまりイイネがつかなくて悲しかったので誰か使ってほしい

何に使うかわからないが、せめて学習済みモデルだけでも。

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