commit d13aafa4b5423fbcb363b65083e4d2381f99de7a
parent 9ca788810395eeb080ebcc9c4e57e92945601a3d
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Wed, 27 Dec 2023 23:13:17 -0500
poker hands help
Diffstat:
1 file changed, 116 insertions(+), 75 deletions(-)
diff --git a/pkg/web/handlers/poker/poker.go b/pkg/web/handlers/poker/poker.go
@@ -2096,77 +2096,119 @@ func buildDevHtml() (html string) {
func buildHelpHtml() (html string) {
html += `
-<div style="display: none; position: absolute; top: 10px; left: 10px; width: 190px; height: 450px; z-index: 1000; background-color: #ccc;">
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card red">K♥</div>
- <div class="mini-card red">Q♥</div>
- <div class="mini-card red">J♥</div>
- <div class="mini-card red">T♥</div>
- </div>
- <div>
- <div class="mini-card red">T♥</div>
- <div class="mini-card red">9♥</div>
- <div class="mini-card red">8♥</div>
- <div class="mini-card red">7♥</div>
- <div class="mini-card red">6♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card">A♣</div>
- <div class="mini-card red">A♦</div>
- <div class="mini-card">A♠</div>
- <div class="mini-card red disabled">K♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card">A♣</div>
- <div class="mini-card red">A♦</div>
- <div class="mini-card">K♠</div>
- <div class="mini-card red">K♥</div>
- </div>
- <div>
- <div class="mini-card">K♣</div>
- <div class="mini-card">T♣</div>
- <div class="mini-card">8♣</div>
- <div class="mini-card">7♣</div>
- <div class="mini-card">5♣</div>
- </div>
-
- <div>
- <div class="mini-card red">T♥</div>
- <div class="mini-card">9♣</div>
- <div class="mini-card red">8♦</div>
- <div class="mini-card">7♠</div>
- <div class="mini-card red">6♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card red">A♦</div>
- <div class="mini-card">A♣</div>
- <div class="mini-card disabled">K♠</div>
- <div class="mini-card red disabled">Q♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card">A♣</div>
- <div class="mini-card red">K♦</div>
- <div class="mini-card">K♠</div>
- <div class="mini-card red disabled">7♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card">A♣</div>
- <div class="mini-card red disabled">K♦</div>
- <div class="mini-card disabled">J♠</div>
- <div class="mini-card red disabled">7♥</div>
- </div>
- <div>
- <div class="mini-card red">A♥</div>
- <div class="mini-card disabled">K♣</div>
- <div class="mini-card red disabled">Q♦</div>
- <div class="mini-card disabled">9♠</div>
- <div class="mini-card red disabled">7♥</div>
+<style>
+.heart::after { content: '♥'; display: block; }
+.diamond::after { content: '♥'; display: block; }
+.spade::after { content: '♥'; display: block; }
+.club::after { content: '♥'; display: block; }
+.help { position: absolute; z-index: 999999; left: 50px; top: 12px; }
+.help-content { display: none; }
+.help:hover .help-content { display: block; }
+.disabled::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4); /* Adjust the transparency as needed */
+ pointer-events: none; /* Allow clicking through the overlay */
+}
+.title {
+ font-family: Arial,Helvetica,sans-serif;
+ font-weight: bolder;
+}
+</style>
+<div class="help">
+ Help
+ <div class="help-content">
+ <div style="position: absolute; top: 10px; left: 10px; padding: 10px; z-index: 1000; background-color: #ccc; display: flex; width: 365px;">
+ <div style="margin-right: 20px">
+ <div class="title">1- Royal Flush</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></span></div>
+ <div class="mini-card red">K<span class="heart"></span></div>
+ <div class="mini-card red">Q<span class="heart"></span></div>
+ <div class="mini-card red">J<span class="heart"></span></div>
+ <div class="mini-card red">10<span class="heart"></span></div>
+ </div>
+ <div class="title">2- Straight Flush</div>
+ <div>
+ <div class="mini-card red">10<span class="heart"></div>
+ <div class="mini-card red">9<span class="heart"></div>
+ <div class="mini-card red">8<span class="heart"></div>
+ <div class="mini-card red">7<span class="heart"></div>
+ <div class="mini-card red">6<span class="heart"></div>
+ </div>
+ <div class="title">3- Four of a kind</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card">A<span class="club"></div>
+ <div class="mini-card red">A<span class="diamond"></div>
+ <div class="mini-card">A<span class="spade"></div>
+ <div class="mini-card red disabled">K<span class="heart"></div>
+ </div>
+ <div class="title">4- Full house</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card">A<span class="club"></div>
+ <div class="mini-card red">A<span class="diamond"></div>
+ <div class="mini-card">K<span class="spade"></div>
+ <div class="mini-card red">K<span class="heart"></div>
+ </div>
+ <div class="title">5- Flush</div>
+ <div>
+ <div class="mini-card">K<span class="club"></div>
+ <div class="mini-card">10<span class="club"></div>
+ <div class="mini-card">8<span class="club"></div>
+ <div class="mini-card">7<span class="club"></div>
+ <div class="mini-card">5<span class="club"></div>
+ </div>
+ </div>
+
+ <div>
+ <div class="title">6- Straight</div>
+ <div>
+ <div class="mini-card red">10<span class="heart"></div>
+ <div class="mini-card">9<span class="club"></div>
+ <div class="mini-card red">8<span class="diamond"></div>
+ <div class="mini-card">7<span class="spade"></div>
+ <div class="mini-card red">6<span class="heart"></div>
+ </div>
+ <div class="title">7- Three of a kind</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card red">A<span class="diamond"></div>
+ <div class="mini-card">A<span class="club"></div>
+ <div class="mini-card disabled">K<span class="spade"></div>
+ <div class="mini-card red disabled">Q<span class="heart"></div>
+ </div>
+ <div class="title">8- Two pair</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card">A<span class="club"></div>
+ <div class="mini-card red">K<span class="diamond"></div>
+ <div class="mini-card">K<span class="spade"></div>
+ <div class="mini-card red disabled">7<span class="heart"></div>
+ </div>
+ <div class="title">9- Pair</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card">A<span class="club"></div>
+ <div class="mini-card red disabled">K<span class="diamond"></div>
+ <div class="mini-card disabled">J<span class="spade"></div>
+ <div class="mini-card red disabled">7<span class="heart"></div>
+ </div>
+ <div class="title">10- High card</div>
+ <div>
+ <div class="mini-card red">A<span class="heart"></div>
+ <div class="mini-card disabled">K<span class="club"></div>
+ <div class="mini-card red disabled">Q<span class="diamond"></div>
+ <div class="mini-card disabled">9<span class="spade"></div>
+ <div class="mini-card red disabled">7<span class="heart"></div>
+ </div>
+ </div>
+ </div>
</div>
</div>`
return
@@ -2205,18 +2247,17 @@ body {
.mini-card {
width: 29px;
height: 40px;
- display:inline-block;
+ display: inline-grid;
justify-content: center;
+ justify-items: center;
font-size: 20px;
- writing-mode: vertical-rl;
- text-orientation: upright;
font-weight: bolder;
background-color:#fcfcfc;
border-radius:2%;
border:1px solid black;
}
.red { color: #cc0000; }
-.disabled { background-color: #bbb; }
+.disabled { position: relative; background-color: #bbb; }
.card {
box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #fff;
transform-style: preserve-3d;
