Lesson Cards

app/Components/Home/CardImages/to_grayscale.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# Get a list of all files in the current directory
+files=$(ls)
+
+# Iterate over the list of files
+for file in $files; do
+  # Check if the file is a regular file and if the filename ends in .png
+  # If both conditions are true, convert the file to grayscale (using ImageMagick)
+  if [[ -f $file && "$file" =~ \.png$ ]]; then
+    convert $file -colorspace Gray "Learned/$file"
+  fi
+done

app/Components/Home/CardImages/to_locked.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Get a list of all files in the Learned directory
+files=$(ls Learned)
+
+# Iterate over the list of files
+for file in $files; do
+  # Paste the lock in the center of the image (using ImageMagick)
+  convert "Learned/$file" -gravity center lock.svg -composite "Locked/$file"
+done

app/Components/Home/Cards.ts

@@ -0,0 +1,45 @@
+export const CARD_WIDTH: number = 300;
+const CARD_HEIGHT: number = 600;
+export const CARD_PADDING: number = 20;
+export const CARD_IMAGE_WIDTH: number = (CARD_WIDTH * 2) / 3;
+export const CARD_IMAGE_HEIGHT: number = CARD_HEIGHT / 2;
+
+/**
+ * Given window width calculates how many cards should be on each row
+ * @param width - window width
+ * @param count - number of cards
+ * @returns number of cards that can fit on each row
+ */
+export function calculateCardsPerRow(width: number, count: number): number {
+  let columnCount: number = Math.floor(width / (CARD_WIDTH + 100));
+  // Decrease the number of columns to the smallest number that is greater than or equal to the number of rows
+  while (columnCount - 1 >= Math.ceil(count / (columnCount - 1))) {
+    columnCount--;
+  }
+  return columnCount;
+}
+
+export type difficulty =
+  | "Very Easy"
+  | "Easy"
+  | "Intermediate"
+  | "Hard"
+  | "Very Hard";
+
+/**
+ * Given a difficulty returns the corresponding color
+ */
+export function getDifficultyColor(difficulty: difficulty): string {
+  switch (difficulty) {
+    case "Very Easy":
+      return "#4CBB17";
+    case "Easy":
+      return "#7CFC00";
+    case "Intermediate":
+      return "#FFFF00";
+    case "Hard":
+      return "#FFA500";
+    default:
+      return "#FF0000";
+  }
+}

app/Components/Home/DrillPanel.tsx

@@ -3,6 +3,15 @@ import React from "react";
 import { View, Image, TouchableOpacity, ImageURISource } from "react-native";
 import { Card, Text } from "react-native-paper";
 import { sudokuStrategyArray } from "sudokuru";
+import {
+  CARD_IMAGE_HEIGHT,
+  CARD_IMAGE_WIDTH,
+  CARD_PADDING,
+  CARD_WIDTH,
+  calculateCardsPerRow,
+  difficulty,
+  getDifficultyColor,
+} from "./Cards";
 
 let drillStrategies: sudokuStrategyArray = [
   "NAKED_SINGLE",
@@ -18,25 +27,18 @@ let drillStrategies: sudokuStrategyArray = [
 ];
 
 let drillImages: ImageURISource[] = [
-  require("./DrillCardImages/NAKED_SINGLE.png"),
-  require("./DrillCardImages/NAKED_PAIR.png"),
-  require("./DrillCardImages/NAKED_TRIPLET.png"),
-  require("./DrillCardImages/NAKED_QUADRUPLET.png"),
-  require("./DrillCardImages/HIDDEN_SINGLE.png"),
-  require("./DrillCardImages/HIDDEN_PAIR.png"),
-  require("./DrillCardImages/HIDDEN_TRIPLET.png"),
-  require("./DrillCardImages/HIDDEN_QUADRUPLET.png"),
-  require("./DrillCardImages/POINTING_PAIR.png"),
-  require("./DrillCardImages/POINTING_TRIPLET.png"),
+  require("./CardImages/NAKED_SINGLE.png"),
+  require("./CardImages/NAKED_PAIR.png"),
+  require("./CardImages/NAKED_TRIPLET.png"),
+  require("./CardImages/NAKED_QUADRUPLET.png"),
+  require("./CardImages/HIDDEN_SINGLE.png"),
+  require("./CardImages/HIDDEN_PAIR.png"),
+  require("./CardImages/HIDDEN_TRIPLET.png"),
+  require("./CardImages/HIDDEN_QUADRUPLET.png"),
+  require("./CardImages/POINTING_PAIR.png"),
+  require("./CardImages/POINTING_TRIPLET.png"),
 ];
 
-type drillDifficulty =
-  | "Very Easy"
-  | "Easy"
-  | "Intermediate"
-  | "Hard"
-  | "Very Hard";
-
 /**
  * Returns the string converted to a title format i.e. replaces _ with spaces and capitalizes only the first letter of each word
  * @param str - the string to convert
@@ -55,48 +57,37 @@ const DrillPanel = (props: any) => {
 
   let drillButtonArray = [];
   let subArray = [];
-  const CARD_WIDTH: number = 300;
-  const CARD_HEIGHT: number = 600;
-  let columnCount: number = Math.floor(props.width / (CARD_WIDTH + 100));
-  // Decrease the number of columns to the smallest number that is greater than or equal to the number of rows
-  while (
-    columnCount - 1 >=
-    Math.ceil(drillStrategies.length / (columnCount - 1))
-  ) {
-    columnCount--;
-  }
+  let columnCount: number = calculateCardsPerRow(
+    props.width,
+    drillStrategies.length
+  );
   for (let i = 0; i < drillStrategies.length; i++) {
     let img: ImageURISource = drillImages[i];
-    let difficulty: drillDifficulty, difficultyColor: string;
+    let difficulty: difficulty;
     switch (drillStrategies[i]) {
       case "NAKED_SINGLE":
         difficulty = "Very Easy";
-        difficultyColor = "#4CBB17";
         break;
       case "NAKED_PAIR":
         difficulty = "Easy";
-        difficultyColor = "#7CFC00";
         break;
       case "NAKED_TRIPLET":
       case "NAKED_QUADRUPLET":
         difficulty = "Intermediate";
-        difficultyColor = "#FFFF00";
         break;
       case "HIDDEN_SINGLE":
         difficulty = "Hard";
-        difficultyColor = "#FFA500";
         break;
       default:
         difficulty = "Very Hard";
-        difficultyColor = "#FF0000";
         break;
     }
+    let difficultyColor: string = getDifficultyColor(difficulty);
     subArray.push(
       <View
         style={{
           width: CARD_WIDTH,
-          paddingHorizontal: 20,
-          paddingVertical: 20,
+          padding: CARD_PADDING,
         }}
       >
         <TouchableOpacity
@@ -123,8 +114,8 @@ const DrillPanel = (props: any) => {
             <Image
               source={img}
               style={{
-                width: (CARD_WIDTH * 2) / 3,
-                height: CARD_HEIGHT / 2,
+                width: CARD_IMAGE_WIDTH,
+                height: CARD_IMAGE_HEIGHT,
                 resizeMode: "contain",
                 alignSelf: "center",
               }}