no-stack-dub-sack/cs-playground-react

In-Browser Algorithm and Data Structures Practice

cs-playground-react's Issues

[staging]: add repl share feature & address ls overwrite problem

when sharing a repl, if two cs-pg-react tabs are open, the user has the potential to lose saved work depending on the order that the browser tabs are closed, since local storage is only updated when user navigates away from page. Find solution to this problem!

• key saved in redux state that tells local storage not to update if true?
• first suggestion combined with modified UI so that user can't navigate away from shared repl
• disabled menu items?

i18n for translations?

add test runner

add ability to test code and provide feedback to users

Add theme class to sidebar--menu--sub-header

Hey @no-stack-dub-sack, can you do a quick fix for me so I can keep working on my layout tweaks?

I need the details summary to have the theme name on it so I can style it correctly, could you do this for me?

I was able to get this in menuMap.js file on line 62 by the following:

render() {
    return (
      <details open>
        <summary className={`sidebar--menu--sub-header ${this.props.theme}`}>
          {this.props.header}
        </summary>
        { _.map(this.props.items, this.renderMenuItem) }
      </details>
    )
  }

However, in menu.js I cannot get this.props.theme, and you are just hardcoding the HTML there:

render() {
  return (
    <section
      className="sidebar--menu top-pane"
      style={{ height: topHeight, transition }}>
      <header className="sidebar--menu--header">
        Contents
      </header>
      <MenuMap
        header="Sorting Algorithms"
        items={SORTING_ALGOS} />
      <MenuMap
        header="Data Structures"
        items={DATA_STRUCTURES} />
      <details open>
        <summary className="sidebar--menu--sub-header"> // <-- right here
          Algorithm Challenges
        </summary>
        <MenuMap
          header="Easy"
          items={EASY_ALGOS}
          xtraClass="sub" />
        <MenuMap
          header="Moderate"
          items={MODERATE_ALGOS}
          xtraClass="sub" />
      </details>
    </section>
  )
}

So, could you add the theme class to this last button, the Algorithm Challenges details summary?

Thanks, would be helpful! I'm trying to have a slightly darker background for the light themes and a slightly lighter for the dark themes. Plus it would benefit theme creators.

fix loop-protect bug

Add transition to dropdowns

Hello, I would like to add some transition to the drop downs if you like

Can't edit any seed or solution information

Hello,

When I change any seed or solution information in the exported file (e.g. src/assets/seed/data-structures/LinkedList.js ), no changes are reflected in the UI. However, when I change the title string or resources array, the changes are made.

I've cleared my local storage, not really sure of what else to try (or why this might be happening), any ideas?

Thanks!

add circular doubly linked list

add CONTRIBUTING.md

Add contribution guidelines and instructions for adding challenges/topics.

Markdown syntax on welcome page.

I get that the welcome page of the site is the same as readme.md. However with console style, there is no way to render these markdown syntax properly. For example line 15 should be rewritten as the codebase, the repo lives at https://github.com/no-stack-dub-sack/cs-playground-react. instead. And for other text styling syntax, we can just remove them like - _SAVING CODE_ to - SAVING CODE.

cs-playground-react/src/assets/seed/welcome.js

