Giters

bra1nDump / do-not-blink

https://www.dont-blink.app/ Taught programming in middle school using this code

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

gameteaching

Access

Run the game

Initialization code lives in top level package.json In the project root run:

npm run postinstall # Installs all dependencies
npm build # Builds the three components listed below
npm start # Starts the server

Play around locally

http://localhost:3000 - The game itself http://localhost:3000/colyseus - Administrative panel for all games happening now http://localhost:3000/presentation.html - Presentation

Develop

Troubleshooting debugger

This is an archived extension and now part of VSCode, still has useful debugging tips https://github.com/microsoft/vscode-chrome-debug#cannot-connect-to-the-target-connect-econnrefused-1270019222

Structure

There are 3 components:

  • Presentation. Gets built from this directory from presentation.md -> presentation.html. Is later served by the game server.
  • Website aka Frontend aka Client. This is the UI of the project. /client
  • Server aka Game server aka express application. It both runs the game server && serves static files for the Presentation and Website.

Server

I never actually used the build script in the server, it does some weird thing an produces a couple of javascript files, which I'm not assure how to start. I simply use the start script provided by the colyseus library. It starts the server in transpile mode from server/src/index.ts and serves the static files from the client/build directory.

[Key] Most initialization code lives in server/src/arena.config.ts

  • It creates room definition
  • It initializes express and starts serving the presentaiton & website itself

Deployment

Currently the game is served on herokuapp.com, it was free at the time but now they make you pay for even the small servers. Currently to deploy to heroku you need to simply git push main (assuming you have github x heroku hooked up like I do on my account, needs additional setup, easy to google).

The url of the app is http://notblink.herokuapp.com.

Heroku workflow

To run locally using Heroku heroku local web --port 3000

Technical issues with presenting at schools

School restricting access to the website

At this point I don't remember why the school blocks the website, I'm assuming because it was not https. [Solved] It is my Mac that doesn't trust the website's certificate. LAUSD solution https://achieve.lausd.net/Page/11048 - installs a profile. Student's profiles are fine. [Key] Les be prepared to hotspot, make sure to test this out before presenting

After installing the profile stopped being able to push to remote: unable to access 'https://github.com/bra1nDump/do-not-blink.git/': SSL certificate problem: self signed certificate in certificate chain

  • Will uninstall and re-install profile

People get the link wrong

[Key] Make sure to give them the link in the presentation, and also post it to schoology

Presentation

How I have failed to keep attention of the 8 graders?

  • Going off based of text slides when designing the game
    • A much better strategy would be to slowly place UI elements on the game
    • This will give them an iterative feeling
  • Talking about the server
    • Show the adman consol. It's much more useful to show them the actual data that the server stores
    • They have no idea what data structures are, They need to see them first, and they need to see them in action.
  • Hot spotting takes a long time,
  • Entering the http long link manually takes a long time!!! Posting to their channels like schoology works much better, as the teacher to post the link
    • The best solution of courses to use a custom domain as well as configured for https, but that is more work

Ideal flow

  • Do not bore them with the details of my job, talk about this later one they're hyped up

  • Play the physical game right away

  • The first slide should be starting the design of the online game, it should be made by screen shotting each essential UI component iteratively as they come up with it

  • Ideally it should be already on their computers gradually appearing (the presentation is literally on their computers)

  • Once we finished the room entry screen and click enter, they should be able to see a blank screen yet again. Repeat the process for the game itself.

    • Show how the server stores each card, Once they say we need to be able to see our hand, and they say that we need to show 3 cards, explain that the easier task is to show a single cart and we should tackle that first.
    • Explain how the rendering of a given card works. The browser receives the card data: dictionary with text end numbers. The browser simply draws a pattern using text, Sets the background color.
    • As table stacks, and their hand is appearing on their computer show how it maps to the internal representation on the server.

  • Start playing, and then abruptly pause. Do you want to know your standing? Toggled this UI. Continue playing until the end. Incremental improvements

  • What we have covered?

    • How you come up with all components needed for a simple multiplayer game
    • How to roughly make the browser display things we want
    • How does the server store data for every online game
    • How to brainstorm new ideas and make incremental improvements

  • Explain what we have not covered in this presentation:

    • Randomization
    • How to rent a server?
    • How to find the correct language end library for your project? Google
    • How to trouble should what something doesn't work? Google, friends, mentors

  • Different career paths available in programming

  • UI

    • Websites
    • Mobile applications

  • Server

    • Storage, Databases
    • Deployment
    • Core product logic

  • Machine learning

Areas you can work in

  • Social networks, Tick Talk, Instagram, Facebook
  • Commerce Amazon
  • Games

Each area and part of the process requires special knowledge, but at all starts with engineering design, team work.

Game Itself

  • Every one wants special effects, Add music, gifs, animations to make it more interactive
  • The fact that we need to wait until everybody joins completely manually is very inconvenient. The host needs to be able to start the game once everyone is in. This is a very easy change but will make playing much more organized.
  • Also having a single player win is limiting the wow effect of the game, we need a ranking of who finished first.

To Do

  • Fix bug with not being able to join the room with the selected name.
    • Not sure why, but seems like it got more severe after we added random room name generation
    • Also this doesnt reproduce always.
    • The root cause seems to be the React way of updating. We join a room with a name clicked by
      • setName(name) (a hook)
      • joinRoom() (a useCallback hook)
      • When join room is called we actually don't have the latest name, because the hook is async and
      • The solution is to provide the join callback with a room name arg
  • Rank other playrs by how many cards they have left
  • Show count of remaining cards for each player

Less important

  • Maybe do drag and drop
  • Smaller layout height

Done

Resources

Our game

Explore more

About

https://www.dont-blink.app/ Taught programming in middle school using this code

gameteaching

Languages

Language:TypeScript 89.9%Language:HTML 6.3%Language:CSS 3.7%Language:Shell 0.1%