- Git or GitHub Desktop (if you're not familiar with the command line)
- NodeJS, download this if the installer needs admin
- Visual Studio Code with these extensions:
- JavaScript and TypeScript
- Tailwind CSS IntelliSense (optional)
- Clone the repository from https://github.com/Team865/scouting-app-865
- In VS Code, do File > Open Folder, and select the folder you cloned it to
- Press Ctrl+Shift+` to open a terminal, and type
npm run dev
then press Enter - In your browser, go to http://localhost:3000/
note: YYYY means the game's year, Name mean's the game's name in Pascal case (i.e. Name = Reefscape, YYYY = 2025)
- add the game to the
Game
enum inapp/lib/games.ts
, likeNameYYYY = "NameYYYY"
- add a new file called
app/lib/games/YYYY.ts
- define
GameDataYYYY
in the file, likeGameData2025
, with all the functions from theGameData
interface - implement the game data functions
- add a new
GameInfo
to thegames
array inapp/lib/games.ts
:
[Game.NameYYYY]: {
name: "Name (YYYY)",
createData() {
return new GameDataYYYY();
},
links: [
{ name: 'Auto', href: '/YYYY/auto' },
{ name: 'Teleop', href: '/YYYY/teleop' },
{ name: 'Endgame', href: '/YYYY/endgame' }
],
field: { normal: '/YYYY/field.png', flipped: '/YYYY/field_flipped.png' }
},
- make a
YYYY/
folder inapp/
, and make folders for the pages (usually auto, teleop, and endgame) - make a
YYYY/
folder inpublic/
, and add the field images (normal and flipped, as referenced inGameInfo
) - change the default game in
app/lib/context.ts
to your new one - ensure it all works by submitting a report and looking at the JSON in the browser developer console
- follow the backend instructions
- modify
app/lib/backend.ts
with your backend (I should probably change this to be based on the environment at build time). - remove the easter egg images in
public/
or add your own, and update/removeimages
inapp/submit/page.tsx
- set up the backend
- set up nginx or something, the backend doesn't work with CORS for some reason, so you want them on the same domain.