Lines 15 to 21 in 29f09cf

	the codebase, the repo lives [here](https://github.com/no-stack-dub-sack/cs-playground-react).
	Have fun, thanks for visiting, and Happy Coding!
	# A couple of tips about the app:
	- _SAVING CODE_

If you think this is not necessary or this is actually your intention, you can close the issue right away. 😄

add reverse vowels challenge

working towards #19

improve algo challenges section

BST algo remove has small glitch

We are not handling the both left and right pointers when we delete the node. Update will be as mentioned below

// node only has right child
else if (!node.left) {
node.value = node.right.value
node.right = node.right.right
node.left = node.right.left;
}
// node only has left child
else if (!node.right) {
node.value = node.left.value
node.left = node.left.left
node.right = node.left.right
}

editor state: duplications in code store

current prod site causes a number of duplications in the saved user code due to a very sill error.

Being addressed in #25

fix loop-protect issue, change timeout length

Add Graph Data Structure

Most common & imp Graph Algos

add flow for static type checking

been reading / hearing a ton about flow and typescript lately. I think it's time to dive in!

This will be a nice way to prevent run-time errors and might even catch a few bugs. Will need to refactor all current code to work with flow and will need to understand more about how this works with react class component methods and redux.

[future feature] add "save / share all state" feature

related to #68, it moving to forced https, it might be nice to have a way for users to generate a share link that will populate their entire state from a different location (or in this case, in the new https site). In the absence of login and a true backend, this will also give people the ability to access their "account" from another machine.

I can see a few problems with this though - someone could inadvertently (or intentionally, which would be not cool) use this feature to replace someone else's entire state. So there would have to be a clear warning what's about to happen if one of these share links was popped into the browser.

Maybe the better solution is just to add a true backend and passport login to the site. But still - how to handle existing progress? Maybe just a launch a whole new site.... and tell people on the surge site that its deprecated and to come on over? Could add a redirect, but people would lose all their progress... ugghhh. I dunno...

Error (stack exhausted, infinite loop, reference error etc.) silences console.log

When an error is caught it seems that user defined console.log statements are rendered mute. That is:

function infinite() {
  console.log("This won't be shown in console");
  while (true) {}
}

infinite();

Running the above would cause the console statement to not display the string. Instead you will only get:

Error: Timed out after 500ms due to infinite loop on line 3

Having console log statements can be very helpful during any sort of quick debugging

future feature: settings menu

settings menu could include theme choices as well as a text area for defining linter rules (similar to JS bin)

add modal for move to forced https warning

I just realized that when the site is accessed over http and https, it's basically like having 2 accounts. The browser has a local storage environment for each, and state is not shared across http and https accesses. This can get confusing if someone doesn't realize they did this, and http should probably be avoided anyway.

Since search engines are beginning to add ratings for whether or not a site is secure (not that cs-playground-react can be found be SEs yet 😄), I think it makes sense to go in this direction, and surge does allow for forced https (for custom and non-custom domains alike). However, I'm not sure how many people are currently accessing the site over http (and I realized that my original Medium article - how most people learned about the site - linked to http://cs-playground-react, not https). So, if I force https now, many people might lose all of their progress if its stored in local storage associated with the http site. Probably should have thought of this from the beginning 😠 💀 Although, I think I did this for a reason - I can't specifically remember, but I believe it was related to service workers.

Not that there's too many people using the site right now, but with 100 hits per day or so, some are bound to have lots of progress stored in http local storage. To help prepare for this change, let's add add a modal or non-autoclose toast (this might be better) when the newest changes get deployed, which will warn people that this change is coming on a specific date, to give them time to save their progress elsewhere if they'd like. I don't want to force https with no warning and have people lose progress, but overall, I think this will be a nice improvement.

add clear console button

Any Menu Click Crashes

Run npm start
Click on any option from the left side menu you see below screen

push, pop, or peek method in current stack implementation are O(n)

I love your project! It already helps me sharpening my rusty CS skills. Stack is last in first out. With the way you push new value into the stack, a new value gets stacked below the old value instead of being on top of the stack.

O(n)

stack.push(1)
(1) =======

stack.push(2)
(1) =======
(2) =======

stack.push(3)
(1) =======
(2) =======
(3) =======

O(1)

stack.push(1)
stack.push(2)
stack.push(3)
(3) =======
(2) =======
(1) =======

When call stack.pop(), stack.push(), or stack.peek(), you have to recursively loop down to the last value and remove/add/peek it from/to the stack, which does not have O(1). Here is my propose solution:

class Stack {
    constructor() {
        this.root = null;
        this.size = 0;
    }

    push(value) {
        const node = new Node(value);
        
        if (this.root === null) {
            this.root = node;
        } else {
	    node.next = this.root;
            this.root = node;
        }
        
        this.size++;
    }
    
    pop() {
        if (this.isEmpty()) {
            return;
        }
        
        const value = this.root.value;
        this.root = this.root.next;
        this.size--;
        
        return value;
    }
    
    peek() {
        return this.root.value;
    }

    isEmpty() {
        return this.size === 0;
    }
    
    clear() {
        this.root = null;
        this.size = 0;
    }
}

Since this is for educational purpose, we don't want to mislead others.

future feature: searchable menu

cursor does not have enough contrast on light themes

Fix "Flatten An Array" tests

all tests passing with no solution code. Noticed a typo, but this is not the problem. At first glance, not sure. Even explicitly returning false from each test expression does not cause tests to fail.

[staging]: add user created repls

Allow users to add their own repls to app state for jotting down their own ideas, algos, problems, test things out, etc.

Also: in new feature branch, identify source of issue when refreshing the page on a newly created repl before switching challenges.

FIXED: Should also switch to new repl when created.

track menu state

this can be especially useful if number of challenges eventually grows significantly. Will let the user reopen the page and menu will still be folded/not folded as it was last time they visited.

Add infinite loop protection

keep code from looping infinitely and breaking page.

Benchmark for native sort() flawed?

el.array.sort((a, b) => a > b)
should be:
el.array.sort((a, b) => a - b)

It's OK when I test with:

        var z = el.array.sort((a, b) => a - b)
        console.log(z[2], z[3], z[4]) // OK

But not:

        var z = el.array.sort((a, b) => a > b)
        console.log(z[2], z[3], z[4]) // Nope, eg => 1670 2056 1425 

aside not responsive below 42% width

When the width of the aside is adjusted to below 42% the span elements are no longer inline with the div container styling. The aside is not responsive when the viewport is minimized.

add hamburger menu and keybindings modal

@mansisce here's the last feature I want to implement before pushing all this new code to production. With all these new features (especially including the last big update) there are a ton of new key bindings (for the editor and for the app itself) that I'm afraid people won't know about, since they are only talked about on the welcome screen and in the docs (for example, did you know you could change themes CMD/CTRL+ALT+{ OR }?).

I would love to add a hamburger menu in place of the current share link button:

When expanded, the hamburger menu could include a "Get Share Link" button (either icon or text), which would have the same behavior as the current button, and a "View Key Bindings" button, which would open a modal that listed all the applications key bindings including all those listed below. This would also give us a place to eventually add additional links, such as the "Settings" menu (#65), which would link to a different route.

Is this something you would be interested in taking on? No worries if not, but thought I'd ask before I jumped in! If so, the latest code is on the staging branch, not master, so you'd have to pull that down.

---

Key Bindings / Application Shortcut Keys:

• The editor has SublimeText keybindings.
• Additional keys bindings / shortcuts:
  • Scroll through themes: CMD/CTRL+ALT+({ OR })
  • Go to the next challenge: CMD/CTRL+SHIFT+.
  • Go to the previous challenge: CMD/CTRL+SHIFT+,
  • Jump to solution / seed: CMD/CTRL+SHIFT+S
  • Run code / tests: CMD/CTRL+SHIFT+ENTER
  • Toggle Suppress Tests: CMD/CTRL+ALT+/
  • Clear Console: ALT+SHIFT+DELTE/BACKSPACE
  • Open autocomplete dropdown: CTRL+SPACE
  • Focus Editor: CMD/CTRL+\
• Search / Replace functionalities:
  • Start searching: CMD/CTRL+F
  • Find next: CMD/CTRL+G
  • Find previous: CMD/CTRL+SHIFT+G
  • Replace: CMD+ALT+F OR SHIFT+CTRL+F
  • Replace all: SHIFT+CMD+ALT+F OR SHIFT+CTRL+R
  • Jump to line: ALT+G