9 |
18 | );
19 | };
20 |
21 | export default ErrorPage;
22 |
--------------------------------------------------------------------------------
/src/client/scss/_base.scss:
--------------------------------------------------------------------------------
1 | *,
2 | ::after,
3 | ::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | // Font import
8 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400&family=Roboto:ital,wght@0,100;0,300;0,400;1,300;1,400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");
9 |
10 | html {
11 | background-color: $bodyColorTransparent;
12 | min-width: 250px;
13 | }
14 |
15 | body {
16 | min-height: 100vh;
17 | margin: 0;
18 | background-image: radial-gradient(ellipse at top left, $bodyColor, transparent 100%);
19 | font-family: "Roboto", sans-serif;
20 | // font-family:'Lucinda Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
21 | // font-family: 'Rubik', sans-serif;
22 | color: $textColor;
23 | }
24 |
25 | p {
26 | margin: 0;
27 | }
28 |
--------------------------------------------------------------------------------
/src/client/shared-components/SiteInfo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const SiteInfo = () => {
4 | return (
5 | Hey there, you look a little lost. Want some help getting back home?
10 |11 | Error:{' '} 12 | {error 13 | ? error.message 14 | : 'A sample error message that could be much longer than this. It could go on for several lines. It could keep going forever and ever and ever.'} 15 |
16 | Take me home! 17 |
6 |
17 | );
18 | };
19 |
20 | export default SiteInfo;
21 |
--------------------------------------------------------------------------------
/src/server/routes/puzzleRouter.ts:
--------------------------------------------------------------------------------
1 | import express, { Request, Response } from 'express';
2 | const puzzleRouter = express.Router();
3 | import userController from '../controllers/userController';
4 | import puzzleController from '../controllers/puzzleController';
5 |
6 | puzzleRouter.get('/:puzzleNumber',
7 | puzzleController.getPuzzleByNumber,
8 | (req: Request, res: Response) => {
9 | res.status(200).json(res.locals.frontendData);
10 | }
11 | );
12 |
13 | puzzleRouter.post('/get-next-puzzle-for-user',
14 | userController.getUser,
15 | puzzleController.getNextPuzzle,
16 | (req: Request, res: Response) => {
17 | res.status(200).json(res.locals.frontendData);
18 | }
19 | );
20 |
21 | puzzleRouter.post('/get-next-puzzle-for-guest',
22 | puzzleController.getNextPuzzle,
23 | (req: Request, res: Response) => {
24 | res.status(200).json(res.locals.frontendData);
25 | }
26 | );
27 |
28 | export default puzzleRouter;
29 |
--------------------------------------------------------------------------------
/src/client/scss/modules/_puzzle-select-menu.scss:
--------------------------------------------------------------------------------
1 | .puzzle-select-menu {
2 | @include l-flex-column-align-center;
3 | @include l-menu-border;
4 | margin: 0 8px;
5 | padding: 0 10px 10px;
6 |
7 | &__section {
8 | @include l-flex-column-align-center;
9 | margin: 0 10px;
10 | max-width: 265px;
11 |
12 | h3 {
13 | margin-bottom: 10px;
14 | text-align: center;
15 | }
16 |
17 | p {
18 | text-align: center;
19 | }
20 |
21 | button {
22 | font-size: 15px;
23 | border-radius: 3px;
24 | border-width: 1px;
25 | }
26 | }
27 | }
28 |
29 | .puzzle-select-by-number {
30 | display: flex;
31 | flex-wrap: wrap;
32 | justify-content: center;
33 |
34 | input {
35 | margin: 5px;
36 | height: 25px;
37 | width: 120px;
38 | text-align: center;
39 | border-radius: 5px;
40 | border-width: 1px;
41 | }
42 |
43 | button {
44 | margin: 5px;
45 | }
46 | }
--------------------------------------------------------------------------------
/src/client/pages/PuzzleSelect/components/SavedPuzzleGraphic.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 |
3 | // Types
4 | import { SavedPuzzleGraphicProps } from '../../../frontendTypes';
5 |
6 | // Main Component
7 | const SavedPuzzleGraphic = ({ progress }: SavedPuzzleGraphicProps) => {
8 | const graphic = useMemoWelcome to your one stop shop for playing Sudoku!
7 |8 | Well hi there! Thank you so much for coming! This is a site dedicated to facilitating your 9 | Sudoku journey for free! What makes this site special is it's ad-free, and you can make 10 | an account to save your progress on your puzzles and come back to them whenever you like. 11 |
12 |13 | Many features are in development! Soon you'll be able to choose a puzzle to play by 14 | difficulty or by a specific technique used to solve the puzzle. 15 |
16 |{graphic}
;
10 | };
11 |
12 | export default SavedPuzzleGraphic;
13 | const makeGraphic = (progress: string): React.JSX.Element[] => {
14 | const graphicSquares: React.JSX.Element[] = [];
15 | for (let i = 0; i < progress.length; i++) {
16 | if (progress[i] === '0') {
17 | graphicSquares.push();
18 | } else {
19 | graphicSquares.push();
20 | }
21 | }
22 | return graphicSquares;
23 | };
24 |
--------------------------------------------------------------------------------
/src/client/utils/signInWithSession.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SignInWithSession } from '../frontendTypes';
3 | import { SignInResponse } from '../../types';
4 |
5 | // Utils
6 | import populateUserAndPuzzleContext from './populateUserAndPuzzleContext';
7 |
8 | const signInWithSession: SignInWithSession = async (
9 | setUser,
10 | setPuzzleCollection
11 | ): Promise{generatedSquares}
;
13 | };
14 |
15 | export default BoxUnitContainer;
16 |
17 | // Helper Functions
18 | function generateSquares(boxUnit: Set
22 |
25 |
29 | );
30 | };
31 |
32 | export default SideBarSectionContainer;
33 |
--------------------------------------------------------------------------------
/src/client/layouts/TopBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Outlet } from 'react-router-dom';
3 |
4 | // Types
5 | import { SideBarContainerProps } from '../frontendTypes';
6 |
7 | // Component
8 | import SideBarContainer from './side-bar/SideBarContainer';
9 |
10 | const TopBar = (props: SideBarContainerProps) => {
11 | return (
12 | <>
13 |
26 | {children}
27 |
28 |
15 |
27 |
16 | 
21 | Let's Play Sudoku!
22 |
23 |
21 | Let's Play Sudoku!
22 |
24 |
26 | onSquareClick(event)}>
31 | {(filledSquares[squareId] as FilledSquare).puzzleVal}
32 |
33 | );
34 | };
35 |
36 | export default FilledSquareDisplay;
37 |
38 | const makeFilledSquareClasses = (
39 | square: FilledSquare,
40 | squareClasses: string,
41 | showDuplicates: boolean
42 | ) => {
43 | let classes = `${squareClasses} filled-square`;
44 | if (square.fixedVal) classes += ' fixed-val';
45 | if (showDuplicates && square.duplicate) classes += ' duplicate-number';
46 | return classes;
47 | };
48 |
--------------------------------------------------------------------------------
/src/server/backendTypes.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { RequestHandler } from 'express';
3 | import { UserPuzzleObj } from '../types';
4 | import { Types } from 'mongoose';
5 |
6 | export type UserController = {
7 | getUser: RequestHandler;
8 | cleanUser: RequestHandler;
9 | createUser: RequestHandler;
10 | verifyUser: RequestHandler;
11 | savePuzzle: RequestHandler;
12 | saveUser: RequestHandler;
13 | };
14 |
15 | export type PuzzleController = {
16 | getPuzzleByNumber: RequestHandler;
17 | getUserPuzzles: RequestHandler;
18 | getNextPuzzle: RequestHandler;
19 | };
20 |
21 | export type CookieController = {
22 | setSSIDCookie: RequestHandler;
23 | deleteSSIDCookie: RequestHandler;
24 | };
25 |
26 | export type SessionController = {
27 | startSession: RequestHandler;
28 | findSession: RequestHandler;
29 | deleteSession: RequestHandler;
30 | };
31 |
32 | export type UserDocument = {
33 | username: string;
34 | password: string;
35 | displayName: string;
36 | lastPuzzle: number;
37 | allPuzzles: UserPuzzleObj[];
38 | _id: Types.ObjectId;
39 | };
40 |
41 | export type Session = {
42 | cookieId: string;
43 | createdAt: Date;
44 | };
45 |
46 | export type CustomErrorInput = {
47 | method: string;
48 | overview: string;
49 | status?: number;
50 | err: string | Error | unknown;
51 | };
52 |
53 | export type CustomErrorOutput = {
54 | log: string;
55 | message: {
56 | err: string;
57 | };
58 | status?: number;
59 | };
60 |
61 | export type CustomErrorGenerator = (customErrorInput: CustomErrorInput) => CustomErrorOutput;
62 |
63 | export type BackendStatus = 'validStatus';
64 |
--------------------------------------------------------------------------------
/src/client/utils/puzzle-state-management-functions/puzzleStringsFromSquares.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { FilledSquares, PencilSquares } from '../../frontendTypes';
3 | import { allSquareIds, puzzleVals } from './squareIdsAndPuzzleVals';
4 |
5 | /** createProgressString
6 | * Takes an filledSquares object and creates a string representing the current state of the puzzle
7 | *
8 | * @param filledSquares current filledSquares object
9 | * @returns string representing the current state of the puzzle
10 | */
11 | export const createProgressString = (filledSquares: FilledSquares): string => {
12 | let progress = '';
13 |
14 | for (const squareId of allSquareIds) {
15 | if (filledSquares[squareId]) progress += filledSquares[squareId]?.puzzleVal;
16 | else progress += '0';
17 | }
18 |
19 | return progress;
20 | };
21 |
22 | /** createPencilProgressString
23 | *
24 | * Takes a pencilSquares object and returns a pencil string. Pencil strings are comprised of
25 | * squareIds followed by whatever numbers are present in for that square. For example, a pencil
26 | * square string representing pencilled in numbers 1 and 4 at square A1 and 5 and 8 at G6 is
27 | * "A114G658".
28 | *
29 | * @param pencilSquares - PencilSquares object
30 | * @returns
31 | */
32 | export const createPencilProgressString = (pencilSquares: PencilSquares) => {
33 | let pencilProgress = '';
34 |
35 | for (const squareId of allSquareIds) {
36 | if (pencilSquares[squareId]) {
37 | pencilProgress += squareId;
38 | for (const puzzleVal of puzzleVals) {
39 | if (pencilSquares[squareId]?.[puzzleVal]) pencilProgress += puzzleVal;
40 | }
41 | }
42 | }
43 | return pencilProgress;
44 | };
45 |
--------------------------------------------------------------------------------
/src/client/layouts/side-bar/WelcomeNavBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { NavLink } from 'react-router-dom';
3 |
4 | // Types
5 | import { UserContextValue, SideBarProps } from '../../frontendTypes';
6 |
7 | // Context
8 | import { userContext } from '../../context';
9 |
10 | // Main Component
11 | const WelcomeNavBar = ({ collapseSideBar }: SideBarProps) => {
12 | const { setUser } = useContext */}
26 |
52 | {/*
*/}
53 |
54 | );
55 | };
56 |
57 | export default WelcomeNavBar;
58 |
--------------------------------------------------------------------------------
/src/client/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | // Types
4 | import {
5 | UserContextValue,
6 | PuzzleCollectionContextValue,
7 | PageContextValue,
8 | SquareContextValue,
9 | FilledSquares,
10 | PencilSquares,
11 | GameSettingContextValue
12 | } from './frontendTypes';
13 |
14 | // Context
15 | export const userContext = createContext
30 | {
36 |
37 | )}
38 |
39 | );
40 | };
41 |
42 | export default SavedPuzzleMenu;
43 |
44 | const createPuzzleLinks = (user: User) => {
45 | if (!user) return;
46 |
47 | const puzzleNumbers = Object.keys(user.allPuzzles).map((key) => Number(key));
48 | puzzleNumbers.sort((a: number, b: number) => a - b);
49 |
50 | return puzzleNumbers.map((puzzleNumber) => {
51 | const props: PuzzleNumberProp = { puzzleNumber };
52 | return {user?.displayName}'s Saved Games
} 31 |
32 |
35 | Choose a saved puzzle
33 | {createPuzzleLinks(user)} 34 | exteriorBlurCollapseSideBar(e)}
39 | >
40 |
47 |
51 |
52 | );
53 | };
54 |
55 | export default SideBarContainer;
56 |
--------------------------------------------------------------------------------
/src/client/utils/puzzle-state-management-functions/puzzleStringValidation.ts:
--------------------------------------------------------------------------------
1 | /** isValidPuzzleString
2 | *
3 | * Checks input parameter to see if string if exactly 81 characters long and each character is
4 | * a string representation of the numbers 0-9
5 | *
6 | * @param {string} puzzleString A string to be tested to see if it's a valid sudoku puzzle
7 | * @returns boolean
8 | */
9 | export const isValidPuzzleString = (puzzleString: string): boolean => {
10 | if (puzzleString.length !== 81) {
11 | return false;
12 | }
13 |
14 | const numStringRegex = /[0123456789]/;
15 | let result = true;
16 |
17 | for (let i = 0; i < puzzleString.length; i += 1) {
18 | if (!numStringRegex.test(puzzleString[i])) {
19 | result = false;
20 | }
21 | }
22 | return result;
23 | };
24 |
25 | /** isValidPencilString
26 | *
27 | * Checks an incoming pencil string to make sure it's a valid string. Pencil strings are comprised
28 | * of squareIds followed by whatever numbers are present in for that square. For example, a pencil
29 | * square string representing pencilled in numbers 1 and 4 at square A1 and 5 and 8 at G6 is
30 | * "A114G658".
31 | * Returns true if the string matches the pattern, and false if not
32 | *
33 | * @param pencilString
34 | * @returns boolean
35 | */
36 | export const isValidPencilString = (pencilString: string): boolean => {
37 | // First check to see if the general shape is correct
38 | const pencilRegex = /[A-I][1-9]{2,10}/g;
39 | const matches = pencilString.match(pencilRegex);
40 | if (!matches) return false;
41 |
42 | const joinedMatches = matches.join('');
43 | if (joinedMatches.length !== pencilString.length) return false;
44 |
45 | // Then check to make sure there are no duplicate squareIds
46 | const squareRegex = /[A-I][1-9]/g;
47 | const squareMatches = pencilString.match(squareRegex);
48 | if (!squareMatches) return false;
49 |
50 | const uniqueMatches = new Set(squareMatches);
51 | return squareMatches.length === uniqueMatches.size;
52 | };
53 |
--------------------------------------------------------------------------------
/src/client/utils/puzzle-state-management-functions/deepCopySquares.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import {
3 | SquareId,
4 | PuzzleVal,
5 | FilledSquares,
6 | FilledSquare,
7 | PencilSquares,
8 | PencilSquare,
9 | PencilData
10 | } from '../../frontendTypes';
11 |
12 | /** deepCopyFilledSquares
13 | *
14 | * Returns a deep copy of a filledSquares object so that said deep copy can be altered and used to
15 | * replace the state of filledSquares in PuzzlePage.tsx
16 | *
17 | * @param filledSquares - FilledSquares object
18 | * @returns FilledSquares object
19 | */
20 | export const deepCopyFilledSquares = (filledSquares: FilledSquares) => {
21 | const newFilledSquares: FilledSquares = { size: filledSquares.size };
22 | const squareIds = Object.keys(filledSquares).filter((key) => key !== 'size') as SquareId[];
23 | for (const squareId of squareIds) {
24 | newFilledSquares[squareId] = { ...(filledSquares[squareId] as FilledSquare) };
25 | }
26 | return newFilledSquares;
27 | };
28 |
29 | /** deepCopyPencilSquares
30 | *
31 | * Returns a deep copy of a pencilSquares object so that said deep copy can be altered and used to
32 | * replace the state of pencilSquares in PuzzlePage.tsx
33 | *
34 | * @param pencilSquares - PencilSquares object
35 | * @returns PencilSquares object
36 | */
37 | export const deepCopyPencilSquares = (pencilSquares: PencilSquares) => {
38 | const newPencilSquares: PencilSquares = {};
39 | const squareIds = Object.keys(pencilSquares) as SquareId[];
40 | for (const squareId of squareIds) {
41 | const pencilSquare = pencilSquares[squareId] as PencilSquare;
42 | const puzzleVals = Object.keys(pencilSquare).filter((key) => key !== 'size') as PuzzleVal[];
43 | newPencilSquares[squareId] = { size: pencilSquare.size };
44 | const newPencilSquare = newPencilSquares[squareId] as PencilSquare;
45 | for (const puzzleVal of puzzleVals) {
46 | newPencilSquare[puzzleVal] = { ...(pencilSquare[puzzleVal] as PencilData) };
47 | }
48 | }
49 | return newPencilSquares;
50 | };
51 |
--------------------------------------------------------------------------------
/src/client/pages/PuzzleSelect/components/SavedPuzzleSelector.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | // Types
5 | import { PuzzleNumberProp, UserContextValue } from '../../../frontendTypes';
6 |
7 | // Context
8 | import { userContext } from '../../../context';
9 |
10 | // Components
11 | import SavedPuzzleGraphic from './SavedPuzzleGraphic';
12 | import GameStats from '../../../shared-components/GameStats';
13 | import Loading from '../../../shared-components/Loading';
14 |
15 | // Main Component
16 | const SavedPuzzleSelector = (props: PuzzleNumberProp) => {
17 | const { puzzleNumber } = props;
18 | const { user } = useContext
48 |
50 |
25 |
47 | ) : (
48 |
29 |
33 | {puzzleNumber}
34 |
35 |
37 |
38 |
44 |
45 | {showGameStats && {settingsDetails}
;
46 | };
47 |
48 | export default GameSettings;
49 |
50 | // Helper Functions
51 | const generateSettingsDetails = (settingsArray: SettingsToggleProps[]) => {
52 | const gameSettingsComponents: React.JSX.Element[] = [];
53 | for (const props of settingsArray) {
54 | gameSettingsComponents.push(
15 | {generatedBoxes}
16 |
17 | );
18 | };
19 |
20 | export default PuzzleContainer;
21 |
22 | // Helper Functions
23 | /** generateBoxes
24 | *
25 | * Each set in boxes is a set of the squareIds that go in each of the 9 larger squares of the
26 | * Sudoku puzzle. For reference, each sudoku grid row corresponds to a letter 'A' to 'I' and each
27 | * sudoku grid column corresponds to a number '1' to '9'.
28 | * For example:
29 | * boxes[0] = Set{'A1', 'A2', 'A3', 'B1', 'B2', 'B3', 'C1', 'C2', 'C3'},
30 | * boxes[1] = Set{'A4', 'A5', 'A6', 'B4', 'B5', 'B6', 'C4', 'C5', 'C6'}, etc.
31 | *
32 | * generateBoxes sequentially passes each boxes Set to one of 9 BoxUnitContainer components,
33 | * which are pushed to an array to be returned from this function.
34 | * This array is meant to be rendered by the PuzzleContainer component with CSS grid styling such
35 | * that the 9 BoxUnitContainer components are located in 3 rows of 3 BoxUnitContainer components.
36 | * Each BoxUnitContainer component will eventually render a 3x3 grid of 9 SquareContainer components
37 | * within it, based on the squareIds from its boxUnit Set. The sequential rendering of these
38 | * boxes and squareIds results in a grid of 81 squares with correctly positioned squareIds.
39 | *
40 | * @returns array of jsx elements to be rendered in PuzzleContainer component
41 | */
42 | function generateBoxes(): React.JSX.Element[] {
43 | const boxUnitContainers: React.JSX.Element[] = [];
44 | boxes.forEach((boxUnit, i) => {
45 | boxUnitContainers.push( onSquareClick(event)}
33 | >
34 | {pencilSquareGrid}
35 |
36 | );
37 | };
38 |
39 | export default PencilSquareDisplay;
40 |
41 | // Helper Functions
42 | const puzzleVals: PuzzleVal[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
43 |
44 | function makePencilGrid(squareId: SquareId, pencilSquares: PencilSquares, showDuplicates: boolean) {
45 | const pencilSquare = pencilSquares[squareId] as PencilSquare;
46 | const pencilGrid: React.JSX.Element[] = [];
47 | if (pencilSquare.size === 0) {
48 | return pencilGrid;
49 | }
50 |
51 | for (const puzzleVal of puzzleVals) {
52 | let classes = 'pencil-val-div';
53 | if (pencilSquare[puzzleVal]) {
54 | const pencilData = pencilSquare[puzzleVal] as PencilData;
55 | if (showDuplicates && pencilData.duplicate) {
56 | classes += ' duplicate-number';
57 | }
58 | pencilGrid.push(
59 |
60 | {puzzleVal}
61 |
62 | );
63 | } else {
64 | pencilGrid.push();
65 | }
66 | }
67 | return pencilGrid;
68 | }
69 |
--------------------------------------------------------------------------------
/src/globalUtils/puzzle-solution-functions/singleCandidateSolver.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SolveTechnique } from '../../types';
3 | import { PuzzleVal } from '../../client/frontendTypes';
4 |
5 | // Utilities
6 | import { allSquareIds } from '../../client/utils/puzzle-state-management-functions/squareIdsAndPuzzleVals';
7 | import { updateSolveSquares } from './updateSolveSquares';
8 | import { newFilledSquare } from '../../client/utils/puzzle-state-management-functions/newFilledSquare';
9 | import { updateOrPopulateSolveSquares } from './populateSolveSquaresIfEmpty';
10 |
11 | /** singleCandidateSolver
12 | *
13 | * Sequentially checks every square. If a square has a possibleVal set with size 1, it takes the
14 | * value from the set and assigns it to the puzzleVal, then it removes it from the possibleVal set.
15 | * If this happens, the function returns true. If the function iterates over the entire allSquares
16 | * object without finding a possibleVal set of size 1, it returns false.
17 | *
18 | * @param filledSquares
19 | * @param solveSquares
20 | * @param solutionCache object which tracks how many times a particular solution technique is used
21 | * @returns A boolean, true if a change was made to the allSquares argument
22 | */
23 |
24 | export const singleCandidateSolver: SolveTechnique = (
25 | filledSquares,
26 | solveSquares,
27 | solutionCache
28 | ) => {
29 | updateOrPopulateSolveSquares(filledSquares, solveSquares);
30 | for (const squareId of allSquareIds) {
31 | if (solveSquares[squareId].size === 1) {
32 | const val = solveSquares[squareId].values().next().value as PuzzleVal;
33 | filledSquares[squareId] = newFilledSquare(val, false);
34 | filledSquares.size += 1;
35 | solutionCache.singleCandidate += 1;
36 | solveSquares[squareId].clear();
37 | updateSolveSquares(filledSquares, solveSquares);
38 | // console.log(
39 | // 'singleCandidateSolver:',
40 | // squareId,
41 | // 'puzzleVal set to',
42 | // val,
43 | // `, solveSquares[${squareId}] size is now`,
44 | // solveSquares[squareId].size
45 | // );
46 | return true;
47 | }
48 | }
49 | // console.log('solutionCache.singleCandidate:', solutionCache.singleCandidate);
50 | return false;
51 | };
52 |
--------------------------------------------------------------------------------
/src/server/server.ts:
--------------------------------------------------------------------------------
1 | import express, { NextFunction, Request, Response } from 'express';
2 | import cookieParser from 'cookie-parser';
3 | import mongoose, { Error } from 'mongoose';
4 | import path from 'path';
5 | import logger from 'morgan';
6 | import usersRouter from './routes/userRouter';
7 | import puzzleRouter from './routes/puzzleRouter';
8 | import { CustomErrorOutput } from './backendTypes';
9 |
10 | const app = express();
11 | const PORT = 3000;
12 |
13 | // const dotenv = require('dotenv');
14 | // dotenv.config();
15 |
16 | // Allow guests to access database for now
17 | const MONGO_URI =
18 | 'mongodb+srv://markteets:PV0m4ZjwEg3wZwIT@sudoku-db.ox6sdpn.mongodb.net/?retryWrites=true&w=majority';
19 | //const MONGO_URI = process.env.SUDOKU_MONGO_URI;
20 |
21 | mongoose
22 | .connect(MONGO_URI, {
23 | dbName: 'sudoku'
24 | })
25 | .then(() => console.log('Connected to Mongo DB!'))
26 | .catch((err) => console.log('Database error: ', err.message));
27 |
28 | app.use(logger(':date[web] :method :url :status :response-time ms - :res[content-length]'));
29 | app.use(express.json());
30 | app.use(express.urlencoded({ extended: true }));
31 | app.use(cookieParser());
32 | // This first express.static will serve the bundled version of the frontend at dist/index.html when
33 | // a browser request is made to localhost:3000. Used for Docker, so the server can run with this
34 | // saved version of the frontend
35 | app.use(express.static(path.join(__dirname, '../../dist/')));
36 | app.use('/assets', express.static(path.join(__dirname, '../client/assets')));
37 |
38 | app.use('/api/user', usersRouter);
39 |
40 | app.use('/api/puzzle', puzzleRouter);
41 |
42 | app.use('/', (req: Request, res: Response) => {
43 | res.status(404).send('Nothing to see here!');
44 | });
45 |
46 | //Global error handler
47 | app.use((err: Error | CustomErrorOutput, req: Request, res: Response, next: NextFunction) => {
48 | const defaultErr = {
49 | log: 'Express error handler caught unknown middleware error',
50 | status: 500,
51 | message: { err: 'A server error occurred' }
52 | };
53 | const errorObj = Object.assign({}, defaultErr, err);
54 | console.log(errorObj.log);
55 | return res.status(errorObj.status).json(errorObj.message);
56 | });
57 |
58 | app.listen(PORT, () => {
59 | console.log(`Server listening on port: ${PORT}`);
60 | });
61 |
62 | module.exports = app;
63 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
2 | const path = require('path');
3 | // eslint-disable-next-line @typescript-eslint/no-var-requires
4 | const HTMLWebpackPlugin = require('html-webpack-plugin');
5 |
6 | module.exports = {
7 | entry: './src/client/index.tsx',
8 |
9 | output: {
10 | path: path.join(__dirname, '/dist'),
11 | filename: 'bundle.js',
12 | publicPath: '/'
13 | },
14 |
15 | plugins: [
16 | new HTMLWebpackPlugin({
17 | template: './src/client/index.html'
18 | })
19 | ],
20 | mode: process.env.NODE_ENV,
21 |
22 | devServer: {
23 | // Required for Docker to work with dev server
24 | host: '0.0.0.0',
25 | // host: 'localhost',
26 | port: 8080,
27 | //enable HMR on the devServer
28 | hot: true,
29 | // for react router
30 | historyApiFallback: true,
31 |
32 | static: {
33 | // match the output path
34 | directory: path.join(__dirname, '/dist'),
35 | //match the output 'publicPath'
36 | publicPath: '/'
37 | },
38 |
39 | headers: { 'Access-Control-Allow-Origin': '*' },
40 |
41 | proxy: {
42 | '/api/**': {
43 | target: 'http://localhost:3000/',
44 | secure: false
45 | },
46 | '/assets/**': {
47 | target: 'http://localhost:3000/',
48 | secure: false
49 | }
50 | }
51 | },
52 |
53 | module: {
54 | rules: [
55 | {
56 | test: /.jsx?/,
57 | exclude: /node_modules/,
58 | use: {
59 | loader: 'babel-loader',
60 | options: {
61 | presets: ['@babel/preset-env', '@babel/preset-react']
62 | }
63 | }
64 | },
65 | {
66 | test: /\.tsx?/,
67 | exclude: /node_modules/,
68 | use: ['ts-loader'],
69 | type: 'javascript/auto'
70 | },
71 | {
72 | test: /.(css|s[ac]ss)$/i,
73 | use: [
74 | // Creates `style` nodes from JS strings
75 | 'style-loader',
76 | // Translates CSS into CommonJS
77 | 'css-loader',
78 | // Compiles Sass to CSS
79 | 'sass-loader'
80 | ]
81 | },
82 | {
83 | test: /\.(png|jpe?g|gif|svg)$/i,
84 | type: 'asset/resource'
85 | }
86 | ]
87 | },
88 | resolve: {
89 | extensions: ['.js', '.jsx', '.ts', '.tsx']
90 | }
91 | };
92 |
--------------------------------------------------------------------------------
/src/client/utils/addPuzzleToUserAndCollection.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SetUser, SetPuzzleCollection } from '../frontendTypes';
3 | import { User, Puzzle, PuzzleCollection } from '../../types';
4 |
5 | /**addPuzzleToUserAndCollection
6 | *
7 | * Takes a puzzle document from the database's puzzles collection and adds it to the user's
8 | * allPuzzles object and to the puzzleCollection without mutating existing state. This makes it
9 | * available for use when rendering the PuzzlePage component.
10 | *
11 | * @param puzzleNumber
12 | * @param fetchedPuzzleData - puzzle document from the database's puzzles collection
13 | * @param user - Global context object, holds username, displayName, and allPuzzles object which
14 | * holds a user's progress on each puzzle they've saved
15 | * @param setUser - Function for setting global user object
16 | * @param puzzleCollection - Global context object, holds information for each puzzle
17 | * @param setPuzzleCollection - Function for setting global puzzleCollection object
18 | */
19 | export const addPuzzleToUserAndCollection = (
20 | puzzleNumber: number,
21 | fetchedPuzzleData: Puzzle,
22 | user: User,
23 | setUser: SetUser,
24 | puzzleCollection: PuzzleCollection,
25 | setPuzzleCollection: SetPuzzleCollection
26 | ) => {
27 | if (!user) return;
28 |
29 | const newUser = {
30 | ...user,
31 | lastPuzzle: puzzleNumber,
32 | allPuzzles: { ...user.allPuzzles }
33 | };
34 |
35 | newUser.allPuzzles[puzzleNumber] = {
36 | puzzleNumber,
37 | progress: fetchedPuzzleData.puzzle,
38 | pencilProgress: ''
39 | };
40 |
41 | setUser(newUser);
42 |
43 | // Every puzzle in a user's allPuzzles object will be added to the puzzleCollection object when
44 | // the user logs in, therefore we only need to add the puzzle to the puzzle collection after
45 | // confirming it's not already in allPuzzles
46 |
47 | // Check to see if the puzzle is already in the puzzleCollection just in case they switched users
48 | // and it's already there. If it's not there, add it
49 | if (!puzzleCollection[puzzleNumber]) {
50 | const newPuzzleCollection = { ...puzzleCollection };
51 | for (const [number, puzzleObject] of Object.entries(puzzleCollection)) {
52 | newPuzzleCollection[Number(number)] = { ...puzzleObject };
53 | }
54 | newPuzzleCollection[puzzleNumber] = fetchedPuzzleData;
55 | setPuzzleCollection(newPuzzleCollection);
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/src/server/routes/userRouter.ts:
--------------------------------------------------------------------------------
1 | import express, { Request, Response } from 'express';
2 | const userRouter = express.Router();
3 |
4 | import userController from '../controllers/userController';
5 | import puzzleController from '../controllers/puzzleController';
6 | import cookieController from '../controllers/cookieController';
7 | import sessionController from '../controllers/sessionController';
8 |
9 | userRouter.post('/sign-up',
10 | userController.getUser,
11 | userController.createUser,
12 | userController.cleanUser,
13 | cookieController.setSSIDCookie,
14 | sessionController.startSession,
15 | (req: Request, res: Response) => {
16 | res.status(200).json(res.locals.frontendData);
17 | }
18 | );
19 |
20 | userRouter.post('/login',
21 | userController.getUser,
22 | userController.verifyUser,
23 | userController.cleanUser,
24 | puzzleController.getUserPuzzles,
25 | cookieController.setSSIDCookie,
26 | sessionController.startSession,
27 | (req: Request, res: Response) => {
28 | res.status(200).json(res.locals.frontendData);
29 | }
30 | );
31 |
32 | userRouter.get('/resume-session',
33 | sessionController.findSession,
34 | userController.getUser,
35 | userController.cleanUser,
36 | puzzleController.getUserPuzzles,
37 | sessionController.startSession,
38 | (req: Request, res: Response) => {
39 | res.status(200).json(res.locals.frontendData);
40 | }
41 | );
42 |
43 | userRouter.get('/no-session',
44 | (req: Request, res: Response) => {
45 | res.status(200).json({ status: 'noSession' });
46 | }
47 | );
48 |
49 | userRouter.delete('/log-out',
50 | userController.getUser,
51 | // Need to play with the statuses here,
52 | // both saveUser and deleteSession set status to valid on res.locals.frontendData
53 | userController.saveUser,
54 | sessionController.deleteSession,
55 | cookieController.deleteSSIDCookie,
56 | (req: Request, res: Response) => {
57 | res.status(200).json(res.locals.frontendData);
58 | }
59 | );
60 |
61 | userRouter.post('/save-puzzle',
62 | userController.getUser,
63 | userController.savePuzzle,
64 | (req: Request, res: Response) => {
65 | res.status(200).json(res.locals.frontendData);
66 | }
67 | );
68 |
69 | userRouter.post('/save-user',
70 | userController.getUser,
71 | userController.saveUser,
72 | (req: Request, res: Response) => {
73 | res.status(200).json(res.locals.frontendData);
74 | }
75 | );
76 |
77 | export default userRouter;
78 |
--------------------------------------------------------------------------------
/src/client/scss/modules/_userNavbar.scss:
--------------------------------------------------------------------------------
1 | $nav-link-background: #58c2c6;
2 |
3 | .user-side-bar-container {
4 | width: max-content;
5 | position: absolute;
6 | top: 0px;
7 | right: 0px;
8 | }
9 |
10 | .user-side-bar {
11 | position: absolute;
12 | top: 0px;
13 | right: 0px;
14 | border-radius: 5px;
15 | background-color: $buttonBackground;
16 | transition: all 0.5s ease-in-out;
17 | width: 162px;
18 | min-height: 100vh;
19 | text-wrap: none;
20 | overflow-x: hidden;
21 | }
22 |
23 | #side-bar-button {
24 | padding: 2px 4px;
25 | margin: 6px 10px;
26 | width: 32px;
27 | height: 32px;
28 |
29 | img {
30 | height: 24px;
31 | width: 24px;
32 | margin-left: -2px;
33 | }
34 | }
35 |
36 | .user-side-bar.inactive {
37 | width: 0px;
38 | // border: none;
39 | }
40 |
41 | .user-side-bar-section-container {
42 | padding: 2px;
43 | }
44 |
45 | .user-side-bar-section-container-button {
46 | all: unset;
47 | box-sizing: border-box;
48 | display: inline-block;
49 | text-align: center;
50 | padding: 1px 6px;
51 | width: 156px;
52 | border: 1px solid $bigBorderColor;
53 | border-radius: 5px;
54 |
55 | }
56 | .user-side-bar-section-container-button:focus{
57 | border: 1px solid $numberColor;
58 | }
59 |
60 | .user-side-bar-section {
61 | transition: all 0.5s ease-in-out;
62 | max-height: 400px;
63 | overflow: hidden;
64 | }
65 |
66 | .user-side-bar-section.inactive {
67 | max-height: 0px;
68 | }
69 |
70 | .flex-column {
71 | display: flex;
72 | flex-direction: column;
73 | }
74 |
75 | .side-bar-section-content {
76 | margin-bottom: 2px;
77 | margin-top: 2px;
78 | }
79 |
80 | .side-bar-section-content .side-bar-detail {
81 | align-items: flex-start;
82 | }
83 |
84 | .side-bar-section-content .nav-link, .side-bar-detail {
85 | width: 156px;
86 | color: $numberColor;
87 | padding: 4px 5px;
88 | }
89 |
90 | .side-bar-section-content .nav-link{
91 | padding-top: 5px;
92 | padding-bottom: 5px;
93 | }
94 |
95 | .side-bar-section-content .active {
96 | background-color: $nav-link-background;
97 | border-radius: 5px;
98 | }
99 |
100 | .side-bar-detail input {
101 | vertical-align: middle;
102 | margin: 0 0 0 7px;
103 | }
104 |
105 | .side-bar-section-content ul {
106 | margin: 0;
107 | padding: 0px 0px 0px 30px;
108 | }
109 |
110 | .side-bar-section-content li {
111 | padding: 2px 0px;
112 | color: $numberColor;
113 | }
--------------------------------------------------------------------------------
/src/client/pages/Puzzle/components/SquareContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useMemo } from 'react';
2 |
3 | // Types
4 | import {
5 | SquareId,
6 | ClickedSquare,
7 | OnSquareClick,
8 | SquareContainerProps,
9 | SquareContextValue,
10 | GameSettingContextValue,
11 | SquareProps
12 | } from '../../../frontendTypes';
13 |
14 | // Components
15 | import FilledSquareDisplay from './FilledSquareDisplay';
16 | import PencilSquareDisplay from './PencilSquareDisplay';
17 | import EmptySquareDisplay from './EmptySquareDisplay';
18 |
19 | // Context
20 | import { squareContext, gameSettingsContext } from '../../../context';
21 |
22 | // Utilities
23 | import { allPeers } from '../../../utils/puzzle-state-management-functions/makeAllPeers';
24 |
25 | // Main Component
26 | const SquareContainer = ({ squareId }: SquareContainerProps) => {
27 | const { clickedSquare, setClickedSquare, filledSquares, pencilSquares } =
28 | useContext{numberButtons}
;
37 | };
38 |
39 | export default NumberSelectBar;
40 |
41 | // Helper Functions
42 | const makeButtons: MakeButtons = (
43 | pencilMode,
44 | clickedSquare,
45 | filledSquares,
46 | setFilledSquares,
47 | pencilSquares,
48 | setPencilSquares
49 | ) => {
50 | const buttons = [] as React.JSX.Element[];
51 | for (let i = 1; i < 10; i++) {
52 | const buttonVal = i.toString() as PuzzleVal;
53 | let isDisabled = false;
54 | let classes = 'number-button';
55 |
56 | if (pencilMode) classes += ' pencil-mode';
57 |
58 | if (clickedSquare) {
59 | if (filledSquares[clickedSquare]?.fixedVal) {
60 | isDisabled = true;
61 | }
62 | if (!pencilMode && filledSquares[clickedSquare]?.puzzleVal === buttonVal) {
63 | classes += ' highlight-number-button';
64 | } else if (pencilMode && pencilSquares[clickedSquare]?.[buttonVal]) {
65 | classes += ' highlight-number-button';
66 | }
67 | }
68 | buttons.push(
69 |
87 | );
88 | }
89 |
90 | return buttons;
91 | };
92 |
--------------------------------------------------------------------------------
/src/client/utils/puzzle-state-management-functions/updateSquaresDuplicates.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import {
3 | SquareId,
4 | PuzzleVal,
5 | FilledSquares,
6 | FilledSquare,
7 | PencilSquares,
8 | PencilSquare,
9 | PencilData
10 | } from '../../frontendTypes';
11 |
12 | // Utilities
13 | import { allPeers } from './makeAllPeers';
14 |
15 | /** updateFilledSquaresDuplicates
16 | *
17 | * Iterates over a filledSquares object and updates the value of each filledSquare's duplicate
18 | * property so that it's accurate based on its filledSquare and pencilSquare peers. It's assumed
19 | * that the filledSquares parameter provided has already been deep copied
20 | *
21 | * @param filledSquares - FilledSquares object
22 | * @param pencilSquares - PencilSquares object
23 | */
24 | export const updateFilledSquaresDuplicates = (
25 | filledSquares: FilledSquares,
26 | pencilSquares: PencilSquares
27 | ): void => {
28 | // Iterate over every filledSquare in filledSquares
29 | const squareIds = Object.keys(filledSquares).filter((key) => key !== 'size') as SquareId[];
30 | // Update each filledSquare's duplicate status based on its peers filledSquare and
31 | // pencilSquare values
32 | for (const squareId of squareIds) {
33 | const square = filledSquares[squareId] as FilledSquare;
34 | square.duplicate = false;
35 | allPeers[squareId].forEach((peerId) => {
36 | if (filledSquares[peerId]?.puzzleVal === square.puzzleVal) square.duplicate = true;
37 | if (pencilSquares[peerId]?.[square.puzzleVal]) square.duplicate = true;
38 | });
39 | }
40 | };
41 |
42 | /** updatePencilSquaresDuplicates
43 | *
44 | * Iterates over a pencilSquares object and updates the value of each pencilSquare's duplicate
45 | * property so that it's accurate based on it's filledSquare peers. It's assumed that the
46 | * pencilSquares parameter provided has already been deep copied
47 | *
48 | * @param filledSquares - FilledSquares object
49 | * @param pencilSquares - PencilSquares object
50 | */
51 | export const updatePencilSquaresDuplicates = (
52 | filledSquares: FilledSquares,
53 | pencilSquares: PencilSquares
54 | ) => {
55 | const squareIds = Object.keys(pencilSquares) as SquareId[];
56 | for (const squareId of squareIds) {
57 | const pencilSquare = pencilSquares[squareId] as PencilSquare;
58 | const puzzleVals = Object.keys(pencilSquare).filter((key) => key !== 'size') as PuzzleVal[];
59 | for (const puzzleVal of puzzleVals) {
60 | const pencilData = pencilSquare[puzzleVal] as PencilData;
61 | pencilData.duplicate = false;
62 | allPeers[squareId].forEach((peerId) => {
63 | if (filledSquares[peerId]?.puzzleVal === puzzleVal) pencilData.duplicate = true;
64 | });
65 | }
66 | }
67 | };
68 |
--------------------------------------------------------------------------------
/src/client/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | // @use 'sass:math';
2 |
3 | // $bodyColor: #222da9;
4 | $bodyColor: #b59cf0;
5 | $bodyColorTransparent: #b59cf060;
6 | $menuBorderColor: #58c2c6;
7 | $buttonBackground: rgb(194, 202, 201);
8 | $offBlack: rgb(50, 42, 104);
9 | // $textColor: #6b3ee6;
10 | $textColor: #4f18ce;
11 | $buttonText: rgb(57, 50, 50);
12 | $visitedLink: rgb(128, 179, 171);
13 |
14 |
15 | $bigBorderColor: #08153e;
16 | $innerBorderColor: #0d2367;
17 | $squareBackground: #f7f8f8;
18 | $numberColor: #1840b9;
19 | $fixedVal: $bigBorderColor;
20 | $duplicateNumber: rgb(204, 69, 69);
21 | // $pencilNum: $numberColor;
22 | $pencilNum: #4f18ce;
23 | $peerSquareBackground: #d9e1fa;
24 | // $clickedSquareBackground: #cbd6f8;
25 | // $clickedSquareBackground: #eef1fd;
26 | $clickedSquareBackground: #c0cef7;
27 | $clickedSquareBorder: yellow;
28 |
29 | // $puzzleButtonBackground: #3D67E6;
30 | // $puzzleButtonBackground: #305de4;
31 | $puzzleButtonBackground: #3964e4;
32 | $puzzleButtonShadow: rgb(168, 40, 210);
33 | $puzzleButtonText: #b4c4f5;
34 | $puzzleButtonShadow: #8a5fed;
35 | $visitedLink: rgb(128, 179, 171);
36 |
37 | $nav-link-background: #c1c5c5;
38 | $sideSpaceMargin: 8px;
39 |
40 | $minFilledSquareFont: 16px;
41 | $maxFilledSquareFont: 35px;
42 |
43 | $minPencilSquareFont: 8px;
44 | $maxPencilSquareFont: 14px;
45 |
46 | $maxPuzzleWidth: 530px;
47 | $minPuzzleWidth: 320px;
48 |
49 | // @function scaledFontSize($maxFont, $minFont, $maxWidth, $minWidth) {
50 | // $slope: math.div(($maxFont-$minFont), ($maxWidth-$minWidth));
51 | // $b: $maxFont - ($slope * $maxWidth);
52 | // @return 1vw*100*$slope + $b;
53 | // };
54 |
55 | // @mixin filledSquareFontSize {
56 | // font-size: scaledFontSize($maxFilledSquareFont, $minFilledSquareFont, $maxPuzzleWidth, $minPuzzleWidth);
57 | // }
58 |
59 | // @mixin filledSquareFontSize {
60 | // font-size: scaledFontSize(35, 16, 530, 320);
61 | // }
62 |
63 | // @mixin filledSquareFontSize {
64 | // font-size: 1vw * 100 * math.div(($maxFilledSquareFont - $minFilledSquareFont), ($maxPuzzleWidth - $minPuzzleWidth)) + ($maxFilledSquareFont - $maxPuzzleWidth * math.div(($maxFilledSquareFont - $minFilledSquareFont), ($maxPuzzleWidth - $minPuzzleWidth)))
65 | // }
66 |
67 | // @function scaledFilledSquareFontSize() {
68 | // @return scaledFontSize($maxFilledSquareFont, $minFilledSquareFont, $maxPuzzleWidth, $minPuzzleWidth);
69 | // };
70 |
71 | // @function scaledPencilSquareFontSize() {
72 | // @return scaledFontSize($maxPencilSquareFont, $minPencilSquareFont, $maxPuzzleWidth, $minPuzzleWidth);
73 | // };
74 |
75 | // @function scaledFilledSquareFontSize() {
76 | // $slope: math.div(($maxFilledSquareFont-$minFilledSquareFont), ($maxPuzzleWidth-$minPuzzleWidth));
77 | // $b: $maxFilledSquareFont - ($slope * $maxPuzzleWidth);
78 | // @return 1vw*100*$slope + $b;
79 | // };
80 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sudoku",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "src/server/server.js",
6 | "scripts": {
7 | "dev": "concurrently \"cross-env NODE_ENV=development webpack serve --open --hot --color \" \" nodemon ./src/server/server.ts\"",
8 | "prod": "concurrently \"cross-env NODE_ENV=production webpack serve --open \" \" ts-node ./src/server/server.ts\"",
9 | "frontend": "NODE_ENV=development webpack serve --open --hot",
10 | "backend": "NODE_ENV=development nodemon ./src/server/server.ts",
11 | "build": "NODE_ENV=production webpack",
12 | "add-puzzle": "node src/server/utils/puzzleDBCreate.js",
13 | "test": "jest --verbose"
14 | },
15 | "keywords": [],
16 | "author": "Mark Teets",
17 | "license": "ISC",
18 | "dependencies": {
19 | "bcryptjs": "^2.4.3",
20 | "cookie-parser": "^1.4.6",
21 | "express": "^4.18.2",
22 | "mongoose": "^7.5.2",
23 | "react": "^18.2.0",
24 | "react-router-dom": "^6.16.0",
25 | "sass": "^1.67.0",
26 | "ts-node": "^10.9.1"
27 | },
28 | "devDependencies": {
29 | "@babel/core": "^7.22.20",
30 | "@babel/preset-env": "^7.22.20",
31 | "@babel/preset-react": "^7.22.15",
32 | "@testing-library/jest-dom": "^6.1.4",
33 | "@testing-library/react": "^14.0.0",
34 | "@testing-library/user-event": "^14.5.1",
35 | "@types/bcryptjs": "^2.4.4",
36 | "@types/cookie-parser": "^1.4.4",
37 | "@types/express": "^4.17.17",
38 | "@types/jest": "^29.5.6",
39 | "@types/morgan": "^1.9.7",
40 | "@types/node": "^20.6.3",
41 | "@types/react": "^18.2.22",
42 | "@types/react-dom": "^18.2.7",
43 | "@typescript-eslint/eslint-plugin": "^6.7.2",
44 | "@typescript-eslint/parser": "^6.7.2",
45 | "babel-loader": "^9.1.3",
46 | "concurrently": "^8.2.1",
47 | "copy-webpack-plugin": "^11.0.0",
48 | "cross-env": "^7.0.3",
49 | "css-loader": "^6.8.1",
50 | "csv-parser": "^3.0.0",
51 | "dotenv": "^16.3.1",
52 | "eslint": "^8.49.0",
53 | "eslint-config-prettier": "^9.0.0",
54 | "eslint-import-resolver-webpack": "^0.13.7",
55 | "eslint-plugin-import": "^2.28.1",
56 | "eslint-plugin-jsx-a11y": "^6.7.1",
57 | "eslint-plugin-prettier": "^5.0.0",
58 | "eslint-plugin-react": "^7.33.2",
59 | "eslint-plugin-react-hooks": "^4.6.0",
60 | "file-loader": "^6.2.0",
61 | "html-webpack-plugin": "^5.5.3",
62 | "jest": "^29.7.0",
63 | "jest-environment-jsdom": "^29.7.0",
64 | "morgan": "^1.10.0",
65 | "nodemon": "^3.0.1",
66 | "prettier": "^3.0.3",
67 | "sass-loader": "^13.3.2",
68 | "style-loader": "^3.3.3",
69 | "ts-jest": "^29.1.1",
70 | "ts-loader": "^9.4.4",
71 | "typescript": "^5.2.2",
72 | "webpack": "^5.88.2",
73 | "webpack-cli": "^5.1.4",
74 | "webpack-dev-server": "^4.15.1"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/globalUtils/puzzle-solution-functions/solveSquaresConversion.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SolveSquares } from '../../types';
3 | import { FilledSquares, PencilSquares, PencilSquare, PencilData } from '../../client/frontendTypes';
4 |
5 | // Utilities
6 | import {
7 | puzzleVals,
8 | allSquareIds
9 | } from '../../client/utils/puzzle-state-management-functions/squareIdsAndPuzzleVals';
10 | import { newSolveSquares } from './solutionFramework';
11 | import { updateSolveSquares } from './updateSolveSquares';
12 |
13 | /** solveSquareToPencilSquares
14 | *
15 | * Converts a solveSquares object to a pencilSquares object and returns it. This conversion sets
16 | * duplicate and highlight properties to false, they must be updated after this conversion in a
17 | * different function. solveSquare objects are similar to pencilSquares but are structured for
18 | * efficient puzzle solution functions rather than for displaying numbers on the frontend.
19 | *
20 | * @param solveSquares
21 | * @returns
22 | */
23 | export const solveSquareToPencilSquares = (solveSquares: SolveSquares) => {
24 | const pencilSquares: PencilSquares = {};
25 | for (const squareId of allSquareIds) {
26 | if (solveSquares[squareId].size > 0) {
27 | pencilSquares[squareId] = { size: 0 };
28 | const pencilSquare = pencilSquares[squareId] as PencilSquare;
29 | solveSquares[squareId].forEach((puzzleVal) => {
30 | pencilSquare[puzzleVal] = {
31 | duplicate: false,
32 | highlightNumber: false
33 | };
34 | pencilSquare.size += 1;
35 | });
36 | }
37 | }
38 | return pencilSquares;
39 | };
40 |
41 | /** pencilSquaresToSolveSquares
42 | *
43 | * Converts a pencilSquares object to a solveSquares object and returns it. solveSquare objects are
44 | * similar to pencilSquares but are structured for efficient puzzle solution functions rather than
45 | * for displaying numbers on the frontend.
46 | *
47 | * @param pencilSquares
48 | * @returns
49 | */
50 | export const pencilSquaresToSolveSquares = (pencilSquares: PencilSquares): SolveSquares => {
51 | const solveSquares: SolveSquares = {};
52 | for (const squareId of allSquareIds) {
53 | solveSquares[squareId] = new Set();
54 | if (pencilSquares[squareId]) {
55 | for (const puzzleVal of puzzleVals) {
56 | if (pencilSquares[squareId]?.[puzzleVal]) {
57 | if (!((pencilSquares[squareId] as PencilSquare)[puzzleVal] as PencilData).duplicate) {
58 | solveSquares[squareId].add(puzzleVal);
59 | }
60 | }
61 | }
62 | }
63 | }
64 | return solveSquares;
65 | };
66 |
67 | export const solveSquaresFromFilledSquares = (filledSquares: FilledSquares) => {
68 | const solveSquares = newSolveSquares();
69 | updateSolveSquares(filledSquares, solveSquares);
70 | return solveSquares;
71 | };
72 |
--------------------------------------------------------------------------------
/src/client/pages/Puzzle/components/PuzzleStringDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 |
3 | // Types
4 | import { SquareContextValue } from '../../../frontendTypes';
5 |
6 | // Context
7 | import { squareContext } from '../../../context';
8 |
9 | // Utilities
10 | import {
11 | createProgressString,
12 | createPencilProgressString
13 | } from '../../../utils/puzzle-state-management-functions/puzzleStringsFromSquares';
14 |
15 | // Main Component
16 | const PuzzleStringDisplay = () => {
17 | const { filledSquares, pencilSquares } = useContext
46 |
49 | {showPuzzleString ? (
50 |
58 | ) : null}
59 |
60 | {showPuzzleString && Puzzle String: {puzzleString ? puzzleString : 'Empty'}
}
61 |
62 |
65 | {showPencilString ? (
66 |
74 | ) : null}
75 |
76 | {showPencilString && Pencil String: {pencilString ? pencilString : 'Empty'}
}
77 |
78 | );
79 | };
80 |
81 | export default PuzzleStringDisplay;
82 |
--------------------------------------------------------------------------------
/src/client/scss/styles.scss:
--------------------------------------------------------------------------------
1 | // $bodyColor: #222da9;
2 | $bodyColor: #b59cf0;
3 | $bigBorderColor: #58c2c6;
4 | $buttonBackground: rgb(194, 202, 201);
5 | $offBlack: rgb(50, 42, 104);
6 | // $textColor: #6b3ee6;
7 | $textColor: #4f18ce;
8 | $buttonText: rgb(57, 50, 50);
9 | $visitedLink: rgb(128, 179, 171);
10 |
11 | *,
12 | ::after,
13 | ::before {
14 | box-sizing: border-box;
15 | }
16 |
17 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400&family=Roboto:ital,wght@0,100;0,300;0,400;1,300;1,400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");
18 |
19 | body {
20 | min-height: 100vh;
21 | margin: 0;
22 | // background-color: $bodyColor;
23 | background-image: radial-gradient(ellipse at top left, $bodyColor, transparent 100%);
24 | font-family: "Roboto", sans-serif;
25 | // font-family:'Lucinda Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
26 | // font-family: 'Rubik', sans-serif;
27 | color: $textColor;
28 | }
29 |
30 | h1,
31 | h2,
32 | h3,
33 | h5 {
34 | width: max-content;
35 | margin: 10px auto 15px;
36 | }
37 |
38 | #main-nav {
39 | width: max-content;
40 | margin-left: auto;
41 | margin-right: auto;
42 | margin-bottom: 40px;
43 | }
44 |
45 | .nav-link-container {
46 | width: max-content;
47 | margin: 0 auto;
48 | }
49 |
50 | #main-nav .nav-link {
51 | margin: 0 10px;
52 | }
53 |
54 | #main-nav .active {
55 | background-color: $offBlack;
56 | border-radius: 7px;
57 | }
58 |
59 | .centered-div {
60 | width: max-content;
61 | padding: 10px 30px 15px;
62 | margin: 0 auto;
63 | display: flex;
64 | flex-direction: column;
65 | align-items: center;
66 | border: $bigBorderColor groove 7px;
67 | border-radius: 18px;
68 |
69 | a:visited {
70 | color: $visitedLink;
71 | }
72 |
73 | input {
74 | margin: 6px 0;
75 | }
76 |
77 | label {
78 | margin: 8px 0;
79 | }
80 |
81 | .puzzle-select-div {
82 | display: flex;
83 | flex-direction: column;
84 | align-items: center;
85 | }
86 | }
87 |
88 | p {
89 | margin: 0;
90 | }
91 |
92 | .puzzle-select-div {
93 | margin: 10px 0;
94 | }
95 |
96 | #lets-play {
97 | font-family: "Rubik", sans-serif;
98 | font-size: 40px;
99 | height: 55px;
100 | padding: 12px;
101 | margin-bottom: 40px;
102 | font-style: italic;
103 | font-weight: 500;
104 | }
105 |
106 | #house-img {
107 | display: block;
108 | width: max-content;
109 | margin: 0 auto;
110 | border-radius: 4px;
111 | }
112 |
113 | button {
114 | margin: 6px 10px;
115 | background-color: $buttonBackground;
116 | color: $buttonText;
117 | padding: 5px 10px;
118 | border-radius: 5px;
119 | font-family: "Roboto", sans-serif;
120 | font-size: 16px;
121 | }
122 |
123 | .button-container {
124 | width: max-content;
125 | margin: 15px auto;
126 | font-family: "Roboto", sans-serif;
127 | }
128 |
129 | @import "./modules/puzzle.scss";
130 | @import "./modules/userNavbar.scss";
131 |
--------------------------------------------------------------------------------
/src/client/pages/Puzzle/components/ToolBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 |
3 | // Types
4 | import { UserContextValue, SquareContextValue } from '../../../frontendTypes';
5 |
6 | // Context
7 | import { userContext, squareContext } from '../../../context';
8 |
9 | // Components
10 | import SolutionContainer from './SolutionContainer';
11 |
12 | // Utilities
13 | import { pencilSquaresFromString } from '../../../utils/puzzle-state-management-functions/squaresFromPuzzleStrings';
14 | import { autofillPencilSquares } from '../../../utils/puzzle-state-management-functions/autofillPencilSquares';
15 | import { savePuzzleAtLeastOnce } from '../../../utils/save';
16 | const savePuzzle = savePuzzleAtLeastOnce();
17 |
18 | // Main Component
19 | const ToolBar = () => {
20 | const { user, setUser } = useContext
67 |
70 |
76 |
79 |
82 |
83 | {showMoreTools && (
84 |
85 |
88 |
91 |
92 | )}
93 | {showSolveBar &&
27 | {completePercent === 0 ? (
28 |
63 | );
64 | };
65 |
66 | export default GameStats;
67 |
68 | // Helper Functions
69 | const calculatePercentage = (user: User, puzzleNumber?: number): number => {
70 | if (!user) return 0;
71 | let progress: string | undefined;
72 | if (puzzleNumber) {
73 | progress = user.allPuzzles[puzzleNumber]?.progress;
74 | } else {
75 | progress = user.allPuzzles[user.lastPuzzle]?.progress;
76 | }
77 | if (!progress) return 0;
78 | let count = 0;
79 | for (let i = 0; i < progress.length; i++) {
80 | if (progress[i] !== '0') count++;
81 | }
82 | return Math.round((count / 81) * 100);
83 | };
84 |
85 | const retrievePuzzle = (
86 | user: User,
87 | puzzleCollection: PuzzleCollection,
88 | puzzleNumber?: number
89 | ): Puzzle => {
90 | if (!user || !puzzleCollection || (!puzzleNumber && user.lastPuzzle < 1)) {
91 | return defaultPuzzleDocument(0, '', '');
92 | }
93 | if (puzzleNumber) {
94 | return puzzleCollection[puzzleNumber];
95 | }
96 | return puzzleCollection[user.lastPuzzle];
97 | };
98 |
99 | const capitalize = (string: string): string => {
100 | return string[0].toUpperCase() + string.slice(1);
101 | };
102 |
--------------------------------------------------------------------------------
/src/client/pages/Puzzle/components/SolutionContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 |
3 | // Types
4 | import { TechniqueString, SolutionProcedure } from '../../../../types';
5 | import { SquareContextValue } from '../../../frontendTypes';
6 |
7 | // Context
8 | import { squareContext } from '../../../context';
9 |
10 | // Utilities
11 | import {
12 | solutionFunctionDictionary,
13 | solutionStringDictionary
14 | } from '../../../../globalUtils/puzzle-solution-functions/solutionDictionary';
15 | import {
16 | techniqueStrings,
17 | puzzleSolveOnce,
18 | puzzleSolveAndUpdateState
19 | } from '../../../../globalUtils/puzzle-solution-functions/solutionFramework';
20 |
21 | // Helper functions
22 | const makeTechniqueOptions = () => {
23 | const options = [];
24 | for (const technique of techniqueStrings) {
25 | options.push(
26 |
29 | );
30 | }
31 | return options;
32 | };
33 | const techniqueOptions = makeTechniqueOptions();
34 |
35 | // Main Component
36 | const SolutionContainer = () => {
37 | const { filledSquares, setFilledSquares, pencilSquares, setPencilSquares } =
38 | useContext
29 | Start a puzzle to see its stats
30 |
31 | ) : (
32 | <>
33 | Completion: {completePercent}%
34 |
35 | Unique Solution: {puzzle.uniqueSolution ? 'Yes' : 'No'}
36 |
37 |
38 | Difficulty Level: {capitalize(puzzle.difficultyString)}
39 |
40 | Difficulty Score: {puzzle.difficultyScore}
41 |
42 | Techniques:
43 |
44 | -
45 | {puzzle.singleCandidate &&
- Single Candidate } 46 | {puzzle.singlePosition &&
- Single Position } 47 | {puzzle.candidateLines &&
- Candidate Lines } 48 | {puzzle.doublePairs &&
- Double Pairs } 49 | {puzzle.multipleLines &&
- Multiple Lines } 50 | {puzzle.nakedPair &&
- Naked Pair } 51 | {puzzle.hiddenPair &&
- Hidden Pair } 52 | {puzzle.nakedTriple &&
- Naked Triple } 53 | {puzzle.hiddenTriple &&
- Hidden Triple } 54 | {puzzle.xWing &&
- X-Wing } 55 | {puzzle.forcingChains &&
- Forcing Chains } 56 | {puzzle.nakedQuad &&
- Naked Quad } 57 | {puzzle.hiddenQuad &&
- Hidden Quad } 58 | {puzzle.swordfish &&
- Swordfish } 59 |
88 |
112 | );
113 | };
114 |
115 | export default SolutionContainer;
116 |
--------------------------------------------------------------------------------
/src/client/scss/modules/_puzzle.scss:
--------------------------------------------------------------------------------
1 | $bigBorderColor: #08153e;
2 | $innerBorderColor: #0d2367;
3 | $squareBackground: #f7f8f8;
4 | $numberColor: #1840b9;
5 | $fixedVal: $bigBorderColor;
6 | $duplicateNumber: rgb(204, 69, 69);
7 | // $pencilNum: $numberColor;
8 | $pencilNum: #4f18ce;
9 | $peerSquareBackground: #d9e1fa;
10 | // $clickedSquareBackground: #cbd6f8;
11 | // $clickedSquareBackground: #eef1fd;
12 | $clickedSquareBackground: #c0cef7;
13 | $clickedSquareBorder: yellow;
14 |
15 | // $puzzleButtonBackground: #3D67E6;
16 | // $puzzleButtonBackground: #305de4;
17 | $puzzleButtonBackground: #3964e4;
18 | $puzzleButtonShadow: rgb(168, 40, 210);
19 | $puzzleButtonText: #b4c4f5;
20 | $puzzleButtonShadow: #8a5fed;
21 | $visitedLink: rgb(128, 179, 171);
22 |
23 | .puzzle-page-centerer {
24 | width: 100%;
25 | display: flex;
26 | justify-content: center;
27 |
28 | :focus {
29 | outline: none;
30 | }
31 | }
32 |
33 | .puzzle-page-container {
34 | flex-grow: 1;
35 | margin: 0 8px;
36 | min-width: 320px;
37 | max-width: 480px;
38 | }
39 |
40 | .puzzle-container {
41 | display: grid;
42 | grid-template-rows: repeat(3, 1fr);
43 | grid-template-columns: repeat(3, 1fr);
44 | gap: 2px;
45 | border: $bigBorderColor solid 2px;
46 | background-color: $bigBorderColor;
47 | border-radius: 2px;
48 | margin-bottom: 15px;
49 | font-family: "Roboto Mono", monospace;
50 | }
51 |
52 | .box-unit-container {
53 | display: grid;
54 | grid-template-rows: repeat(3, 1fr);
55 | grid-template-columns: repeat(3, 1fr);
56 | gap: 1px;
57 | background-color: $innerBorderColor;
58 | }
59 |
60 | .square-container {
61 | background-color: $squareBackground;
62 | aspect-ratio: 50/61;
63 | padding: 2px;
64 | }
65 |
66 | .filled-square {
67 | display: flex;
68 | justify-content: center;
69 | align-items: center;
70 | font-size: max(20px, min(6vw, 32px));
71 | font-weight: 300;
72 | color: $numberColor;
73 | }
74 |
75 | .fixed-val {
76 | color: $fixedVal;
77 | }
78 |
79 | .pencil-square {
80 | display: grid;
81 | grid-template-rows: repeat(3, 1fr);
82 | grid-template-columns: repeat(3, 1fr);
83 | align-items: center;
84 | }
85 |
86 | .pencil-val-div {
87 | display: flex;
88 | justify-content: center;
89 | align-items: center;
90 | font-size: max(9px, min(2.8vw, 14px));
91 | font-weight: 200;
92 | color: $pencilNum;
93 | }
94 |
95 | .duplicate-number {
96 | color: $duplicateNumber;
97 | }
98 |
99 | .fixed-val.duplicate-number {
100 | color: darken($duplicateNumber, 15%);
101 | }
102 |
103 | .current-peer {
104 | background-color: $peerSquareBackground;
105 | }
106 |
107 | .current-square-outline {
108 | padding: 0;
109 | border: lighten($numberColor, 10%) solid 2px;
110 | }
111 |
112 | .current-square-background {
113 | border-color: $clickedSquareBorder;
114 | background-color: $clickedSquareBackground;
115 | }
116 |
117 | // Styles for buttons below puzzle
118 | .number-select-bar {
119 | display: flex;
120 | justify-content: space-between;
121 | margin-bottom: 12px;
122 | }
123 |
124 | .number-button {
125 | flex-grow: 1;
126 | aspect-ratio: 1;
127 | margin: 0 5px;
128 | border-color: rgba(118, 118, 118, 0.3);
129 | border-radius: 5px;
130 | color: $puzzleButtonText;
131 | background-color: $puzzleButtonBackground;
132 | font-size: max(16px, min(5vw, 24px));
133 | font-weight: 300;
134 |
135 | &.pencil-mode {
136 | font-size: max(14px, min(4vw, 20px));
137 | font-weight: 300;
138 | }
139 | }
140 |
141 | .puzzle-button-container {
142 | display: flex;
143 | flex-wrap: wrap;
144 | justify-content: center;
145 | }
146 |
147 | .puzzle-button {
148 | margin: 0 4px 12px;
149 | color: $puzzleButtonText;
150 | background-color: $puzzleButtonBackground;
151 | font-size: max(16px, min(4vw, 19px));
152 | padding: 5px 12px;
153 | border-radius: 5px;
154 | }
155 |
156 | .highlight-number-button {
157 | background-color: darken($puzzleButtonBackground, 8%);
158 | color: darken($puzzleButtonText, 4%);
159 | box-shadow: 3px 4px 3px $puzzleButtonShadow;
160 | }
161 |
162 | .number-button:disabled {
163 | background-color: lighten($puzzleButtonBackground, 6%);
164 | color: lighten($puzzleButtonText, 4%);
165 | }
166 |
167 | .number-button.highlight-number-button:disabled {
168 | background-color: lighten($puzzleButtonBackground, 2%);
169 | color: lighten($puzzleButtonText, 1%);
170 | }
171 |
--------------------------------------------------------------------------------
/src/client/pages/Welcome/SignUp.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react';
2 | import { useNavigate, Form, useActionData } from 'react-router-dom';
3 | import { userContext, pageContext } from '../../context';
4 |
5 | // Types
6 | import { UserContextValue, PageContextValue } from '../../frontendTypes';
7 | import { SignInData, SignInResponse } from '../../../types';
8 |
9 | // Main Component
10 | const SignUp = () => {
11 | const navigate = useNavigate();
12 | const { user, setUser } = useContext
89 |
111 |
90 |
101 | {/*
107 |
108 | Hints
102 | {/* This button will highlight the numbers */}
103 | {/*
104 | Solve
*/}
105 |
106 | Last technique applied: {foundTechnique ? foundTechnique : 'None'}
109 | {/* */} 110 |
41 |
59 | );
60 | };
61 |
62 | // Helper Functions
63 | // This action function is called when the Form above is submitted (see router setup in App.jsx).
64 | export const signUpAction = async ({ request }: { request: Request }): PromiseCreate New Account
42 | 58 |
53 |
70 | );
71 | };
72 |
73 | export default Login;
74 |
75 | // Helper Functions
76 | // This action function is called when the Form above is submitted (see router setup in App.jsx).
77 | export const loginAction = async ({ request }: { request: Request }): PromisePlease Log In
54 | 66 |67 | No account? Sign up 68 |
69 |New puzzle select
53 |Disabled buttons represent features that are on their way
54 |
55 |
56 |
57 |
58 | {/* */}
59 |
60 | Puzzle Filters:
61 |
62 |
124 |
125 | );
126 | };
127 |
128 | export default PuzzleSelectViaFilters;
129 |
130 | // Wrote this before realizing I'd like to use this logic in the backend
131 | // Saving this code until I use it there
132 |
133 | // const puzzleSelectWithoutFilters = (user, puzzleRangeStart, puzzleRangeEnd) => {
134 | // const takenNumbers = new Set();
135 | // for (const puzzleObj of user.allPuzzles) {
136 | // takenNumbers.add(puzzleObj.puzzleNumber);
137 | // }
138 | // let numberIsValid = false;
139 | // let puzzleNumber;
140 | // while (!numberIsValid) {
141 | // puzzleNumber =
142 | // Math.floor(Math.random() * (puzzleRangeEnd - puzzleRangeStart) + puzzleRangeStart);
143 | // if (!takenNumbers.has(puzzleNumber)) numberIsValid = true;
144 | // }
145 | // return puzzleNumber;
146 | // };
147 |
--------------------------------------------------------------------------------
/src/globalUtils/puzzle-solution-functions/singlePositionSolver.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SolveTechnique } from '../../types';
3 | import { PuzzleVal } from '../../client/frontendTypes';
4 |
5 | // Utilities
6 | import {
7 | boxes,
8 | allSquareIds
9 | } from '../../client/utils/puzzle-state-management-functions/squareIdsAndPuzzleVals';
10 | import { newFilledSquare } from '../../client/utils/puzzle-state-management-functions/newFilledSquare';
11 | import { updateSolveSquares } from './updateSolveSquares';
12 | import { newSolveSquares } from './solutionFramework';
13 | import { populateSolveSquaresIfEmpty } from './populateSolveSquaresIfEmpty';
14 |
15 | /** singlePositionSolver
16 | *
17 | * This is the optimized version of the technique that utilizes a pre-existing solveSquares to
18 | * execute. It was also populate solveSquares if it's empty. Using a pre-existing solveSquares
19 | * allows us to take into account solveSquares altered by other functions like double pairs into
20 | * account
21 | *
22 | * This function takes advantage of a pattern of auto-filled pencil values, wherein a single
23 | * position candidate will be the only square with a particular puzzleVal in a box (set of 3x3
24 | * squares). Every other square in the box will have that puzzleVal excluded either because it has
25 | * a filledSquares value already, or one of its peers prevents it from having said puzzleVal.
26 | *
27 | * @param filledSquares
28 | * @param solveSquares
29 | * @param solutionCache
30 | * @returns
31 | */
32 | export const singlePositionSolver: SolveTechnique = (
33 | filledSquares,
34 | solveSquares,
35 | solutionCache
36 | ) => {
37 | // console.log('Executing singlePositionSolver');
38 | let changeMade = false;
39 | populateSolveSquaresIfEmpty(filledSquares, solveSquares);
40 | // This function takes the current solveSquares rather than calculating a new solveSquares
41 | // Therefore penciled numbers removed via other functions will be considered in this function
42 | for (const box of boxes) {
43 | box.forEach((squareId) => {
44 | if (changeMade || solveSquares[squareId].size === 0) return;
45 | const boxPuzzleValues = new Set();
46 |
47 | box.forEach((boxSquareId) => {
48 | if (boxSquareId === squareId) return;
49 | solveSquares[boxSquareId].forEach((puzzleVal) => {
50 | boxPuzzleValues.add(puzzleVal);
51 | });
52 | });
53 |
54 | const uniqueVals = new Set();
55 | solveSquares[squareId].forEach((puzzleVal) => {
56 | if (!boxPuzzleValues.has(puzzleVal)) {
57 | uniqueVals.add(puzzleVal);
58 | }
59 | });
60 | if (uniqueVals.size === 0) return;
61 |
62 | const val = uniqueVals.values().next().value as PuzzleVal;
63 | filledSquares[squareId] = newFilledSquare(val, false);
64 | filledSquares.size += 1;
65 | solutionCache.singlePosition += 1;
66 | solveSquares[squareId].clear();
67 | updateSolveSquares(filledSquares, solveSquares);
68 | changeMade = true;
69 | return;
70 | });
71 | if (changeMade) break;
72 | }
73 | return changeMade;
74 | };
75 |
76 | /** singlePositionSolver2
77 | *
78 | * This is the user friendly version of the method that ignores a users current pencilSquares
79 | * and calculates a solveSquares based on the filledSquares alone.
80 | *
81 | * This function takes advantage of a pattern of auto-filled pencil values, wherein a single
82 | * position candidate will be the only square with a particular puzzleVal in a box (set of 3x3
83 | * squares). Every other square in the box will have that puzzleVal excluded either because it has
84 | * a filledSquares value already, or one of its peers prevents it from having said puzzleVal.
85 | *
86 | * @param filledSquares
87 | * @param solveSquares
88 | * @param solutionCache
89 | * @returns
90 | */
91 | export const singlePositionSolver2: SolveTechnique = (
92 | filledSquares,
93 | solveSquares,
94 | solutionCache
95 | ) => {
96 | // console.log('Executing singlePositionSolver');
97 | let changeMade = false;
98 | // This function will operate separately from any user supplied pencil square values for
99 | // solveSquares, therefore we'll make our own solveSquares here, even though we have one as
100 | // a param to help control pencilSquares in the case of a filledSquares value update
101 | const freshSolveSquares = newSolveSquares();
102 | updateSolveSquares(filledSquares, freshSolveSquares);
103 | for (const squareId of allSquareIds) {
104 | // If there's already a value for a certain square, skip over it
105 | if (filledSquares[squareId] || freshSolveSquares[squareId].size === 0) continue;
106 |
107 | let currentBox = boxes[0];
108 | for (const box of boxes) {
109 | if (box.has(squareId)) {
110 | currentBox = box;
111 | }
112 | }
113 |
114 | const boxPuzzleValues = new Set();
115 | currentBox.forEach((boxSquareId) => {
116 | if (boxSquareId !== squareId) {
117 | freshSolveSquares[boxSquareId].forEach((puzzleVal) => {
118 | boxPuzzleValues.add(puzzleVal);
119 | });
120 | }
121 | });
122 | const uniqueVals = new Set();
123 | freshSolveSquares[squareId].forEach((puzzleVal) => {
124 | if (!boxPuzzleValues.has(puzzleVal)) {
125 | uniqueVals.add(puzzleVal);
126 | }
127 | });
128 |
129 | if (uniqueVals.size !== 1) continue;
130 |
131 | const val = uniqueVals.values().next().value as PuzzleVal;
132 | filledSquares[squareId] = newFilledSquare(val, false);
133 | filledSquares.size += 1;
134 | solutionCache.singlePosition += 1;
135 | solveSquares[squareId].clear();
136 | updateSolveSquares(filledSquares, solveSquares);
137 | changeMade = true;
138 | break;
139 | }
140 | return changeMade;
141 | };
142 |
--------------------------------------------------------------------------------
/src/client/utils/save.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { FilledSquares, PencilSquares, SetUser } from '../frontendTypes';
3 | import { User } from '../../types';
4 |
5 | // Utils
6 | import {
7 | createProgressString,
8 | createPencilProgressString
9 | } from './puzzle-state-management-functions/puzzleStringsFromSquares';
10 |
11 | /** savePuzzleAtLeastOnce
12 | *
13 | * Returns a function that allows a user to save their progress on a puzzle. The returned function
14 | * also confirms that there's a difference between the current puzzles state and a user's progress
15 | * string before saving. However, the function utilizes closure to make sure that the first save
16 | * occurs regardless of said difference. This is important as a puzzle isn't saved to a user in the
17 | * database until saved at least once.
18 | *
19 | * @returns function
20 | */
21 | export const savePuzzleAtLeastOnce = () => {
22 | let firstSave = true;
23 |
24 | return async (
25 | puzzleNumber: number,
26 | filledSquares: FilledSquares,
27 | pencilSquares: PencilSquares,
28 | user: User,
29 | setUser: SetUser
30 | ) => {
31 | // Don't allow a guest to save
32 | if (!user || user.username === 'guest') {
33 | alert('Please sign up for a free account to save');
34 | return;
35 | }
36 |
37 | if (puzzleNumber === 0) {
38 | alert('Please choose puzzle before saving');
39 | }
40 |
41 | // createProgressString generates a puzzle string that reflects the current state of allSquares
42 | const currentProgress = createProgressString(filledSquares);
43 | const currentPencilProgress = createPencilProgressString(pencilSquares);
44 |
45 | // Check to see if there are differences between the current state and a user's progress string
46 | const isPuzzleDifference = currentProgress !== user.allPuzzles[puzzleNumber].progress;
47 | const isPencilSquaresDifference =
48 | currentPencilProgress !== user.allPuzzles[puzzleNumber].pencilProgress;
49 |
50 | // Save only if it's the first time or there's a difference. Otherwise, skip saving
51 | if (firstSave || isPuzzleDifference || isPencilSquaresDifference) {
52 | // Play with optimistic rendering here later. For now, confirm things happened in real time
53 | const res = await fetch('/api/user/save-puzzle', {
54 | method: 'POST',
55 | headers: { 'Content-Type': 'application/json' },
56 | body: JSON.stringify({
57 | username: user.username,
58 | puzzleNumber,
59 | progress: currentProgress,
60 | pencilProgress: currentPencilProgress
61 | })
62 | });
63 |
64 | if (!res.ok) {
65 | alert('Problem saving updated progress to user document in database, try again later');
66 | return;
67 | }
68 |
69 | const { status } = await res.json();
70 |
71 | if (status !== 'valid') {
72 | alert(
73 | 'Problem saving updated progress to user document in database (bad status), try again later'
74 | );
75 | return;
76 | }
77 |
78 | // If the save was successful, update the user's progress string so that if they navigate away
79 | // from the page and then come back the saved version of the puzzle will be shown
80 | const newUser = {
81 | ...user,
82 | allPuzzles: { ...user.allPuzzles }
83 | };
84 |
85 | newUser.allPuzzles[puzzleNumber].progress = currentProgress;
86 | newUser.allPuzzles[puzzleNumber].pencilProgress = currentPencilProgress;
87 |
88 | setUser(newUser);
89 |
90 | if (firstSave) {
91 | firstSave = false;
92 | // console.log('First save successful');
93 | return;
94 | }
95 |
96 | // console.log('Successful save');
97 | return;
98 | }
99 |
100 | // console.log('No puzzle differences from last save, no save necessary');
101 | };
102 | };
103 |
104 | export const saveToLocalUserOnly = (
105 | puzzleNumber: number,
106 | filledSquares: FilledSquares,
107 | pencilSquares: PencilSquares,
108 | user: User,
109 | setUser: SetUser
110 | ) => {
111 | if (!user) {
112 | throw new Error('Somehow a local save to user has been attempted without a user');
113 | }
114 |
115 | if (puzzleNumber === 0) {
116 | alert('Please choose puzzle before saving');
117 | }
118 |
119 | // createProgressString generates a puzzle string that reflects the current state of allSquares
120 | const currentProgress = createProgressString(filledSquares);
121 | const currentPencilProgress = createPencilProgressString(pencilSquares);
122 |
123 | // Check to see if there are differences between the current state and a user's progress string
124 | const isPuzzleDifference = currentProgress !== user.allPuzzles[puzzleNumber].progress;
125 | const isPencilSquaresDifference =
126 | currentPencilProgress !== user.allPuzzles[puzzleNumber].pencilProgress;
127 |
128 | if (isPuzzleDifference || isPencilSquaresDifference) {
129 | const newUser = {
130 | ...user,
131 | allPuzzles: { ...user.allPuzzles }
132 | };
133 | newUser.allPuzzles[puzzleNumber].progress = currentProgress;
134 | newUser.allPuzzles[puzzleNumber].pencilProgress = currentPencilProgress;
135 | setUser(newUser);
136 | }
137 | };
138 |
139 | export const saveUserToDatabase = async (user: User) => {
140 | if (!user || user.username === 'guest') return;
141 |
142 | const res = await fetch('/api/user/save-user', {
143 | method: 'POST',
144 | headers: { 'Content-Type': 'application/json' },
145 | body: JSON.stringify({
146 | username: user.username,
147 | lastPuzzle: user.lastPuzzle,
148 | allPuzzles: user.allPuzzles
149 | })
150 | });
151 |
152 | if (!res.ok) {
153 | alert('Problem saving updated user to database, try again later');
154 | return;
155 | }
156 |
157 | const { status } = await res.json();
158 |
159 | if (status !== 'valid') {
160 | alert('Problem saving updated user to database (bad status), try again later');
161 | return;
162 | }
163 | };
164 |
--------------------------------------------------------------------------------
/src/globalUtils/puzzle-solution-functions/nakedSubsetSolver.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { SolveSquares, SolveTechnique, TechniqueString } from '../../types';
3 | import { PuzzleVal, SquareId } from '../../client/frontendTypes';
4 |
5 | // Utilities
6 | import {
7 | rows,
8 | cols,
9 | boxes
10 | } from '../../client/utils/puzzle-state-management-functions/squareIdsAndPuzzleVals';
11 |
12 | const squareCollectionNakedSubsetSolver = (
13 | numberInSubset: number,
14 | squareIdsCollection: SetdifficultyScore
63 |
64 | {' '}
65 | uniqueSolution{' '}
66 |
67 |
68 | {' '}
69 | singleCandidate{' '}
70 |
71 |
72 | {' '}
73 | singlePosition{' '}
74 |
75 |
76 | {' '}
77 | candidateLines{' '}
78 |
79 |
80 | {' '}
81 | doublePairs{' '}
82 |
83 |
84 | {' '}
85 | multipleLines{' '}
86 |
87 |
88 | {' '}
89 | nakedPair{' '}
90 |
91 |
92 | {' '}
93 | hiddenPair{' '}
94 |
95 |
96 | {' '}
97 | nakedTriple{' '}
98 |
99 |
100 | {' '}
101 | hiddenTriple{' '}
102 |
103 |
104 | {' '}
105 | xWing{' '}
106 |
107 |
108 | {' '}
109 | forcingChains{' '}
110 |
111 |
112 | {' '}
113 | nakedQuad{' '}
114 |
115 |
116 | {' '}
117 | hiddenQuad{' '}
118 |
119 |
120 | {' '}
121 | swordfish{' '}
122 |
123 |
104 |
126 |
109 | onPuzzleKeyDown(
110 | event,
111 | pencilMode,
112 | clickedSquare,
113 | filledSquares,
114 | setFilledSquares,
115 | pencilSquares,
116 | setPencilSquares
117 | )
118 | }
119 | >
120 |
125 |
140 |
161 |
145 | onPuzzleKeyDown(
146 | event,
147 | pencilMode,
148 | clickedSquare,
149 | filledSquares,
150 | setFilledSquares,
151 | pencilSquares,
152 | setPencilSquares
153 | )
154 | }
155 | >
156 |
160 |