kcapp / frontend

Dart Scoring application
17 stars 11 forks source link

Not able to start practice #135

Closed lluni closed 1 year ago

lluni commented 1 year ago

When opening the practice page it looks like this: image I don't know whether (1.) should have some text, but it is empty with no selectable option and (2.) only has the option for 301.

After selecting a player and a mock player (or bot difficulty, it doesn't matter) and trying to start, the console spits out an error and I stay on the same page:

Uncaught TypeError: s is undefined
    newGame http://192.168.178.96:3000/static/pages-f36ac701.js:208
    l http://192.168.178.96:3000/static/pages-f36ac701.js:29
    n http://192.168.178.96:3000/static/pages-f36ac701.js:29

I'm using the following docker compose setup:

.env

KCAPP_API="http://api:8001"
KCAPP_API_VERSION="latest"
KCAPP_FRONTEND_VERSION="latest"
MYSQL_DATABASE="kcapp"
MYSQL_USER="kcapp"
MYSQL_PASSWORD="abcd1234"
MYSQL_ROOT_PASSWORD="kcapp"
MYSQL_LISTEN_ADDR="0.0.0.0"
API_LISTEN_ADDR="0.0.0.0"
KCAPP_FRONTEND_LISTEN_ADDR="0.0.0.0"
MYSQL_LISTEN_PORT=3306
API_LISTEN_PORT=8001
KCAPP_FRONTEND_LISTEN_PORT=3000
NODE_ENV="prod"
DISK_CACHE="true"

docker-compose.yaml

version: '3.6'
services:
  db:
    image: linuxserver/mariadb:110.4.12mariabionic-ls59
    #command: mysqld --sql_mode=""
    restart: always
    volumes:
      - db_config:/config
      - db:/var/lib/mysql
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    networks:
      - kcapp
  migration:
    image: kcapp/api:$KCAPP_API_VERSION
    command: [ "./wait-for-it.sh", "db:3306", "--", "./run_migrations.sh" ]
    depends_on:
      - db
    environment:
      DB_CONNECTION: "${MYSQL_USER}:${MYSQL_PASSWORD}@tcp(db:3306)/${MYSQL_DATABASE}?parseTime=true"
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
    networks:
      - kcapp
  api:
    image: kcapp/api:$KCAPP_API_VERSION
    restart: always
    ports:
      - "${API_LISTEN_PORT}:8001"
    expose:
      - ${API_LISTEN_PORT}
    depends_on:
      - migration
      - db
    command: [ "./wait-for-it.sh", "db:3306", "--", "/go/bin/api" ]
    networks:
      - kcapp
  frontend:
    image: kcapp/frontend:$KCAPP_FRONTEND_VERSION
    restart: always
    ports:
      - "${KCAPP_FRONTEND_LISTEN_PORT}:3000"
    expose:
      - ${KCAPP_FRONTEND_LISTEN_PORT}
    volumes:
      - frontend_cache:/.cache
      - "/etc/localtime:/etc/localtime:ro"
    depends_on:
      - api
    environment:
      - DEBUG=kcapp:*,kcapp-bot:*
      - KCAPP_API
      - DISK_CACHE
      - NODE_ENV
    networks:
      - kcapp
    privileged: true
volumes:
  db:
  db_config:
  frontend_cache:
networks:
  kcapp:
    name: kcapp

(The privileged: true is only there because node.js has (or had?) a bug where it crashes on ARM devices if it is run as a unprivileged container.)

thordy commented 1 year ago

Hi @lluni ,

I've not really documented this feature very well, so sorry about that.

  1. Definitely needs to have an option to select something, and I think the reason you cannot add anything there is because you are missing a bot user. Could you try to insert a user in your database which has is_bot = 1 set? Like this:

    INSERT INTO player (first_name, last_name, vocal_name, nickname, slack_handle, color, profile_pic_url, smartcard_uid, board_stream_url, board_stream_css, active, office_id, is_bot, is_placeholder, created_at) VALUES
    ('kcapp-bot', '', 'kcappbot.wav', null, null, '#1c2efb', null, null, null, null, 1, 1, 1, 0, NOW());

    Once that is done, I hope you will have a setup similar to this image

  2. Unfortunately, the bot only supports 301 and No Sets, I've been meaning to improve this, but haven't had any chance. If you feel like contributing it can be done in the bot repo

Let me know if you are still facing issues after this

lluni commented 1 year ago

Thanks for the quick answer! After inserting kcapp-bot as a bot user, it is now a selectable bot and skill-based practice works.

Mock-based practice doesn't seem to work and the frontend container outputs the following error when trying to generate a throw/visit:

(node:29) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'first_dart' of undefined
    at Object.exports.attemptThrow (/usr/src/kcapp/node_modules/kcapp-bot/replay-bot.js:35:31)
    at Object.exports.score (/usr/src/kcapp/node_modules/kcapp-bot/replay-bot.js:51:27)
    at doScore (/usr/src/kcapp/node_modules/kcapp-bot/kcapp-bot.js:15:19)
(node:29) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 12)
(node:29) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'first_dart' of undefined
    at Object.exports.attemptThrow (/usr/src/kcapp/node_modules/kcapp-bot/replay-bot.js:35:31)
    at Object.exports.score (/usr/src/kcapp/node_modules/kcapp-bot/replay-bot.js:51:27)
    at doScore (/usr/src/kcapp/node_modules/kcapp-bot/kcapp-bot.js:15:19)
