Remix

Make your own version of Shiftlock Grid Puzzle

Edit the prompt below and generate a customized version in seconds.

Original by baha edine taouai

Describe your app

Build a complete playable mobile puzzle game called **SHIFTLOCK** using React Native, TypeScript, and Expo.

Target Android first, while keeping the project compatible with iOS.

The priority is NOT feature quantity. The priority is:

1. correct puzzle logic
2. excellent touch controls
3. polished animations
4. a satisfying gameplay loop
5. clean maintainable code

Do not create placeholder functionality. Every visible button must work.

# CORE GAME IDEA

SHIFTLOCK is a grid-based logic puzzle.

The player sees:

* a small TARGET grid near the top
* a larger PLAYABLE grid below it

Both grids contain the same set of tiles.

The playable board starts scrambled.

The goal is to manipulate the playable grid until it exactly matches the target grid.

# ONLY ALLOWED MOVES

The player can manipulate the board in exactly four ways:

* shift an entire row LEFT by one cell
* shift an entire row RIGHT by one cell
* shift an entire column UP by one cell
* shift an entire column DOWN by one cell

Every movement is circular.

Example:

[A B C D]

shift right becomes:

[D A B C]

A column behaves the same way vertically.

One row or column shift counts as exactly ONE move.

The player must NEVER be allowed to drag or swap individual tiles.

# TOUCH CONTROLS

Implement swipe gestures directly on the playable board.

When the user starts a swipe on a tile:

* mostly horizontal swipe -> move that tile's entire row
* mostly vertical swipe -> move that tile's entire column

Determine direction using the dominant gesture axis.

Require a reasonable minimum swipe distance so accidental taps do not trigger moves.

One gesture must produce exactly one grid shift.

Do not allow diagonal or ambiguous gestures to produce multiple moves.

Lock input temporarily while the board animation is running.

The controls must feel immediate and reliable on a phone.

# ANIMATION

Animate the complete row or column sliding together.

The tile leaving one edge must visually wrap around to the opposite edge.

Animation should feel smooth and quick, approximately 150–250ms.

Do NOT simply change the array instantly without visual movement.

After each animation:

1. commit the new board state
2. increment move count
3. check whether the board matches the target

# TILE DESIGN

Tiles must be distinguishable without depending only on color.

Each tile should have:

* unique color
* unique simple geometric symbol

Examples:

circle
triangle
square
diamond
star
cross
hexagon
ring

Use clean vector-style shapes where practical.

# PUZZLE GENERATION

Every puzzle MUST be mathematically guaranteed solvable.

Never generate the target board and scrambled board independently.

Instead:

1. Create the solved TARGET board.
2. Clone it.
3. Apply valid row/column shifts to the clone.
4. Use the resulting board as the player's starting board.

Therefore the scrambled puzzle is guaranteed reachable from the target.

Use deterministic seeded random generation.

The same level number must always produce the same target and same scramble.

Create a simple deterministic seeded PRNG rather than Math.random() for level generation.

# SCRAMBLE QUALITY

While generating the scramble:

* never immediately reverse the previous move
* avoid trivial sequences that cancel themselves
* verify that the final scrambled board is NOT already solved

Store the scramble sequence internally.

Because the scramble path is known, the reverse path can be used as a valid solution.

# LEVELS

For V1 create 30 levels.

Difficulty progression:

Levels 1–5:
3x3 grid
3–5 scramble moves

Levels 6–10:
3x3 grid
6–9 scramble moves

Levels 11–20:
4x4 grid
7–12 scramble moves

Levels 21–30:
4x4 grid
12–18 scramble moves

Level 1 should be deliberately easy.

Completing a level unlocks the next level.

# GAME SCREEN

Create a polished game screen containing:

Top area:

* back button
* "LEVEL X"
* move counter

Target area:

* label "TARGET"
* small non-interactive target grid

Main area:

* large interactive playable grid

Bottom controls:

* Undo
* Restart
* Hint

# UNDO

Store player move history.

Undo reverses exactly the previous player movement.

Example:

previous move:
row 2 RIGHT

Undo:
row 2 LEFT

Undo must also correctly reduce the move counter.

Disable Undo when no player moves exist.

# RESTART

Restart restores the exact original scrambled state for that level.

Reset:

* move count
* move history
* solved state

# HINT SYSTEM

