diff --git a/css/game.css b/css/game.css
index 6fda924..2a0bc4d 100644
--- a/css/game.css
+++ b/css/game.css
@@ -14,7 +14,7 @@
* @link https://www.frise.org/
* @copyright 2022 - 2023
*/
-/* make sure game tags we don't want to display, we don't display
+/* make sure game tags we don't want to display are not displayed
*/
x-game,
x-action
@@ -273,8 +273,8 @@ table.save-table td.save-name
visibility: hidden;
}
/*
- * Styles specific to how we want HTML to appear in the game
- * as well as the new x- tags that we use for presentation
+ * Styles specific to how we want HTML to appear in the game.
+ * Also has styles for the new x- tags that we use for presentation
*/
h1
{
diff --git a/js/game.js b/js/game.js
index 2be96a6..afb5418 100644
--- a/js/game.js
+++ b/js/game.js
@@ -21,7 +21,7 @@
* Contains {locale => {to_translate_id => translation}} for each
* item in the game engine that needs to be localized.
* There are not too many strings to translate. For a particular game you
- * could tack on to this tl variables after you load game.js in a script
+ * could tack on to this tl variable after you load game.js in a script
* tag before you call initGame.
* @type {Object}
*/
@@ -40,7 +40,7 @@ var tl = {
*/
var locale = "en";
/**
- * Boolean flag to set the text direction of the game to right-to-left.
+ * Flag to set the text direction of the game to right-to-left.
* (if false, the text direction is left-to-right)
* @type {boolean}
*/
@@ -62,7 +62,7 @@ var is_mobile = window.matchMedia("(max-width: 1000px)").matches;
* Returns an Element object from the current document which has the provided
* id.
* @param {string} id of element trying to get an object for
- * @return {Element} desired element if exists, else null
+ * @return {Element} desired element, if exists, else null
*/
function elt(id)
{
@@ -72,7 +72,7 @@ function elt(id)
* Returns a collection of objects for Element's that match the provided Element
* name in the current document.
*
- * @param {string} name of HTML/XML Element that want from current document
+ * @param {string} name of HTML/XML Element wanted from current document
* @return {HTMLCollection} of matching Element's
*/
function tag(name)
@@ -138,7 +138,7 @@ function sleep(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
/**
- * Add a link with link text message, which when clicked will allow the
+ * Adds a link with link text message which when clicked will allow the
* rendering of a Location to continue.
* @param {string} message link text for the link that is pausing the rendering
* of the current location.
@@ -156,10 +156,10 @@ function clickProceed(message)
/**
* Creates from an HTMLCollection or Nodelist of x-object or x-location
* elements an array of Location's or Object's suitable for a FRISE Game
- * object. Elements of the collection whose name isn't of the form x-
+ * object. Elements of the collection whose name aren't of the form x-
* or which don't have id's are ignored. Otherwise, the id field of
- * the output Cbject or Location is set to the value of the x-object or
- * x-location's id. Details about how a sutiable FRISE Game object is created
+ * the output Object or Location is set to the value of the x-object or
+ * x-location's id. Details about how a suitable FRISE Game object is created
* can be found @see makeGameObject()
*
* @param {HTMLCollection|Nodelist} tag_objects collection to be converted into
@@ -179,7 +179,7 @@ function makeGameObjects(tag_objects)
}
/**
* Upper cases first letter of a string
- * @param {string} str string to upper case first letter of
+ * @param {string} str string to upper case the first letter of
* @return {string} result of upper-casing
*/
function upperFirst(str)
@@ -203,7 +203,7 @@ var object_counter = 0;
* Location object will be returned, otherwise, a Javascript Object is returned.
* The innerHTML of any subtag of an x-object or an
* x-location beginning with x- becomes the value of a field in the resulting
- * object with the name of the tag less x-. For example, a DOM_object
+ * object with the name of the tag less x-. For example, a DOM Object
* representing the following HTML code:
* <x-object id="bob">
* <x-name>Robert Smith</x-name>
@@ -290,7 +290,7 @@ function makeGameObject(dom_object)
/**
* Used to change the display css property of the element of the provided id
* to display_type if it doesn't already have that value, if it does,
- * then the display property is set to none.. If display_type is not provided
+ * then the display property is set to none. If display_type is not provided
* then its value is assumed to be block.
*
* @param {string} id of HTML Element to toggle display property of
@@ -359,7 +359,7 @@ function toggleMainNav()
}
/**
* Adds click event listeners to all anchor objects in a list
- * such that have href targets beginning with #. Such a target
+ * that have href targets beginning with #. Such a target
* is to a location within the current game, so the click event callback
* then calls game.takeTurn based on this url.
*
@@ -380,7 +380,7 @@ function addListenersAnchors(anchors)
anchor.addEventListener('click', (event) => {
if (!anchor.classList.contains('disabled')) {
game.takeTurn(hash);
- if (game.hasNavBar && call_toggle) {
+ if (game.has_nav_bar && call_toggle) {
toggleMainNav();
}
}
@@ -400,9 +400,9 @@ function addListenersAnchors(anchors)
* might have several x-present tags, some of which could
* be drawn after a clickProceed, or a delay. As these
* steps in rendering are not good "save places", at the
- * start of rendering a location all save are disabled.
+ * start of rendering a location, all save are disabled.
* Only after the last drawable x-present for a location
- * has completed at they renabled.
+ * has completed are they renabled.
*/
function disableSavesAndInventory()
{
@@ -436,10 +436,10 @@ function enableSavesAndInventory()
/**
* Given a string which may contain Javascript string interpolation expressions,
* i.e., ${some_expression}, produces a string where those expressions have
- * been replaces with their values.
+ * been replaced with their values.
*
* @param {string} text to have Javascript interpolation expressions replaced
- * values
+ * with their values
* @return {string} result of carrying out the replacement
*/
function interpolateVariables(text)
@@ -487,8 +487,8 @@ function loc(location_id)
class Location
{
/**
- * An array of [check_condition, text_to_present] pairs typically
- * coming from the x-present-tag's of a in the HTML of a Location.
+ * An array of [check_condition, staging, text_to_present] triples typically
+ * coming from the x-present-tag's in the HTML of a Location.
* @type {Array}
*/
present = [];
@@ -498,11 +498,11 @@ class Location
* in the x-location tag from which the Location was parse. For
* each such x-present tag in the order it was in the original HTML,
* the ck condition is first evaluated (this may contain a delay
- * or clickProceed call or a boolean expression), once/if condition is
- * satisfied then the HTML contents of the tag are shown. If the case,
- * where the ck evaluates to false that x-present tags contents are
- * omitted. In addition to usual HTML tags, a x-present tag can
- * have x-speaker subtags. These llow one to present text from a speaker
+ * or clickProceed call or a boolean expression), once/if the condition is
+ * satisfied, then the HTML contents of the tag are shown. In the case,
+ * where the ck evaluates to false that x-present tag's contents are
+ * omitted. In addition to the usual HTML tags, an x-present tag can
+ * have x-speaker subtags. These allow one to present text from a speaker
* in bubbles. An x-present tag may also involve input tags to
* receive/update values for x-objects or x-locations.
*/
@@ -541,14 +541,14 @@ class Location
/**
* Prepares input, textareas, and select tags in the game so that they can
* bind to game Object or Location fields by adding various Javascript
- * Event handlers. An input tag like:
+ * Event handlers. An input tag like
* <input data-for="bob" name="name" >
- * Binds with the name field of the bob game object (i.e., obj(bob).name).
+ * binds with the name field of the bob game object (i.e., obj(bob).name).
* In the case above, as the default type of an input tag is text, this
* would produce a text field whose initial value is the current value
* obj(bob).name. If the user changes the field, the value of the obj
- * changes with it. This set up binds input tags regardless of type,
- * can use with it with other types such as range, email, color, etc.
+ * changes with it. This set up binds input tags regardless of type, so it
+ * can be used with other types such as range, email, color, etc.
*/
prepareControls()
{
@@ -630,12 +630,14 @@ class Location
}
}
/**
- * Evaluates the condition from a ck attribute ofan x-present tag.
+ * Evaluates the condition in a ck attribute of an x-present tag.
*
* @param {string} condition contents from a ck or check attribute.
- * Conditions can be boolean conditions on game variable.
+ * Conditions can be boolean conditions on game variables.
+ * If an x-present tag did not have a ck attribute, condition is null.
* @param {string} staging contents from a stage attribute.
- * If none empty, such an attribute could have a sequence of
+ * If no such attribute, this will be an empty string.
+ * Such an attribute could have a sequence of
* pause(some_millisecond); and clickProceed(some_string) commands
* @return {Array} [check_result, proceed, pause] if the condition involved
* a boolean expression, then check_result will hold the result of
@@ -644,7 +646,7 @@ class Location
* link for the first clickProceed (which is supposed to delay the
* presentation of the x-present tag until after the user clicks the
* link) if found (else ""), pause (if non zero) is the number of
- * miliseconds to sleep before presenting the x-pressent tag according to
+ * milliseconds to sleep before presenting the x-present tag according to
* the condition
*/
evaluateCheckConditionStaging(condition, staging)
@@ -731,7 +733,7 @@ class Location
}
}
/**
- * Classed used to encapsulate an interactive story game. It has fields
+ * Class used to encapsulate an interactive story game. It has fields
* to track the locations and objects in the game, the history of moves of
* the game, and how many moves have been made. It has methods to
* take a turn in such a game, to save state, load state,
@@ -748,7 +750,7 @@ class Game
*/
id;
/**
- * Current date followed by a space followedby the current time of
+ * Current date followed by a space followed by the current time of
* the most recent game capture. Used in providing a description of
* game saves.
* @type {number}
@@ -756,41 +758,41 @@ class Game
timestamp;
/**
* A counter that is incremented each time Javascript draws a new
- * clickProceed a tag. Each such tag is given a id, tick is ensure these
- * id's are unique.
+ * clickProceed a tag. Each such tag is given an id, tick is used to ensure
+ * these id's are unique.
* @type {number}
*/
tick = 0;
/**
- * Whether this particular game has a nav bar
+ * Whether this particular game has a nav bar or not
* @type {boolean}
*/
- hasNavBar;
+ has_nav_bar;
/**
- * The list of all Game Object's managed by the FRISE script. An object
+ * List of all Game Object's managed by the FRISE script. An object
* can be used to represent a thing such as a person, tool, piece of
- * clothing, letter, etc. In an HTML document an object is defined using
- * an x-object tag.
+ * clothing, letter, etc. In an HTML document, a game object is defined
+ * using an x-object tag.
* @type {Array<Object>}
*/
objects;
/**
- * The list of all Game Location's managed by the FRISE script. A Location
+ * List of all game Location's managed by the FRISE script. A Location
* can be used to represent a place the main character can go. This
- * could be standard locations in the game, as wells as Lcoations
+ * could be standard locations in the game, as well as Locations
* like a Save page, Inventory page, Status page, etc.
- * In an HTML document a Location is defined using an x-location tag.
+ * In an HTML document a game Location is defined using an x-location tag.
* @type {Array<Location>}
*/
locations;
/**
* Used to maintain a stack (using Array push/pop) of Game State Objects
- * based on the turns the user has taken (top of stack corresponds
+ * based on the turns the user has taken (the top of the stack corresponds
* to the previous turn). A Game State Object is a serialized string:
- * {
- * timestamp: capture_time,
- * objects: array_of_game_objects_at_capture_time,
- * locations: array_of_game_locations_at_capture_time,
+ * {
+ * timestamp: capture_time,
+ * objects: array_of_game_objects_at_capture_time,
+ * locations: array_of_game_locations_at_capture_time,
* }
* @type {Array}
*/
@@ -798,20 +800,20 @@ class Game
/**
* Used to maintain a stack (using Array push/pop) of Game State Objects
* based on the the number previous turn clicks the user has done.
- * I.e.,when a user clicks previous turn, the current state is pushed on
- * to this array so that it the user then clicks next turn the current
- * state canbe restored.
+ * I.e., when a user clicks previous turn, the current state is pushed onto
+ * this array so that if the user then clicks next turn the current
+ * state can be restored.
* A Game State Object is a serialized string:
- * {
- * timestamp: capture_time,
- * objects: array_of_game_objects_at_capture_time,
- * locations: array_of_game_locations_at_capture_time,
+ * {
+ * timestamp: capture_time,
+ * objects: array_of_game_objects_at_capture_time,
+ * locations: array_of_game_locations_at_capture_time,
* }
* @type {Array}
*/
future_history;
/**
- * Sets up game object with empty history, an initialized main navigation,
+ * Sets up a game object with empty history, an initialized main navigation,
* and with objects and locations parsed out of the current HTML file
*/
constructor()
@@ -842,12 +844,12 @@ class Game
}
/**
* Sets up the main navigation bar and menu on the side of the screen
- * determined by the is_right_to_left variable, sets up an initially empty
+ * determined by the is_right_to_left variable. Sets up an initially empty
* game content area which can be written to by calling a Location
- * object's renderPresentation. The main navigation consists of hamburger
- * menu toggle button for the navigation as well as previous,
+ * object's renderPresentation. The main navigation consists of a hamburger
+ * menu toggle button for the navigation as well as previous
* and next history arrows at the top of screen. The rest of the main
- * navigation content is determined by the contentsof the x-main-nav
+ * navigation content is determined by the contents of the x-main-nav
* tag in the HTML file for the game. If this tag is not present, the
* game will not have a main navigation bar and menu.
*/
@@ -867,10 +869,10 @@ class Game
let main_nav_objs = tag("x-main-nav");
if (typeof main_nav_objs[0] === "undefined") {
game_screen.innerHTML = `<div id="game-content"></div>`;
- this.hasNavBar = false;
+ this.has_nav_bar = false;
return;
}
- this.hasNavBar = true;
+ this.has_nav_bar = true;
let main_nav_obj = main_nav_objs[0];
let history_buttons;
if (is_right_to_left) {
@@ -897,9 +899,10 @@ class Game
this.initializeGameNavListeners();
}
/**
- * Used to initialize the event listerns for the next/previous history
+ * Used to initialize the event listeners for the next/previous history
* buttons. It also adds listeners to all the a tag and x-button tags
- * to process the href before following any links to the target.
+ * to process their href attributes before following any link is followed
+ * to its target.
* @see addListenersAnchors
*/
initializeGameNavListeners()
@@ -917,10 +920,12 @@ class Game
addListenersAnchors(anchors, is_mobile);
}
/**
- * Checks if the game is being played on mobile device. If not, this
- * method does nothing; if it is, sets up the viewport so HTML will
- * display properly. Also, in the case of playing on a mobile device,
- * sets it so the main nav bar on the side of the screen is closed.
+ * Checks if the game is being played on a mobile device. If not, this
+ * method does nothing, If it is being played on a mobile device,
+ * then this method sets up the viewport so that the HTML will
+ * display properly. Also, in the case where the game is being played on a
+ * mobile device, this method also sets it so the main nav bar on the side
+ * of the screen is closed.
*/
initializeScreen()
{
@@ -928,7 +933,7 @@ class Game
if (is_right_to_left) {
html.classList.add("rtl");
}
- if (!this.hasNavBar) {
+ if (!this.has_nav_bar) {
html.classList.add("no-nav");
}
if(!is_mobile) {
@@ -941,8 +946,8 @@ class Game
toggleMainNav();
}
/**
- * For each object, if object.position is defined, then add the object
- * to the location.item array of the Location who id is
+ * For each object, if object.position is defined, then adds the object
+ * to the location.item array of the Location whose id is
* given by object.position .
*/
initializeObjectsLocations()
@@ -964,9 +969,9 @@ class Game
}
}
/**
- * Create a JSON encoded string representing the current state of
- * the game (all object and location states and where the main character
- * is).
+ * Creates a JSON encoded string representing the current state of
+ * the game (all of the object and location states and where the main
+ * character is).
*
* @return {string} JSON encoded current state of game.
*/
@@ -1010,8 +1015,8 @@ class Game
for (const field in old_objects) {
if (!this.objects.hasOwnProperty(field)) {
/* we assume our game never deletes objects or locations, so
- if we find an object in old_objects (presumably coming
- from a more recently parse HTML file) that was not
+ if we find an object in old_objects (presumably it's coming
+ from a more recently parsed HTML file) that was not
in the saved state, we copy it over.
*/
this.objects[field] = old_objects[field];
@@ -1053,7 +1058,8 @@ class Game
}
/**
* Deletes the game state capture history for the game. After this
- * is games the next and previous arrow buttons won't do anything.
+ * calling this method, the game's next and previous arrow buttons
+ * won't do anything until new turns have occurred.
*/
clearHistory()
{
@@ -1066,9 +1072,9 @@ class Game
}
}
/**
- * Function called when the left arrow button on the main nav page is
- * clicked to go back one turn in the game. Pushes the current game state
- * to the future_history game state history array, then pops the most
+ * Called when the left arrow button on the main nav page is
+ * clicked to go back one turn in the game history. Pushes the current
+ * game state to the future_history game state array, then pops the most
* recent game state from the history game state array and sets it as
* the current state.
*/
@@ -1091,8 +1097,8 @@ class Game
elt('next-history').disabled = false;
}
/**
- * Function called when the right arrow button on the main nav page is
- * clicked to go forawrd one turn in the game (assume the user had
+ * Called when the right arrow button on the main nav page is
+ * clicked to go forward one turn in the game history (assuming the user had
* clicked previous at least once). Pushes the current game state
* to the history game state array, then pops the game state from the
* future_history game state array and sets it as the current state.
@@ -1116,9 +1122,9 @@ class Game
elt('previous-history').disabled = false;
}
/**
- * Initializes the save slots for saves location page of a game.
- * This involves looking at session storage and determine which slots
- * have games alread save to them and for those slots determining also
+ * Initializes the save slots for the saves location page of a game.
+ * This involves looking at session storage and determining which slots
+ * have games already saved to them, and for those slots, determining also
* what time the game was saved.
*/
initSlotStates()
@@ -1149,9 +1155,9 @@ class Game
}
}
/**
- * Saves the current state to a sessionStorage save slot if that
+ * Saves the current game state to a sessionStorage save slot if that
* slot if empty; otherwise, if the slot has data in it, then sets
- * the current game state to the state stored at that slot. When saving
+ * the current game state to the state stored at that slot. When saving,
* this method also records the timestamp of the save time to the
* game's saves location.
*
@@ -1178,12 +1184,12 @@ class Game
}
/**
* Deletes any game data from sessionStorage at location
- * "slot" + slot_number, updates the game's save location to reflect the
+ * "slot" + slot_number, updates the game's saves location to reflect the
* change.
*
* @param {number} slot_number which save game to delete. Games are stored
- * at a sessionStorage field "slot" + slot_number where it is intended
- * (but not enforced) that slot_number be an integer.
+ * at a sessionStorage field "slot" + slot_number where it is intended
+ * (but not enforced) that the slot_number be an integer.
*/
deleteSlot(slot_number)
{
@@ -1211,8 +1217,8 @@ class Game
this.evaluateAction(saves_location['default-action']);
}
/**
- * Launches a file picker to allowthe user to select a file
- * containing a saved game state, then tries to loads the current game
+ * Launches a file picker to allow the user to select a file
+ * containing a saved game state, then tries to load the current game
* from this file.
*/
load()
@@ -1255,7 +1261,7 @@ class Game
* fragment. A url hash fragment is the part of the url after a # symbol.
* In non-game HTML, #fragment is traditionally used to indicate the browser
* should show the page as if it had been scrolled to where the element
- * with id attribute fragment is. In the FRISE game a fragment has
+ * with id attribute fragment is. In a FRISE game, a fragment has
* the form #action_1_name;action_2_name;...;action_n_name;next_location_id
* Such a fragment when processed by takeTurn will cause the Javascript in
* x-action tags with id's action_1_name, action_2_name,...,action_n_name
@@ -1263,10 +1269,10 @@ class Game
* location next_location_id. If the fragment, only consists of
* 1 item, i.e., is of the form, #next_location_id, then this method
* just moves the main-character to next_location_id.
- * After carrying out the action and move the main-character,
+ * After carrying out the action and moving the main-character,
* takeTurn updates the game state history and future_history
* accordingly. Then for each object and each location,
- * if the object/location, has a x-default-action tag, this default action
+ * if the object/location, has an x-default-action tag, this default action
* is executed. Finally, the Location of the main-character is presented
* (its renderPresentation is called).
* takeTurn supports two special case action #previous and #next
@@ -1277,7 +1283,7 @@ class Game
*/
takeTurn(hash)
{
- if (this.hasNavBar) {
+ if (this.has_nav_bar) {
if (hash == "#previous") {
this.previousHistory();
return;
@@ -1294,7 +1300,7 @@ class Game
return;
}
this.future_history = [];
- if (this.hasNavBar) {
+ if (this.has_nav_bar) {
elt('next-history').disabled = true;
}
if (sessionStorage["current" + game.id]) {
@@ -1304,7 +1310,7 @@ class Game
this.evaluateDefaultActions(this.locations);
sessionStorage["current" + game.id] = this.captureState();
this.describeMainCharacterLocation();
- if (this.hasNavBar) {
+ if (this.has_nav_bar) {
if (this.history.length == 0) {
elt('previous-history').disabled = true;
} else {
@@ -1314,8 +1320,8 @@ class Game
}
/**
* For each game Object and each game Location in x_entities evaluate the
- * Javascript (if exists) of its default action (from it x-default-action
- * tag).
+ * Javascript (if it exists) of its default action (from its
+ * x-default-action tag).
*
* @param {Array} of game Object's or Location's
*/
@@ -1329,7 +1335,7 @@ class Game
}
}
/**
- * Moves a game Object to a new game Location. If the object had
+ * Moves a game Object to a new game Location. If the object had a
* previous location, then also deletes the object from there.
*
* @param {string} object_id of game Object to move
@@ -1405,7 +1411,7 @@ class Game
/**
* Given a string holding pre-Javascript code from an x-action tag,
* evaluates the code. If this function is passed additional arguments
- * then an args array is set up that can be used as closure variable for
+ * then an args array is set up that can be used as a closure variable for
* this eval call.
*
* @param {string} Javascript code.
@@ -1421,7 +1427,7 @@ class Game
eval(code);
}
/**
- * Used to present the location the Main Character is currently at.
+ * Used to present the location that the Main Character is currently at.
*/
describeMainCharacterLocation()
{
@@ -1432,7 +1438,7 @@ class Game
}
}
/**
- * Module initialization function, used to set up the game object corresponding
+ * Module initialization function used to set up the game object corresponding
* to the current HTML document. If there is a current game state in
* sessionStorage it is used to initialize the game state, otherwise,
* the game state is based on the start of the game. After this state is