replit-discord / carnival Goto Github PK

is your feature request related to a problem? please describe
we need to query information about each game. this is a good starting point for our api

right now, quering is done via graphql at /graphql. we are looking to move away from that; the graphql stuff we have right now is just so we can get setup quickly

describe the bug
sass-like comments get removed on file save when writing css

to reproduce

1. yarn dev
2. add any sass-like comment to a style block

expected behavior
comment does not get removed

To better orchestrate the development of this project, I propose we discuss our long-term implementation strategy within this issue. Everything is still being worked out - so nothing is final!

Where will the carnival games be stored

The name of this repository implies that there will be a variety of different games people can play. We need to organize this repository so that people can access code from different carnival games.

We can organize the file structure like the following, separated by game, if someone wants to version control a game directly this repository (using submodules). If a user has their game on repl.it, we will be able to just link to the game without putting it on version control.

carnivalGame1
    carnivalGame1Server
        app.js
         ...
    carnivalGame1Client
        ...
carnivalGame2
    ...
carnivalOrchestration
    ...

Central server

CarnivalOrchestration holds the code (for the central server) where a user can select which game they want to play. Most likely it's going to be some website to visit. Sign in (optional), choose a game, get redirected. It's that simple. If we're able to implement some authorization layer then this website can contain / facilitate the following:

• Global Leaderboards
• Continuity of usernames across carnival games (such as JohnDoe99 [Carnival])
• Easy sign in for existing users (for compatible games)

Communicating with game servers

We can allow each person making their own game to choose a programming language for their own game / game server. The game server should still have the ability to communicate to the central server. Most communications are probably going to be over HTTP or HTTPS.

Some strategies for communication include this chart. @A5rocks also proposed a strategy here from this comment.

See @aStableNaka's comment about the type of data we want to be sending. This concerns player information or whatever. This data must be be requested as a separate API request after the OpenID Connect authorization protocol chain has been completed. See more about auth flow below.

Central client

The central client will be served by the Central server and will be a web page showing a list of game options. There are a few ways we can do this. One option is creating a Single Page Application (SPA) with ReactJS or VueJS. A second option is still using ReactJS or VueJS, but with Server Side Rendering (SSR). This will include using NextJS and NuxtJS for ReactJS and VueJS respectively. Lastly, we can go with a more traditional method of serving more "static-like" content.

Authentication / Authorization

I've been looking at authentication / authorization techniques and the OpenId Connect protocol seems the way to go. The master (central) server in this repo can act as the authorization server while the clients for this authentication server (relaying parties) include each game that we want to add. The client stuff should be pretty simple, as it's importing libraries to do the authentication. We should provide code snippets and instructions for people to implement this auth; the official certified libraries can be located at here.

Database

Database solution still in discussion. Since we're using OpenId Connect for authorization, we don't be storing any passwords whatsoever. Some things we would want to store in the database include, but are not limited to the following

• Player
  • name
  • username
  • id
  • email
  • scores
• Leaderboard
  • placings

Does anyone want to use anything in particular? Some members have been in favor of NoSQL database solutions like MongoDB, but others prefer the safer and more traditional approaches of SQL database such as SQLite, since there is a strict structure, among other reasons. There's also the topic of having our database as a local file (SQLite) or on some server, like PostgresSQL or MongoDB.

Games

Some games people are looking to include. Please post a comment!
Blackjack - EanKeen
Reversi - L0RDposeidon
Uno - Mat1
Nim - JackFly26

Want to add a game?

You can contribute any game, terminal, 2D, 3D - it doesn't have to be a game with a "carnival" or "casino" theme. Ideally it should be able to authenticate users sent from the carnival server. We will provide code snippets for this specific auth use case.

Standards / Guidelines

Thinking about contributing a game! Here are the requirements - they're not set in stone and if you have any questions, please post a comment!

• Usernames cannot include '(', ')', '[', ']', '{', '}' with the exception below
• Respond with the users in each room and the max amount of users available to each room in JSON format after a GET request to /api/foo?
• Layout of instructions for each game should be similar to other games (regarding control schemas or general directions). Not necessarily a similar theme, of course.
• [Optional] Users that are redirected from the master (central) server and have some sort of Carnival account or whatever must have their usernames exactly match the one on carnival, with a Carnival account identifier (Ex. JohnDoe8 [Carnival])
• [Optional] Communicate with the central server concerning leaderboard stats (or other information that you might want to display on the Carnival client)

describe the bug
eslint-loader seems to cause build to fail, even if options.failOnError and options.failOnWarning is false

after inspection, it seems our nuxt version is 2.0.0, possibly upgrading to current version (2.11.0ish) might fix some things, especially if we start using the @nuxtjs/eslint-module instead of manually pushing the eslint rule to nuxt's webpack config

