-
Notifications
You must be signed in to change notification settings - Fork 0
Home
This guide explains how the game code works and how to make modifications.
Link to Task: http://spaceships-aliens.vercel.app/
This game involves different stages, rounds, and player actions. The player can make choices, earn rewards, and progress through various stages. The code controls game logic, tracks progress, and handles rewards.
-
/src/experiment.ts: All code for the game logic lives here. Most changes to the game will happen here, e.g. number of rounds, probability likelihood assignments, etc.
-
index.html: The bones/structure of the project code lives here. This includes the text for game instructions, the placement of images, the loading of images, etc.
-
styles.css: If you need to make visual adjustments to font/background colors, spacing, margins, alignment of images, go here. There is no guide for CSS in this doc, but CSS is easily queryable online and with ChatGPT.
-
/img folder: Contains images used in the experiment. The “old” folder contains previously used images that are inactive but kept as a reference.
-
/data folder: Contains experiment data. A CSV file is saved here every time someone exits the game window, or completes the task. Please be aware that merge conflicts will occur if a CSV file gets saved while you are making changes to your local machine. It is always best to run “git pull” command before running “git push” when publishing your code changes. (Read: Using Git for Version Control).
Rounds & Stages:
- round: Tracks the current round number. Initially set to 1.
- practiceRounds, mainRounds: Define the number of rounds in practice and main stages.
- totalRounds: Keeps track of the total rounds (initially set to practice rounds).
- points: Tracks the player's current points.
- currentStage: Tracks the current stage of the game (e.g., intake, welcome, instructions, practiceStage1, etc.).
Results Tracking:
- results: An array that stores the outcome of each round, including stage, choice, reward, and points.
Game Control:
- keyInputAllowed: A flag to control whether keyboard input is allowed at any given moment.
Rewards: The code includes different rewards for the game (e.g., gems or dirt). Each reward has associated points, an image, and a message.
Stage Probability:
- stage1Probability: The probability associated with outcomes in stage 1.
- stage2Options: An object containing different probability settings for stage 2, based on choices (A, B, C, or D).
Intertrial Intervals: intertrialInterval1, intertrialInterval2: Variables used to set the intervals between trials.
-
Stages & Rounds: The game progresses through different stages, such as "intake," "welcome," and various instruction screens. The main gameplay involves practice and main stages where the player makes choices and earns rewards.
-
Rewards System: The code includes different reward scenarios:
-
Game Setting 1: Players can either find a gem (+100 points) or dirt (0 points).
-
Game Setting 2 (commented out in the code): Players can find different types of gems (e.g., sapphire, ruby).
-
Likelihoods in Stage 2: In stage 2, the player's choices (A, B, C, or D) influence the likelihood of different outcomes. The stage2Options object defines these likelihoods using arrays of probabilities.
To get started with the task_spaceships-aliens_twostep project, you need to clone the repository from GitHub to your local machine. Open your terminal and run the following command to clone the repository: git clone https://github.com/emberlzhang/task_spaceships-aliens_twostep.gi
Once the cloning process is complete, navigate into the project directory: cd /{YOUR_FOLDER_PATH_HERE/task_spaceships-aliens_twostep Tip: The folder path depends on where you downloaded the folder. An example of an appropriate cd command with folder path might be: cd /Documents/Sinai_Projects/Code/task_spaceships-aliens_twostep
Below are examples of common things you might want to change in the codebase. If you get stuck, copy the experiment.ts file into ChatGPT and your desired change for suggestions.
If you want to change the number of practice or main rounds, modify the practiceRounds and mainRounds variables.
let practiceRounds: number = 5; // Change to 5 practice rounds let mainRounds: number = 100; // Change to 100 main rounds
To add a new stage, update the currentStage variable and add logic for the new stage. For example:
let currentStage: string = "newStage"; // Add your new stage here
You can modify the rewards by changing the values in the REWARD_1 and REWARD_2 constants.
const REWARD_1 = { points: 200, image: "new-reward-image", message: "You found a treasure chest (+200 points)!" };
To modify the probabilities in stage 2, update the stage2Options object. For example, to make option "A" more likely to result in a positive outcome:
stage2Options["A"].likelihoods = [0.9, 0.9, 0.9, 0.9, 0.9]; // Increase the likelihood of a positive outcome
If you want to change the order in which stages appear, simply modify the currentStage sequence. For instance, if you want "practiceStage1" to come before "instructions1":
let currentStage: string = "practiceStage1"; // Set this before "instructions1"
Let's say you want to add a new reward that gives the player 150 points for finding a special item. You would update the code like this: const REWARD_3 = { points: 150, image: "reward-img-special", message: "You found a special item (+150 points)!" }; This will create a new reward with an image and message. You can then add logic to determine when the player receives this reward.
Publishing (“Pushing”) Changes:
After making changes to the code, add your changes to be committed: git add .
Commit your changes with a descriptive message: git commit -m "Your descriptive commit message here"
Push your changes to the remote repository: git push origin main Handling Merge Conflicts: If there are merge conflicts when pulling the latest changes from the repository, first pull the changes: git pull origin main
Resolve any conflicts that arise. Git will mark the conflicting sections in the affected files. Edit these files to resolve conflicts, then add and commit the resolved files: git add git commit -m "Resolved merge conflict in "
Tip: If merging conflicts arise and are difficult to solve through the terminal, consider downloading Github Desktop for an easier time.
Finally, push the resolved changes back to the repository: git push origin main
To test the application locally, you need to run a local server. In Google Chrome (or your chosen web browser), go to: file:///[YOUR-PROJECT-CODE-FOLDER-PATH]/task_spaceships-aliens_twostep/index.html For example: file:///Users/ember/Documents/Sinai_Projects/Code/task_spaceships-aliens_twostep/index.html Note: The bolded part needs to be the same as the name of your project folder on your computer, so if you have renamed it, you need to rename it here.
Run “tsc” Before Publishing Changes Made to experiment.TS Before pushing any changes, you need to compile experiment.ts, a TypeScript file. Because the web browser only reads javascript files, changes to experiment.ts need to be reflected in the experiment.js file in order for the app to run. It is essential to compile any changes you made to the experiment.ts file before pushing changes to the repo.
Note: The experiment code is written in TypeScript–a modified form of Javascript–because it utilizes the modern software development best practice of specifying object types in Javascript code, which is not possible in regular Javascript. The practice of naming object types (naming a string as “str”, an integer as “int”, a decimal as “float”, an array as “list”, etc….) helps to prevent unwanted errors from occurring as an application gets more complex.
Run the following command in terminal to update any changes made to experiment.ts file: tsc
If there are any errors in compiling, don’t panic! The errors can usually be resolved by copy/pasting the errors into ChatGPT or another LLM. Any errors encountered here are usually basic (e.g. syntax errors) and readily solvable.
The project is deployed on Vercel, a platform for frontend deployments. Typically, you should not need to interact with the Vercel dashboard frequently. You can view the deployment status, manage environments, and access deployment logs. In case of deployment issues or to redeploy manually, you can use the dashboard options available for your project.
This code is designed to be flexible, allowing researchers to modify stages, rewards, rounds, and probabilities easily. Experiment with the variables and logic to customize the game to your needs. Always test changes thoroughly to ensure the game runs smoothly.