kedyn / fusliez-notes Goto Github PK

There's currently no way from the project page to visit the actual web app.

Just an idea when I see game companion apps like this. Better for single monitor users too, haven't played around with electron for a long time now so i'm not sure if they've managed to reduce bundle size.

Also maybe: windows react-native version?

a response on feedback asking us to remove unused/dead players from the map (same person, but he made the comment twice):

Can you make it so that if a color is NOT given a name OR dead, please make that color unavailable on the map. This way, we can focus on the remaining colors!

makes sense to me and I don't mind putting that in.

implementation shouldnt be too difficult. we can add in the next patch if everyone is on board

Long words are breaking parts of the UI, including buttons. I need to go in and adjust the CSS.

Since I don't have a better place to put this.

I'd like to put forward some user personas, and decide how important each user is to us, to help us guide priority on feature and release roadmap. After we settle on this, we can add it permanently to the project wiki.

1. Fuslie - She's our guaranteed user, after all. We know that Leslie will use the app as a tool to keep track of her games, which means we should continually make sure it's easy for her to use. We also know that she wants to put the app on the stream scene, so we should be mindful of that (considering what UI components should be shown to viewers or hidden in a second column, etc.)

2. Other streamers - Other streamers, like Cheery for example, have expressed some interest in the tool. We should apply the same considerations for Leslie to these other users, but be mindful we should not personalize the tool too much to Leslie by default.

3. General desktop users - Users playing Among Us without streaming the game. I'd like to know more about these users: are they playing with multiple displays? Are they satisfied with using the tool in the browser app or would be a standard program be enough of a benefit?

4. General mobile users - These users will play Among Us using their phone (or tablet?) as a second screen. I would like to know how common this practice would be. Creating a good experience for a small touch-based screen is a challenge.

• When a user clicks on a player image, a menu displaying all available colors should appear above the clicked image.
• Only one color should be assigned to a player. For the case where a user selects a color that is already taken, the two colors should swap (tentative?).
• Clicking on the same player image should toggle the menu's display.
• Clicking on a different player image while the menu is open should reposition the menu above the most recently clicked player image.
• Selecting a color from the menu should close the menu.
• Clicking away from the menu when it is open should close the menu.

See title

The Reset Players function currently doesn't perform any action when clicked

Hi, im using this app and find it very usefull, specially because im new to the game and dont know the maps and that stuff.. But i play the game in Spanish with my friends, so i wanted to know if could be posible to add a second lenguage, at least for the map locations. If not, then i would like to know how to use the code to change the text strings by myself, but im not very good at coding.
Thank you very much :)

This isn't a bug or anything. Just a suggestion. I think that user should be able to change the color palate(minus the players) to their preference.

Set the background of the player tile to go from grey to the player color when activated.

This will help make the tiles' color identity more noticeable at a glance instead of just relying on the game sprite (especially when names are turned on).

Opacity should be removed when not using player names.

In my fork I had a title attribute on the h1 input that read "Click to edit". it's not obvious that it can be edited.

Here is a running checklist of Webpack's functionality:

Asset creation:

