Wikichase実装ログ
このページは実装ログのみ
作ってもらったUIをいい加減に実装したい、タスクを小分けにするをしよう
Componentを分割する
StartModal✅
StatusBar✅
CSSを書く
レイアウトを整える
✅
詳細を綺麗にする
アイコン等を配置
枠組みの大きさを調整してそろえる、flexboxゲーム
色を設定
エフェクトを作る
タイマー
ゴールした時のやつ
これ使えそう
なぜ止まってるのか確認
ゴール判定と時間制限判定をしたい
スタート時に、ゴールと終了時間を記録すれば良いかな
最初のページの生成、プレイページのuseEffect(, )の時だと複数回走る可能性があるので、ルーム作成時に変えた
mediawikiとwikipedia、レイヤー分けて扱ってたけど結局密結合で分離きつそうなので諦めるか
いや、htmlの取得とフィルタはuseMediaWikiとMediaWikiPageでやる感じでちょうど良いな
css
モバイルのurl
https://ja.wikipedia.org/w/load.php?lang=ja&modules=ext.cite.styles%7Cext.relatedArticles.styles%7Cext.wikimediaBadges%7Cmediawiki.hlist%7Cmediawiki.page.gallery.styles%7Cmediawiki.ui.button%2Cicon%7Cmobile.init.styles%7Cskins.minerva.base.styles%7Cskins.minerva.content.styles.images%7Cskins.minerva.icons.wikimedia%7Cskins.minerva.mainMenu.icons%2Cstyles&only=styles&skin=minerva https://ja.m.wikipedia.org/w/load.php?lang=ja&modules=startup&only=scripts&raw=1&skin=minerva&target=mobile pcのurl
自動マッチメイキングをしたい
とりあえず最低限の実装で良いが、ベストプラクティスとかあるのかな
有益
とりあえずルームベースで作るかな
まあとりあえずfirebaseに突っ込むか、より良い実装とかは後で良い
ルームid、衝突回避できるまでランダム生成する雑実装でとりあえずいいや
万が一人増えたら直せば良い
firebase realtime dbのhooks、使おうかと思ったが、hooks内の関数で使う方法が掴めなかったので後で
ランディングページを作った
こういうデザイン良いな〜と思っていたのでやってみたが、むずい
それはそう、シンプルなものほどデザインの技術必要そう
絶対説明は足りんが、詳細は触ってみればわかるようにしたい
とりあえず何を目指すのかだけは伝えた✅
弾性同期Youtubeプレイヤー#6211f07579e1130000619a52の知見をほとんど忘れて、同じことを再度調べていた
useInterval、便利
逃げ側の縛り
目次より上?
ダメなケースもあるな
これとか
最初のn行とかが無難かな
でも納得感は目次区切りより低いかも
とりあえず後回しで
データベース
:gameId
chaser
userId: string
とりあえずはセッション毎ランダム生成で
デバイス固有の値を後で入れれば、一度落ちても復帰可能になる
空欄ならoffline
pages:
evader
userId: string
lastJump: date
クールタイム判定は逃げ側がやる
isAlive: bool
クールタイムオーバーもしくは捕まったらこれがfalseになる
やりのこし
こいつら消す
遷移時のロード
ずるいやつ
「英語」とか「国際発音記号」とかのリンク
改めて実装する事整理
同じゲームに二人入れる
これはとりあえず同URL同roomでよさそう
二人はお互いの遷移を確認できる
WikipediaのCSSを引っ張ってきたい
権利的にOKなやつはどこだろう
xss的なやつの対策として、wikipedia以外のページに飛べないようにすべきだな
wikipedia自体は編集できるので、wikipediaから飛ぶ外部リンクも開けて表示される実装だとまずい
Wikipedia API叩いたらCORSエラーに引っかかった
なんだそれ、ようわからん使用だな
htmlを返してくれるapiがある?
一週間前に別件で見た時は誰がこんなapi使うのかと思ったけど、今とても欲しい
これよさそう
パクったcssとAPIから取ったhtmlでWikipedia表示できた
MediaWikiコンポーネントを作ろう
まって、リンククリックイベント取るのむずくないか
ああ、locationの変化だけ拾えばいいのかt
いや〜〜、厳しいな
というか取れない理由がわからん
geoguessrとかどうやってるんだ?
apiあるのか
とりあえずMVPを作ろう
必要な物
お互いのページが見れる
鬼側の制約
リンク遷移の制限（once per 15sec)
概要の文だけ
捕まえた判定
お互いのリンク飛びログ