Connectons+

A remix of The New York Times' Connections — but with a twist ✨
Connectons+ lets you tackle word groups of different sizes for an extra dose of challenge and variety 😄

Overview

Connectons+ reimagines the classic Connections puzzle with a more unpredictable format. Instead of four tidy groups of four, this version gives you word clusters of all shapes and sizes.

The game features multiple difficulty levels, customizable UI settings, and intuitive controls.

How to Play

Objective

Group the words by their hidden connections. Each word fits into one—and only one—group. The catch? You don’t know how many words are in each group. 😉

Gameplay

1. Click on the words you think belong together.
2. Hit Submit to check your guess.
3. Keep going until all groups are found.

Controls

• 🎮 New Game: Start over with a new puzzle.
• 🧹 Clear: Clear your selection.
• 🎲 Shuffle: Mix up the tiles.
• 🎯 Solve: Solve the puzzle
• 💡 Hint: Get a hint - selects half the tiles of the largest unsolved group. Once shown, you cannot deselect those tiles!
• ✔️ Submit: Submit your selection.
• 🐤 Difficulty: Switch between Easy, Medium, and Hard modes.

Feedback System

To help (but not spoil):

• ✅ Correct selections: You'll get praised and the tile will move to the solution area with their connection revealed.
• ℹ️ Partially correct submissions (more than half right): Reveal how many tiles are correct.
• ❌ Mostly incorrect: You'll get a generic "nope" message.
• 🔄 Repeated submissions: The game will nudge you to try something new.

Game Features

• Variable group sizes for increased challenge (and fun) compared to the original game 🚀
• Multiple difficulty levels you can switch between: Easy, Medium, and Hard 🐤
• Two languages are supported: English, and Hebrew 🌐
• Customizable interface with theme and layout options 🌗
• Responsive design that works on desktop and mobile devices 📱
• Confetti showers when you win 🎊
• Cloud-based puzzle storage using Supabase ☁️

Live Demo

You can play it right here:
👉 https://guychuk.github.io/connections-plus/

Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node)
• Supabase account (for database features)
• Python 3.8 (or higher)

Local Development

1. Clone the repository

   git clone https://github.com/guychuk/connections-plus.git
   cd connections-plus

2. Set up a Python virtual environment (for the DB scripts)

   • Create a virtual environment:

     python -m venv venv

   • Activate the virtual environment:
     • On Windows:

       venv\Scripts\activate

     • On macOS/Linux:

       source venv/bin/activate

3. Install Python dependencies

   pip install -r requirements.txt

4. Install Node.js dependencies

   npm install

5. Configure Supabase

   • Create an account at Supabase and start a new project.
   • Create the necessary tables, edge functions, and RLS (find them in /data).
   • In the project settings, grab your Project URL and anon public key.
   • Create a .env file in the root directory.
   • Add your Supabase URL and anon key:

     VITE_SUPABASE_URL=your_supabase_url
     VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
     

6. Start the development server

   npm run dev

7. Open your browser and navigate to:

   http://localhost:5173

Deployment

This project can be deployed using GitHub Pages for the frontend and Vercel for the backend.
Set environment variables as described in Local Development. For full deployment, configure CORS and connect to Supabase.

Technologies

• Frontend:

  • HTML5 for structure.
  • CSS3 for styling and animations.
  • Vanilla JavaScript for game logic and interactivity.

• Build:

  • Vite for fast builds.

• Backend & Data Storage:

  • Supabase for backend functionality.
  • PostgreSQL database for storing puzzle data and configurations.

• Libraries:

  • Toastify for elegant notifications [JS].
  • canvas-confetti for victory celebrations [JS].
  • supabase for communicating with supabase [Python].
  • dotenv for reading environment variables [Python].

• Deployment:

  • Vercel for fast, free hosting.

• Additional Tools:

  • Python scripts for database management and data seeding.

Customization Options

Theme Toggle

Switch between light and dark themes based on your preference:

Layout Options

Choose your preferred tile arrangement:

• Compact: Tiles are arranged in a neat rectangular grid with no gaps between them.
• Spacious: Tiles appear more randomly distributed with gaps, creating a shuffled appearance.

Roadmap

Future enhancements planned for Connectons+:

• Limited Turns Mode: For a little added pressure, like the original game.
• Hint System: Implement a hint feature for players who are stuck.
• Customizable Group Count: Allow players to adjust the number of groups.
• Statistics Tracking: Keep record of player performance over time.

Author

Guychuk - GitHub Profile

---

Enjoy connecting the dots! 🧩