newsguildny · jrapala · Nov 7, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -1,43 +1,45 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+# Disabling this since we have a site on Netlify
 
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
+# # Simple workflow for deploying static content to GitHub Pages
+# name: Deploy static content to Pages
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+# on:
+#   # Runs on pushes targeting the default branch
+#   push:
+#     branches: ["main"]
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
+#   # Allows you to run this workflow manually from the Actions tab
+#   workflow_dispatch:
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
+# # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+# permissions:
+#   contents: read
+#   pages: write
+#   id-token: write
 
-jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          # Upload entire repository
-          path: '.'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+# # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+# concurrency:
+#   group: "pages"
+#   cancel-in-progress: false
+
+# jobs:
+#   # Single deploy job since we're just deploying
+#   deploy:
+#     environment:
+#       name: github-pages
+#       url: ${{ steps.deployment.outputs.page_url }}
+#     runs-on: ubuntu-latest
+#     steps:
+#       - name: Checkout
+#         uses: actions/checkout@v4
+#       - name: Setup Pages
+#         uses: actions/configure-pages@v5
+#       - name: Upload artifact
+#         uses: actions/upload-pages-artifact@v3
+#         with:
+#           # Upload entire repository
+#           path: '.'
+#       - name: Deploy to GitHub Pages
+#         id: deployment
+#         uses: actions/deploy-pages@v4
diff --git a/src/css/style.css b/src/css/style.css
@@ -15,4 +15,62 @@ canvas {
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+.modal {
+  text-align: center;
+  position: absolute;
+  z-index: 10;
+  background-color: white;
+  border: black solid 1px;
+  padding: 2rem;
+  width: 400px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal>.image-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+#game-over {
+  display: none;
+}
+
+.button {
+  padding-inline: 1rem;
+  border: none;
+  border-radius: 5px;
+}
+
+.button:hover {
+  scale: 1.1;
+}
+
+.button:active {
+  scale: 1;
+}
+
+.primary-button {
+  background-color: green;
+  color: white;
+  font-size: 1.5rem;
+}
+
+.link-button {
+  background-color: white;
+  color: blue;
+  opacity: 0.8;
+}
+
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
 }
diff --git a/src/images/exec1.png b/src/images/exec1.png
diff --git a/src/images/exec2.png b/src/images/exec2.png
diff --git a/src/images/exec3.png b/src/images/exec3.png
diff --git a/src/images/exec4.png b/src/images/exec4.png
diff --git a/src/images/exec5.png b/src/images/exec5.png
diff --git a/src/images/exec6.png b/src/images/exec6.png
diff --git a/src/images/frog_spritesheet.png b/src/images/frog_spritesheet.png
diff --git a/src/images/grass.png b/src/images/grass.png
diff --git a/src/images/log.png b/src/images/log.png
diff --git a/src/images/scabby.png b/src/images/scabby.png
diff --git a/src/images/turtles.png b/src/images/turtles.png
diff --git a/src/index.html b/src/index.html
@@ -1,25 +1,64 @@
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>NY Frogger</title>
-    <link rel="stylesheet" href="css/style.css">
-  </head>
-  <body>
-    <div class="wrapper">
-      <h1>NY Frogger</h1>
-      <canvas id="canvas1"></canvas>
-      <canvas id="canvas2"></canvas>
-      <canvas id="canvas3"></canvas>
-      <canvas id="canvas4"></canvas>
-      <canvas id="canvas5"></canvas>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>NY Frogger</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+  <div id="instructions" class="modal">
+    <h1>NYT Striker</h1>
+    <p>
+      Help Scabby get strikers across 8th Avenue to the picket line.
+    </p>
+    <div class="image-container">
+      <img src="images/scabby.png" alt="scabby avatar" height="50px" />
+    </div>
+    <p>In addition to vehicles, avoid executives who are trying to intimidate strikers away from the picket line.</p>
+    <div class="image-container">
+      <img src="images/cab.png" alt="taxi cab" height="50px" />
+      <img src="images/exec2.png" alt="executive" height="50px" />
+    </div>
+    <p>The game speed increases with each striker you get to the picket line.</p>
+    <div class="button-container">
+      <button class="button primary-button"  >
     </div>
 
-    <script src="javascript/setup.js"></script>
-    <script src="javascript/frogger.js"></script>
-    <script src="javascript/particles.js"></script>
-    <script src="javascript/obstacles.js"></script>
-    <script src="javascript/utilities.js"></script>
+  </div>
+  <div class="modal" id="game-over">
+    <p>Nice job!</p>
+    <p>Since we have called a strike, we are asking our public supporters to boycott NYT Games as well as the NYT
+      Cooking
+      App. </p>
+    <p>The general guidance is “don't cross the picket line - break your streak with us in solidarity.”</p>
+    <p>Please also
+      consider donating to <a target="_blank" rel="noreferrer noopener"
+        href="https://www.gofundme.com/f/nyt-tech-strike-fund">our strike
+        solidarity fund</a>.</p>
+    <div class="button-container">
+      <button class="button primary-button"   Again</button>
+      <button   class="button link-button">Don't show this
+        message again</button>
+    </div>
+  </div>
+  </div>
+  <div class="wrapper">
+    <canvas id="canvas1"></canvas>
+    <canvas id="canvas2"></canvas>
+    <canvas id="canvas3"></canvas>
+    <canvas id="canvas4"></canvas>
+    <canvas id="canvas5"></canvas>
+  </div>
+
+  <script src="javascript/setup.js"></script>
+  <script src="javascript/frogger.js"></script>
+  <script src="javascript/particles.js"></script>
+  <script src="javascript/obstacles.js"></script>
+  <script src="javascript/utilities.js"></script>
+  <script src="javascript/instructions.js"></script>
+
+</body>
 
-  </body>
 </html>
diff --git a/src/javascript/frogger.js b/src/javascript/frogger.js
@@ -60,8 +60,7 @@ class Frogger {
 
   draw() {
     ctx3.fillStyle = "green"
-    ctx3.fillRect(this.x, this.y, this.width, this.height)
-    // ctx3.drawImage(froggerSprite, this.frameX * this.spriteWidth, this.frameY * this.spriteHeight, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width * 2, this.height * 2)
+    ctx3.drawImage(scabby, this.x, this.y, this.width, this.height)
   }
 
   jump() {

diff --git a/src/javascript/instructions.js b/src/javascript/instructions.js
@@ -0,0 +1,3 @@
+function closeModal() {
+  [...document.getElementsByClassName("modal")].forEach(node => node.style.display = "none")
+}