scribbledecobble: Ten Golden Rules

It would be part of my scheme of physical education that every youth in the state should learn to
do something finely and thoroughly with his hand, so as to let him know what touch meant...
Let him once learn to take a straight shaving off a plank, or draw a fine curve without faltering,
or lay a brick level in its mortar; and he has learned a multitude of other matters...

— JOHN RUSKIN

README

Code

See Also

Q & A

Exercises

/* The magical star */

.star {
    color: white;
    font-size: 0.5em;
    position: absolute;
    transition: opacity 6s;
    -webkit-transition: opacity 6s; /* Safari */
    z-index: 1;
  }

#wishing-star {
    font-size: 0.9em;
    opacity: 0;
    right: 5%;
    top: 7%;
  }

#wishing-star:hover {
    cursor: pointer;
    font-size: 1em;
  }

/* The temple */

#temple {
    background-color: slategray;
    height: 17em;
    margin: auto;
    opacity: 0;
    padding: 0.7em 0.7em 0.2em 0.7em;
    position: relative;
    text-align: center;
    transition: opacity 3s;
    width: 27.5em;
    -webkit-transition: opacity 3s; /* Safari */
    z-index: 2;
  }

/* The room */

#room {
    background-color: silver;
    outline: 0.1em solid purple;
    height: 100%;
    width: 100%;
  }

/* A tower */

.tower {
    display: inline-block;
    margin: 0.5em;
    width: 6em;
  }

.tower:hover {
    cursor: pointer;
  }

.tower .partition {
    height: 7em;
    margin: 0.5em;
    position: relative;
  }

/* A peg */

.peg {
    background-color: saddlebrown;
    height: 100%;
    margin: auto;
    outline: 0.1em solid silver;
    width: 0.6em;
  }

/* A stack */

.stack {
    bottom: 0;
    display: inline-block;
    left: 0;
    position: absolute;
    width: 100%;
  }

/* A disk */

.disk {
    background-color: gold;
    height: 0.5em;
    margin-bottom: 0.1em;
    margin-left: auto;
    margin-right: auto;
    outline: 0.1em solid darkgoldenrod;
    transition: background-color 2s;
    -webkit-transition: background-color 2s; /* Safari */
  }

/* Sizes of disks */

.disk[data-size="10"] {
    width: 100%;
  }
  .disk[data-size="9"] {
    width: 92%;
  }
  .disk[data-size="8"] {
    width: 84%;
  }
  .disk[data-size="7"] {
    width: 76%;
  }
  .disk[data-size="6"] {
    width: 68%;
  }
  .disk[data-size="5"] {
    width: 60%;
  }
  .disk[data-size="4"] {
    width: 52%;
  }
  .disk[data-size="3"] {
    width: 44%;
  }
  .disk[data-size="2"] {
    width: 36%;
  }
  .disk[data-size="1"] {
    width: 30%;
  }

</div> 
        </div>

/** :....1....:....2....:....3....:....4....:....5....:....6....:....7....:
  *
  *                          Carpenters, masons, and roofers, for instance,
  *                          all keep their work straight by using the same
  *                                        simple tool: a length of string.
  *
  *  -JOHN CARROLL in Measuring, Marking & Layout: A Builder's Guide (1998)
  */

/******************/
  /* Tower of Hanoi */
  /******************/

/*===================*/
  /* TOH Global Object */
  /*===================*/

/*  A global object that contains the following properties.
   *
   *  cheat, grantWish, moveDisks, solvePuzzle
   *
   *    These variables (also known as properties of the TOH
   *    object) will be assigned values of functions. Comments
   *    that describe the functions are include below at the
   *    point in the code where the functions are defined and
   *    the variable assignments are made.
   *
   *  towers
   *
   *    A property that refers to a collection of tower
   *    elements, each of which is divided into an upper and
   *    lower partition. The upper partition contains a stack
   *    and the lower partition contains a peg and a stack.
   *    The stacks contain zero or many disks, each of which
   *    is a unique size. Disks in stacks are always arranged
   *    in ascending order (largest on bottom to smallest on
   *    top). There should be exactly three tower elements in
   *    the collection.
   *
   *  !! WARNING !!
   *
   *  The current implementation of solvePuzzle assumes
   *  that there are EXACTLY three individual towers in the
   *  collection of towers. Find and modify that code if that
   *  assumption is not true; also find this comment (again)
   *  and don't let it lie.
   */
  const TOH = {
    cheat: undefined,
    grantWish: undefined,
    moveDisks: undefined,
    solvePuzzle: undefined,
    towers: document.getElementsByClassName("tower")
  };
  Object.seal(TOH);

