joelius300 / werewolf-circle

A web application to simulate a player circle for playing Werewolf online (e.g. in a video call).

Werewolf circle

This is a web application which can be used to simulate a player circle for playing Werewolf online (e.g. in a video call).
I started this project during rough covid times after having a bit of trouble playing Werewolf with friends in Discord since the camera tiles weren't aligned the same way for everyone so roles with positional abilities couldn't be used. Unfortunately school took up a lot of time until mid 2021 so I couldn't finish it yet and now the covid situation has gotten a lot better. This means I'm not going to finish this project just yet but I've planned it through pretty well I think so maybe I'll come back and finish it sometime in the future.

License

This project is licensed under the GNU Affero General Public License Version 3 or later. This applies to every file within this repository unless there is a license notice at the top of the file that says otherwise.
If you have any questions about this or would like to use a specific part under a different license, please open an issue and I'll try my best to assist. Also if I didn't honor your copyright or license correctly, please let me know.

werewolf-circle's Issues

Allow random assignment of the chosen roles to the users and announce them.

This is triggered by a button on the admin page.

Deploy with docker

From my limited knowledge of docker, my current idea is:

• 1 NGINX image (reverse proxy and static file serving)
• 1 frontend image (only contains the dist files)
• 1 backend image (runs the backend)
• 1 database image (for sqlite it would only store the file, for something like postgresql it would host it)

Then compose that with e.g. docker-compose and setup the whole application.

• NGINX has to view the files of the frontend
• backend exposes port for api etc. which NGINX forwards to
• database either exposes a port (postgresql) or is mounted on backend (sqlite)

Again, I'll have to figure out how to do this correctly as I've never worked with docker before.

References:

• https://medium.com/@danielrjames/host-nuxt-js-net-core-and-postgres-with-docker-nginx-and-https-1681d9bd0bbf
• https://blog.tonysneed.com/2019/10/13/enable-ssl-with-asp-net-core-using-nginx-and-docker

Localize frontend

The first version is german so it's ready to use soon. Later on I'd like to default to english and allow a language drop-down with localization.

Add roles and factions (no localization)

Scheme

• Every alive player has one or more roles
• Every alive player belongs to one faction
• Every role belongs to a faction which determines the initial faction of the player
• Not all factions are associated with a role

Entity A	Relationship	Entity B
Player	mc --- m	Role
Player	mc --- 1	Faction
Role	c --- 1	Faction

UI

Player

On the user interface, the players sees all of their roles and their faction.

Admin

I'm imagining something like the GitHub labels dialog to pic the roles for a player. Similarly for the factions but there it's exclusive so only one faction can be chosen.

https://github.com/vueform/multiselect probably
Also see shentao/vue-multiselect#1369

Allow admin to edit name and description of roles and factions for this particular game.

Use vue's composition API and share state with it (without vuex)

This is P-0 for learning purposes and it's going to decide how the frontend is built.

• https://v3.vuejs.org/guide/composition-api-introduction.html
• https://vue-composition-api-rfc.netlify.app/#summary
• https://www.youtube.com/watch?v=sjB6wamZQN0
• https://github.com/posva/pinia
• https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4

Allow localization of roles, factions and their descriptions

Overlay "Pop-up" screen to announce your role

• https://www.educba.com/css-overlay/
• https://www.sitepoint.com/community/t/grey-out-a-whole-page-and-display-a-loading-gif/4386/2
• https://codepen.io/paulocesarpcfj/pen/mJgoez
• https://codepen.io/RSH87/pen/rmgYbo

Add automatic deletion of old games.

• https://tech.osteel.me/posts/docker-for-local-web-development-part-8-scheduled-tasks
• https://github.com/mcuadros/ofelia

Allow some clear visual distinction for certain players (BÜRGERMEISTER)

E.g. admin can change the border color of someone or maybe there's an icon in their circle.

visible to everyone
implemented for BÜRGERMEISTER

Beautify frontend

PrimeVUE looks promising but there are others.
TailwindCSS might also be a good option for a more "low-level" approach (learn to style, backend-boi). Also https://github.com/tailwindlabs/headlessui.

These might be interesting for my minimalist desires:

• https://minicss.org
• https://milligram.io

Can't use:

• https://vuetifyjs.com/ (not Vue 3 yet)
• https://vuematerial.io/ (not Vue 3 yet)

Allow admin to choose which roles (and their quantity) will be randomly distributed.

Dual listbox select (move items around)

• https://github.com/VigneshwarSridharan/dual-listbox-vue
• https://github.com/abhimediratta/vue-multiselect-listbox

Cart

• https://github.com/dangvanthanh/vue-shopping-cart
• https://codesource.io/build-a-shopping-cart-with-vue-vuex-vue-material-design/
• https://vuejsexamples.com/shopping-cart-demo-using-vuejs-and-firebase/
• https://github.com/connor11528/vuex-shopping-cart
• https://madewithvuejs.com/vue-cart
• https://github.com/matheusazzi/shop-vue

License under AGPL-3.0

Add admin user (creator of the lobby) which isn't in the circle

Backend

Realtime only concept

• Connection-Id of Admin-User is stored in a column on Game.
• Lookup on each action if the connected user is the one stored.

JWT concept

• Nothing is stored in the database.
• Admin JWT is generated once on game creation.
• User is identified with a claim (probably role = Admin) and allowed to access the admin endpoints.

Frontend

• After creation of game, do not join it. Instead render a admin page for created game.
• Redirect to admin page if the user is known to be the admin of a game (similar to in-game players).

Add a part on the screen (e.g. bottom right) which always shows your current role and faction.

Add Eastereggs

Lobbies (games) to join and leave using SignalR

Potential references:

• https://github.com/yugabe/BlazorMiner

Add readme

• Short introduction
• State
• Motivation (learning and use-case)
• Detailed stack
• License

Inspiration:

• https://github.com/Joelius300/HeatingDataMonitor/blob/develop/Readme.md
• https://github.com/Joelius300/HeatingDataMonitor/blob/develop/backend/README.md

Allow admin to add custom roles and factions for this particular game.

Switch to cleaner but more complex concept using an API

Described in planning/concepts/api-to-jwt-to-realtime.md

• https://github.com/shawnwildermuth/vuejwt
• http://wildermuth.com/2020/10/12/Handling-Token-Authentication-in-Vue-3
• http://joelindico.blogspot.com/2020/06/jwt.html
• https://docs.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0
• https://github.com/jwt-dotnet/jwt
• https://github.com/Net-Baires/NET-Baires-Backend/tree/master/NetBaires.Api/Auth
• https://github.com/jchannon/Owin.StatelessAuth
• https://github.com/stewartm83/Jwt-WebApi
• https://github.com/opentok/Opentok-.NET-SDK/tree/master/OpenTok
• https://github.com/ONLYOFFICE/CommunityServer/blob/master/web/core/ASC.Web.Core/Helpers/AuthorizationHelper.cs
• https://github.com/Cysharp/LitJWT
• https://github.com/ONLYOFFICE/AppServer/blob/develop/common/ASC.Core.Common/Context/SecurityContext.cs
• https://github.com/ONLYOFFICE/AppServer/blob/develop/web/ASC.Web.Api/Controllers/AuthenticationController.cs
• https://github.com/amwiens/BudgetMobile/blob/master/src/BudgetMobile/Services/UserService.cs

Allow admin to reorder players in a game

With one of those fancy drag'n'drop components.

Automatically rejoin game (in the correct position) after losing the connection without explicitly leaving the game.

Rejoining happens when the game is still going and the client still knows it's secret-id to refer to the user when connecting.