talksik/skills-publish-packages
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Arjun Patel
2023-11-16 13:14:44 -08:00
committed by GitHub
commit ff5ebf2f9d
17 changed files with 783 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/dependabot.yml
+6
View File
@@ -0,0 +1,6 @@
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "monthly"
.github/steps/-step.txt
+1
View File
@@ -0,0 +1 @@
0
.github/steps/0-welcome.md
+1
View File
@@ -0,0 +1 @@
<!-- readme -->
.github/steps/1-create-the-workflow-file.md
+70
View File
@@ -0,0 +1,70 @@
<!--
<<< Author notes: Step 1 >>>
Choose 3-5 steps for your course.
The first step is always the hardest, so pick something easy!
Link to docs.github.com for further explanations.
Encourage users to open new tabs for steps!
-->
## Step 1: Create the workflow file
_Welcome to "Publish packages"! :wave:_
First, take a moment to examine the image below. It shows the relationship between _continuous integration_, _continuous delivery_ and _continuous deployment_.
![](https://i.imgur.com/xZCkjmU.png)
**Continuous integration** (CI) is a practice where developers integrate tested code into a shared branch several times per day. **Continuous delivery** (CD) is the next phase of **continuous integration** (CI), where we deploy our changes to the world.
[**Docker**](https://www.docker.com/why-docker) is an engine that allows you to run containers.
Containers are packages of software that can run reliably in different environments. Containers include everything needed to run the application. Containers are lightweight in comparison to virtual machines. A **Dockerfile** is a text document that contains all the commands and instructions necessary to build a Docker Image. A **Docker image** is an executable package comprised of code, dependencies, libraries, a runtime, environment variables, and configuration files. A **Docker container** is a runtime instance of a Docker Image.
We'll start by creating the workflow file to publish a Docker image to GitHub Packages.
### :keyboard: Activity: Create the workflow file
1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
1. Navigate to the **Code** tab.
1. From the **main** branch dropdown, click on the **cd** branch.
1. Navigate to the `.github/workflows/` folder, then select **Add file** and click on **Create new file**.
1. In the **Name your file...** field, enter `publish.yml`.
1. Add the following to the `publish.yml` file:
```yml
name: Publish to Docker
on:
push:
branches:
- main
permissions:
packages: write
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
# Add your test steps here if needed...
- name: Docker meta
id: meta
uses: docker/metadata-action@v5
with:
images: ghcr.io/YOURNAME/publish-packages/game
tags: type=sha
- name: Login to GHCR
uses: docker/login-action@v3
with:
registry: ghcr.io
username: ${{ github.repository_owner }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build container
uses: docker/build-push-action@v5
with:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
```
1. Replace `YOURNAME` with your username.
1. Make sure that the image name is unique.
1. Commit your changes.
1. (optional) Create a pull request to view all the changes you'll make throughout this course. Click the **Pull Requests** tab, click **New pull request**, set `base: main` and `compare:cd`.
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
.github/steps/2-add-a-dockerfile.md
+21
View File
@@ -0,0 +1,21 @@
<!--
<<< Author notes: Step 2 >>>
Start this step by acknowledging the previous step.
Define terms and link to docs.github.com.
-->
## Step 2: Add a Dockerfile
_You created a publishing workflow! :tada:_
We will add a `Dockerfile` to the `cd` branch. The `Dockerfile` contains a set of instructions that get stored in a `Docker Image`. If you'd like, you can [learn more about Dockerfiles](https://docs.docker.com/engine/reference/builder/).
### :keyboard: Activity: Add a Dockerfile
1. In the `cd` branch, create `Dockerfile` at the project root and include:
```dockerfile
FROM nginx:1.24-alpine
COPY . /usr/share/nginx/html
```
1. Commit your changes.
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
.github/steps/3-merge-your-pull-request.md
+17
View File
@@ -0,0 +1,17 @@
<!--
<<< Author notes: Step 3 >>>
Start this step by acknowledging the previous step.
Define terms and link to docs.github.com.
-->
## Step 3: Merge your changes
_Let's get publishing! :heart:_
You can now [merge](https://docs.github.com/en/get-started/quickstart/github-glossary#merge) your changes!
### :keyboard: Activity: Merge your changes
1. Merge your changes from `cd` into `main`. If you created the pull request in step 1, just open that PR and click on **Merge pull request**. If you did not create the pull request earlier, you can do it now by following the instructions in step 1.
1. (optional) Delete the branch `cd`.
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
.github/steps/4-pull-your-image.md
+47
View File
@@ -0,0 +1,47 @@
<!--
<<< Author notes: Step 4 >>>
Start this step by acknowledging the previous step.
Define terms and link to docs.github.com.
-->
## Step 4: Pull your image
_Now things are running! :sparkles:_
Whoa, now things are running! This may take a few minutes. This might take a tiny amount of time, so grab your popcorn :popcorn: and wait for the build to finish before moving on.
To pull the Docker image, we need to log into Docker first.
Before we can use this Docker image, you will need to generate a [personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) that contains the following permissions:
- repo (all)
- write:packages
- read:packages
![screenshot personal access token creation page with boxes for repo (all), write:packages, and read:packages checked](https://user-images.githubusercontent.com/3250463/219254714-82bb1da5-33b1-491b-97c0-b25f51494f6a.png)
We will use this token to log in to Docker, and authenticate with the package.
1. Open your terminal (Bash or Git Bash recommended).
1. Use the following command to log in:
```bash
docker login ghcr.io -u USERNAME
```
1. Replace `USERNAME` with your GitHub username.
1. Enter your new Personal Access Token as the password.
1. Press **Enter**.
If everything went well, :crossed_fingers: you should see `Login Succeeded` in your terminal.
### :keyboard: Activity: Pull your image
1. Copy and paste the `pull` command from the package instructions into your terminal. It should look something like this:
- `docker pull ghcr.io/YOURNAME/publish-packages/game:TAG`
![screenshot of the pull command on the GitHub package page](https://user-images.githubusercontent.com/3250463/219254981-9ff949fa-4d01-46e3-9e3d-b8ce3710c2a9.png)
- _Tip: To reach this page, click the **Code** tab at the top of your repository. Then, find the navigation bar below the repository description, and click the **Packages** heading link_
1. Replace `YOURNAME` with your GitHub username.
1. Replace `TAG` with the image tag.
1. Press **Enter**.
1. You should see output indicating that the pull was successful, like `Status: Downloaded newer image for ghcr.io/YOURNAME/publish-packages/game:TAG`.
![screenshot of successful Docker image output](https://user-images.githubusercontent.com/3250463/219255178-3c943a6f-6c15-4f59-9002-228249b1c469.png)
1. _We can't automatically verify this step for you, so please continue on to the next step below!_
.github/steps/5-run-your-image.md
+26
View File
@@ -0,0 +1,26 @@
<!--
<<< Author notes: Step 5 >>>
Start this step by acknowledging the previous step.
Define terms and link to docs.github.com.
-->
## Step 5: Run your image
_Nicely done grabbing your Docker image! :relaxed:_
Let's trying running it.
### :keyboard: Activity: Run your image
1. Find your image information by typing `docker image ls`.
![screenshot of output from Docker image ls command: lists docker images, REPOSITORY TAG and docker URL](https://i.imgur.com/UAwRXiq.png)<!-- This screenshot should be changed. -->
1. Use the following command to run a container from your image:
```bash
docker run -dp 8080:80 --rm <YOUR_IMAGE_NAME:TAG>
```
1. Replace `YOUR_IMAGE_NAME` with your image name under the `REPOSITORY` column.
1. Replace `TAG` with the image tag under the `TAG` column.
1. Press **Enter**.
1. If everything went well, you will see hash value as output on your screen.
1. Optionally, you can open [localhost:8080](http://localhost:8080) to see the page you just created.
1. _We can't automatically verify this step for you, so please continue on to the next step below!_
.github/steps/X-finish.md
+24
View File
@@ -0,0 +1,24 @@
<!--
<<< Author notes: Finish >>>
Review what we learned, ask for feedback, provide next steps.
-->
## Finish
_Congratulations friend, you've completed this course!_
<img src=https://octodex.github.com/images/collabocats.jpg alt=celebrate width=300 align=right>
Here's a recap of all the tasks you've accomplished in your repository:
- You wrote a workflow that sends a code through a continuous delivery pipeline.
- You built a fully deployable artifact.
- You did so using GitHub Actions and GitHub Packages!
### What's next?
- Publish your own packages from your projects.
- We'd love to hear what you thought of this course [in our discussion board](https://github.com/orgs/skills/discussions/categories/publish-packages).
- [Take another GitHub Skills course](https://github.com/skills).
- [Read the GitHub Getting Started docs](https://docs.github.com/en/get-started).
- To find projects to contribute to, check out [GitHub Explore](https://github.com/explore).
.github/workflows/0-welcome.yml
+91
View File
@@ -0,0 +1,91 @@
name: Step 0, Welcome
# This step triggers after the learner creates a new repository from the template.
# This workflow updates from step 0 to step 1.
# This will run every time we create push a commit to `main`.
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
on:
workflow_dispatch:
push:
branches:
- main
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
permissions:
# Need `contents: read` to checkout the repository.
# Need `contents: write` to update the step metadata.
contents: write
jobs:
# Get the current step to only run the main job when the learner is on the same step.
get_current_step:
name: Check current step number
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- id: get_step
run: |
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
outputs:
current_step: ${{ steps.get_step.outputs.current_step }}
on_start:
name: On start
needs: get_current_step
# We will only run this action when:
# 1. This repository isn't the template repository.
# 2. The step is currently 0.
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
if: >-
${{ !github.event.repository.is_template
&& needs.get_current_step.outputs.current_step == 0 }}
# We'll run Ubuntu for performance instead of Mac or Windows.
runs-on: ubuntu-latest
steps:
# We'll need to check out the repository so that we can edit the README.
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # Let's get all the branches.
# Make a branch, and commit for the learner.
- name: Prepare a branch
run: |
echo "Make sure we are on step 0"
if [ "$(cat .github/steps/-step.txt)" != 0 ]
then
echo "Current step is not 0"
exit 0
fi
echo "Make a branch"
BRANCH=cd
git checkout -b $BRANCH
echo "Make an empty commit"
git config user.name github-actions
git config user.email github-actions@github.com
git commit --message="Create empty commit" --allow-empty
echo "Push"
git push --set-upstream origin $BRANCH
echo "Restore main"
git checkout main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
# In README.md, switch step 0 for step 1.
- name: Update to step 1
uses: skills/action-update-step@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
from_step: 0
to_step: 1
branch_name: cd
.github/workflows/1-create-the-workflow-file.yml
+73
View File
@@ -0,0 +1,73 @@
name: Step 1, Create the workflow file
# This step triggers after the user creates `publish.yml` on branch `cd`.
# This workflow updates from step 1 to step 2.
# This will run every time we push `publish.yml` on branch `cd`.
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
on:
workflow_dispatch:
push:
branches:
- cd
paths:
- .github/workflows/publish.yml
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
permissions:
# Need `contents: read` to checkout the repository.
# Need `contents: write` to update the step metadata.
contents: write
jobs:
# Get the current step to only run the main job when the learner is on the same step.
get_current_step:
name: Check current step number
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- id: get_step
run: |
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
outputs:
current_step: ${{ steps.get_step.outputs.current_step }}
on_create_publish_yml:
name: On create publish yml
needs: get_current_step
# We will only run this action when:
# 1. This repository isn't the template repository.
# 2. The step is currently 1.
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
if: >-
${{ !github.event.repository.is_template
&& needs.get_current_step.outputs.current_step == 1 }}
# We'll run Ubuntu for performance instead of Mac or Windows.
runs-on: ubuntu-latest
steps:
# We'll need to check out the repository so that we can edit the README.
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # Let's get all the branches.
# Check the learner added intended contents to the file.
- name: Verify publish.yml file contents
uses: skills/action-check-file@v1
with:
file: ".github/workflows/publish.yml"
search: "docker/build-push-action"
# In README.md, switch step 1 for step 2.
- name: Update to step 2
uses: skills/action-update-step@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
from_step: 1
to_step: 2
branch_name: cd
.github/workflows/2-add-a-dockerfile.yml
+73
View File
@@ -0,0 +1,73 @@
name: Step 2, Add a Dockerfile
# This step triggers after we push changes to `Dockerfile` on branch `cd`.
# This workflow updates from step 2 to step 3.
# This will run every time we push changes to `Dockerfile` on branch `cd`.
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
on:
workflow_dispatch:
push:
branches:
- cd
paths:
- Dockerfile
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
permissions:
# Need `contents: read` to checkout the repository.
# Need `contents: write` to update the step metadata.
contents: write
jobs:
# Get the current step to only run the main job when the learner is on the same step.
get_current_step:
name: Check current step number
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- id: get_step
run: |
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
outputs:
current_step: ${{ steps.get_step.outputs.current_step }}
on_push_dockerfile:
name: On push Dockerfile
needs: get_current_step
# We will only run this action when:
# 1. This repository isn't the template repository.
# 2. The step is currently 2.
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
if: >-
${{ !github.event.repository.is_template
&& needs.get_current_step.outputs.current_step == 2 }}
# We'll run Ubuntu for performance instead of Mac or Windows.
runs-on: ubuntu-latest
steps:
# We'll need to check out the repository so that we can edit the README.
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # Let's get all the branches.
# Check the learner added intended contents to the file.
- name: Verify Dockerfile contents
uses: skills/action-check-file@v1
with:
file: "Dockerfile"
search: "FROM nginx:1.24-alpine"
# In README.md, switch step 2 for step 3.
- name: Update to step 3
uses: skills/action-update-step@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
from_step: 2
to_step: 3
branch_name: cd
.github/workflows/3-merge-your-pull-request.yml
+64
View File
@@ -0,0 +1,64 @@
name: Step 3, Merge your pull request
# This step triggers after pushing to main.
# This workflow updates from step 3 to step 4.
# This will run every time we push to main.
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
on:
workflow_dispatch:
push:
branches:
- main
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
permissions:
# Need `contents: read` to checkout the repository.
# Need `contents: write` to update the step metadata.
contents: write
jobs:
# Get the current step to only run the main job when the learner is on the same step.
get_current_step:
name: Check current step number
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- id: get_step
run: |
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
outputs:
current_step: ${{ steps.get_step.outputs.current_step }}
on_push_main:
name: On push main
needs: get_current_step
# We will only run this action when:
# 1. This repository isn't the template repository.
# 2. The step is currently 3.
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
if: >-
${{ !github.event.repository.is_template
&& needs.get_current_step.outputs.current_step == 3 }}
# We'll run Ubuntu for performance instead of Mac or Windows.
runs-on: ubuntu-latest
steps:
# We'll need to check out the repository so that we can edit the README.
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # Let's get all the branches.
# In README.md, switch step 3 for step 45X.
- name: Update to step 45X
uses: skills/action-update-step@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
from_step: 3
to_step: 45X
branch_name: cd
.gitignore
+37
View File
@@ -0,0 +1,37 @@
# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
LICENSE
+7
View File
@@ -0,0 +1,7 @@
Copyright (c) GitHub, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
README.md
+73
View File
@@ -0,0 +1,73 @@
<header>
<!--
<<< Author notes: Course header >>>
Include a 1280×640 image, course title in sentence case, and a concise description in emphasis.
In your repository settings: enable template repository, add your 1280×640 social image, auto delete head branches.
Add your open source license, GitHub uses the MIT license.
-->
# Publish to GitHub Packages
_Use GitHub Actions to publish your project to a Docker image._
</header>
<!--
<<< Author notes: Course start >>>
Include start button, a note about Actions minutes,
and tell the learner why they should take the course.
-->
## Welcome
GitHub Actions makes it easier than ever to incorporate continuous delivery (CD) into your repositories. This course will teach you what is needed to test and deliver artifacts that are ready for deployment.
- **Who is this for**: Developers, DevOps engineers, full stack developers, cloud engineers.
- **What you'll learn**: Continuous delivery, how to save and access build artifacts, package management, how to publish to GitHub Packages.
- **What you'll build**: We will build a Docker image that runs a small game.
- **Prerequisites**: We recommend you first complete the following courses: [Hello, GitHub Actions](https://github.com/skills/hello-github-actions) and [Continuous Integration](https://github.com/skills/continuous-integration).
- **How long**: This course takes less than 30 minutes to complete.
In this course, you will:
1. Create a workflow
2. Add a Dockerfile
3. Merge your pull request
### How to start this course
<!-- For start course, run in JavaScript:
'https://github.com/new?' + new URLSearchParams({
template_owner: 'skills',
template_name: 'publish-packages',
owner: '@me',
name: 'skills-publish-packages',
description: 'My clone repository',
visibility: 'public',
}).toString()
-->
[![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=publish-packages&owner=%40me&name=skills-publish-packages&description=My+clone+repository&visibility=public)
1. Right-click **Start course** and open the link in a new tab.
2. In the new tab, most of the prompts will automatically fill in for you.
- For owner, choose your personal account or an organization to host the repository.
- We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
- Scroll down and click the **Create repository** button at the bottom of the form.
3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README.
<footer>
<!--
<<< Author notes: Footer >>>
Add a link to get support, GitHub status page, code of conduct, license link.
-->
---
Get help: [Post in our discussion board](https://github.com/orgs/skills/discussions/categories/publish-packages) &bull; [Review the GitHub status page](https://www.githubstatus.com/)
&copy; 2023 GitHub &bull; [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) &bull; [MIT License](https://gh.io/mit)
</footer>
index.html
+152
View File
@@ -0,0 +1,152 @@
<title>Tic Tac Toe</title>
<meta charset="UTF-8" />
<style>
body,
td,
input {
font-size: 24px;
line-height: 1.5;
text-align: center;
font-family: system-ui, sans-serif;
}
td {
height: 3rem;
width: 3rem;
text-align: center;
}
table {
margin: 5rem auto;
}
@media (prefers-color-scheme: dark) {
body,
input {
background: #222;
color: #ccc;
}
}
</style>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<h2 hidden>Game over</h2>
<script>
// Initialization
const boxes = Array.from(document.querySelectorAll("td"));
const inputs = Array.from(document.querySelectorAll("[type=checkbox]"));
const rows = [1, 2, 3].map((n) =>
Array.from(document.querySelectorAll(`tr:nth-child(${n}) td`))
);
const columns = [1, 2, 3].map((n) =>
Array.from(document.querySelectorAll(`td:nth-child(${n})`))
);
const diagonals = [
[
[1, 1],
[2, 2],
[3, 3],
],
[
[3, 1],
[2, 2],
[1, 3],
],
].map((set) =>
set.map(([x, y]) =>
document.querySelector(`tr:nth-child(${x}) td:nth-child(${y})`)
)
);
const gameOver = document.querySelector("h2");
const HUMAN = "🧑‍💻";
const ROBOT = "🤖";
// Decide who goes first
if (Math.random() > 0.5) {
runRobotTurn();
}
// Handle when a user clicks an input
for (const input of inputs) {
input.addEventListener("click", handleClickInput);
}
// The user chose a box, check for win, robot turn, check for win
function handleClickInput(evt) {
evt.target.closest("td").innerHTML = HUMAN;
if (hasWin()) {
return endGame();
}
runRobotTurn();
if (hasWin()) {
return endGame();
}
}
// Choose a random available box
function runRobotTurn() {
const robotBoxes = shuffle(boxes);
while (robotBoxes.length) {
const box = robotBoxes.shift();
if (box.querySelector("input")) {
box.innerHTML = ROBOT;
break;
}
}
}
// Determine win
function hasWin() {
return (
rows.some(hasAllSame) ||
columns.some(hasAllSame) ||
diagonals.some(hasAllSame)
);
}
// Determine if every cell matches
function hasAllSame(arr) {
return arr.every(
(td) => !td.querySelector("input") && td.innerHTML === arr[0].innerHTML
);
}
// Display game over, cancel events
function endGame() {
gameOver.hidden = false;
for (const input of inputs) {
input.removeEventListener("click", handleClickInput);
input.remove();
}
}
// Shuffle a copy of the input array
function shuffle(array) {
array = array.slice(0);
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * i);
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script>