/*  An anonymous (unnamed) function that hides information from
   *  the outside world and is called immediately. Functions
   *  defined within this "namespace" may be called when events
   *  associated with elements "fire". For example, when the user
   *  clicks on the wishing star, the method grantWish is called.
   *  Functions inside the namespace may also be called via
   *  properties of the global TOH object; such properties are
   *  listed and described in general terms above and in detail
   *  below.
   */
  (function() {

/*=====================*/
    /* Part I. The Puzzle. */
    /*=====================*/

/*------------------------------------------*/
    /* Utility functions that return meta data. */
    /* (Meta data is data about data elements.) */
    /*------------------------------------------*/

/* Return the size of a disk in integral units.
     */
    function sizeOfDisk(disk) {
    }

/* Return the size the disk on top of a stack; or, return
     * undefined if the stack is empty.
     */
    function sizeOfTop(stack) {
    }

/* Return the size of the disk on the bottom of stack; or,
     * return undefined if stack is empty.
     */
    function sizeOfBottom(stack) {
    }

/* Return the size of the largest disk in a stack; or,
     * return undefined if the stack is empty.
     */
    function sizeOfLargestDisk(stack) {
    }

/* Return the number of disks in a stack.
     */
    function sizeOfStack(stack) {
    }

/* Return the sum of the number of disks in multiple stacks.
     */
    function sumOfStackSizes(stacks) {
    }

/*----------------------------------------------*/
    /* Utility functions that return data elements. */
    /*----------------------------------------------*/

/* Return the disk at the top of stack; or, return undefined
     * if stack is empty.
     */
    function getTop(stack) {
    }

/* Return the disk at bottom of a stack; or, return
     * undefined if stack is empty.
     */
    function getBottom(stack) {
    }

/* Return the specified stack; or, return undefined if the
     * stack cannot be found.
     */
    function getStack(tower, whichStack) {
    }

/* Return a possibly empty array of specified stacks.
     */
    function getStacks(whichStacks) {
    }

/*----------------------------------------------*/
    /* Utility functions that mutate data elements. */
    /*----------------------------------------------*/

/* Add a disk to top of a stack.
     */
    function pushTop(stack, disk) {
    }

/* Add a disk to bottom of a stack.
     */
    function pushBottom(stack, disk) {     
    }

/* If the provided stack is not empty, then remove the disk
     * from top of the stack and return it; otherwise, return
     * undefined.
     */
    function popTop(stack) {
    }

/* If the provided stack is not empty, then remove the disk
     * from bottom of the stack and return it; otherwise, return
     * undefined.
     */
    function popBottom(stack) {
    }

/* Gather all disks in fromStacks together, arranging them in
     * sorted order from largest to smallest, and push them onto
     * toStack one at a time. Return toStack.
     */
    function coalesceDisks(toStack, fromStacks) {
    }

/* If dropDisks.inProgress is true, do NOTHING! This is
     * necessary in order to keep disks in sorted order.
     *
     * Otherwise:
     *
     * 1. Coalesce disks from all upper stacks into the specified
     *    tower's upper stack.
     *
     * 2. If there are disks in the tower's upper stack, drop
     *    them onto the lower stack; otherwise, if the lower
     *    stack is not empty, then pop a disk off the lower
     *    stack and push it onto the bottom of the upper stack.
     */ 
    TOH.moveDisks = function(towerIndex, onSuccess) {
    }

/* Combine all of the disks into one levitating stack above
     * the second peg. (The user can then choose which peg to put
     * the disks on by clicking on the desired tower.)
     */
    TOH.cheat = function() {
    }

TOH.grantWish = function() {
    }

/*--------------------------------------------------------*/
    /* Anonymous functions that execute immediately and       */
    /* associate "listener" functions with (event, element)   */
    /* pairs. Listener functions are called when a particular */
    /* event associated with a particular element occurs.     */
    /*--------------------------------------------------------*/

(function() {

const lastTowerIndex = TOH.towers.length - 1;

for (let i = lastTowerIndex; i >= 0; i--) {
        TOH.towers[i].addEventListener("click", function(e) {
          TOH.moveDisks(i);
        });
      }
    })();

(function() {
      const wishingStar = document.getElementById("wishing-star");
      wishingStar.addEventListener("click", TOH.grantWish);
    })();

})();

