Help
Hi
I'm eager to put my system notes onto HTML pages. I've tried:
Bridge Markup Language [ BML ] in GITHUB by both https://github.com/Kungsgeten and https://github.com/g...thor=gpaulissen which are almost identical. However, I struggle to get the layout as I would want. For example, line comments I can't seem to get displayed.
I have written to both authors but never received replies. The old email addresses may well be obsolete by now.
Has anyone come across alternative methods they could share with me please?
Cheers
Brian Rowlands
Page 1 of 1
Bridge Markup Language writing system notes
#2
- Group: Advanced Members
- Posts: 7,853
- Joined: 2014-February-18
- Gender:Male
- Location:Italy
Posted 2021-February-27, 04:18
Kungsgeten still reads and writes here, send him a personal message for starters.
#3
- Group: Full Members
- Posts: 81
- Joined: 2019-December-18
Posted 2021-February-27, 07:01
If you only aim the documentation of your bidding system BML will be probably OK. BML was intended to feed the Full Disclosure tool which has been abandoned by BBO. The alternative is the BBOalert browser extension which enables you to use the formal bidding system description to automate alerts. BML can produce a BSS file which can be imported into BBOalert and converted to the native BBOalert format.
BBOalert supports a very flexible data format. The file can contain data records mixed with free text for documentation purposes. Any text processing tool may be used (e.g. Google Docs of Microsoft Word) to make the file as readable as possible.
BBOalert is a sophisticated toolkit which aims to automate alerting. It is currently used by more than 500 BBO players. The basic feature of recording and replaying alerts is a great help. All you need to begin is to install the BBOalert extension and start playing normally. Every alerted bid is recorded and then when the identical auction occurs the recorded bid explanation is retrieved and sent to the opponents. But this feature is only the top of the iceberg.
BBOalert installation :
Firefox
https://addons.mozil...addon/bboalert/
Chrome
https://chrome.googl...lkeemegdhehnlcf
For the complete description of BBOalert features see the project page :
https://github.com/stanmaz/BBOalert
You are invited to join the BBOalert users on Facebook
https://www.facebook...06384146770707/
There are many members playing complex system which require frequent alerts. I am convinced that you will meet there someone using a system similar to yours and who is willing to share his data with you. It can save you a lot time to encode your system.
Feel free to contact me by mail if you need help while setting up BBOalert.
stanmaz.git@gmail.com
BBOalert supports a very flexible data format. The file can contain data records mixed with free text for documentation purposes. Any text processing tool may be used (e.g. Google Docs of Microsoft Word) to make the file as readable as possible.
BBOalert is a sophisticated toolkit which aims to automate alerting. It is currently used by more than 500 BBO players. The basic feature of recording and replaying alerts is a great help. All you need to begin is to install the BBOalert extension and start playing normally. Every alerted bid is recorded and then when the identical auction occurs the recorded bid explanation is retrieved and sent to the opponents. But this feature is only the top of the iceberg.
BBOalert installation :
Firefox
https://addons.mozil...addon/bboalert/
Chrome
https://chrome.googl...lkeemegdhehnlcf
For the complete description of BBOalert features see the project page :
https://github.com/stanmaz/BBOalert
You are invited to join the BBOalert users on Facebook
https://www.facebook...06384146770707/
There are many members playing complex system which require frequent alerts. I am convinced that you will meet there someone using a system similar to yours and who is willing to share his data with you. It can save you a lot time to encode your system.
Feel free to contact me by mail if you need help while setting up BBOalert.
stanmaz.git@gmail.com
#4
- Group: Members
- Posts: 17
- Joined: 2020-July-02
Posted 2021-February-27, 17:04
stanmaz, on 2021-February-27, 07:01, said:
If you only aim the documentation of your bidding system BML will be probably OK. BML was intended to feed the Full Disclosure tool which has been abandoned by BBO. The alternative is the BBOalert browser extension which enables you to use the formal bidding system description to automate alerts. BML can produce a BSS file which can be imported into BBOalert and converted to the native BBOalert format.
BBOalert supports a very flexible data format. The file can contain data records mixed with free text for documentation purposes. Any text processing tool may be used (e.g. Google Docs of Microsoft Word) to make the file as readable as possible.
BBOalert is a sophisticated toolkit which aims to automate alerting. It is currently used by more than 500 BBO players. The basic feature of recording and replaying alerts is a great help. All you need to begin is to install the BBOalert extension and start playing normally. Every alerted bid is recorded and then when the identical auction occurs the recorded bid explanation is retrieved and sent to the opponents. But this feature is only the top of the iceberg.
BBOalert installation :
Firefox
https://addons.mozil...addon/bboalert/
Chrome
https://chrome.googl...lkeemegdhehnlcf
For the complete description of BBOalert features see the project page :
https://github.com/stanmaz/BBOalert
You are invited to join the BBOalert users on Facebook
https://www.facebook...06384146770707/
There are many members playing complex system which require frequent alerts. I am convinced that you will meet there someone using a system similar to yours and who is willing to share his data with you. It can save you a lot time to encode your system.
Feel free to contact me by mail if you need help while setting up BBOalert.
stanmaz.git@gmail.com
BBOalert supports a very flexible data format. The file can contain data records mixed with free text for documentation purposes. Any text processing tool may be used (e.g. Google Docs of Microsoft Word) to make the file as readable as possible.
BBOalert is a sophisticated toolkit which aims to automate alerting. It is currently used by more than 500 BBO players. The basic feature of recording and replaying alerts is a great help. All you need to begin is to install the BBOalert extension and start playing normally. Every alerted bid is recorded and then when the identical auction occurs the recorded bid explanation is retrieved and sent to the opponents. But this feature is only the top of the iceberg.
BBOalert installation :
Firefox
https://addons.mozil...addon/bboalert/
Chrome
https://chrome.googl...lkeemegdhehnlcf
For the complete description of BBOalert features see the project page :
https://github.com/stanmaz/BBOalert
You are invited to join the BBOalert users on Facebook
https://www.facebook...06384146770707/
There are many members playing complex system which require frequent alerts. I am convinced that you will meet there someone using a system similar to yours and who is willing to share his data with you. It can save you a lot time to encode your system.
Feel free to contact me by mail if you need help while setting up BBOalert.
stanmaz.git@gmail.com
Hi
I much appreciate your very detailed response.
At this stage, i'm converting our System notes to HTML so my partner can access them via a shared Dropbox folder and a scripted dropmenu structure with links to various html pages. Each one being an element of our system eg 1C, 1D etc.
I've never heard of Cryptpad until you mentioned it nor many of the other suggestions. Certainly food for thought.
The idea of BML taking a simple text file and applying heading, subheading, tabulation and code conversions such as !D, for example, seemed preferable to me creating a Word document which would then have to be saved as a Web Page. I produced 1C to 1S pages and then got stuck on formatting my output as I wanted for 1N when I had this idea to ask if there is a more sensible way to achieve my objective.
Have a nice day whilst I contemplate my next step.
Brian Rowlands
#5
- 5-level belongs to me
-
- Group: Advanced Members
- Posts: 9,128
- Joined: 2004-August-30
- Gender:Male
- Location:Glasgow Scotland
- Interests:Poems Computers
Posted 2021-March-04, 17:52
ManUtdNZ, on 2021-February-26, 22:01, said:
I'm eager to put my system notes onto HTML pages. I've tried:Bridge Markup Language [ BML ] in GITHUB by both https://github.com/Kungsgeten and https://github.com/g...thor=gpaulissen which are almost identical. However, I struggle to get the layout as I would want. For example, line comments I can't seem to get displayed. I have written to both authors but never received replies. The old email addresses may well be obsolete by now. Has anyone come across alternative methods they could share with me please?
- Try cutting and pasting the following code into a .htm file:
- To expand or condense a section, click on its arrow-head
<!DOCTYPE html>
<lang="en">
<head>
<title>details</title>
<meta name="author" content="28 Feb 2021 Nigel Guthrie">
<meta charset="utf-8">
<style>
* {font: bold 3vmin "Courier New", monospace;}
h1 {color:white; background:green; text-align: center;}
.CALL li, ul.CALL {list-style: none;}
ul.CALL, .CALL ul {background: lightgrey;}
ul.REPLY, .CALL ul.REPLY>li {background: yellow;}
</style>
</head>
<body>
<h1>EXTENDED STAYMAN</h1>
<p>The HTML <q>details</q> element allows you to collapse content. Clicking on its <q>summary</q> element expands its content.
<p>This demo shows how you can use it for Bridge auction tables.
<ul class="CALL">
<li>1N = BAL 12-14 HCP.
<ul class="REPLY">
<li>2!C = ASK for M (Stayman).
<ul>
<li><details><summary>2!D = ART No 4 !M.</summary>
<ul class="REPLY">
<li><details><summary>3!C = ASK (Extended Stayman).</summary>
<ul>
<li><details><summary>3!D = ART 33(34).</summary>
<ul class="REPLY">
<li><details><summary>3!H = ASK.</summary>
<ul>
<li>3!S = ART 3334.
<li>3!N = ART 3343.
</ul></details>
</ul></details>
<li>3!H = ART 5 !C.
<li>3!S = ART 5 !D.
<li>3!N = ART 4 !C & 4 !D.
</ul></details>
</ul></details>
<li><details><summary>2!H = NAT 4+ !H.</summary>
<ul class="REPLY">
<li><details><summary>3!C = ASK (Extended Stayman).</summary>
<ul>
<li><details><summary>3!D = ART 4!C or 4!D.</summary>
<ul class="REPLY">
<li><details><summary>3!H = ASK.</summary>
<ul>
<li>3!S = ART 4 !C.
<li>3!N = ART 4 !D.
</ul></details>
</ul></details>
<li>3!H = NAT 5 !H.
<li>3!S = NAT 44(32).
<li>3!N = ART 3433
</ul></details>
</ul></details>
<li><details><summary>2!S = NAT 4+ !S.</summary>
<ul class="REPLY">
<li>3!C = ASK (Continuations as after 2!H - 3!C)
</ul></details>
</ul>
</ul>
</ul></body>
</html>
#6
- Group: Advanced Members
- Posts: 7,853
- Joined: 2014-February-18
- Gender:Male
- Location:Italy
Posted 2021-March-05, 11:28
That's very interesting, and it works in Chrome for me.
But how do you edit/maintain the structure at a high level?
It would be a pain to have to do so in text with all the tags.
I tried editing the .html file with the only word-processor I have (OpenOffice Write) but it seems to discard the details/summary tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
<TITLE>details</TITLE>
<META NAME="GENERATOR" CONTENT="OpenOffice 4.1.2 (Win32)">
<META NAME="AUTHOR" CONTENT="28 Feb 2021 Nigel Guthrie">
<META NAME="CREATED" CONTENT="0;0">
<META NAME="CHANGEDBY" CONTENT="Brian Tomlin">
<META NAME="CHANGED" CONTENT="20210305;17554478">
<META NAME="" CONTENT="">
<STYLE TYPE="text/css">
<!--
H1 { background: #008000; color: #ffffff; text-align: center }
-->
</STYLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<H1>EXTENDED STAYMAN</H1>
<P>The HTML details element allows you to collapse content. Clicking
on its summary element expands its content.
</P>
<P>This demo shows how you can use it for Bridge auction tables.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">1N = BAL 12-14 HCP.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">2!C = ASK for M (Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">2!D = ART No 4 !M.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!C = ASK (Extended Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!D = ART 33(34).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ASK.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 3334.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 3343.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ART 5 !C.
</P>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 5 !D.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 4 !C & 4 !D.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">2!H = NAT 4+ !H.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!C = ASK (Extended Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!D = ART 4!C or 4!D.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ASK.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 4 !C.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 4 !D.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">3!H = NAT 5 !H.
</P>
<LI><P STYLE="margin-bottom: 0in">3!S = NAT 44(32).
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 3433
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">2!S = NAT 4+ !S.
</P>
<UL>
<LI><P>3!C = ASK (Continuations as after 2!H - 3!C)
</P>
<LI><P>3!D = DropDeadPartner</P>
<UL>
<LI><P>3!H = you too</P>
</UL>
</UL>
<LI><P>2N = 4 !H and 4 !S</P>
</UL>
</UL>
</UL>
</BODY>
</HTML>
But how do you edit/maintain the structure at a high level?
It would be a pain to have to do so in text with all the tags.
I tried editing the .html file with the only word-processor I have (OpenOffice Write) but it seems to discard the details/summary tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
<TITLE>details</TITLE>
<META NAME="GENERATOR" CONTENT="OpenOffice 4.1.2 (Win32)">
<META NAME="AUTHOR" CONTENT="28 Feb 2021 Nigel Guthrie">
<META NAME="CREATED" CONTENT="0;0">
<META NAME="CHANGEDBY" CONTENT="Brian Tomlin">
<META NAME="CHANGED" CONTENT="20210305;17554478">
<META NAME="" CONTENT="">
<STYLE TYPE="text/css">
<!--
H1 { background: #008000; color: #ffffff; text-align: center }
-->
</STYLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<H1>EXTENDED STAYMAN</H1>
<P>The HTML details element allows you to collapse content. Clicking
on its summary element expands its content.
</P>
<P>This demo shows how you can use it for Bridge auction tables.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">1N = BAL 12-14 HCP.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">2!C = ASK for M (Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">2!D = ART No 4 !M.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!C = ASK (Extended Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!D = ART 33(34).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ASK.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 3334.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 3343.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ART 5 !C.
</P>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 5 !D.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 4 !C & 4 !D.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">2!H = NAT 4+ !H.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!C = ASK (Extended Stayman).
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!D = ART 4!C or 4!D.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!H = ASK.
</P>
<UL>
<LI><P STYLE="margin-bottom: 0in">3!S = ART 4 !C.
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 4 !D.
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">3!H = NAT 5 !H.
</P>
<LI><P STYLE="margin-bottom: 0in">3!S = NAT 44(32).
</P>
<LI><P STYLE="margin-bottom: 0in">3!N = ART 3433
</P>
</UL>
</UL>
<LI><P STYLE="margin-bottom: 0in">2!S = NAT 4+ !S.
</P>
<UL>
<LI><P>3!C = ASK (Continuations as after 2!H - 3!C)
</P>
<LI><P>3!D = DropDeadPartner</P>
<UL>
<LI><P>3!H = you too</P>
</UL>
</UL>
<LI><P>2N = 4 !H and 4 !S</P>
</UL>
</UL>
</UL>
</BODY>
</HTML>
#7
- 5-level belongs to me
-
- Group: Advanced Members
- Posts: 9,128
- Joined: 2004-August-30
- Gender:Male
- Location:Glasgow Scotland
- Interests:Poems Computers
Posted 2021-March-05, 11:41
pescetom, on 2021-March-05, 11:28, said:
That's very interesting, and it works in Chrome for me.But how do you edit/maintain the structure at a high level?It would be a pain to have to do so in text with all the tags.I tried editing the .html file with the only word-processor I have (OpenOffice Write) but it seems to discard the expand/collapse tags
Better to use a basic text editor like Notepad or Notepad++.
details and summary tags are relatively new to HTML, so office-suites are likely to have problems with them.
Office editors also introduce spurious tags, which confuse the issue.
I've written card.js, a javascript module that simplifies mark-up, which I'll post here, soon.
Please note that this is intended as no-frills solution to writing auction-lists. It lacks the functionality of BLML or BBOAlert.
#8
- Group: Advanced Members
- Posts: 7,853
- Joined: 2014-February-18
- Gender:Male
- Location:Italy
Posted 2021-March-05, 12:01
nige1, on 2021-March-05, 11:41, said:
Better to use a basic text editor like Notepad or Notepad++.
The details and summary tags are relatively new to HTML, so office-suites are likely to have problems with them. They also introduce unnecessary tags, which just confuse the issue.
Currently, I'm writing card.js, a javascript module that drastically simplifies mark-up, which I'll post here, eventually.
The details and summary tags are relatively new to HTML, so office-suites are likely to have problems with them. They also introduce unnecessary tags, which just confuse the issue.
Currently, I'm writing card.js, a javascript module that drastically simplifies mark-up, which I'll post here, eventually.
OK, but in that case I look forwards to seeing card.js.
I have 60 pages of my own system notes plus another 100 pages written by others, all in the form of tables plus text. It would be quite an effort to migrate all this to an indent format, but I would consider doing so if it could be easily maintained, be read in a browser at the table and be imported to online platforms for automatic alerting.
I find it hard to understand why this issue is not even in the first ten priorities of WBF
#9
- 5-level belongs to me
-
- Group: Advanced Members
- Posts: 9,128
- Joined: 2004-August-30
- Gender:Male
- Location:Glasgow Scotland
- Interests:Poems Computers
Posted 2021-March-07, 12:56
You can cut this code and paste it into a .HTM file, to demonstrate how a simple javascript program can convert simple lists of calls into expandable bidding tables.
Guthrie.tech illustrates this
You can cut and paste the contents of
the <style></style> tags into a separate Card.css file
the <script></script> tags into a separate Card.js
These can be included in and shared by auction-list files.
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
<style>
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Demo.css. CR 2007-2021 Nigel Guthrie. Basic elements and classes.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
body
{/* default black sans-serif */
background: white;
color: black;
font: normal normal 3vmin Arial, sans-serif;
}
code
{/* maroon monospace */
background: yellow;
color: maroon;
font-family: "Courier new", monospace;
font-weight: bold;
white-space: pre-wrap;
}
dt
{/* maroon definition */
color: maroon;
font-weight: bold;
margin-top: 1vmin;
}
dt abbr i
{/* Acronym letters lowercase, italic */
display: block;
font-family: "Courier New", monospace;
font-style: italic;
text-transform: lowercase;
}
dt abbr i:first-letter
{/* Acronym initial letter bold, uppercase, white on maroon */
background: maroon;
color: white;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
em
{/* emphasis */
font-style: italic;
font-weight: bold;
}
figcaption
{/* font: style variant weight size/line-height family */
font: italic bold 3vmin Comic fantasy;
text-align: center;
}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Headers. h1 Document. h2 Section. h5 Table caption.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
h1, h2, h3, h4, h5, h6, caption
{/* Green captions and headers */
background: white;
color: darkGreen;
font: normal medium Arial, sans-serif;
text-align: left;
}
h1, h2, h3, h4, h5, caption {font-weight: bold;}
h1, h2, h3, h4 {text-transform: capitalize;}
h1, h2, h3 {text-transform: uppercase;}
h1, h2 {text-align: center;}
h1 {margin-top: 0;}
b
{/* Italic green button */
background: green;
border-radius: 1vmin;
color: white;
display: inline-block;
font: italic bold medium 'Courier New', monospace;
padding: 1vmin;
}
p {text-align: justify;}
strong {font-weight: bold; color: darkblue;}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Tables.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
table, th, td
{ border: thin solid black;
border-collapse: collapse;
empty-cells: show;
}
th, td {color: black; vertical-align: top; text-align: left;}
th {background: azure;}
thead th {background: paleGreen; font-weight: bold;}
tbody td {background: lightPink;}
u {text-decoration: underline;}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Classes.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
.CENTER {text-align: center;}
.FIX
{/* monospace, left-justified, no-wrap */
font-family: "Courier New", monospace;
text-align: left;
white-space: nowrap;
}
.HIDE {display: none;}
.HIGH {height: 99%}
.LEFT {text-align: left;}
.LFLOAT
{/* Left float */
float: left;
margin-right: 1em;
}
.JUST {text-align: justify;}
.MAUTO
{/* Centre for block elements */
display: block;
margin-left: auto;
margin-right: auto;
}
.MIDDLE tbody th
{/* Centre horizontally and vertically */
text-align: center;
vertical-align: middle;
}
.MONO {font-family: "Courier New", Courier, monospace;}
.NOWRAP {white-space: nowrap;}
.PIX {width: 4.5em;}
.PRE
{/* Preformatted text */
font-family: "Courier New", monospace;
margin: 3vmin;
white-space: pre;
}
.RFLOAT
{/* Right float */
float: right;
margin-left: 2vmin;
}
.RIGHT
{/* Right justify. */
font-family: "Courier New", monospace;
text-align: right;
}
.SHOW {display: block;}
.TESTTIME {color: blue;}
.TESTPASS {color: green;}
.TESTFAIL {color: red;}
.TGAP table, table.TGAP {margin-bottom: 1em;}
.WIDE {width: 99%;}
.W50 {width: 50%;}
.W40 {width: 40%;}
.W30 {width: 30%;}
.W20 {width: 20%;}
.W10 {width: 10%;}
.W5 {width: 5%;}
.Z , .Z td, .Z th {border-width: 0;}
.TREE a
{/* Family tree. */
background: white;
color: blue;
height: 100%;
width: 100%;
}
/** Opening bids/rebids have a yellow background. Replies are pink **/
.USAGE {font: bold 3vmin "Courier New", monospace;}
.CALL ul, ul.CALL {list-style: none; background: yellow}
ul.REPLY {background: pink;}
/** Suits C: green, D: orange, H: red, S: blue, N: black, P: green **/
.C, .CC {color: darkgreen;}
.D, .DD {color: darkorange;}
.H, .HH {color: darkred;}
.S, .SS {color: darkblue;}
.N {color: black;}
.P {color: darkgreen;}
.DB {color: crimson;}
.RD {color: purple;}
.N, .P, .DB, .RD {font-variant: small-caps;}
</style>
<body>
<main>
<h1>DEMO</h1>
<section id="PROEM">
<h2>Proem</h2>
<p>The HTML <q>details</q> element allows you to collapse content. You can include a <q>summary</q> element within the details element. To expand the details, you click on the summary. <p>This demo shows how you can use it to display a Bridge auction.
</section><!-- End PROEM -->
<section id="NEEDS">
<h2>Needs</h2>
<dl>
<dt><abbr><i>hyper</i><i>text</i><i>markup</i><i>language</i></abbr>
<dd>A language comprising nested tags that encapsulate elements of a web-page to clarify its semantic structure and to define how a browser displays it.
For example, you can define headings, paragraphs, tables, and lists.
<dt><abbr><i>cascading</i><i>style</i><i>sheets</i></abbr>
<dd>Hierarchy of lay-out rules that a browser can use to style a document written in HTML or another mark-up language. For example, you can specify fonts and colours.
<dt>Javascript
<dd>A powerful programmming language that enables users to interact dynamically with web-pages. For example, you can validate forms, play games, and so on.
</dl>
</section><!-- End NEEDS -->
<section id="USAGE class="CARD">
<h2>Usage</h2>
<ul class="CALL">
<li>1N = BAL 12-14 HCP.
<ul>
<li>2!C = ASK for M (Stayman).
<ul>
<li>2!D = ART No 4 !M.
<ul>
<li>3!C = ASK (Extended Stayman).
<ul>
<li>3!D = ART 33(34).
<ul>
<li>3!H = ASK.
<ul>
<li>3!S = ART 3334.
<li>3!N = ART 3343.
</ul>
</ul>
<li>3!H = ART 5 !C.
<li>3!S = ART 5 !D.
<li>3!N = ART 4 !C & 4 !D.
</ul>
</ul>
<li>2!H = NAT 4+ !H.
<ul>
<li>3!C = ASK (Extended Stayman).
<ul>
<li>3!D = ART 4!C or 4!D.
<ul>
<li>3!H = ASK.
<ul>
<li>3!S = ART 4 !C.
<li>3!N = ART 4 !D.
</ul>
</ul>
<li>3!H = NAT 5 !H.
<li>3!S = NAT 44(32).
<li>3!N = ART 3433.
</ul>
</ul>
<li>2!S = NAT 4+ !S.
<ul>
<li>3!C = ASK (Continuations as after 2!H - 3!C).
</ul>
</ul>
</ul>
</ul>
</div>
</section><!-- End USAGE -->
<section id="WORKS">
<h2>Works</h2>
<p>HTML code for auction table:</p>
<code id="INTO"></code>
</section><!-- End WORKS -->
<section id="PLANS">
<h2>Plans</h2>
<table>
<caption>Wish-list & Change-log</caption>
<thead>
<tr><th class="DATE">Date<th>Task<th>Description<th class="CASH">Est<th class="CASH">Act
<tbody>
<tr><th>Sun 07 Mar 2021<th>Demo<th>HTML/CSS/Javascript template<td>5<td>10
</table>
</section><!-- End PLANS -->
</main>
<script>
'use strict'
let Demo =
{// Create collapsible auction table with card symbols.
begin ()
{// Initialize Demo.
Demo.details ();
Demo.symbols ();
Demo.replies ();
},// End method begin.
details ()
{
let items = document.querySelectorAll (".CALL LI");
let i = items.length;
while (i > 0)
{
let itemE = items [--i];
let summary = itemE.childNodes [0].nodeValue;
if (!summary) continue;
summary = summary.trim ();
let details = itemE.firstElementChild;
if (!details || "UL" !== details.nodeName)
{
// alert ("No details = " + itemE.innerHTML);
continue;
}
summary = "<summary>" + summary + "</summary>"
details = "<details>" + summary + details.outerHTML + "</details>"
itemE.outerHTML = "<li>" + details + "</li>";
// alert ("New item = " + itemE.innerHTML);
}
},//End method details.
replies ()
{// Add "REPLY" class to odd-numbered ULs.
let lists = document.querySelectorAll (".CALL UL");
for (let i = 0; i < lists.length; i+=2)
lists [i].classList.add ("REPLY");
},//End method replies.
symbols ()
{// Symbol substitution e.g. change !S to spade symbol.
let cards = document.getElementsByClassName ("CARD");
for (this.CARDE of cards)
{// Calls: Passes, doubles, and redoubles.
this.sub (/!XX/g, "RD", "RD");
this.sub (/!RD/g, "RD", "RD");
this.sub (/!X/g, "DB", "DB");
this.sub (/!DBL/g, "DB", "DB");
this.sub (/!DB/g, "DB", "DB");
this.sub (/!AP/g, "AP", "P");
this.sub (/!P/g, "P ", "P");
this.sub (/!_P/g, "P ", "P");
this.sub (/!\?\?/g, "?? ");
this.sub (/!\?/g, "?? ");
// Suits and notrumps.
this.sub (/!NT/g, "N");
this.sub (/!N/g, "N");
this.sub (/!C/g, "♣", "C");
this.sub (/!D/g, "♦", "D");
this.sub (/!H/g, "♥", "H");
this.sub (/!S/g, "♠", "S");
// M(ajor), m(inor), x, y, z Interference (q).
this.sub (/!MM/g, "MM");
this.sub (/!mm/g, "mm");
this.sub (/!M/g, "M");
this.sub (/!m/g, "m");
this.sub (/!OM/g, "OM");
this.sub (/!om/g, "om");
this.sub (/!x/g, "x");
this.sub (/!y/g, "y");
this.sub (/!z/g, "z");
this.sub (/!Q/g, "Q");
this.sub (/!q/g, "Q");
// hcp, winners, ebu (rule of)
this.sub (/!HCP/g, "HCP");
this.sub (/!p/g, "HCP");
this.sub (/!EBU/g, "EBU");
this.sub (/!e/g, "EBU");
this.sub (/!WTC/g, "WTC");
this.sub (/!w/g, "WTC");
this.sub (/!CDS/g, "CDS");
this.sub (/!c/g, "CDS");
}
},// End method symbols.
sub (regEx, text, className = "N", context = this.CARDE)
{// Substitute symbols for regEx matches, in card contexts.
let symbolE =
'<span class="' + className + '">' + text + '</span>';
context.innerHTML = context.innerHTML.replace (regEx, symbolE);
},// End method sub.
squish (fromI = "FROM", intoI = "INTO")
{// squirt HTML from element into another element.
let fromE = document.getElementById (fromI);
let intoE = document.getElementById (intoI);
if (!fromE || !intoE) return;
intoE.innerHTML = fromE.innerHTML.replace (/</g, "<");
},//End method squish.
};// End object Demo.
onload = Demo.begin;
</script>
</body>
</html>
</code>
Guthrie.tech illustrates this
You can cut and paste the contents of
the <style></style> tags into a separate Card.css file
the <script></script> tags into a separate Card.js
These can be included in and shared by auction-list files.
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
<style>
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Demo.css. CR 2007-2021 Nigel Guthrie. Basic elements and classes.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
body
{/* default black sans-serif */
background: white;
color: black;
font: normal normal 3vmin Arial, sans-serif;
}
code
{/* maroon monospace */
background: yellow;
color: maroon;
font-family: "Courier new", monospace;
font-weight: bold;
white-space: pre-wrap;
}
dt
{/* maroon definition */
color: maroon;
font-weight: bold;
margin-top: 1vmin;
}
dt abbr i
{/* Acronym letters lowercase, italic */
display: block;
font-family: "Courier New", monospace;
font-style: italic;
text-transform: lowercase;
}
dt abbr i:first-letter
{/* Acronym initial letter bold, uppercase, white on maroon */
background: maroon;
color: white;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
em
{/* emphasis */
font-style: italic;
font-weight: bold;
}
figcaption
{/* font: style variant weight size/line-height family */
font: italic bold 3vmin Comic fantasy;
text-align: center;
}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Headers. h1 Document. h2 Section. h5 Table caption.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
h1, h2, h3, h4, h5, h6, caption
{/* Green captions and headers */
background: white;
color: darkGreen;
font: normal medium Arial, sans-serif;
text-align: left;
}
h1, h2, h3, h4, h5, caption {font-weight: bold;}
h1, h2, h3, h4 {text-transform: capitalize;}
h1, h2, h3 {text-transform: uppercase;}
h1, h2 {text-align: center;}
h1 {margin-top: 0;}
b
{/* Italic green button */
background: green;
border-radius: 1vmin;
color: white;
display: inline-block;
font: italic bold medium 'Courier New', monospace;
padding: 1vmin;
}
p {text-align: justify;}
strong {font-weight: bold; color: darkblue;}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Tables.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
table, th, td
{ border: thin solid black;
border-collapse: collapse;
empty-cells: show;
}
th, td {color: black; vertical-align: top; text-align: left;}
th {background: azure;}
thead th {background: paleGreen; font-weight: bold;}
tbody td {background: lightPink;}
u {text-decoration: underline;}
/** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Classes.
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** **/
.CENTER {text-align: center;}
.FIX
{/* monospace, left-justified, no-wrap */
font-family: "Courier New", monospace;
text-align: left;
white-space: nowrap;
}
.HIDE {display: none;}
.HIGH {height: 99%}
.LEFT {text-align: left;}
.LFLOAT
{/* Left float */
float: left;
margin-right: 1em;
}
.JUST {text-align: justify;}
.MAUTO
{/* Centre for block elements */
display: block;
margin-left: auto;
margin-right: auto;
}
.MIDDLE tbody th
{/* Centre horizontally and vertically */
text-align: center;
vertical-align: middle;
}
.MONO {font-family: "Courier New", Courier, monospace;}
.NOWRAP {white-space: nowrap;}
.PIX {width: 4.5em;}
.PRE
{/* Preformatted text */
font-family: "Courier New", monospace;
margin: 3vmin;
white-space: pre;
}
.RFLOAT
{/* Right float */
float: right;
margin-left: 2vmin;
}
.RIGHT
{/* Right justify. */
font-family: "Courier New", monospace;
text-align: right;
}
.SHOW {display: block;}
.TESTTIME {color: blue;}
.TESTPASS {color: green;}
.TESTFAIL {color: red;}
.TGAP table, table.TGAP {margin-bottom: 1em;}
.WIDE {width: 99%;}
.W50 {width: 50%;}
.W40 {width: 40%;}
.W30 {width: 30%;}
.W20 {width: 20%;}
.W10 {width: 10%;}
.W5 {width: 5%;}
.Z , .Z td, .Z th {border-width: 0;}
.TREE a
{/* Family tree. */
background: white;
color: blue;
height: 100%;
width: 100%;
}
/** Opening bids/rebids have a yellow background. Replies are pink **/
.USAGE {font: bold 3vmin "Courier New", monospace;}
.CALL ul, ul.CALL {list-style: none; background: yellow}
ul.REPLY {background: pink;}
/** Suits C: green, D: orange, H: red, S: blue, N: black, P: green **/
.C, .CC {color: darkgreen;}
.D, .DD {color: darkorange;}
.H, .HH {color: darkred;}
.S, .SS {color: darkblue;}
.N {color: black;}
.P {color: darkgreen;}
.DB {color: crimson;}
.RD {color: purple;}
.N, .P, .DB, .RD {font-variant: small-caps;}
</style>
<body>
<main>
<h1>DEMO</h1>
<section id="PROEM">
<h2>Proem</h2>
<p>The HTML <q>details</q> element allows you to collapse content. You can include a <q>summary</q> element within the details element. To expand the details, you click on the summary. <p>This demo shows how you can use it to display a Bridge auction.
</section><!-- End PROEM -->
<section id="NEEDS">
<h2>Needs</h2>
<dl>
<dt><abbr><i>hyper</i><i>text</i><i>markup</i><i>language</i></abbr>
<dd>A language comprising nested tags that encapsulate elements of a web-page to clarify its semantic structure and to define how a browser displays it.
For example, you can define headings, paragraphs, tables, and lists.
<dt><abbr><i>cascading</i><i>style</i><i>sheets</i></abbr>
<dd>Hierarchy of lay-out rules that a browser can use to style a document written in HTML or another mark-up language. For example, you can specify fonts and colours.
<dt>Javascript
<dd>A powerful programmming language that enables users to interact dynamically with web-pages. For example, you can validate forms, play games, and so on.
</dl>
</section><!-- End NEEDS -->
<section id="USAGE class="CARD">
<h2>Usage</h2>
<ul class="CALL">
<li>1N = BAL 12-14 HCP.
<ul>
<li>2!C = ASK for M (Stayman).
<ul>
<li>2!D = ART No 4 !M.
<ul>
<li>3!C = ASK (Extended Stayman).
<ul>
<li>3!D = ART 33(34).
<ul>
<li>3!H = ASK.
<ul>
<li>3!S = ART 3334.
<li>3!N = ART 3343.
</ul>
</ul>
<li>3!H = ART 5 !C.
<li>3!S = ART 5 !D.
<li>3!N = ART 4 !C & 4 !D.
</ul>
</ul>
<li>2!H = NAT 4+ !H.
<ul>
<li>3!C = ASK (Extended Stayman).
<ul>
<li>3!D = ART 4!C or 4!D.
<ul>
<li>3!H = ASK.
<ul>
<li>3!S = ART 4 !C.
<li>3!N = ART 4 !D.
</ul>
</ul>
<li>3!H = NAT 5 !H.
<li>3!S = NAT 44(32).
<li>3!N = ART 3433.
</ul>
</ul>
<li>2!S = NAT 4+ !S.
<ul>
<li>3!C = ASK (Continuations as after 2!H - 3!C).
</ul>
</ul>
</ul>
</ul>
</div>
</section><!-- End USAGE -->
<section id="WORKS">
<h2>Works</h2>
<p>HTML code for auction table:</p>
<code id="INTO"></code>
</section><!-- End WORKS -->
<section id="PLANS">
<h2>Plans</h2>
<table>
<caption>Wish-list & Change-log</caption>
<thead>
<tr><th class="DATE">Date<th>Task<th>Description<th class="CASH">Est<th class="CASH">Act
<tbody>
<tr><th>Sun 07 Mar 2021<th>Demo<th>HTML/CSS/Javascript template<td>5<td>10
</table>
</section><!-- End PLANS -->
</main>
<script>
'use strict'
let Demo =
{// Create collapsible auction table with card symbols.
begin ()
{// Initialize Demo.
Demo.details ();
Demo.symbols ();
Demo.replies ();
},// End method begin.
details ()
{
let items = document.querySelectorAll (".CALL LI");
let i = items.length;
while (i > 0)
{
let itemE = items [--i];
let summary = itemE.childNodes [0].nodeValue;
if (!summary) continue;
summary = summary.trim ();
let details = itemE.firstElementChild;
if (!details || "UL" !== details.nodeName)
{
// alert ("No details = " + itemE.innerHTML);
continue;
}
summary = "<summary>" + summary + "</summary>"
details = "<details>" + summary + details.outerHTML + "</details>"
itemE.outerHTML = "<li>" + details + "</li>";
// alert ("New item = " + itemE.innerHTML);
}
},//End method details.
replies ()
{// Add "REPLY" class to odd-numbered ULs.
let lists = document.querySelectorAll (".CALL UL");
for (let i = 0; i < lists.length; i+=2)
lists [i].classList.add ("REPLY");
},//End method replies.
symbols ()
{// Symbol substitution e.g. change !S to spade symbol.
let cards = document.getElementsByClassName ("CARD");
for (this.CARDE of cards)
{// Calls: Passes, doubles, and redoubles.
this.sub (/!XX/g, "RD", "RD");
this.sub (/!RD/g, "RD", "RD");
this.sub (/!X/g, "DB", "DB");
this.sub (/!DBL/g, "DB", "DB");
this.sub (/!DB/g, "DB", "DB");
this.sub (/!AP/g, "AP", "P");
this.sub (/!P/g, "P ", "P");
this.sub (/!_P/g, "P ", "P");
this.sub (/!\?\?/g, "?? ");
this.sub (/!\?/g, "?? ");
// Suits and notrumps.
this.sub (/!NT/g, "N");
this.sub (/!N/g, "N");
this.sub (/!C/g, "♣", "C");
this.sub (/!D/g, "♦", "D");
this.sub (/!H/g, "♥", "H");
this.sub (/!S/g, "♠", "S");
// M(ajor), m(inor), x, y, z Interference (q).
this.sub (/!MM/g, "MM");
this.sub (/!mm/g, "mm");
this.sub (/!M/g, "M");
this.sub (/!m/g, "m");
this.sub (/!OM/g, "OM");
this.sub (/!om/g, "om");
this.sub (/!x/g, "x");
this.sub (/!y/g, "y");
this.sub (/!z/g, "z");
this.sub (/!Q/g, "Q");
this.sub (/!q/g, "Q");
// hcp, winners, ebu (rule of)
this.sub (/!HCP/g, "HCP");
this.sub (/!p/g, "HCP");
this.sub (/!EBU/g, "EBU");
this.sub (/!e/g, "EBU");
this.sub (/!WTC/g, "WTC");
this.sub (/!w/g, "WTC");
this.sub (/!CDS/g, "CDS");
this.sub (/!c/g, "CDS");
}
},// End method symbols.
sub (regEx, text, className = "N", context = this.CARDE)
{// Substitute symbols for regEx matches, in card contexts.
let symbolE =
'<span class="' + className + '">' + text + '</span>';
context.innerHTML = context.innerHTML.replace (regEx, symbolE);
},// End method sub.
squish (fromI = "FROM", intoI = "INTO")
{// squirt HTML from element into another element.
let fromE = document.getElementById (fromI);
let intoE = document.getElementById (intoI);
if (!fromE || !intoE) return;
intoE.innerHTML = fromE.innerHTML.replace (/</g, "<");
},//End method squish.
};// End object Demo.
onload = Demo.begin;
</script>
</body>
</html>
</code>
This post has been edited by nige1: 2021-March-10, 09:30
Page 1 of 1