Wikichase実装ログ
このページは実装ログのみ
Componentを分割する
StartModal✅
StatusBar✅
CSSを書く
レイアウトを整える
✅
詳細を綺麗にする
アイコン等を配置
色を設定
エフェクトを作る
タイマー
ゴールした時のやつ
これ使えそう
なぜ止まってるのか確認
ゴール判定と時間制限判定をしたい
スタート時に、ゴールと終了時間を記録すれば良いかな
最初のページの生成、プレイページの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内の関数で使う方法が掴めなかったので後で
ランディングページを作った
https://gyazo.com/0348f0e7848e571f8356a2492f0e97a3
こういうデザイン良いな〜と思っていたのでやってみたが、むずいblu3mo.icon
それはそう、シンプルなものほどデザインの技術必要そう
絶対説明は足りんが、詳細は触ってみればわかるようにしたいblu3mo.icon
とりあえず何を目指すのかだけは伝えた✅
逃げ側の縛り
目次より上?
ダメなケースもあるな
これとか
最初のn行とかが無難かな
でも納得感は目次区切りより低いかも
とりあえず後回しで
データベース
:gameId
chaser
userId: string
とりあえずはセッション毎ランダム生成で
デバイス固有の値を後で入れれば、一度落ちても復帰可能になる
空欄ならoffline
pages:
evader
userId: string
lastJump: date
クールタイム判定は逃げ側がやる
isAlive: bool
クールタイムオーバーもしくは捕まったらこれがfalseになる
やりのこし
https://gyazo.com/72ad082eae5cf6f5721db3c57ee88a7b
こいつら消す
遷移時のロード
ずるいやつ
「英語」とか「国際発音記号」とかのリンク
改めて実装する事整理
同じゲームに二人入れる
これはとりあえず同URL同roomでよさそう
二人はお互いの遷移を確認できる
WikipediaのCSSを引っ張ってきたい
権利的にOKなやつはどこだろう
xss的なやつの対策として、wikipedia以外のページに飛べないようにすべきだな
wikipedia自体は編集できるので、wikipediaから飛ぶ外部リンクも開けて表示される実装だとまずい
Wikipedia API叩いたらCORSエラーに引っかかった なんだそれ、ようわからん使用だな
htmlを返してくれるapiがある?
一週間前に別件で見た時は誰がこんなapi使うのかと思ったけど、今とても欲しい
これよさそう
https://gyazo.com/725c7afa687e293470b17c41569dd597
パクったcssとAPIから取ったhtmlでWikipedia表示できた
まって、リンククリックイベント取るのむずくないか
ああ、locationの変化だけ拾えばいいのかt
いや〜〜、厳しいな
というか取れない理由がわからん
geoguessrとかどうやってるんだ?
apiあるのか
とりあえずMVPを作ろう
必要な物
お互いのページが見れる
鬼側の制約
リンク遷移の制限（once per 15sec)
概要の文だけ
捕まえた判定
お互いのリンク飛びログ