(node:29) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 14)

Regarding contributing: Unfortunately, I've never programmed anything in JavaScript, so it's hard for me to help there. I will look around but I can't promise anything.

thordy commented 1 year ago

Great, I'm glad if Skill-based bots work.

When selecting Mock, do you get a list of players in the drop down menu to select from? Mock is actually just selecting a random leg the player has played in the past, and replaying that one dart by dart, so not a very smart or good implementation. It also requires a player to have played at least 100 legs, for this to work, so I'm thinking it could be causing the issues.

When starting the leg, you should see something like this in the frontend logs

  kcapp:socketio-handler [<leg_id>] Adding bot <bot_id>/kcapp-bot +258ms
  kcapp-bot:replay-bot Requesting leg to replay for <player_id> +645ms
  kcapp-bot:replay-bot Configured bot for leg <id> +45ms 

I'm currently traveling, but will try to look into this some more next week once I'm back home

lluni commented 1 year ago

When selecting Mock, I get a subset of the players. Each one of them could very well have 100 legs played, so I don't think that's the problem.

When trying to start a mock-based practice with one of the selectable players (player id 4), I get the following output in the frontend container:

2023-01-10T17:02:03.730Z kcapp:socketio-handler [/legs/556] created
2023-01-10T17:02:03.768Z kcapp:socketio-handler [556] Adding bot 7/kcapp-bot
2023-01-10T17:02:03.769Z kcapp-bot:replay-bot Requesting leg to replay for 4
2023-01-10T17:02:03.919Z kcapp-bot:replay-bot Error when getting match: Error: connect ECONNREFUSED 127.0.0.1:8001

kcapp-bot tries to access the API on localhost (i.e. the frontend container, not the API one), even though the env var KCAPP_API is set to http://api:8001. I guess this is because the kcapp-bot is always initialized with apiURL = 'http://localhost:8001' in https://github.com/kcapp/bot/blob/main/kcapp-bot.js#L21 and not overwritten in https://github.com/kcapp/frontend/blob/main/routes/lib/socketio_handler.js#L123 with the "correct" API URL.

lluni commented 1 year ago

I've made a PR #137 which fixes the problem with mock-based practice :)

thordy commented 1 year ago

Thank you for the PR @lluni ! Started looking at merging this yesterday, but will make a few other improvements at the same time, but hoping to get it merged this week!

thordy commented 1 year ago

I pushed some fixes and merged code now, so hopefully it works. Should also be available in latest docker images shortly