Because every puzzle was created from a known scramble sequence, maintain a valid reverse solution sequence.

When Hint is pressed:

highlight the row or column and indicate the direction of one useful move.

Do NOT automatically make the move.

Do not build an AI solver.

# SOLVED STATE

After every completed movement compare every playable-board cell against the target board.

When every cell matches:

1. stop accepting board moves
2. trigger stronger haptic feedback if supported
3. show a polished success animation
4. show a completion card

Completion card:

PUZZLE SOLVED

Moves: X
Best: X

Buttons:

NEXT LEVEL
REPLAY
LEVELS

# STAR RATING

Give a level:

3 stars = efficient solution
2 stars = moderately above expected solution length
1 star = completed

Base thresholds on the known scramble/solution length.

Do not require mathematically proving the globally optimal number of moves.

# PERSISTENCE

Persist locally:

* highest unlocked level
* completed levels
* stars earned per level
* best move count per level
* settings

Use a stable Expo-compatible local storage solution.

The game must work entirely offline.

No account.
No backend.
No network requests.
No authentication.
No advertisements.
No payments.
No API keys.

# SCREENS

For this V1 implement only:

1. Home
2. Level Select
3. Game
4. Settings

HOME

Show:

SHIFTLOCK logo/title

CONTINUE
PLAY
SETTINGS

Continue should only appear when there is existing progress.

LEVEL SELECT

Show 30 levels as compact cards.

Each card displays:

* level number
* stars if completed
* locked state when unavailable

SETTINGS

Include:

* sound on/off
* haptics on/off
* dark/light/system appearance
* reset progress

Reset progress requires confirmation.

# VISUAL DIRECTION

Make the game look like a premium modern mobile puzzle game rather than a generic business-app template.

Default appearance:

dark charcoal / deep navy background

Tile accents can use:
cyan
violet
coral
lime
amber
blue

Use:

* rounded tiles
* subtle glow
* subtle gradients
* clean shadows
* generous spacing
* bold typography
* restrained animations

Avoid excessive glassmorphism.

Avoid childish cartoon styling.

The board must remain visually dominant.

Design primarily for portrait Android phones.

Handle narrow/small screens correctly.

# HAPTICS AND SOUND

Use subtle haptic feedback when:

* completing a move
* pressing important controls

Use stronger feedback when solving a puzzle.

If sound is implemented, keep effects minimal:

* shift
* button
* solved

Sound and haptics must respect Settings.

Do not let missing audio assets break the build.

# CODE ARCHITECTURE

Do NOT put the entire application into one giant component.

Separate game logic from React UI.

Use modules similar to:

game/
board.ts
generator.ts
moves.ts
seededRandom.ts
scoring.ts
types.ts

storage/
progress.ts

components/
PuzzleBoard
TargetBoard
Tile
GameHeader
CompletionModal

screens/
HomeScreen
LevelSelectScreen
GameScreen
SettingsScreen

Exact filenames may differ, but maintain this separation.

Core puzzle logic should be implemented as pure TypeScript functions wherever possible.

Important functions should conceptually include:

createTargetBoard()
generateLevel()
shiftRow()
shiftColumn()
isSolved()
inverseMove()
calculateStars()

# DATA MODEL

Represent moves explicitly.

Example conceptual shape:

{
axis: "row" | "column",
index: number,
direction: "left" | "right" | "up" | "down"
}

Do not encode game movements through UI-specific state.

# CORRECTNESS REQUIREMENTS

Before considering the game complete, verify:

* row left wrapping works
* row right wrapping works
* column up wrapping works
* column down wrapping works
* inverse movements restore the board
* Undo works
* Restart works
* generated puzzles are solvable
* generated puzzle is not already solved
* solved detection works
* locked levels cannot be opened
* completing a level unlocks the next one
* progress survives application restart
* rapid swiping cannot corrupt board state
* gestures trigger only one move
* UI works on small portrait phones

Fix runtime and TypeScript errors rather than hiding them.

# IMPORTANT PRODUCT RULE

Do not expand the scope with multiplayer, leaderboards, accounts, backend services, AI features, social functionality, currencies, shops, daily challenges, achievements, subscriptions, or advertisements.

Those can be added later.

For this first version, deliver a small but extremely polished and completely functional puzzle game.

If an implementation detail is unspecified, choose the simplest robust solution yourself rather than asking the user.

Free to use. No credit card required.