PickSet Generator

A static web tool for generating practice lock pin sets. It is designed for Sparrows-style practice locks, such as the Sidewinder or a cutaway lock with a repin kit.

Features

• Generate 1 to 8 pin chamber sets
• Default 5 pin chambers
• Key pin range from 0 to 9
• Copyable seeds for repeatable sets and option restore
• MACS limit for controlling adjacent key pin jumps
• Psychopath Mode for generating empty chambers
• Driver security pins, including spool, serrated, mushroom, barrel, gin, tree, and more
• Security key pins with built-in and custom options
• Visual pin stack layout with driver pins above the shear line and key pins below it
• Light and dark theme toggle

How To Use

1. Open index.html in a browser.
2. Choose the number of pin chambers.
3. Set the key pin range. The default range of 10 creates values from 0 to 9.
4. Set the MACS limit.
5. Leave the Seed field empty for a fresh random set, or paste a copied seed to restore the seed, enabled options, selected pins, custom pins, and chance sliders.
6. Turn on Psychopath Mode if you want a chance for empty chambers.
7. Turn on Driver Security Pins or Security Key Pins if you want advanced pin types.
8. Press Generate.

The displayed bitting uses the generated key pin values. Empty chambers appear as X. Use Copy Seed after generating a set to copy a seed that can recreate the same full setup later.

Project Structure

.
+-- index.html
+-- styles.css
+-- script.js
+-- LICENSE
+-- Assets/
    +-- pins.css

Adding New Pin Designs

Pin artwork lives in Assets/pins.css. The generator connects a pin design through three matching names:

1. A checkbox value in index.html
2. A label key in script.js
3. A CSS class in Assets/pins.css

For a new driver security pin, add a checkbox:

<label><input type="checkbox" name="securityType" value="my-pin"> My Pin</label>

Add the display label in script.js inside typeLabels:

"my-pin": "My Pin",

Add the art in Assets/pins.css:

.driver-pin.my-pin {
  clip-path: polygon(0 0, 100% 0, 80% 40%, 100% 100%, 0 100%, 20% 40%);
}

For a new security key pin, use keySecurityType in index.html, add the label inside keyPinTypeLabels in script.js, and create a .key-pin.my-key-pin class in Assets/pins.css.

Clip Path Art

Most pin designs use clip-path: polygon(...). The points are written as x y pairs, where 0 0 is the top-left corner and 100% 100% is the bottom-right corner.

Example:

clip-path: polygon(
  0 0,
  100% 0,
  80% 40%,
  100% 100%,
  0 100%,
  20% 40%
);

Tips:

• Move left and right points inward to make a waist or groove.
• Use straight vertical sides for regular pins.
• Use repeated in-and-out points for serrated shapes.
• Keep the first point at the top and move around the shape in order.
• Test the design in the browser after every small change.

License

This project is licensed under the MIT License. See LICENSE for details.