Skip to content

jjayeon/uncross-the-lines

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Uncross the Lines!

A one-page javascript app implementing the wonderful game "Uncross the Lines." Features a medley of advanced selection options --- shift-clicking and deselecting, box selection, and shift-boxing.

Play here: https://uncrossthelines.netlify.app/

build instructions:

with npm installed:

npm install --save-dev '[email protected]'

Our favorite SVG library.

npm run build

Creates dist/ with everything you need to host the app. No backend or database shenanigans.

If you try this and it doesn't work, I probably forgot something. Please tell me.

repository structure:

./

Includes package.json (standard for npm apps) and webpack.config.js, for configuring Webpack (used to build dist/ files).

(At home there's another file called package-lock.json. I don't know what it's for, but I added it to .gitignore and it seems fine.)

node_modules

All our node packages, of course. The only one you really need is '@svgdotjs/svg.js', a very lightweight library for manipulating SVG elements. It's very elegant and clean, even though the documentation is a little sparse. See svgjs.com for more.

src

Contains all the source code! index.js is just a landing site for Webpack; it invokes App() in App.js, which arranges all our components nicely. Also contains index.html, a template file for Webpack.

src/components

The various components of the app. Mostly self-explanatory, but pay special attention to Lines.js and Input.js. Lines.js contains the bulk of the code testing for victory (i.e. no lines intersecting), and Input.js handles all user input in a nightmare nightmare mess. I tried to comment it to make it easier to get through, but it might still take you a few passes. Sorry! Mouse processing is hard.

For the most part, the app is controlled by a series of custom SVG events attached to different elements. For example, clicking will fire a "mousedown" event on Input, which will fire a "select" event on any circle under the mouse. The full event chains (in pseudocode):

  • Input.mousedown ->
    • Circles.select
    • OR Selection.anchor
    • OR Button.reset ->
      • Circles.scramble
      • Lines.check -> BG.success
  • Input.mousemove ->
    • Circles.dmove AND Lines.redraw
    • OR Selection.redraw
  • Input.mouseup ->
    • Circles.select
    • Lines.check -> BG.success

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published