while we do have some layout components and a few text components, we need more components so we can have less code duplication, especially basic styling and and renderless helper components

during development, webpack error that shows on screen has terrible font coloring due to creating a global style in-app. fix the font color to its default

So, we can't agree on the protocol to use we should use a combination of websockets and http.

What I mean by that is that every game gets to make their server. Carnival gets to act as a central hub, for getting to those games, and maybe a proxy (if that's what you want).

Example Carnival Interaction:

GET /games/{game_id}
... Headers ...

Response from server: {game_url}

Then you connect to the game, and continue from there.

Though this may make making a multi-game client a challenge, due to different protocols, it is still possible if we make every game be required to respond with the protocol they are using to a get request to {game_server}/protocol/raw.

This would require making a few more choices, but allow much more freedom, allowing an easy game-making (http requests), and an easy event system (websockets).

right now games are displayed like this

we need a way for games to be laid out well.
to keep a consistent and clean look i think it would be good to keep everything inside one box

by this i mean something comparable to the image below, where the blue square is some image of the game

this implies there will need to be some shadow of sorts that blends out near the bottom, so the text is clear and visible

for anyone to contribute, all you really have to do is focus on the code located here. for now you wont have to worry too much about colors and stuff too much, mainly just the positions of the elements. if you want to contribute please leave a comment and ill assign this to you ^w^. please note that this is very prototypal and the ui will likely change in the future

besides the unfinished polish, the menu bar has at least two issues

the transitions are based on width and height, which cause the dom to reflow

and, the data that stores whether the menu bar is in its expanded form is localized to components, causing repetitive re declaration of props in respective child components (that need to use the data). because this is css we do not have to pass props, but id rather be explicit - storing this data in a store would do good.

• fix transition 'lag'
• move menu bar data to store

describe the bug
when loading a page with the VerticalAspectRatioComponent, it is unstyled for a short while, since the component requires fetching an image to create an aspect ratio that is dependent on the height

on firefox, the component fails to render properly (even after refreshing the page)

reproduce

1. load any route that includes a VerticalAspectRatio component, and observe how the component loads (especially during development)

solution?
i don't think there is a way to do it without loading an image (image uri's and svg's don't seem to work?), so this may need to be mitigated by creating loading indicators (which we were going to do anyways)

what exasperates, the problem, is that this type of styling adversely affects webpack hot module replacement / reload, presumably since the layout requires loading an image via the network (refreshing fixes the styles)

is your feature request related to a problem? please describe
flashy 'being redirected' screen when redirecting from /:user/:gameId to /:user/:gameName/:gameId

describe the solution you'd like
have the screen show up for minimum amount of time (few hundred ms), and have okay loading indicator / animation'. or, we can optimize stuff and have it just be a blank page for a short amount of time (and if there is a failure to redirect / fetch, show it)

describe alternatives you've considered

• possibly just having blank screen?

additional context
code located at client/components/pages/_username/_gameId.vue

when executing stylelint -s scss ., the .stylelintrc config file cannot be read

is your feature request related to a problem? please describe
setting lang="scss" seems to cause cryptic errors such as

Failed to compile with 1 errors

This relative module was not found
* ./topSpace.vue?vue&type=style&index=0&id=5775a185&lang=scss&scoped=true& in ./layouts/topSpace.vue
↻ Updated layouts/topSpace.vue     

setting the lang correctly to postcss seems to fix this. note that we are not using scss, although we have some postcss plugins to enable a super strict subset of scss

describe the solution you'd like
add an eslint / stylelint rule to ensure that lang is declared and set to postcss (so the real error pops up in ide)

describe alternatives you've considered
editing nuxt.config.js plugin to prevent the error from showing, allowing to use scss (although it should already be doing that?)

opened this issue because i noticed our configuration files are a bit messy

issues

• separate [and different] eslint configs for both client and server
• the prettier, eslint, and stylelint configurations for development and pre-commit don't have consistent differences (meaning, we have to look in different file locations)
• error / warning handling may be different dependent on linter. eg. eslint webpack plugin does not convert errors to warnings, build stops on errors. stylelint plugin converts errors to warnings when outputing to console
• we insert the eslint webpack plugin via the nuxtjs extend function rather than the more clean loaders syntax

we need to make these configuration files and the experience more consistent and less bloated

when doing some dependency upgrading, build suddently fails when postcss-loader fails to recognize postcss-simple-vars variables (supposedly) imported in via sass-resources-loader (variables at @/assets/*.css)

suspected issue includes misconfigured webpack config that broke due to vuex upgrade and incompatibility changes with a postcss upgrade, or a sass-resources-loader upgrade.

must inspect dependencies and versions. use this thread for updating status / reporting build issues

The database at the server is prone to sql injection. The data from the client is neither checked if it's malicious nor is it escaped properly to make it work as expected.