diff --git a/.github/workflows/README.md b/.github/workflows/README.md new file mode 100644 index 0000000..2b4de73 --- /dev/null +++ b/.github/workflows/README.md @@ -0,0 +1,151 @@ +# Deploy CDK Stack to Production + +This GitHub Actions workflow automates the deployment of an AWS CDK stack to a development and production environment. It is triggered when changes are pushed to the `develop` or `main` branch. The workflow sets up AWS credentials, installs dependencies, and deploys the CDK stack. + +## Workflow Details + +### Workflow Name: Deploy-CDK-Stack/Dev + +- **Run Name**: Running ${{github.workflow}} off of ${{ github.ref_name }} + +### Trigger + +This workflow is triggered on pushes to the `develop` branch. + +```yaml +on: + push: + branches: + - develop +``` + +### Permissions + +This workflow requires specific permissions: + +- `id-token: write`: This is required for requesting the JWT. +- `contents: read`: This is required for actions/checkout. + +### Jobs + +#### Deploy + +- **Name**: Deploy Development +- **Uses**: `./.github/workflows/deploy.yaml` +- **Environment**: development + +### Workflow Name: Deploy-CDK-Stack/Prod + +- **Run Name**: Running ${{github.workflow}} off of ${{ github.ref_name }} + +### Trigger + +This workflow is triggered on pushes to the `main` branch. + +```yaml +on: + push: + branches: + - main +``` + +### Permissions + +This workflow requires specific permissions: + +- `id-token: write`: This is required for requesting the JWT. +- `contents: read`: This is required for actions/checkout. + +### Jobs + +#### Deploy + +- **Name**: Deploy Production +- **Uses**: `./.github/workflows/deploy.yaml` +- **Environment**: production + +## CDK Deployment Workflow + +### Workflow Name: Deploy + +This workflow is designed to be called by other workflows and is used for deploying to different environments. It sets up AWS credentials, installs dependencies, and deploys the CDK stack based on the specified environment. + +### Trigger + +This workflow is meant to be called by other workflows using the `workflow_call` event. It takes an `environment` input parameter. + +```yaml +on: + workflow_call: + inputs: + environment: + required: true + type: string + description: "The GitHub environment to deploy against." +``` + +### Permissions + +This workflow also requires specific permissions: + +- `id-token: write`: Required for requesting the JWT. +- `contents: read`: Required for actions/checkout. + +### Job Details + +#### Deploy + +- **Name**: Deploy to ${{ inputs.environment }} +- **Environment**: ${{ inputs.environment }} +- **Environment Variables**: + - `ENVIRONMENT`: ${{ vars.ENVIRONMENT }} + - `CDK_DEPLOY_ACCOUNT`: ${{ vars.ACCOUNT_ID }} + - `CDK_DEPLOY_REGION`: ${{ vars.REGION }} +- **Runs On**: ubuntu-latest +- **Defaults**: + - Working Directory: `src` + +#### Steps + +1. **Checkout Repository**: This step checks out the repository to the GitHub Actions runner. + + ```yaml + - name: Checkout + uses: actions/checkout@v3 + ``` + +2. **Configure AWS Credentials**: This step configures AWS credentials for the specified environment. + + ```yaml + - name: Configure AWS Credentials ${{ inputs.environment }} + uses: aws-actions/configure-aws-credentials@v2 + with: + role-to-assume: arn:aws:iam::${{ vars.ACCOUNT_ID }}:role/${{ vars.DEPLOYMENT_ROLE}} + role-session-name: cdk-deployment-${{ vars.REGION }}-${{ vars.ACCOUNT_ID }} + aws-region: ${{ vars.REGION }} + ``` + +3. **Install Dependencies**: This step installs necessary dependencies, including AWS CDK and Python requirements. + + ```yaml + - name: Install Dependencies + run: | + npm install -g aws-cdk + pip install -r requirements.txt + ``` + +4. **CDK Synth**: This step runs `cdk synth` to generate CloudFormation templates. + + ```yaml + - name: CDK Synth + run: | + cdk synth + ``` + +5. **Deploy CDK Stack**: This step deploys the CDK stack using `cdk deploy` with no approval required. + + ```yaml + - name: Deploy NumberGuessingGame + run: | + cdk deploy --app 'cdk.out/' --all --require-approval never + ``` diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml new file mode 100644 index 0000000..3f514ae --- /dev/null +++ b/.github/workflows/deploy.yaml @@ -0,0 +1,52 @@ +name: Deploy + +on: + workflow_call: + inputs: + environment: + required: true + type: string + description: "The github environment to deploy against." + +permissions: + id-token: write # This is required for requesting the JWT + contents: read # This is required for actions/checkout + +jobs: + deploy: + name: Deploy to ${{ inputs.environment }} + environment: ${{ inputs.environment }} + env: + ENVIRONMENT: ${{ vars.ENVIRONMENT }} + CDK_DEPLOY_ACCOUNT: ${{ vars.ACCOUNT_ID }} + CDK_DEPLOY_REGION: ${{ vars.REGION }} + runs-on: ubuntu-latest + defaults: + run: + working-directory: src + + steps: + # Checkout the repository to the GitHub Actions runner + - name: Checkout + uses: actions/checkout@v3 + + # Configure AWS Creds + - name: Configure AWS Credentials ${{ inputs.environment }} + uses: aws-actions/configure-aws-credentials@v2 + with: + role-to-assume: arn:aws:iam::${{ vars.ACCOUNT_ID }}:role/${{ vars.DEPLOYMENT_ROLE}} + role-session-name: cdk-deployment-${{ vars.REGION }}-${{ vars.ACCOUNT_ID }} + aws-region: ${{ vars.REGION }} + + - name: Install Dependencies + run: | + npm install -g aws-cdk + pip install -r requirements.txt + + - name: CDK Synth + run: | + cdk synth + + - name: Deploy NumberGuessingGame + run: | + cdk deploy --app 'cdk.out/' --all --require-approval never diff --git a/.github/workflows/deploy_dev.yaml b/.github/workflows/deploy_dev.yaml new file mode 100644 index 0000000..743684d --- /dev/null +++ b/.github/workflows/deploy_dev.yaml @@ -0,0 +1,20 @@ +name: Deploy-CDK-Stack/Dev +run-name: Running ${{github.workflow}} off of ${{ github.ref_name }} + +on: + push: + branches: + - develop + +permissions: + id-token: write # This is required for requesting the JWT + contents: read # This is required for actions/checkout + +jobs: + deploy: + name: Deploy Development + uses: ./.github/workflows/deploy.yaml + with: + environment: development + + \ No newline at end of file diff --git a/.github/workflows/deploy_prod.yaml b/.github/workflows/deploy_prod.yaml new file mode 100644 index 0000000..01b750a --- /dev/null +++ b/.github/workflows/deploy_prod.yaml @@ -0,0 +1,20 @@ +name: Deploy-CDK-Stack/Prod +run-name: Running ${{github.workflow}} off of ${{ github.ref_name }} + +on: + push: + branches: + - main + +permissions: + id-token: write # This is required for requesting the JWT + contents: read # This is required for actions/checkout + +jobs: + deploy: + name: Deploy Production + uses: ./.github/workflows/deploy.yaml + with: + environment: production + + \ No newline at end of file diff --git a/src/app.py b/src/app.py index cf2488c..070e6ae 100644 --- a/src/app.py +++ b/src/app.py @@ -24,7 +24,7 @@ def add_tags( cloudfront_region = "us-east-1" environment = os.environ.get("ENVIRONMENT") -environment = "production" +# environment = "development" environment_config = app.node.try_get_context(environment) account_id = environment_config.get("account_id") region = environment_config.get("region") diff --git a/src/assets/about_us.html b/src/assets/about_us.html new file mode 100644 index 0000000..0b7f705 --- /dev/null +++ b/src/assets/about_us.html @@ -0,0 +1,72 @@ + + + + + + + + + + About Us | Number Guessing Game + + + + + + +
+ +
+

