Coder Social home page Coder Social logo

sethpoulsen / data-structures-playground Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 303 KB

A webapp for learning how to manipulate data structures with code.

License: GNU General Public License v3.0

HTML 1.53% TypeScript 95.13% JavaScript 3.34%

data-structures-playground's People

Contributors

jasonxia17 avatar sethpoulsen avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

data-structures-playground's Issues

Improve Placement of Newly Created Objects

There are a few issues here with the default placement of things:

  • Nodes end up on top of each other when created consecutively
  • If you point a node to itself, the pointer intersects with the node

image

image

Better Type Safety for `makeLine` function

Change the type signature of makeLine form

export function makeLine(coords: number[] = [0, 0, 0, 0]) 

to

export function makeLine(start: Point, end: Point) 

where

type Point = { x: number, y: number }

for better type safety and so its easier to call.

Enable scripting

Let user write code to directly manipulate the data structure diagram.

Start with C++, since that's what they use in CS 225 at UIUC.

Also, generate code to show the user based on the operations they did.

Make Diagram Style Configurable

Options

  • Circle vs. Box
  • Multibox (space for pointer)
  • head/tail pointer/no pointer and label/no label
  • lines or arrows for pointers
  • pointer starts in box/on edge of box
  • wrapper around linked list
  • wrapper around Node
  • Nodes arranged non-linear/linear
  • Implict NULL vs. word NULL vs. empty set vs. slash vs. ground symbol
  • memory address of node
  • memory address of next node

Improve Keyboard Interactions

Currently, you can tab through all the control boxes in a sensible order, which is good. As an improvement, we should also have

  • shortcuts for undo/redo
  • pressing "enter" while on an input element should click the button that is in that control box, e.g. after typing "5" in the create node input box, then pushing enter, the "create node" button should be clicked
  • any other useful keyboard interactions we think of

Validate variable names

Pointer variable names should be validated the same as C language variable names, and should be checked for duplicates.

Enable reassign to null

Currently if we have a pointer p and p->next is NULL, then attempting to reassign another pointer to p->next does nothing, but it actually should work just fine.

There should also be the word NULL as part of the input list for reassigning pointers, so you can just reassign anything to NULL whenever you want.

Enable Undo/Redo of operations

I think users are going to want this feature.

We're going to need to come up with some sort of sensible versioning system to make it happen.

Add automated tests

Some automated tests would be really nice.

Sure, unit test would be nice, but for a start lets just get some simple integration tests going:

  1. Feed the LinkedList a list of actions to perform
  2. verify that the constructed list is correct

This will at least help us make sure we don't ever completely break things.

Ideally, we would have a development build to run while developing, then a release build which runs all the test and does all the linting, and which is automatically built anytime someone opens a pull request or pushes to mainline.

Enable deletion

I assume people will want to be able to delete nodes and pointers somehow, even when in the mode where nodes that are left dangling are still drawn on the screen.

We need to come up with what the UI should be like, then implement it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.