/** :....1....:....2....:....3....:....4....:....5....:....6....:....7...*/

/******************/
  /* Tower of Hanoi */
  /******************/

/*===================*/
  /* TOH Global Object */
  /*===================*/

/*=====================*/
    /* Part I. The Puzzle. */
    /*=====================*/

/*------------------------------------------*/
    /* Utility functions that return meta data. */
    /* (Meta data is data about data elements.) */
    /*------------------------------------------*/

/* Return the size of a disk in integral units.
     */
    function sizeOfDisk(disk) {
      return parseInt(disk.getAttribute("data-size"));
    }

/* Return the size the disk on top of a stack; or, return
     * undefined if the stack is empty.
     */
    function sizeOfTop(stack) {
      return (sizeOfStack(stack) > 0) ?
          sizeOfDisk(getTop(stack)) :
          undefined;
    }

/* Return the size of the disk on the bottom of stack; or,
     * return undefined if stack is empty.
     */
    function sizeOfBottom(stack) {
      return (sizeOfStack(stack) > 0) ?
          sizeOfDisk(getBottom(stack)) :
          undefined;
    }

/* Return the size of the largest disk in a stack; or,
     * return undefined if the stack is empty.
     */
    function sizeOfLargestDisk(stack) {
      // Disks in stacks are arranged from largest on bottom to
      // smallest on top, so return the size of the bottom disk.
      return sizeOfBottom(stack);
    }

/* Return the number of disks in a stack.
     */
    function sizeOfStack(stack) {
      return stack.children.length;
    }

/* Return the sum of the number of disks in multiple stacks.
     */
    function sumOfStackSizes(stacks) {
      let sum = 0;
      stacks.forEach(function(stack) {
        sum += sizeOfStack(stack);
      });
      return sum;
    }

/*----------------------------------------------*/
    /* Utility functions that return data elements. */
    /*----------------------------------------------*/

/* Return the disk at the top of stack; or, return undefined
     * if stack is empty.
     */
    function getTop(stack) {
      return (sizeOfStack(stack) > 0) ?
          stack.children[0] :
          undefined;
    }

/* Return the disk at bottom of a stack; or, return
     * undefined if stack is empty.
     */
    function getBottom(stack) {
      const diskCount = sizeOfStack(stack);
      return (diskCount > 0) ?
          stack.children[diskCount - 1] :
          undefined;
    }

/* Return the specified stack; or, return undefined if the
     * stack cannot be found.
     */
    function getStack(tower, whichStack) {
      let stacks = tower.getElementsByClassName("stack");
      for (let i = 0; i < stacks.length; i++) {
        const stack = stacks[i];
        if (stack.classList.contains(whichStack)) {
          return stack;
        }
      }
      return undefined;
    }

/* Return a possibly empty array of specified stacks.
     */
    function getStacks(whichStacks) {

const
        stacks = [],
        towerCount = TOH.towers.length;

for (let i = 0; i < towerCount; i++) {
        whichStacks.forEach(function(whichStack) {
          stacks.push(getStack(TOH.towers[i], whichStack));
        });
      }
      return stacks;
    }

/* If at least one of the provided stacks is not empty, then
     * return the stack containing the largest disk; otherwise,
     * return undefined.
     */
    function getStackWithLargestDisk(stacks) {
      let whichOne = undefined,
          max = undefined;
      stacks.forEach(function(stack) {
        if (sizeOfStack(stack) > 0) {
          let size = sizeOfLargestDisk(stack);
          if (whichOne === undefined || size > max) {
            max = size;
            whichOne = stack;
          }
        }
      });
      return whichOne;
    }

/*----------------------------------------------*/
    /* Utility functions that mutate data elements. */
    /*----------------------------------------------*/

