Wikichase implementation log

• This page is only for implementation logs.
  • Page in the Format of Adding Information on Top

I want to implement the UI that was created for me in a sloppy manner. Let’s divide the tasks into smaller ones.

• Divide the components
  • StartModal✅
  • StatusBar✅
• Write CSS
  • Organize the layout
    • ✅
  • Make the details look nice
    • Place icons, etc.
    • Adjust the size of the frames to align them using flexbox game
    • Set colors
• Create effects
  • Timer
  • Effects when reaching the goal
    • https://www.npmjs.com/package/react-confetti
    • This looks useful

https://wikichase.vercel.app/teeth-those/runner

• Check why it’s stopped.

• I want to implement goal determination and time limit determination.

  • Maybe it’s enough to record the goal and end time at the start.

• The initial page generation and useEffect() in the play page may run multiple times, so I changed it when creating the room.

• I was handling mediawiki and wikipedia separately, but it seems difficult to separate them due to tight coupling, so I’ll give up.

  • No, it’s better to handle the retrieval of HTML and filtering with useMediaWiki and MediaWikiPage, it seems just right.

• CSS

  • Mobile 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

• I want to implement automatic matchmaking.

  • For now, the minimum implementation is fine, but I wonder if there are any best practices.
  • https://www.strixengine.com/strix-matchmaker/
  • https://doc.photonengine.com/ja-jp/server/current/applications/loadbalancing/matchmaking-and-lobby
  • マッチメイキングシステムの形態について考えてみる - Qiita
    • Helpful
    • Maybe I’ll start with a room-based approach for now.
  • Well, for now, I’ll just put it in Firebase. I’ll think about better implementation later.
  • Room ID can be randomly generated to avoid collisions for now. If more people join, I can fix it.

• I thought about using Firebase Realtime DB hooks, but I couldn’t figure out how to use them in the functions inside hooks, so I’ll do it later.

• I created a landing page.

  • 
  • I thought this design was good, so I tried it, but it’s difficult (blu3mo)
    • That’s true, simple designs require design skills.
  • I definitely didn’t provide enough explanation, but I want to make it understandable by trying it out (blu3mo)
    • For now, I just conveyed what I’m aiming for✅

• I forgot most of the knowledge about 6211f07579e1130000619a52 and was researching the same thing again.

  • useInterval, useful

• Restriction for the escaping side

  • Above the table of contents?
    • There are some cases where it doesn’t work.
      • https://ja.wikipedia.org/wiki/単位時間#:~:text=科学における単位時間と,10m%2F秒）である%E3%80%82
      • Like this
  • Maybe the first few lines are safe.
    • But the sense of satisfaction may be lower than dividing by table of contents.
  • For now, I’ll do it later.

• Database

  • :gameId

    • chaser

      • userId: string
        • For now, it can be randomly generated per session
          • If I put in a device-specific value later, it will be possible to resume even if it crashes once
        • If empty, it means offline
      • pages:

    • evader

      • userId: string
      • lastJump: date
        • The cooldown check is done by the escaping side
      • isAlive: bool
        • This becomes false when the cooldown is over or when caught.

• Remaining tasks-

  • Delete these guys.

• Loading during transition.

• Cheating guy.

  • Links like “English” or “International Phonetic Alphabet”.

• Organize the implementation again.

  • Two people can enter the same game.
    • For now, it seems fine to use the same URL and room.
  • Both players can confirm each other’s transitions.

• I want to pull in Wikipedia’s CSS.

  • Where can I find ones that are legally okay?

• As a countermeasure against XSS, it should be prevented from jumping to pages other than Wikipedia.

  • Since Wikipedia itself can be edited, it would be bad if external links from Wikipedia were opened and displayed.

• GitHub - remarkablemark/html-react-parser: HTML to React parser.

• When I hit the Wikipedia API, I encountered a CORS error.

  • javascript - Wikipedia API + Cross-origin requests - Stack Overflow
  • What is that? I don’t understand its usage.

• Is there an API that returns HTML?

  • javascript - Is there a way to embed and style a Wikipedia article in a website? - Stack Overflow
  • API:Get the contents of a page - MediaWiki
  • When I saw it a week ago for another matter, I wondered who would use such an API, but now I really want it.
  • This seems good.
  • 
    • I was able to display Wikipedia using the CSS I stole and the HTML I got from the API.
  • Let’s create MediaWiki Components.

• Wait, isn’t it difficult to capture link click events?

  • Ah, I just need to capture the change in location, right?
  • javascript - iFrame src change event detection? - Stack Overflow
    • Oh, it’s tough.
    • I don’t understand why I can’t capture it.
    • How does geoguessr do it?
      • Do they have an API?

• javascript - iframe wikipedia article without the wrapper - Stack Overflow

• Let’s create an MVP for now.

  • Things needed:
    • Both players can see each other’s pages.
    • Constraints for the demon side:
      • Limit on link transitions (once per 15 seconds).
      • Only show the summary.
    • Judging if caught.
    • Log of each other’s link jumps.