JavaScript - Continuing Saga of Developing Interesting Simple Battleship Game (01)

I've uploaded a first set of files to my GitHub account as follows:

This is an iteration in the development of the GUI for an internet-based, peer-to-peer, browser-to-browser, 2-player version of the well-known Battleship game.

The development status is "early stages of methods selection". I am absolutely a novice JavaScript programmer, having only done programming by example, leveraging my previous professional experience with other languages (C, Pascal, Bash, Fortran, Graftek Agile) and some very limited ad-hoc Python programming.

At this point, because other approaches did not appear to be as simple or workable, the "iframe" approach for "importing" external content has been used, but with apparent limited success. The issue encountered are:

  • the apparent inability to fully control the sizes and placement of iframes within clearly defined parent "div" elements (inconsistencies between grid specifications and element style values required to make things "fit");

  • the apparent inability to use "global" CSS files for content within the iframes; and

  • the apparent inability to reference "global" JavaScript variables/objects from within the iframes.

It would be much appreciated if anyone could offer specific/detailed

  • explanations as to why these issues have arisen, and

  • coding changes that would address the issues encountered, while adhering to the conditions of using ONLY basic vanilla JavaScript, no external web-based libraries/frameworks, so that two independant, non-co-located computers could play the game with nothing more than installing distro-standard packages/libraries that have purely desktop-based dependencies (no use of third-party resources; Is this even possible ???).

Networking aspects, of message/signal passing for the game, will be addressed in later iterations of the game. I don't intend to pursue those issues at this time, but if you are willing to share insights on that aspect, I would also be very grateful for those.

Thank you in advance for sharing your insights and experience.

1 Like

This article (in the last section under the heading "Blobs")

seems to provide an approach that will resolve my issues. I need to fully digest, and test, but it offers hope of a solution, which the following

did not!