Merge pull request #46 from skedwards88/more-games

Display images of more games

.github/workflows/deploy.yml

@@ -45,6 +45,9 @@ jobs:
       - name: Bump version
         run: npm version patch
 
+      - name: Install webp compression tool
+        run: sudo apt-get install -y webp
+
       - name: Install requirements
         run: npm ci
 

README.md

@@ -22,4 +22,4 @@ To run locally with live reloading and no service worker, run `npm run dev`. (If
 
 To run locally and register the service worker, run `npm start`.
 
-To deploy, push to `main` or manually trigger the GitHub Actions `deploy.yml` workflow.
+To deploy, push to `main` or manually trigger the GitHub Actions `deploy.yml` workflow. During deployment, the prebuild script will compress some png images into the webp format. You can also compress these images by running `npm run compressImages` if you have the [webp compression tool](https://developers.google.com/speed/webp/docs/precompiled) installed.

compressImages.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# Directories that include images to compress
+declare -a dirs=("src/images/moreGames")
+
+# Loop over the directories
+for dir in "${dirs[@]}"; do
+  # Loop over the files in the directory
+  for file in $dir/*; do
+    # Get the file extension
+    extension="${file##*.}"
+    # Compress the file if it is a png
+    if [ "$extension" = "png" ]; then
+      cwebp -q 75 $file -o ${dir/compressed}/$(basename $file '.png').webp
+    fi
+  done
+done

package.json

@@ -5,6 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
+    "compressImages": "./compressImages.sh",
+    "prebuild": "npm run compressImages",
     "build": "webpack",
     "dev": "webpack-dev-server --mode development",
     "start": "webpack-dev-server",

src/components/MoreGames.js

@@ -1,16 +1,37 @@
 import React from "react";
 
 export default function MoreGames({setDisplay}) {
+  // To add a new game:
+  // - add it to the list here
+  // - add a png screenshot under images/moreGames
+  // - to preview locally, run `npm run compressImages` to generate a webp version of the png (this will also be done during deployment)
+  // - reference the webp screenshot in src/styles/MoreGames.css
+  const games = {
+    lexlet: "https://lexlet.com",
+    blobble: "https://skedwards88.github.io/blobble/",
+    wordfall: "https://skedwards88.github.io/wordfall/",
+    gribbles: "https://skedwards88.github.io/gribbles/",
+    logicGrid: "https://skedwards88.github.io/logic-grid/",
+  };
+
+  const gameElements = Object.keys(games).map((game, index) => (
+    <a
+      key={index}
+      href={games[game]}
+      className={`game-image ${game}`}
+      role="img"
+      aria-label={`Screenshot of the ${game} game.`}
+    ></a>
+  ));
+
   return (
     <div className="App info">
       <div className="infoText">
-        {`Want more games? Check out `}
-        <a href="https://lexlet.com">Lexlet</a>
-        {" and "}
-        <a href="https://skedwards88.github.io/blobble/">Blobble</a>
-        {" or see all of our puzzle games "}
+        {`Want more games? Check these out, or see all of our puzzle games `}
         <a href="https://skedwards88.github.io/">here</a>
         {`. `}
+
+        <div id="moreGames">{gameElements}</div>
       </div>
       <button className="close" onClick={() => setDisplay("game")}>
         Close

src/index.js

@@ -6,6 +6,7 @@ import "./styles/ControlBar.css";
 import "./styles/Settings.css";
 import "./styles/Rules.css";
 import "./styles/Stats.css";
+import "./styles/MoreGames.css";
 import "./styles/LargeScreen.css";
 
 if (process.env.NODE_ENV !== "development" && "serviceWorker" in navigator) {

src/styles/LargeScreen.css

@@ -89,6 +89,12 @@
   #rulesText {
     width: 50vw;
   }
+
+  #moreGames .game-image {
+    margin: 2vw;
+    width: 20vw;
+    height: 35vw;
+  }
 }
 
 /* Large screen, portrait */
@@ -112,4 +118,10 @@
     max-width: 80vw;
     justify-self: center;
   }
+
+  #moreGames .game-image {
+    margin: 2vw;
+    width: 20vw;
+    height: 35vw;
+  }
 }

src/styles/MoreGames.css

@@ -0,0 +1,36 @@
+#moreGames {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.game-image {
+  margin: 2vw;
+  width: 40vw;
+  height: 70vw;
+  background-size: cover;
+  background-position: center;
+  border: 1px solid var(--light-color);
+  border-radius: 5%;
+}
+
+.blobble {
+  background-image: url("../images/moreGames/blobble.webp");
+}
+
+.lexlet {
+  background-image: url("../images/moreGames/lexlet.webp");
+}
+
+.wordfall {
+  background-image: url("../images/moreGames/wordfall.webp");
+}
+
+.gribbles {
+  background-image: url("../images/moreGames/gribbles.webp");
+}
+
+.logicGrid {
+  background-image: url("../images/moreGames/logicGrid.webp");
+}