The thing to do next is to look at the code in TEST.TXT and change something.

Then run it in HTML to see what happened.

Refresh my memory. What does Ctrl X do?

CTRL-X copies but deletes .. CUTS. Used in JIGSAWS so it leaves a hole.

That way you can't get 2 pieces the same as you can with CTRL-C.

Been wondering where you were, Dave.  Get well soon!

I am not dead or sick. Yay! Dizziness lasted 3 or 4 days.

Our internet provider sold the fiber lines to another company, which we hadn't signed up for. Last Fri a tech from the new company worked on next door line, and cancelled something.

Our provider couldn't work on the lines since they sold them, and we had no account with the new provider yet. It was a 6-day wait to get tech service. He was here 5 hours sorting stuff out since we were guinea-pigs for first TV/phone/internet package. Three different service trucks were parked on our driveway during the sorting out of tech stuff period.

Cancelling with Bell phone company was a long procedure. They don't like to let go, and were making deals when the utilities were already switched over. JUST CANCEL MY TV AND PHONE, THANK-YOU!!!

"We'll sent you a really good deal to your e-mail. "Piss off!" thinks I (they recorded the convo, so I didn't say that.) Oh, and it was an Asian woman with a weird accent. 90% of the call was "DON'T LEAVE!" and "What? ... please repeat that," on my end.

Good to be back in action at 40s5.
Dave

Welcome back, Dave!

You were sorely missed!

Thanks, Joe.

I hate technical difficulties.

Positioning nuggets and mines in the games:

It's best to do it in Notepad.

1: Get latest unplayed game in html mode.
2: Do CTRL-A and CTRL-C. Code is in clipboard now.
3: Should have a work folder to keep this stuff in,
   not all over your DESKTOP.
4: Open your BLANK.TXT which you should have made by now,
   or do NEW >> TEXT DOCUMENT inside WORK folder.
5: Open BLANK.TXT or whatever Windows named the other one.
6: Left-click inside then CTRL-V. Code is in BLANK.TXT.
7: SAVE AS gameXYZ.TXT and gameXYZ.HTML, or whatever name you want..
8: The code is offset on a slant. If you like it, fine.

9: To get the code left-aligned: Replace 2 spaces with 1 space:
   Hit CTRL-HOME to put cursor at beginning, or just go there manually.
   Hit CTRL-H to open REPLACE window.
   In Top Box enter 2 spaces.
   In Bottom Box enter 1 space.
   Hit REPLACE ALL.
   Keep doing that till the code is flush with the left side.
   Save.

10: At top of Minefield-13 it says:
============================================
<div>
    <!-- boom = https://iili.io/HQAlVcu.png
-->
This is mine image address.
============================================

