anders-e / ouija Goto Github PK

https://expressjs.com/en/starter/static-files.html

One less dependency, and hopefully slightly better performance

There is no need to run the simulation on the server side 60 times per second; we're wasting a lot of CPU time. ~20 fps seems more reasonable.

Marker movement must still appear smooth in the client.

Dependencies:

• Express
• Socket.IO

Dev dependencies:

• nodemon
• eslint (?)

• Use all player inputs
• All players exert a force on the marker
• The sum of these forces are applied to the marker

Upon clicking this button, the player will be able to either

• Enter an invitation key, proceeding to join an existing game
  or
• Create a new session, which may only be accessed using an invitation key and an optional password.

Board and marker graphics are required, should probably be in SVG-format.

Marker should move at a set speed towards mouse position when mouse is down.

Both the canvas and graphics should scale according to window size. This includes whenever the window is resized while running.

Make running Ouija for development simpler.

https://www.makeareadme.com/

Relevant headers:

• Name
• Description
• Badges (Circle CI)
• Visuals (Screenshot/gif)
• Installation
• Usage (running Ouija)
• Contributing (should incldue instructions for using ESLint etc. (maybe VSCode specific instructions))
• Authors
• License (with link: https://www.gnu.org/licenses/gpl-3.0.en.html)

main.ts (no class)

Sets up all classes and connects the pieces.

OuijaScene

Contains everything regarding non-UI graphics.

Network

Contains everything regarding network (communication w/ server)

UI

Contains everything regarding the DOM UI.

EventSystem

Basically the current class but extended. Includes all references to assets used for events.

Inspiration:

• https://css-tricks.com/using-css-cursors/
• https://codepen.io/tamm/pen/LIFam
• https://onextrapixel.com/20-codepen-solutions-for-awesome-mouse-effects/

Ouija should run on iOS and Android.

It's barely used and as far as I can tell only for coords.

https://threejs.org/docs/#api/en/math/Vector2

https://www.gnu.org/licenses/gpl-3.0.en.html

Must be made clear that any libs we use (such as in src/client/lib/) are not licensed as part of Ouija.

Current webpack warnings:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (787 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (787 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

• What settings to include?
  • Graphics
    • Anti-aliasing
    • Shadow quality
    • Effect quality
  • Volume
    • Master volume
    • Ambient volume
    • Effect volume

Furthermore, should the settings be accessed both from the main menu and/or the game view?

Idea - low poly, simple cobwebs for the desk.

Inspiration: https://www.youtube.com/watch?v=gjZio6YTSPs

• Players should be able to join random games automatically.
• Players should be able to copy invite links which automatically adds players who use it to the game session.

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first

https://blog.bitsrc.io/how-to-make-your-web-apps-mobile-friendly-85bad8736dbf

Marker speed should remain consistent independently of the number of players in a game. The marker should also not be able to move to fast as an effect of multiple players dragging it towards the same direction.

https://webpack.js.org/
https://webpack.js.org/guides/typescript/

Move any classes to separate distinct .mjs files to be included in the main script.

Scene and canvas should adjust whenever window is resized.

Mute button with icon in the game UI.

Main menu

• Join random session
• Join specific session
• Create private session

In-game

• Copy invite link
• Exit game session

Notice: no logic needed, only buttons and associated onClicks

Idea - illuminate the characters based on the distance from the marker.

Approach #1: Multiple textures, no need for light source:

• One plane with a texture for masking out the letters (making the letters 100% transparent)
• One texture beneath the previous, white diffuse
• A plane with an emissive radial gradient texture, following the marker around the field and placed in between the two previous textures.

Some simple configuration file that is read by the server at startup.

• Max players per game
• Max number of games
• Port no.
• Environment (production, development ...)

Would make jumping between client and server code less confusing while minimizing code duplication.

Scene needs further optimizing. The current model is approx. 24 MB large, and can be cut down.

This optimization will include removing the camera room panning animation. The center of view will thus only consist of the desk, the items on the desk as well as some objects seen in the background.

If a camera animation will be used, it will at most be a zoom-in from a close distance, only showing the desk.

Objectives:

• Remove backfaces and faces that will not be rendered.
• Clean up and redo UV unwrapping with optimization in mind.
• Remove all items that won't be visible in the view.
• Textures should at most be 2048x2048. For smaller items (comparable to a wine bottle or lamp), use 1024x1024.
• Rebake lighting for all textures in the room. The scene will rely heavily on natural and properly baked lighting.