nickytonline / connect-four

A web based version of the classic game Connect Four

Hi! I'm Nick. 👋🏻

Hello! My name is Nick Taylor. I'm a Senior Software Engineer at OpenSauced. I'm a fan of Open Source and have a growing interest in serverless and edge computing. I'm not a big fan of spiders, but I know they're doing good work eating bugs. I also stream on Twitch.

I am a big fan of TypeScript, JavaScript, Node, and all things frontend. Aside from programming, I enjoy contributing to open source, hitting the gym, snowboarding, and rugby a long time ago.

---

Latest Blog Posts

• The State of .NET Tooling in 2024
• Tools that keep me productive
• Yet Another Newsletter: Saying goodbye
• Creating an OG image using React and Netlify Edge Functions
• Form and Function: How I Lost My Submit Button & Got It Back
• Stuck in the Middle with You: An intro to Middleware
• Fresh: A Full Stack Web Framework for Deno
• Fresh: A Full Stack Web Framework for Deno

Latest Videos

Check out more videos on my YouTube channel

🍕 my profile on OpenSauced

media:

• OneTipAWeek.com
• nickyt.live
• Twitch
• YouTube
• Podcast

socials:

• X/Twitter
• Threads
• LinkedIn
• Mastodon

blogging:

• nickyt.co
• DEV

connect-four's Issues

Svelte keyword missing from package.json keywords property

Describe the bug A clear and concise description of what the bug is.

The keyword svelte is missing from the package.json's keywords property.

To Reproduce Steps to reproduce the behavior:

N/A

Expected behavior A clear and concise description of what you expected to
happen.

Add the svelte keyword to the keywords property in package.json

"keywords": [
-	"typescript"
+	"typescript",
+	"svelte",
],

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Update documentation with a reference to the Wikipedia article for Connect Four

Describe the bug A clear and concise description of what the bug is.

The README currently does not explain what Connect Four is.

Expected behavior A clear and concise description of what you expected to
happen.

Add an excerpt and a reference to the article on Wikipedia in the README.md.