/* Add a disk to top of a stack.
     */
    function pushTop(stack, disk) {
      stack.insertBefore(disk, stack.children[0]);
    }

/* Add a disk to bottom of a stack.
     */
    function pushBottom(stack, disk) {     
      stack.appendChild(disk);
    }

/* If the provided stack is not empty, then remove the disk
     * from top of the stack and return it; otherwise, return
     * undefined.
     */
    function popTop(stack) {
      return (sizeOfStack(stack) > 0) ?
          stack.removeChild(stack.children[0]) :
          undefined;
    }

/* If the provided stack is not empty, then remove the disk
     * from bottom of the stack and return it; otherwise, return
     * undefined.
     */
    function popBottom(stack) {
      const diskCount = sizeOfStack(stack);
      return (diskCount > 0) ?
          stack.removeChild(stack.children[diskCount - 1]) :
          undefined;
    }

/* If the provided stacks are not all empty, then remove the
     * disk from the bottom of the stack with the largest disk
     * and return it; otherwise, return undefined;
     */
    function popLargest(stacks) {      
      let stackWithLargestDisk = getStackWithLargestDisk(stacks);
      return stackWithLargestDisk !== undefined ?
          popBottom(stackWithLargestDisk) :
          undefined;
    }

// Disks in each fromStack are already in sorted order
      // (largest on bottom) so we simply merge them into one
      // sorted list. (This is the merging phase of merge sort.)

for (let n = diskCount; n > 0; n--) {
        disks.push(popLargest(fromStacks));
      }

// Now transfer disks in sorted order to toStack.

disks.forEach(function(disk) {
        pushTop(toStack, disk);
      });
      return toStack;
    }

/* Pop disks from bottom of upper and push them onto top of
     * lower on at a time. If, in the process of dropping the
     * disks, a larger disk lands on top of a smaller one: stop,
     * pop the offending disk off the top of the lower stack, and
     * push it back onto the bottom of the upper stack; then
     * terminate the algorithm. If all disks are successfully
     * dropped (i.e. none are rejected) and onSuccess is not
     * undefined, then call onSuccess.
     */
    function dropDisks(upper, lower, onSuccess) {
      dropDisks.InProgress = true;
      window.setTimeout(function() {
        let oldTop = getTop(lower);
        pushTop(lower, popBottom(upper));
        if (oldTop !== undefined &&
            sizeOfTop(lower) > sizeOfDisk(oldTop)) {
          oldTop.setAttribute("data-mood", "angry");
          window.setTimeout(function() {
            pushBottom(upper, popTop(lower));
            oldTop.setAttribute("data-mood", "happy");
            dropDisks.InProgress = false;
          }, 1000);
        }
        else if (sizeOfStack(upper) > 0) {
          dropDisks(upper, lower);
        }
        else {
          dropDisks.InProgress = false;
          if (onSuccess) {
            onSuccess();
          }
        }
      }, playMoves.msDelay);
    }
    dropDisks.inProgress = false;

const tower = TOH.towers[towerIndex],
            upper = getStack(tower, "upper"),
            lower = getStack(tower, "lower");

if (dropDisks.InProgress) {
        return;
      }

// Step 1.
      coalesceDisks(upper, getStacks(["upper"]));

// Step 2.
      if (sizeOfStack(upper) > 0) {
        dropDisks(upper, lower, onSuccess);
      }
      else if (sizeOfStack(lower) > 0) {
        pushBottom(upper, popTop(lower));
        if (onSuccess !== undefined) {
          onSuccess();
        }
      }
    }

if (solvePuzzle.inProgress) {
        interruptPlay(TOH.cheat);
        return;
      }

const allStacks = getStacks(["lower", "upper"]),
            targetStack = getStack(TOH.towers[1], "upper");

coalesceDisks(targetStack, allStacks);
    }