11: &#39; is code for a single quote .. aimoo did this to my '.
    Between 2 of these is the mine image address.
    Some have no image, just ... background-image:url(&#39;&#39;);">
    These are in my master copy waiting for me to put in a mine.
    
    Grass image is <img src="https://iili.io/HQmCJQR.jpg"/>.

12: Down the page it says:
============================================
<tr id="01" class="firstRow">
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;https://iili.io/HQAlVcu.png&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;https://iili.io/HQAlVcu.png&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                                <td style="height:100px;width:100px;text-align:center;background-image:url(&#39;&#39;);">
                                    <img src="https://iili.io/HQmCJQR.jpg"/>
                                </td>
                            </tr>
============================================
Take out the existing mines and move them to someplace else.
I usually put 2 mines per row TR to /TR, except for second row up, where I use 1.
Save as text.
Save as html.

13: To see the mines, locate cursor at the top, and

corrupt HQmCJQR.jpg to HQmCJQR.jpig.

You do this with the CTRL-H window.

Save as test.htm, and run it.
If you don't like the layout, change something. Rows have ID# from top.

That's it.

CTRL-A and CTRL-C put whichever file contents into clipboard.
Paste as usual in our games area.

Same method for nuggets.

Any questions please ask.

Advise to make 2 prototypes with no mines or nuggets.

Keep mine and nugget code at the top <!-- HERE -->
Could throw a dice to get the initial numbers.

Make ARCHIVES sub-folder for new games. Don't overwrite by accident.

In GOLD_MINER the tree area is blank, so go down to BELOW GROUND.

Notepad corrupts code if copied with WORD-WRAP on.

I imagine you know by now that you EDIT the txt and RUN the html with a double-left-click.

Both are the same except for EXTENSION, (the part after the dot).

<!-- BELOW GROUND @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->
<tr id="01">
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;background-image:url('https://iili.io/HLkB2xR.png');">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
<td style="text-align:center;width:80px;padding:0px;border-spacing:0px;height:67px;background-image:url('https://iili.io/HLkB2xR.png');">
<img src="https://iili.io/HLtcULN.jpg" style="width:80px;height:67px;"><br></td>
</tr>

=======

In this one my later edit is missing, so just add the red stuff for a nugget.

Don't put it in img like I did one time. You get no nuggets showing up then.

The BENEFITS of NOTEPAD++

Free. Colored text (editable by user).

Many computer languages (not required here, unless you want to do BBC also).

Can edit HTML and run it.

Can save macros, including changing newline code (very handy).

Can add many plugins (for when you get proficient).

Can open multiple files (good for copying stuff over to the target one).

Tuts and help online since lots of programmers use it.

===

https://www.geeksforgeeks.org/how-to-install-notepad-plus-plus-on-windows/

You need to know if your comp is 64 bit or 32 bit prior to selection of install package.

I'm using V7.6.3 and updated to V7.8.0.

I kept both, due to extra plugins in first one.

HTML looks same in both.

Just delete them, Dave, and start new discussions. 

Yes, I suppose I am "able" to do that, but I may not be "capable".  I'm definitely able to copy some other game and change it around.

Dave, don't lose hope.  You may be around for ten years or more.  Thanks for your offer of help! 

Thanks for your response, Joe.

Re your capability, you just have to "order" what you want, mainly inline CSS.

Of course, you have to put HTML tables and divs where they should be first.

Don't blindly copy code. Ask yourself "Why did he do this?"

If you hit a snag, just ask. No question too simple!

Some of my code is rehashed from years ago, when I was learning.

It may have extraneous code, errors, and ancient (deprecated) methods.

Inheritance plays an important part in CSS. What you ask for first keeps going till you change it.

That's what buggers up things, till you find out what's doing the interference. Sometimes, in a new game,

you forget to add in a requirement. That's why you work on your desktop instead of posting in your mailbox ... too tedious.

There is a "Zenith" standard for inline CSS, which I use mostly (see next post).

No crappy box-sizing:border-box;  or break-line stuff!

The "Zenith" copyright line has a "position:relative;top:12px;" which is extra to that post.

It centers the text in the available border-spacing. Check the bottom of a game to see how to use this.

The effects of some CSS can be duplicated in HTML code.
Modern coders like the CSS better, but sometimes HTML is required.

example:
If the hosted copy of an image is different than the TD size
the only thing that works on a COPIED image is WIDTH="xx".

Also to remove the blank space below the image, use CSS line-height:0px;
However, following text will need to have line-height set at 30px or whatever,
or it will look bunched up due to inheritance.

Below is a copy of my CSS codes that I can click to see when using my NP++.

Suggest keep a copy in your work folder. Sub-folder TOOLS, or REFERENCE.

(L-Click at top, SHIFT-L-click at end, CTRL-C. Paste into BLANK.TXT with CTRL-V.)

CSS INFO: (cascading style sheets) IMPORTANT NOTE: This copy is in non-roaming Notepad++ main folder. ================================================================= See more at:   https://www.w3schools.com/CSSref/ ================================================================= **** SIZE width:400px;        ... width can be auto, or N% ... height follows width in images height:500px;       ... seldom required except in TD's ================================================================= **** POSITION margin: 0 auto;     ... this centers the object in its container ================================================================= **** TEXT text-align:center;  ... this centers the text or image within the container font-size:30px;     ... 42 is huge, normal is about 14 line-height: 30px;  ... use 0px with images or you get blank space underneath font-weight:900;    ... maximum bold, normal 600 color:#663300;      ... this pertains to font ... see chart link at bottom ================================================================= **** BORDERS ETC border:7px solid #663300;  ... usually a thin outer line ... see below for options border-spacing:25px;       ... background color or image is located in here border-radius:10px;        ... used to add rounded corners to a box padding: 0px;              ... space around inside of a cell or div and its content ================================================================= **** BACKGROUND background-color:#FFFFCC; background-image:url('http://groupbox.com/uploads/467792/htmltiles/bunny-tile.jpg'); NOTE: background-image takes precedence over background-color ================================================================= **** BORDER EXPANSION border: is a short form which includes: border-width: border-style: border-color: ---- Some browsers will split the borders into: border-left: border-top: border-right: border-bottom: ---- **** BORDER STYLES border styles can be: solid   .. used by Dave often, 5 to 10px wide double  .. used by Dave often, 10 to 20px wide dotted  .. seldom used dashed  .. seldom used groove  .. color is much lighter in Firefox .. seldom used ridge   .. color is much lighter in Firefox .. used by Dave once in a while inset   .. color is much lighter in Firefox .. seldom used outset  .. color is much lighter in Firefox .. seldom used none    .. seldom used hidden  .. seldom used ================================================================= **** IMAGES width:300px; height:200px; ... specify if distorting, otherwise follows width background-size:100% 100%;   ... stretches image to fill box background-repeat:no-repeat; ... see following: ----------- repeat    The background image is repeated both vertically and horizontally.          The last image will be clipped if it does not fit. This is default. no-repeat The background-image is not repeated. The image will only be shown once. repeat-x  The background image is repeated only horizontally. repeat-y  The background image is repeated only vertically. space     The background-image is repeated as much as possible without clipping.          The first and last images are pinned to either side of the element,          and whitespace is distributed evenly between the images. round     The background-image is repeated and squished or stretched to fill          the space (no gaps). initial   Sets this property to its default value. inherit   Inherits this property from its parent element ================================================================= **** COLORS border colors can be: name - specify a color name, like "red" Hex - specify a hex value, like "#ff0000" RGB - specify a RGB value, like "rgb(255,0,0)" transparent Color chart at: https://www.w3schools.com/colors/colors_picker.asp ================================================================= font-family: These can be listed in order of preference, with separating commas. Arial Arial Black Comic Sans MS Courier New Georgia Impact Sans-serif Serif Times New Roman Trebuchet MS Verdana

Here's the copyright/promotion code:

<div style="margin:0px auto;text-align:center;font-size:20px;font-weight:900;width:450px;color:#FFFFCC;position:relative;top:12px;">
<strong>***&nbsp;Another&nbsp;Zenith&nbsp;Creations&nbsp;Original&nbsp;***</strong></div>

Thanks Dave!  That's very informative!

I have a question... what is "&nbsp"?

By the way, I use a different chart for Hex Color Codes.