About Us

+ +
+ + +
+
+

Our Mission

+

+ Our mission is to provide a fun and challenging experience for people who love numbers and puzzles. + We aim to improve cognitive skills and offer a delightful way to pass the time. +

+
+ +
+

The Game

+

+ The Number Guessing Game is designed to test your number guessing skills. You have to guess a + 3-digit + number within a limited number of attempts. Various clues will guide you to the correct number, + making + each game a thrilling experience. +

+
+ +
+

The Team

+

+ It's just me. Cullan Carey. See everything about me here. + Cullan Carey Avatar +

+
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index 137f0a2..f9aa74d 100644 --- a/src/assets/css/styles.css +++ b/src/assets/css/styles.css @@ -3,7 +3,13 @@ flex-direction: column; align-items: center; justify-content: center; - min-height: 100vh; +/* min-height: 100vh; */ +} + +.scrollable-content { + max-height: 70vh; + max-width: 80vw; + overflow-y: auto; } body { @@ -15,7 +21,55 @@ body { justify-content: center; align-items: center; min-height: 100vh; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; +} + +/* New Styles for About Us Page */ +header { + width: 100%; + padding: .5em; + color: #ff4500; + text-align: center; + font-size: .9em; +} + +nav a { + margin: 0 1em; + color: #483d8b; + text-decoration: none; +} + +#main-content { + padding: 2em; + background-color: #ffffff; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); + border-radius: 1em; + margin: 1em; +} + +h2 { + font-size: 1.2em; + color: #ff4500; + margin-bottom: 1em; +} + +p { + font-size: 1em; + color: #483d8b; + line-height: 1.5; +} + +li { + font-size: .9em; + color: #483d8b; + line-height: 1.2; +} + +footer { + padding: 1em; + color: white; + text-align: center; } .container { @@ -24,26 +78,32 @@ body { border-radius: 1em; box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); text-align: center; - max-width: 100%; - max-height: 90vh; + max-width: inherit; + max-height: inherit; box-sizing: border-box; } +.content { + max-height: inherit; + max-width: inherit; +} + .title { color: #ff4500; margin-bottom: 0.5em; text-shadow: 0.1em 0.1em 0.1em #aaa; font-size: 1.5em; + text-align: center } .description, .guesses-left, -.result-text, -.user-stats p { +.result-text { font-size: 0.8em; color: #483d8b; margin-bottom: 0.5em; + text-align: center } .message { @@ -59,9 +119,7 @@ body { .input-area, .keyboard-keys, -.feedback-container, -.color-states, -.game-stats { +.feedback-container { display: flex; justify-content: space-around; align-items: center; @@ -69,11 +127,25 @@ body { gap: 0.5em; } -.feedback-container, -.game-stats { - width: 45vw; +/* Game Statistics */ + +.game-stats .title { + text-align: left; + font-size: 1em; +} + +.game-stats .stat-item { + display: flex; + align-items: center; + font-size: 0.8em } +.stat-value { + padding-left: .5em; +} + +/* Game Statistics */ + .guess-input { padding: 0.5em; border: 0.05em solid #ddd; @@ -83,37 +155,60 @@ body { flex: 1; } -.submit-button, -#resetButton { +/* Buttons */ + +.buttons { + display: -webkit-inline-box; +} + +.reset-button { padding: 0.5em 1em; + margin: auto; color: white; border: none; + font-size: .8em; border-radius: 0.5em; cursor: pointer; + background-color: #20b2aa; + display: none; box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.1); } -.submit-button { - background-color: #ff69b4; +.reset-button:hover { + filter: brightness(0.9); } -.submit-button:disabled { - background-color: #eee; - color: #ccc; - cursor: not-allowed; - box-shadow: none; +.clear-stats-button { + padding: 0.5em 1em; + margin: auto; + color: white; + border: none; + font-size: .8em; + border-radius: 0.5em; + cursor: pointer; + background-color: #20b2aa; + box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.1); } -.submit-button:hover, -#resetButton:hover { +.clear-stats-button:hover { filter: brightness(0.9); } -#resetButton { - background-color: #20b2aa; +.share-button { + margin: auto; + padding: 0.5em 1em; + color: white; + font-size: .8em; + background-color: #4CAF50; /* or any other color you like */ + border: none; + border-radius: 0.5em; + cursor: pointer; display: none; + box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.1); } +/* Buttons */ + .keyboard-button, .circle { width: 2.5em; @@ -157,11 +252,12 @@ body { box-shadow: none; } -.user-stats, .color-states { + display: flex; + justify-content: space-around; + align-items: center; margin-top: 0.5em; - text-align: left; - font-size: 0.9em; + font-size: 0.8em; } .color-key span { @@ -169,87 +265,43 @@ body { height: 1.2em; border-radius: 50%; margin-right: 0.5em; - display: flex; -} - -#shareButton { - display: none; - margin: auto; - padding: 0.5em 1em; - color: white; - background-color: #4CAF50; /* or any other color you like */ - border: none; - border-radius: 0.5em; - cursor: pointer; - box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.1); + display: -webkit-inline-box; } -/* Additional rules */ -.stat-title { - display: inline-block; - width: 150px; -} -/* Your existing CSS */ @media (max-width: 375px) { -/* Adjustments for 375x667 screen */ - -/* Text size changes */ -.description, -.guesses-left, -.result-text, -.user-stats p { - font-size: 0.6em; -} -.title { - font-size: 1.2em; -} - -.color-states { - margin-top: auto; - text-align: left; - font-size: 0.6em; -} - -.color-key span { - width: 0.8em; - height: 0.8em; - border-radius: 50%; -} - -/* Feedback and game-stats container */ -.feedback-container, -.game-stats { - width: 100%; - font-size: 0.6em; -} - -/* Main container */ -.container { - padding: 0.4em; - max-width: 100%; - max-height: 100%; -} - -/* Buttons and input fields */ -.submit-button, -#resetButton, -.guess-input { - padding: 0.3em; -} + /* Adjustments for 375x667 screen */ + + .container .title { + font-size: 1.5em; + } -/* Number and circle buttons */ -.keyboard-button, -.circle { - width: 1.5em; - height: 1.5em; -} + .container .color-states { + display: flex; + justify-content: space-around; + align-items: center; + font-size: 0.5em; + } -/* Additional rules */ -.stat-title { - width: auto; -} + /* Main container */ + .container { + padding: 0.4em; + max-width: inherit; + max-height: inherit; + } + + /* Buttons */ + + .buttons { + font-size: .8em; + } + + .scrollable-content { + max-height: 50vh; + max-width: 80vw; + overflow-y: auto; + } } @media (max-width: 428px) and (max-height: 926px) { @@ -260,8 +312,7 @@ body { /* Text size changes */ .description, .guesses-left, - .result-text, - .user-stats p { + .result-text { font-size: 0.7em; } .title { @@ -295,7 +346,7 @@ body { } /* Buttons and input fields */ - .submit-button, + #resetButton, .guess-input { padding: 0.4em; @@ -307,13 +358,30 @@ body { width: 1.5em; height: 1.5em; } - - /* Additional rules */ - .stat-title { - width: auto; - } } +/* Image */ + +.image { +/* border-radius: 5px; */ +/* border: 0; */ +/* display: inline; */ +/* position: fixed; */ +} + + .image img { +/* border-radius: 5px; */ + display: flex; + } + .image.avatar { +/* border-radius: 50%; */ +/* overflow: hidden; */ + } + .image.avatar img { +/* border-radius: 100%; */ +/* display: flex; */ + width: 10vw; + } \ No newline at end of file diff --git a/src/assets/error.html b/src/assets/error.html index 360a9e9..7301382 100644 --- a/src/assets/error.html +++ b/src/assets/error.html @@ -1,48 +1,44 @@ - + - 404 Not Found - + + + + 404 Not Found | Number Guessing Game + - -

404

-

Oops! Page not found.

-

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.

- Go Back Home - +
+ + +
+

404 Not Found

+ +
+ + +
+

Oops! Page Not Found

+

The page you are looking for might have been removed, had its name changed, or is + temporarily unavailable.

+ Go Back Home +
+ + + + +
\ No newline at end of file diff --git a/src/assets/images/avatar.jpg b/src/assets/images/avatar.jpg new file mode 100644 index 0000000..94556c3 Binary files /dev/null and b/src/assets/images/avatar.jpg differ diff --git a/src/assets/index.html b/src/assets/index.html index b86e456..3865234 100644 --- a/src/assets/index.html +++ b/src/assets/index.html @@ -16,8 +16,17 @@
-
+ +

Number Guessing Game

+ +
+

Guess a 3-digit number.

@@ -77,38 +86,46 @@

Number Guessing Game

-

Game Statistics

+

Game Statistics

- Games Played: +
Games Played:
0
- Games Won: +
Games Won:
0
- Percentage Win: +
Percentage Win:
0%
- Current Streak: +
Current Streak:
0
- Max Streak: +
Max Streak:
0
-
Guesses Left: 6
- - - - +
+ + + +

+
+ + diff --git a/src/assets/privacy_policy.html b/src/assets/privacy_policy.html index 18d8cc4..06f5816 100644 --- a/src/assets/privacy_policy.html +++ b/src/assets/privacy_policy.html @@ -2,61 +2,122 @@ - Privacy Policy + + + + + + Privacy Policy | Number Guessing Game + + + +
-

Privacy Policy for NumberGuessingGame

+ +
+

Privacy Policy

+ +
+
+

Privacy Policy for NumberGuessingGame

-

Last Updated: 10/11/2023

+

Last Updated: 10/20/2023

-

Introduction

-

Welcome to the Privacy Policy for NumberGuessingGame. We are committed to protecting your personal information - and your right to privacy. If you have any questions or concerns about our policy, or our practices with regards - to your personal information, please contact us at cullancarey@yahoo.com.

+
+

Introduction

+

Welcome to the Privacy Policy for NumberGuessingGame. We are committed to protecting your personal + information + and your right to privacy. If you have any questions or concerns about our policy, or our practices + with regards + to your personal information, please contact us at cullancarey@gmail.com.

+
-

What Information We Collect

- + +

What Information We Collect

+

+ Personal Data: We collect personal information that you provide to us such as + name, email + address, contact information, passwords, and security data. +

+

+ Usage Data: We collect data automatically when you visit our website including + your IP + address, browser type, the pages you visited, and date and time of your visit. +

+ -

How We Use Your Information

-

We use your personal data for the following purposes:

- + +

How We Use Your Information

+

We use your personal data for the following purposes:

+ + -

Sharing Your Information

-

We may share your information with third-party service providers for the purpose of fulfilling our business - operations such as payment processing, data analysis, and email delivery.

+ +

Sharing Your Information

+

We may share your information with third-party service providers for the purpose of fulfilling our + business + operations such as payment processing, data analysis, and email delivery.

+ -

Cookies and Tracking Technologies

-

We may use cookies, web beacons, and similar tracking technologies to collect and store your information.

+ +

Cookies and Tracking Technologies

+

We may use cookies, web beacons, and similar tracking technologies to collect and store your + information.

+ -

Your Privacy Rights

-

You have the right to access, update or delete your personal information that we hold. To exercise any of these - rights, please contact us at cullancarey@yahoo.com.

+ +

Your Privacy Rights

+

You have the right to access, update or delete your personal information that we hold. To exercise + any of these + rights, please contact us at cullancarey@gmail.com.

+ -

Security of Your Information

-

We use various security protocols and measures to protect your personal information. However, no method of data - transmission is 100% secure, and we cannot guarantee its absolute security.

+ +

Security of Your Information

+

We use various security protocols and measures to protect your personal information. However, no + method of data + transmission is 100% secure, and we cannot guarantee its absolute security.

+ -

Changes to This Privacy Policy

-

We reserve the right to modify this privacy policy at any time. Any changes will be updated on this page.

- -

Contact Us

-

If you have any questions or concerns about this privacy policy, you may contact us:

- + +

Changes to This Privacy Policy

+

We reserve the right to modify this privacy policy at any time. Any changes will be updated on this + page.

+ + +

Contact Us

+

If you have any questions or concerns about this privacy policy, you may contact us:

+ + +
+ + +
\ No newline at end of file diff --git a/src/assets/terms_of_service.html b/src/assets/terms_of_service.html new file mode 100644 index 0000000..746b4ae --- /dev/null +++ b/src/assets/terms_of_service.html @@ -0,0 +1,76 @@ + + + + + + + + + Terms of Service | Number Guessing Game + + + + + + +
+ + +
+

Terms of Service

+ +
+ + +
+

Terms of Service for NumberGuessingGame

+

Last Updated: 10/20/2023

+ +
+

Acceptance of Terms

+

By using this website, you agree to comply with and be bound by these terms of service.

+
+ +
+

Modifications to Terms

+

We reserve the right to modify these terms at any time. Any changes will be updated on this page.

+
+ +
+

Use of the Website

+

Users are expected to utilize this website in a manner consistent with any and all applicable laws. +

+
+ +
+

Disclaimer

+

All information on this website is provided "as is," without any warranties, either express or + implied.

+
+ +
+

Contact Us

+

If you have any questions or concerns about these terms, you may contact us:

+ +
+
+ + + + +
+ + + \ No newline at end of file diff --git a/src/assets/test.html b/src/assets/test.html deleted file mode 100644 index ef4aeb2..0000000 --- a/src/assets/test.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - - - Number Guessing Game - - - - - - -
-
-

Number Guessing Game

-

Guess a 3-digit number.

-
-
- -
- -
- - -
-

Color States:

-
- Correct Digit -
-
- Correct Digit in Wrong Position -
-
- Incorrect Digit -
-
-
- - -
-
- - - - - - -
-
-

Game Statistics

-
- Games Played: - 0 -
-
- Games Won: - 0 -
-
- Percentage Win: - 0% -
-
- Current Streak: - 0 -
-
- Max Streak: - 0 -
-
-
- -
Guesses Left: 6
- - - - -

-
-
-
-
- - - - \ No newline at end of file diff --git a/src/cdk.context.json b/src/cdk.context.json index 25b8296..534ea46 100644 --- a/src/cdk.context.json +++ b/src/cdk.context.json @@ -5,6 +5,12 @@ "domain_name": "numberguessinggame.com", "file_path": "assets" }, + "development": { + "account_id": "693590665244", + "region": "us-east-2", + "domain_name": "dev.numberguessinggame.com", + "file_path": "assets" + }, "hosted-zone:account=151676528673:domainName=numberguessinggame.com:region=us-east-1": { "Id": "/hostedzone/Z01007781AKYASMM9GORA", "Name": "numberguessinggame.com." @@ -13,4 +19,4 @@ "Id": "/hostedzone/Z01007781AKYASMM9GORA", "Name": "numberguessinggame.com." } -} +} \ No newline at end of file