The Continuation

06/08/2023–0120 hours

After a few attempts at solving cubes after resolving the CORS error, I realised there was one mistake. Sometimes the moves returned a result in which the cube would be completely solved BUT every face’s centre piece would be different as compared to the rest of the pieces on the face, like this:

This was because, while converting my input colors to it’s corresponding kociemba argument value, I assumed a certain position for each face.

colors = {
    'Y' : 'D', #Yellow down
    'B' : 'R', #Blue right
    'R' : 'F', #Red front
    'O' : 'B', #Orange back
    'W' : 'U', #White up
    'G' : 'L' #Green left
}

So, if I input green centre piece on any other face except the left face, it would cause such a problem.

Rather than dynamically changing my code, which would cause a lot of other issues, I figured it would be easier, for both myself and the user, to tell them what position to hold the cube in.

For that, I coded the following intermediary page:

This is where every “solve” link will direct to, and the continue button redirects to the actual input page.

Get Manan Shah’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

That’s pretty much all for this update. Remaining work will be done later.

As for what I plan on doing next, I was curious about how to pass user-inputted strings between pages without creating a backend database, and ChatGPT basically made things pretty easy.

To transfer the input from one webpage to another, you can use various methods, such as URL parameters, session storage, or local storage. Here’s a step-by-step guide on how to achieve this using URL parameters:

Capture the input on the first webpage: On the first webpage (let’s call it page1.html), you need to capture the input from the user. This could be done through a form or an input field. For example, let's assume you have a simple form with a text input:

<!-- page1.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
</head>
<body>
  <form id="inputForm">
    <label for="inputValue">Enter a value:</label>
    <input type="text" id="inputValue" required>
    <button type="submit">Submit</button>
  </form>
<script>
    const form = document.getElementById('inputForm');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const inputValue = document.getElementById('inputValue').value;
      window.location.href = `page2.html?input=${encodeURIComponent(inputValue)}`;
    });
  </script>
</body>
</html>

Retrieve the input on the second webpage: On the second webpage (let’s call it page2.html), you need to retrieve the input from the URL parameters and process it to display the desired output. You can use JavaScript to extract the input from the URL and use it to generate the output.

<!-- page2.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Page 2</title>
</head>
<body>
  <div id="outputDisplay"></div>
<script>
    function getParameterByName(name) {
      const url = new URL(window.location.href);
      return url.searchParams.get(name);
    }
    const input = getParameterByName('input');
    const outputDisplay = document.getElementById('outputDisplay');
    // Process the input and display the output here
    // For example, let's just display the input value as output
    outputDisplay.textContent = `You entered: ${decodeURIComponent(input)}`;
  </script>
</body>
</html>

In this example, when the user submits the form on page1.html, the JavaScript code captures the input value, encodes it using encodeURIComponent, and appends it as a URL parameter (input) to the URL of page2.html. On page2.html, the JavaScript code retrieves the input parameter from the URL, decodes it using decodeURIComponent, and then processes it to display the output.

Remember that URL parameters are visible in the URL bar, so avoid using this method if the input contains sensitive data. If you need to handle more complex data or sensitive information, consider using session storage, local storage, or server-side communication instead.

So, I’m gonna be trying to implement an intuitive way for the move list to be displayed to the user next. Wish me luck.

Seeya.