TOH.grantWish = function() {
      switch (TOH.grantWish.wishCount) {
      case 0:
        alert("You only get three wishes.");
        break;
      case 1:
        alert("You have two wishes left.");
        break;
      case 2:
        alert("You only have one more wish!");
        break;
      default:
        alert("You've used all three of your wishes.");
        return;
      }
      if (confirm("Be careful what you wish for.")) {
        const firstStack = getStack(TOH.towers[0], "lower");
        const n = sizeOfStack(firstStack);
        let readyToSolve = n > 0;
        getStacks(["lower", "upper"]).forEach(function(stack) {
          if (stack !== firstStack && sizeOfStack(stack) > 0) {
            readyToSolve = false;
          }
        });
        if (readyToSolve) {
          solvePuzzle({n: n, fromIndex: 0, toIndex: 1});
        }
        else {
          TOH.cheat();
        }
        TOH.grantWish.wishCount++;
      }
    }
    TOH.grantWish.wishCount = 0;

(function() {

const lastTowerIndex = TOH.towers.length - 1;

for (let i = lastTowerIndex; i >= 0; i--) {
        TOH.towers[i].addEventListener("click", function(e) {
          TOH.moveDisks(i);
        });
      }
    })();

(function() {
      const wishingStar = document.getElementById("wishing-star");
      wishingStar.addEventListener("click", TOH.grantWish);
    })();

})();

/** :....1....:....2....:....3....:....4....:....5....:....6....:....7...*/

/*======================*/
    /* Part II. A Solution. */
    /*======================*/

/* Recursively build makeMoves.steps by "making moves" for
     * smaller and smaller instances of the problem until the
     * size of the problem for which a move is required has
     * been reduced to the trivial case of moving a single disk
     * from one location to another.
     */
    function makeMoves(args) {
    }

/* Perform the moves, two steps at a time, until there are no
     * more steps to perform or until the "play" is interrupted.
     */
    function playMoves() {
    }

/* Pick a disk from one peg and put it onto another.
     */
    function doTwoSteps(onSuccess) {
    }

/*======================*/
    /* Part II. A Solution. */
    /*======================*/

/* Create a list of integers, each of which represents a
     * single step in a two-step move. (Step one is picking a
     * disk up off the top of a stack, and step two is putting
     * the disk down on top of a stack.)
     *
     * Then perform the moves. (Play the movie!)
     *
     *   args.n           The number of disks to move.
     *   args.fromIndex   Index of tower from which to move.
     *   args.toIndex     Index of tower to which to move.
     *   args.msDelay     Time (in ms) to pause between steps.
     */
    solvePuzzle = function(args) {
      makeMoves.steps = [];
      playMoves.msDelay = args.msDelay ?
          args.msDelay : playMoves.msDelay;
      makeMoves(args);
      playMoves();
    }
    solvePuzzle.inProgress = false;
    solvePuzzle.abort = false;
    solvePuzzle.onAbort = undefined;

// The following calculation assumes there
          // are exactly three pegs.
          tmp = TOH.towers.length - (from + to);

if (n === 1) {
        makeMoves.steps.push(from);
        makeMoves.steps.push(to);
      }
      else if (n > 1) {
        makeMoves({n: n - 1, fromIndex: from, toIndex: tmp});
        makeMoves({n: 1,     fromIndex: from, toIndex: to});
        makeMoves({n: n - 1, fromIndex: tmp,  toIndex: to});
      }
    }
    makeMoves.steps = [];

/* Perform the moves, two steps at a time, until there are no
     * more steps to perform or until the "play" is interrupted.
     */
    function playMoves() {
      if (makeMoves.steps.length == 0) {
        solvePuzzle.inProgress = false;
      }
      else if (solvePuzzle.abort) {
        makeMoves.steps = [];
        solvePuzzle.inProgress = false;
        solvePuzzle.abort = false;
        if (solvePuzzle.onAborted) {
          solvePuzzle.onAborted();
        }
        solvePuzzle.onAborted = undefined;
      }
      else {
        doTwoSteps(playMoves);
      }
    }
    playMoves.msDelay = 300;

function interruptPlay(onAborted) {
      solvePuzzle.onAborted = onAborted;
      solvePuzzle.abort = true;
    }

/* Pick a disk from one peg and put it onto another.
     */
    function doTwoSteps(onSuccess) {
      window.setTimeout(function() {
        TOH.moveDisks(makeMoves.steps.shift(), function() {
          window.setTimeout(function() {
            TOH.moveDisks(makeMoves.steps.shift(), onSuccess)
          }, playMoves.msDelay);
        });
      }, playMoves.msDelay);
    }

Pages

Ten Golden Rules