• Webpack should create index.html (Addressed in #72).
• Webpack should create favicon sets.
• Webpack should create manifest.webmanifest (?).
• Webpack should create robots.txt(?).

Minification:

• Webpack should minify .html files for production builds (Addressed in #72).
• #60: Webpack should minify .js files for production builds (Addressed in #72).
• Webpack should minify .json files for production builds (Addressed in #72).

Optimizations:

• #60: Webpack should optimize images.
• Webpack should code split deferred components (?).
• Webpack should chunk third-party packages (?).

Development:

• Webpack should spin up a development server on http://localhost:1234 (Addressed in #72).
• Webpack should automatically open the default browser to the url (Addressed in #72).
• Webpack should create source maps (Addressed in #72).

To Do

• Create Player interface.
• Create PlayerList interface.
• Create ReducerActionTypes enum.
• Create state object literal.
• Create useReducerAndDispatchMethods hook.

Player interface

interface Player {
  id: string;
  name: string;
  color: string;
}

PlayerList interface

interface PlayerList {
  id: string;
  title: string;
  players: Player[];
}

ReducerActionTypes enum

This enum references all of the available action types for the reducer.

enum ReducerActionTypes {
  UPDATE_SORTABLE_PLAYER_LIST,
  UPDATE_GAME_SCORE,
}

state structure

Here is the proposed data structure to the application's state:

const state = {
  /**
   * References the sortable player lists.
   */
  playerLists: [
    {
      id: "player-list-innocent",
      title: "Innocent",
      players: [],
    },
    {
      id: "player-list-unknown",
      title: "Unknown",
      players: [
        // ...
        { id: 1, color: "red", name: "" },
      ],
    },
  ],

  /**
   * References the current game scores.
   */
  gameScores: {
    innocent: { wins: 0, losses: 0 },
    imposter: { wins: 0, losses: 0 },
  },
};

useReducerAndDispatchMethods hook

Each dispatch action will adhere to the following schema:

const createNewDispatchMethod = () => ({
  type: ReducerActionTypes.YOUR_DISPATCH_TYPE, // Must be a unique identifier
  payload: ..., // Can be any data type
});

import { useReducer } from "react";

const initialState = { ... };
const createReducer = (state, action) => {
  switch (action.type) {
    case ReducerActionTypes.UPDATE_SORTABLE_PLAYER_LIST:
      // Do some work and return the new state

    default:
      return state;
  }
};


const updatePlayerList = (newPlayerList, playerListId) => ({
  type: ReducerActionTypes.UPDATE_SORTABLE_PLAYER_LIST, // Here I'm using an `enum`
  payload: {
    id: playerListId,
    players: newPlayerList,
  },
});

const useReducerAndDispatchMethods = () => {
  const [state, dispatch] = useReducer(createReducer, initialState);

  return {
    state,
    dispatchMethods: {
      updatePlayerList: (...args) => dispatch(updatePlayerList(...args)),
    },
  };
};

• Notes textarea background color in dark mode should use a dark background
• "Winning rate" text should be white regardless of theme
• Win rate progress bar should use a muted or semi-opaque shade of red so it clashes less with the green (see my fork for example: https://9ejrq.csb.app/). Or, somehow a divider should be added between the green and red area (might be difficult with Bootstrap Progress component)

This should be added on mobile friendly version of the project

Readonly mode

• The user cannot edit player names.
• The text cursor should not appear when the user's mouse hovers over the input element for the player's name.
• The user cannot change the player's color.
• The pointer cursor should not appear when the user's mouse hovers over the player image.
• The grab and grabbing cursors should be displayed when the user attempts to drag a player card.

The reverse should be applied for the editable mode, excluding for the point about the grab and grabbing cursors, which should be enabled for both modes (tentative?).

The "X" in the close button is off-centered

Might want to consider using cols-rows max-height for some of the elements, to handle other languages word lengths.

May be dependent on switching from Parcel to webpack

As mention on issue #5 we might want to follow the following structure:

./ComponentName/                       The folder containing the component
  ComponentName.styles.ts           The file containing the components styles
  ComponentName.tsx                   The actual component
  index.ts                                         File that exports the component so imports can just be /components/ComponentName/ instead of /component/ComponentName/ComponentName

There is a VSCode extension that generates this files called VSCode React Component Generator.

I also have a few snippets I could put in the repo so we can all follow the same/similar format.

• Main content (score /players section)
• Controls content ( Score buttons, reset button / notes)
• Map content

• Find a better favicon

• Add the missing open graph / social metadata and any mobile icon files

@Kedyn, here is the proposed layout for the app. Let me know what you think!

Also, I think we should decide on whether or not we should keep the interactive map or not.

I would suggest adding eslint and prettier as linters. If we're using CSS, Sass, or styled-components, we can also consider adding stylelint.

I added some starting configurations for eslint and prettier. You can change the configure these files to your liking. You might also want to add additional plugins and configurations for React.

Install command

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier

.eslintrc

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser"
}

.prettierrc

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

When you pull the site up in mobile or tablet, the entire display squishes and not all features are usable. The maps don't show up at all for me. If there could be an app or something, that'd be great or just fixing the visuals on mobile/tablet somehow.

Low priority enhancement:

In addition to the generic light and dark themes, more themes can be added, specifically themes for streamers. Example: a Fuslie theme that matches up cleanly with the rest of her stream design and branding.

These additional themes can be accessed from a dropdown instead of the toggle. Potentially, depending on if it's a problem, the streamer themes would not be able to be picked and instead accessed from unique urls for the streamer.

Had a discussion with @chilblane and maybe there are some additional questions we'd want to ask the users before making changes.

feel free to add in the comments

Proposed addition:

• If user prefer having the choice of light/dark mode, or ok with just dark mode
• How much do users want/need mobile?
• Is the "Use player names" toggle being used?

The page refreshed for me and now I can't zoom out. Also the entire right side is inaccessible.

v0.8.2 both mobile firefox and chrome are broken

Once #8 is implemented, having this two things will help to quickly change everything.

Feedback from one of the users

I'm not sure what's changed but the latest version is lagging when typing fast in the notes

Most likely caused by the chain of setState events happening in a short period of time.

We can add a debounce function to the onChange to limit the number of set states being called

I forgot to test that piece of code after I changed it. It's in src/common/Settings

Currently, if someone toggled it off. It will stay off since local storage lost reference to the key names

Save data such as score, theme mode, notes maybe?

• score
• theme
• notes ?
• player names ?

The typeface with the black weight is very strong and hard to read, in combination with the white text color on the dark grey background.

For the player labels, it's even less readable.

The "Titillium Web" font used in one of the sandbox forks was an improvement.

Just for reference purposes. It can be super small or behind a toggle.

@fortawesome/free-solid-svg-icons/index.es.js is a very big file. Tree shake it down to the handful of icons we use in the project.

And this means "Reset Players" will do the above and remove all player names.

With asymmetric games, it can be useful to keep separate stats for different roles. For example in SpyParty Competitive League, they track stats for Sniper and Spy separately, because they require different skills to master, just like impostor and crewmate. Separating the win rates like this would be useful to measure performance in each role.

We need to resolve these errors for Webpack to build successfully without me putting // @ts-nocheck in these files.

ERROR in ~/fusliez-notes/src/index.tsx
./src/index.tsx
[tsl] ERROR in ~/fusliez-notes/src/index.tsx(19,21)
      TS2339: Property 'wakeLock' does not exist on type 'never'.

ERROR in ~/fusliez-notes/src/index.tsx
./src/index.tsx
[tsl] ERROR in ~/fusliez-notes/src/index.tsx(27,21)
      TS2339: Property 'wakeLock' does not exist on type 'never'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(101,30)
      TS2532: Object is possibly 'undefined'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(128,25)
      TS2532: Object is possibly 'undefined'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(130,42)
      TS2339: Property 'name' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(131,26)
      TS2339: Property 'color' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(142,41)
      TS2339: Property 'name' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(143,25)
      TS2339: Property 'color' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(155,24)
      TS2345: Argument of type '{}' is not assignable to parameter of type 'string'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(167,26)
      TS2532: Object is possibly 'undefined'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(169,43)
      TS2339: Property 'name' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(170,27)
      TS2339: Property 'id' does not exist on type '{}'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(181,26)
      TS2345: Argument of type '{}' is not assignable to parameter of type 'string'.

ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx
./src/components/ColorsMenu/ColorsMenu.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ColorsMenu/ColorsMenu.tsx(238,54)
      TS2345: Argument of type 'Key' is not assignable to parameter of type 'string'.
  Type 'number' is not assignable to type 'string'.

ERROR in ~/fusliez-notes/src/components/Layout/MobileLayout/MobileLayout.styles.ts
./src/components/Layout/MobileLayout/MobileLayout.styles.ts
[tsl] ERROR in ~/fusliez-notes/src/components/Layout/MobileLayout/MobileLayout.styles.ts(8,5)
      TS1117: An object literal cannot have multiple properties with the same name in strict mode.

ERROR in ~/fusliez-notes/src/components/Layout/MobileLayout/MobileLayout.styles.ts
./src/components/Layout/MobileLayout/MobileLayout.styles.ts
[tsl] ERROR in ~/fusliez-notes/src/components/Layout/MobileLayout/MobileLayout.styles.ts(8,5)
      TS2300: Duplicate identifier 'height'.

ERROR in ~/fusliez-notes/src/components/Player/Player.tsx
./src/components/Player/Player.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/Player/Player.tsx(70,9)
      TS2322: Type 'Timeout' is not assignable to type 'number'.

ERROR in ~/fusliez-notes/src/components/ScoresPanel/CircularProgressBarScores/CircularProgressBar/CircularProgressBar.tsx
./src/components/ScoresPanel/CircularProgressBarScores/CircularProgressBar/CircularProgressBar.tsx
[tsl] ERROR in ~/fusliez-notes/src/components/ScoresPanel/CircularProgressBarScores/CircularProgressBar/CircularProgressBar.tsx(44,35)
      TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

Receiving feedback from users to add the draggable players back to the app

• Potentially add a reset player position to those draggable characters

It would be nice to save the locations of players per round, I often forget what players were grouped with me on past rounds

• Change snake_case to camelCase to maintain consistency with the codebase.
• Update .eslintrc to include a rule to enforce camelCase.

Here are the additions to .eslintrc:

{
  ...
  "rules": {
    "camelcase": 1
  }
}

For non-stream users of the app, the case can be argued that this app could be great on a mobile web browser if a user wants to "take notes" on their phone. We should look into how to make a great experience for mobile devices where the viewport is <500px wide.

• Change cursor when mouse passes over the map characters.
• Do not allow players to be drag outside the map.
• Change cursor when mouse grabs a character

Current code uses the exact css color name for coloring the background of the tile

                  style={{
                    backgroundColor: name
                      ? color === "brown"
                        ? "	saddlebrown"
                        : color
                      : "transparent",
                  }}

We should change this so that it uses like x% alpha or something, and blends into the background. Not sure if achievable without restructuring the CSS per #13

We have finished our changes to the UI for the next release, so to anyone willing to update their translations please do so

• Russian (@Kinishina)
• Portuguese (@danilolmoura)
• German (@Fabian9799)
• Spanish

Files:
https://github.com/Kedyn/fusliez-notes/tree/master/src/assets/locales

Talked to Kedyn and seems like more people/streamers are trying the app out

For users who aren't programmers or don't own GitHub accounts, it might not be as simple as it is for us to contribute to this project

I think a feedback/suggestion form can help centralize the potential improvements we can make to the app

If anyone has used any form library that seems like a good fit for this, please link it. Or if you opt for building our own, I'm down for that as well

Will also need to decide where the suggestions are going (e.g. an email)

• When pressing the Enter key within an input element for the player names, the user should have the ability to focus the next input element . For the case where the user is focused on the last input element, the focus should shift to the first input element.
• The focus order should follow the tab order, focusing from top to bottom, left to right.
• When focusing on an input element, the entire input's value should be selected.

I'm doing the translation to pt-BR and I realized that between the directions, we don't have the southeast direction

Is there some reason? Can I add it?