Webification environment setup

Never done anything with git in your life? Don't worry about it! Follow this step by step guide to get your environment set up and ready to make some puzzles.

1. Download git. Git is what we use to push all the files from your local machine into our Github repository (repo). Github IS A COMPLETELY DIFFERENT THING than git. Github is the website you're currently on and reading this. Git is a program you will download from this website. The default download should be fine, as well as all the default options during installation.
2. Download Visual Studio Code. This is technically optional, but is very highly recommended because it makes working with PuzzleJS much easier than the alternative, which is applying a command-line flag to your browser. Visual Studio Code is available to download from the Microsoft Store, or from here. Again, the default download and install options should be fine.
3. Install the Live Preview extension in VS Code. Once you've opened VS Code, click the boxes icon in the sidebar to open up the Extensions pane:
   
   
   Search for "Live Preview", and then on its page, click the blue Install button. Once it's installed, it'll change to say Uninstall:
   
   
   
4. Set the extension to open pages in your browser. Next to the install button, click the gear icon, then extension settings:
   
   
   On the settings page, change the "Open Preview Target" option to "External Browser":
   
   
   
5. Access the puzzle repository. In this example, let's say this is a private repo located at https://github.com/jbodner09/pd2024-webification. You'll first need the repo's owner to add you as a contributor. Talk to them, and once they've sent the invite, you'll either get an email, or just go directly to that repo in your browser, and it will ask you to confirm that you want to be a contributor.
6. Once you're a contributor, you'll be allowed to clone the repo. To do that, look for the green Code button, and click it to open the dropdown. In the dropdown, the default clone method of HTTPS should already be selected, so look for a button to the right of the URL that says "Copy url to clipboard" when you hover over it. Click it to copy the url, which you'll need in the next steps.
   
   
   
7. Open a Terminal session (on Windows 11) or a command prompt (on Windows 10). If you're on Windows 11 and Terminal isn't installed, you can get it from the Microsoft Store, or you can just use a command prompt. The easiest way to open a command prompt is to hit the Windows Key + R to open the Run dialog, and then type "cmd":
   
   
   Once you're in the command prompt, navigate to the folder you want your clone to live in using the "cd" command. You can go directly to any folder from anywhere else by typing its full name, for example cd C:\Users\Josh\Repos. Note that if any folder in the path contains spaces, you'll need to wrap the entire path in "quotes", like cd "C:\Users\Josh\Software Projects".
8. Clone the repo by typing git clone <repo url>, where the repo url is what you copied in Step 6. In this case, that would be git clone https://github.com/jbodner09/pd2024-webification.git. Note that to paste into the command prompt, just right-click; a keyboard shortcut like ctrl+P likely won't work.
9. At this point or any of the future git steps, git may ask you to log into Github. The easiest way to do this is by choosing the option to log in using the browser, as that will open a regular webpage you can type your Github credentials into. If you've got 2-factor authentication set up on your Github account, it may be a little trickier, as you might need to use a Personal Access Token instead. If that's the case, follow the instructions in this article.
10. Now that you have the files locally, let's assume you want to create a new puzzle. The proper way to do this is to create a new branch in git to do all your work in. Once you're done, you will open a pull request to merge your branch back into main. First, make sure your command prompt is currently INSIDE the repo folder that was just created. This doesn't happen automatically after you clone, so you'll need to "cd" into it. Next, to make sure you're up to date with the latest changes from everybody else, type git pull. Since you just cloned, you'll already be up to date, but it's very important to do this periodically, especially before you start making big changes.
11. To make a new branch, first make sure you're currently on the main branch. To do this, type git branch. The current branch will be at the top and highlighted:
    
    
    If you're NOT on the main branch, type git checkout main, and then don't forget to pull as well. Then, to create your new branch, type git checkout -b <branch name>. The branch name can be anything, but it's good practice to use one branch per puzzle, and to also put your name in the branch name so people can easily find their own branches. For example, you could do git checkout -b users/joshbo/ebay for a puzzle named "ebay".
12. Immediately push your new branch by typing git push so that the online repo is aware of it. The first time you do this, you will see an error message:
    
    
    Copy and run the exact command it gives you (git push --set-upstream origin <branch name>). You'll only need to do this once per branch you create; every other time, you can just do a regular git push. To copy text from the command prompt, highlight it, then right-click to copy what's highlighted.