[![Netlify Status](https://api.netlify.com/api/v1/badges/9d86a366-98d4-48d3-acf1-0fd2c817daec/deploy-status)](https://app.netlify.com/sites/awesome-connect-four/deploys)

# connect-four

- A web based version of the classic game Connect Four
+ A web based version of the classic game Connect Four.

+ > *Connect Four* (also known as *Connect 4*, *Four Up*, *Plot Four*, *Find Four*, *Captain’s Mistress*, *Four in a Row*, *Drop Four*, and *Gravitrips* in the Soviet Union) is a two-player  [connection](https://en.wikipedia.org/wiki/Connection_game)   [board game](https://en.wikipedia.org/wiki/Board_game) , in which the players choose a color and then take turns dropping colored tokens into a seven-column, six-row vertically suspended grid. The pieces fall straight down, occupying the lowest available space within the column. The objective of the game is to be the first to form a horizontal, vertical, or diagonal line of four of one’s own tokens.
+ 
+ Reference [Connect Four on Wikipedia](https://en.wikipedia.org/wiki/Connect_Four)

## Recommended IDE Setup

[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## Local Development

1. Ensure that you have the
   [latest version of Node 16](https://nodejs.org/en/download/) installed.
1. If you do not have the Netlify CLI installed, follow the
   [Getting Started with Netlify CLI](https://docs.netlify.com/cli/get-started/)
   guide.
1. Run `npm install`
1. Run `ntl dev`.

## Contributing

If you're interested in contributing to the project, please read the
[contributing guidelines](CONTRIBUTING.md).

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Typo in "The beginings ..."

Describe the bug A clear and concise description of what the bug is.

There is a typo in the text.

To Reproduce Steps to reproduce the behavior:

1. Go to the index page
2. Look at "beginings"
3. See missing "n"

Expected behavior A clear and concise description of what you expected to
happen.

It should be spelled "beginnings".

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] Mac
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 105.0.5195.125 (Official Build) (x86_64)

Smartphone (please complete the following information):

Did not try it.

Additional context Add any other context about the problem here.

I'll fix it in a minute, but I wanted to go through all the steps of the contribution guidelines 😄

Add a section to the ReadME for Storybook

Description

Now that #72 is merged, it'd be good to add a section to the ReadME, on how to work with Storybook.

• Call the section of the ReadME, Working with Storybook (open to suggestions)
• Add the section right after the local development section.
• How to start it by running, npm run storybook
• How to build it by running, npm run build-storybook
• Link to the official Storybook documentation:
  • Guides, https://storybook.js.org/docs/react/get-started/introduction
  • Tutorials, https://storybook.js.org/tutorials/

Configure SvelteKit for Netlify

Describe the bug A clear and concise description of what the bug is.

The netlify.toml is no longer required since the fix in netlify/framework-info#818.

We can safely delete it for now. If we need to add things to the config later, like Netlify Functions or Netlify Edge Functions, we can always bring back a netlify.toml file

To Reproduce Steps to reproduce the behavior:

N/A

Expected behavior A clear and concise description of what you expected to
happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Loosen version of Node 16 for Node.js engine in package.json

Describe the bug A clear and concise description of what the bug is.

Loosens the required version of Node 16 so it works on CodeSandbox. I was getting this error because they currenlty install 16.17.0, so I opted to just make the engine check >= 16

npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"node":">=16.17.1"}
npm ERR! notsup Actual:   {"npm":"8.15.0","node":"v16.17.0"}

npm ERR! A complete log of this run can be found in:
npm ERR!     /project/.cache/npm/_logs/2022-10-07T21_38_37_672Z-debug-0.log

I'd like people to be able to use CodeSandbox as well, and this should unblock them.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to
happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Maybe we could set a .nvmrc or something, but if it works out of the box on Codesandbox with the Node.js engine set to >= 16, then that's less config to manage.

Move Contributing Guide information up higher in the ReadME

Description

Now that we have documentation for different work environment setups, the Contributing Guide section in the ReadME can easily be missed as its way at the bottom now.

Move the Contributing section to right above the Recommended IDE Setup section. Ensure that it's formatted properly. If all the dependencies of the project have been installed, when you commit your code, it should run prettier automatically.

App not showing right on Ubuntu 22

Is this app looking right or broken?

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 22.04.1 LTS
• Browser: Chrome
• Version 106

Same with latest Firefox.

Style the Coin component

Is your feature request related to a problem? Please describe.

The initial coin components created on the stream had very basic styling. There is no specific design per se, but something long the lines of the classic coin piece would be good.

It should also have a colour property, as each player has a different game piece colour.

Describe the solution you'd like
The board should look nice and the coins should fit into the board itself nicely.

Describe alternatives you've considered

Using ascii art could work as well, but I think we should go with fine CSS stuff, but with zooming, CSS might make more sense.

Additional context
It just doesn't fit at all when looking at the branch where we have a board (board-and-pieces-wip-jb / PR #18)

Add social card and related metadata for Twitter, Open Graph

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

The app needs a social card so that if it's shared on Twitter or elsewhere, a nice image will appear for the link

Describe the solution you'd like A clear and concise description of what you
want to happen.

Add a Twitter Social card and other social cards, e.g. og:image. There is no design yet, so maybe once the app is in a better place, we can take a screenshot.

And add all the related metatags, e.g.

See iamdeveloper.com as an example if you look in the <head /> element.

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

N/A

Additional context Add any other context or screenshots about the feature
request here.

• Twitter Social Cards
• Twitter Social Card Validator
• The Open Graph Protocol

For now, until we have an actual social card, a screenshot of the initial app is probably good enough for now.

You can take a screenshot from https://awesome-connect-four.netlify.app/ and create the proper image sizes.

Move to SvelteKit

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

The project is currently using Svelte, but we want to leverage capabilities in SvelteKit.

Describe the solution you'd like A clear and concise description of what you
want to happen.

Migrate to SvelteKit.

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Add /dist directory to eslint and prettier ignore files

Description

Currently if a dist folder is present from a build, it raises warnings in eslint and prettier and potentially errors in eslint. This folder is a build artifact so there is no need for prettier and eslint to run on this folder. Add it to both eslint and prettier's ignore files.

In .prettierignore

.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

/coverage
/.github
/.netlify
/.vscode
+ /dist

and in .eslintignore

.DS_Store
node_modules
/build
+ /dist
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
/coverage

Success Criteria

1. Run npm run build
2. Run npm run format once the changes have been made and you should no longer see references to the dist folder, e.g.

> [email protected] format
> prettier --plugin-search-dir . --write .

.eslintrc.cjs 28ms
.gitpod.yml 16ms
.lintstagedrc.cjs 2ms
.prettierrc 5ms
.storybook/main.cjs 3ms
.storybook/preview-head.html 15ms
.storybook/preview.cjs 4ms
CODE-OF-CONDUCT.md 38ms
CONTRIBUTING.md 5ms
dist/_app/immutable/assets/_page-4d4a7d51.css 19ms
dist/_app/immutable/chunks/0-c75aa4ae.js 2ms
dist/_app/immutable/chunks/1-addd541e.js 1ms
dist/_app/immutable/chunks/2-39fe2eeb.js 2ms
dist/_app/immutable/chunks/index-285718c9.js 8ms
dist/_app/immutable/chunks/index-9de25212.js 46ms
dist/_app/immutable/chunks/singletons-71473c1a.js 12ms
dist/_app/immutable/components/error.svelte-5e9b940e.js 16ms
dist/_app/immutable/components/layout.svelte-3764221b.js 5ms
dist/_app/immutable/components/pages/_page.svelte-a4d750da.js 29ms
dist/_app/immutable/start-ee72f848.js 105ms
dist/_app/version.json 3ms
dist/vite-manifest.json 2ms
package.json 3ms
playwright.config.ts 163ms
README.md 18ms
src/app.d.ts 4ms
src/app.html 6ms
src/lib/Board.svelte 69ms
src/lib/Coin.svelte 6ms
src/lib/stores/gameState.ts 4ms
src/routes/+page.svelte 6ms
src/stories/button.css 3ms
src/stories/Button.stories.js 4ms
src/stories/Button.svelte 8ms
src/stories/header.css 2ms
src/stories/Header.stories.js 2ms
src/stories/Header.svelte 8ms
src/stories/Introduction.stories.mdx 16ms
src/stories/page.css 4ms
src/stories/Page.stories.js 3ms
src/stories/Page.svelte 10ms
src/types/GameTypes.d.ts 1ms
svelte.config.js 2ms
tests/test.ts 4ms
testSpec.spec.ts 2ms
tsconfig.json 1ms
vite.config.ts 4ms

3. Run npm run lint once the changes have been made and you should no longer see references to the dist folder, e.g.

➜ npm run lint

> [email protected] lint
> prettier --plugin-search-dir . --check . && eslint .

Checking formatting...
All matched files use Prettier code style!

/Users/nicktaylor/dev/oss/connect-four/dist/_app/immutable/chunks/index-9de25212.js
  1:14  error  Unexpected empty function '$'  @typescript-eslint/no-empty-function

/Users/nicktaylor/dev/oss/connect-four/dist/_app/immutable/components/pages/_page.svelte-a4d750da.js
  142:16  warning  's' is defined but never used  @typescript-eslint/no-unused-vars
  178:6   warning  'a' is defined but never used  @typescript-eslint/no-unused-vars
  181:6   warning  'a' is defined but never used  @typescript-eslint/no-unused-vars
  235:5   warning  's' is defined but never used  @typescript-eslint/no-unused-vars
  241:5   warning  's' is defined but never used  @typescript-eslint/no-unused-vars
  295:5   warning  'n' is defined but never used  @typescript-eslint/no-unused-vars
  301:5   warning  'n' is defined but never used  @typescript-eslint/no-unused-vars
  342:13  warning  'i' is defined but never used  @typescript-eslint/no-unused-vars

/Users/nicktaylor/dev/oss/connect-four/dist/_app/immutable/start-ee72f848.js
   440:16  warning  'w' is defined but never used                 @typescript-eslint/no-unused-vars
   475:5   warning  '_' is defined but never used                 @typescript-eslint/no-unused-vars
   478:5   warning  '_' is defined but never used                 @typescript-eslint/no-unused-vars
   658:7   error    Unexpected lexical declaration in case block  no-case-declarations
   663:7   error    Unexpected lexical declaration in case block  no-case-declarations
   677:7   error    Unexpected lexical declaration in case block  no-case-declarations
   712:9   error    Empty block statement                         no-empty
   757:21  error    Unexpected empty method 'accepted'            @typescript-eslint/no-empty-function
   758:20  error    Unexpected empty method 'blocked'             @typescript-eslint/no-empty-function
   929:23  error    Unexpected empty method 'setHeaders'          @typescript-eslint/no-empty-function
  1002:58  error    Unexpected empty arrow function               @typescript-eslint/no-empty-function
  1003:62  error    Unexpected empty arrow function               @typescript-eslint/no-empty-function
  1060:36  error    Unexpected empty arrow function               @typescript-eslint/no-empty-function
  1203:54  error    Unexpected empty arrow function               @typescript-eslint/no-empty-function
  1304:15  error    Empty block statement                         no-empty
  1394:85  error    'i.href' is assigned to itself                no-self-assign
  1496:15  error    Unexpected empty arrow function               @typescript-eslint/no-empty-function
  1498:26  warning  'r' is defined but never used                 @typescript-eslint/no-unused-vars

Add documentation to explain how to work in CodeSandbox

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

CodeSandbox is another great place to work in the browser when working on projects.

Describe the solution you'd like A clear and concise description of what you
want to happen.

Create a Section in the ReadME under the Gitpod section and call it Development in CodeSandbox. Ensure it's a level 2 heading, i.e. this is the markdown ## Development in CodeSandbox.

There is no copy for this section, so use your judgement. Something along the lines of, you can work on the project in CodeSandbox...

There is existing CodeSandbox documentation about working on a fork of a project, so incorporate that into the short resume of how to work on the project in CodeSandbox.

A link in the ReadME that takes you to the right spot in Codesandbox, would be even better. Less friction for someone looking to work in Codesandbox.

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Repeated line in README.md

Describe the bug

An extra line in README.md that can be removed.

"A web-based version of the classic game Connect Four."

To Reproduce

1. Go to README.md

Expected behavior

An Introduction that does not repeat.

Screenshots If applicable, add screenshots to help explain your problem.

Add Storybook to the project

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

Add Storybook to the project

Describe the solution you'd like A clear and concise description of what you
want to happen.

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Before beginning this issue, #20 needs to be merged

Follow these steps and Storybook should setup properly.

1. Run npx sb init

2. When prompted, press y for yes.

🔎 checking possible migrations..
🔎 found a 'eslintPlugin' migration:

╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                      │
│   We've detected you are not using our eslint-plugin.                                                                                │
│                                                                                                                                      │
│   In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.   │
│                                                                                                                                      │
│   More info: https://github.com/storybookjs/eslint-plugin-storybook#readme                                                           │
│                                                                                                                                      │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to run the 'eslintPlugin' migration on your project? › (y/N)

3. You’ll be prompted to configure npm. Type y for yes

✅ Configuring eslint rules in .eslintrc.cjs
✅ Adding Storybook to extends list
✅ ran eslintPlugin migration
🔎 found a 'npm7' migration:

╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                   │
│   We've detected you are running npm 8.15.0                                                       │
│    which has peer dependency semantics which Storybook is incompatible with.                      │
│                                                                                                   │
│   In order to work with Storybook's package structure, you'll need to run `npm` with the          │
│   `--legacy-peer-deps=true` flag. We can generate an `.npmrc` which will do that automatically.   │
│                                                                                                   │
│   More info: https://github.com/storybookjs/storybook/issues/18298                                │
│                                                                                                   │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to run the 'npm7' migration on your project? › (y/N)

4. The first time you run storybook via npm run storybook, you’ll get these errors.

> [email protected] storybook
> start-storybook -p 6006

info @storybook/svelte v6.5.12
info 
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
ERR! Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
ERR!     at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
ERR!     at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:106:71)
ERR!     at async buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
ERR! Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
ERR!     at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
ERR!     at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:106:71)
ERR!     at async buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16
    "preprocess": require("../svelte.config.js").preprocess
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
    at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
    at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
    at getFrameworkPackage (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/presets.js:326:50)
    at loadAllPresets (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/presets.js:356:26)
    at buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:209:50) {
  code: 'ERR_REQUIRE_ESM'
}

5. In the storybook main.cjs file make the following changes

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: '@storybook/svelte',
  core: {
    builder: '@storybook/builder-vite'
  },
  svelteOptions: {
-    preprocess: require('../svelte.config.js').preprocess
+    preprocess: import('../svelte.config.js').preprocess
  },
  features: {
    storyStoreV7: true
  }
};

6. Save the file and rerun the command to start Storybook, npm run storybook.
7. Storybook loads.

warning A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event

Describe the bug A clear and concise description of what the bug is.

Fix the linting warning by making the interaction for dropping a coin in a column keyboard friendly.

To Reproduce Steps to reproduce the behavior:

1. Run npm run lint
2. The a11y lint warning appears

/Users/nicktaylor/dev/oss/connect-four/src/lib/Board.svelte
  33:3  warning  A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event  a11y-click-events-have-key-events

Expected behavior A clear and concise description of what you expected to
happen.

The lint warning

/Users/nicktaylor/dev/oss/connect-four/src/lib/Board.svelte
  33:3  warning  A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event  a11y-click-events-have-key-events

should no longer appear and a player is able to use the keyboard to add a coin to a column

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

To make this keyboard navigable, the board has to be able to receive focus and tabbing in the board should change columns. Consider focus states as well to indicate which column you're currently on.

Fix CI failing due to npm run lint failing in prebuild script

Describe the bug A clear and concise description of what the bug is.

Great work from @jdwilkin4 in #43! Love those new docs! I approved and merged it on mobile not realizing that the build was failing due to a formatting issue.

@jdwilkin4 or anyone else, feel free to grab this.

To fix this, from the root of the project, run npx prettier README.md --write.

To Reproduce Steps to reproduce the behavior:

1. Run npm run lint
2. A warning about forgetting to run prettier on the ReadME appears

Expected behavior A clear and concise description of what you expected to
happen.

No formatting errors when running npm run lint

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Create a favicon for the project

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

SvelteKit ships with a default favicon.png located at static/favicon.png. It's currently the SvelteKit logo. There are no designs for this, but a favicon related to the game of Connect Four would be great to have. Maybe the coin piece, but we leave it up to you to come up with a fun icon.

Describe the solution you'd like A clear and concise description of what you
want to happen.

A fun icon representative of the Connect Four game. Dimensions must be 128px x 128px

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Remove the Counter component from the project

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

The project got set up with Svelte, but now that the project is advancing, we no longer need the demo Counter component.

Describe the solution you'd like A clear and concise description of what you
want to happen.

Delete the src/lib/Counter.svelte file and remove the Counter component from src/App.svelte

<script lang="ts">
	import svelteLogo from './assets/svelte.svg';
-	import Counter from './lib/Counter.svelte';
</script>

<header>
	<h1>The beginnings of the classic Connect Four game.</h1>
</header>
<main>
	<div>
		<a href="https://vitejs.dev" target="_blank">
			<img src="/vite.svg" class="logo" alt="Vite Logo" />
		</a>
		<a href="https://svelte.dev" target="_blank">
			<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
		</a>
	</div>
	<h2>Vite + Svelte</h2>

	<div class="card">
-		<Counter />
	</div>

	<p>
		Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank"
			>SvelteKit</a
		>, the official Svelte app framework powered by Vite!
	</p>

	<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
</main>

<style>
	h1 {
		padding: 1rem;
		border: 2rem dotted blue;
	}

	.logo {
		height: 6em;
		padding: 1.5em;
		will-change: filter;
	}
	.logo:hover {
		filter: drop-shadow(0 0 2em #646cffaa);
	}
	.logo.svelte:hover {
		filter: drop-shadow(0 0 2em #ff3e00aa);
	}
	.read-the-docs {
		color: #888;
	}
</style>

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Update the Contributing Guide

Describe the bug A clear and concise description of what the bug is.

Documentation update required to indicate more clearly the contributing guidelines.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to
happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Remove the two coin pieces at bottom of the game page

Description

When we did the live stream with the initial work for the game, I had added two coin components at the bottom of the game page to show what they look like. These are no longer required and can be removed.

Remove the two coin components from https://github.com/nickytonline/connect-four/blob/main/src/routes/%2Bpage.svelte

<script>
	import Board from '../lib/Board.svelte';
	import Coin from '../lib/Coin.svelte';
</script>

<header>
	<h1>The beginnings of the classic Connect Four game.</h1>
</header>
<main>
	<h2>Welcome to SvelteKit</h2>
	<p>Visit <a href="https://kit.svelte.dev/">kit.svelte.dev</a> to read the documentation</p>
	<Board />
-	<Coin player={{ color: 'R' }} />
-	<Coin player={{ color: 'Y' }} />
</main>
Footer © 2022 GitHub, Inc. Footer navigation

<style>
	h1 {
		padding: 1rem;
		border: 2rem dotted blue;
	}
</style>

Style the board component

Is your feature request related to a problem? Please describe.
There is no specific design aside from, the board should be a blue like in the original game and also have white or transparent circles in each section of the grid that matches the size of a coin component. Also, the numbers for the position in the game state matrix are not necessary. These were for debugging purposes when we initially built this on the Twitch stream.

Describe the solution you'd like
The board should look nice and the coins should fit into the board itself nicely.

Describe alternatives you've considered
Using ascii art could work as well, but I think we should go with fine CSS stuff.

Additional context
It just doesn't fit at all when looking at the branch where we have a board (board-and-pieces-wip-jb / PR #18)

Create the Coin component

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

Design will come later, but for now, we have a basic stylized Coin component we need to add. A coin in Connect Four is the piece you drop in the Connect Four board.

Describe the solution you'd like A clear and concise description of what you
want to happen.

Create the src/lib/Coin.svelte file and add this as the file contents.

<script lang="ts">
	import type { Player } from '../types/GameTypes';

	export let player: Player;
</script>

<div>{player.color}</div>

<style>
	div {
		display: grid;
		place-items: center;
		font-size: 3rem;
		font-weight: bold;
		border-radius: 50%;
		border: dotted 4px #000;
		width: 100px;
		height: 100px;
	}
</style>

You will also need to create the src/types/GameTypes.d.ts file with the following contents.

export interface Player {
	color: 'R' | 'Y';
}

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature
request here.

Add support for Gitpod

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

Setting up an environment for a new contributor can be daunting. Give them an option where it's all set up for them.

Describe the solution you'd like A clear and concise description of what you
want to happen.

Add Gitpod support so they can work in the browser with a VS Code like experience

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

Codespaces is another option, but not everyone has access to it.

Additional context Add any other context or screenshots about the feature
request here.

Remove unused component reference

Describe the bug A clear and concise description of what the bug is.

I was running the linter and noticed a warning about an unused import in src/routes/+page.svelte. Remove the import Coin from '../lib/Coin.svelte'; import.

<script>
	import Board from '../lib/Board.svelte';
-	import Coin from '../lib/Coin.svelte';
</script>

<header>
	<h1>The beginnings of the classic Connect Four game.</h1>
</header>
<main>
	<h2>Welcome to SvelteKit</h2>
	<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
	<Board />
</main>
Footer © 2022 GitHub, Inc. Footer navigation

<style>
	h1 {
		padding: 1rem;
		border: 2rem dotted blue;
	}
</style>

To Reproduce Steps to reproduce the behavior:

1. Run npm run lint
2. Notice the warning in the console.

/Users/taco/dev/oss/connect-four/src/routes/+page.svelte
  3:9  warning  'Coin' is defined but never used  @typescript-eslint/no-unused-vars

Expected behavior A clear and concise description of what you expected to
happen.

No warning about an unused import

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.