Test eCookbook Integration

docs/eCookbook/games/battleship.md

@@ -0,0 +1,34 @@
+**A GUI front-end for a Battleship or Minesweeper game**
+
+This is not a complete game but rather a GUI that's ready for you to add your game logic to it.
+
+There are 3 versions of this code, each with different levels of use of list comprehensions.
+
+This window is a grid of buttons with each key being the row and column of the button.
+
+It takes in clicks and will randomly change the button color and text that was clicked to either an "M" for Missing or "H" for hit. 
+
+The idea here is to drop in the code for the hit/miss logic and call this code when a button is clicked.
+
+The `layout` definition is unusual in this example compared to other PySimpleGUI programs.  Normally the layout is done all at one time, in a single statement `layout = [[.....]]`.  This code uses a "contactenated layout" because the buttons are created using a list comprehension.  
+
+Note that these programs are using the new expanded Look and Feel Themes released in version 4.6 of PySimpleGUI.
+
+Screenshot from Windows:
+
+![BattleshipDarkBlue3.jpg](/api/files/5dd56d04cb1d4c4205acfe8f/battleshipdarkblue3.jpeg "BattleshipDarkBlue3.jpg")
+
+**Implementation 1 - List Comprehension for Board**
+
+<iframe src='https://trinket.io/embed/pygame/288c9a4396?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+**Implementation 2 - List Comprehension for Board Rows**
+
+
+<iframe src='https://trinket.io/embed/pygame/bcbf86a590?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+
+**Implementation 3 - No List Comprehension**
+
+
+<iframe src='https://trinket.io/embed/pygame/242e2828a4?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/games/conways-game-of-life.md

@@ -0,0 +1,14 @@
+**Conway's Game Of Life**
+
+This demo is an adaptation of a text based Game of Life.  The PySimpleGUI code was added to an existing engine.  The GUI code is pretty well isolated, especially the board creation / setup code which is in a couple of class methods.  
+
+It demonstrates utilizing a `Graph` element to draw rectanges based on user mouse clicks.  This kind of interface works well on both a traditional window + mouse setup or on a tablet's touchscreen.
+
+This same code can be run on Android for example using PyDroid3.
+
+The "Published" version of this code can be found here:
+https://pysimplegui.trinket.io/sites/conways-game-of-life
+
+It's the same output but done in a full-window, without the code being shown.
+
+<iframe src="https://trinket.io/embed/pygame/447e96f4d4" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>

docs/eCookbook/games/dice-roller.md

@@ -0,0 +1,16 @@
+## Dice Roller
+
+A classic beginner problem to solve.... simulate rolling some dice.
+
+This little program allows you to choose the numer of sides on the dice and the number of dice to roll.  
+
+There's nothing really tricky about this program.  The rolling and display of the results has been compressed down to a single line of code:
+```python
+    window['-ROLLED-'].update(' '.join([str(random.randint(0, int(values['-DICE-'])-1)+1) for i in range(int(values['-NUM DICE-']))]))
+
+```
+
+A list comprehension is used to generate the list of dice results, combined into a single string and then output in the window.
+
+
+<iframe src='https://trinket.io/embed/pygame/cc8f84f76b?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/games/minesweeper.md

@@ -0,0 +1,33 @@
+The classic Minesweeper game!
+
+The user interface requirements for Minesweeper are a little unusual compared to most GUIs.  The use of the right mouse click to mark squares with flags is the most difficult part to implement in PySimpleGUI because right clicks are not normally passed along to the user.  
+
+The specific action needed is the ability to right click on a `Button` and receive an event.  In version 4.11.0 of PySimpleGUI this capability was made easier with the addition of the `.bind` method for both Elements and Windows.  It is what is used to "bind" the right mouse button click to a button.
+
+This implementation is based on a post made here:
+
+https://learnku.com/articles/37714
+
+There are 3 noteable changes:
+
+1. Button keys were made into tuples instead of strings
+2. Right mouse button clicks are received through `window.read()` calls instead of tkinter callbacks
+3. Graphic images were moved into the source code by using Base64 images
+
+The posted code was written prior to the `bind` method being available.
+
+Because Trinket's display size is so small, the board size is limited to a 10 x 8 board.  Running on your local computer you'll want to change the display variables at the top to 24 x 14 and change the bombs from 10 to 80
+
+On Windows the game looks really nice thanks to the author paying attention to the details and choosing nice graphics and by matching colors
+
+![Minesweeper.png](/api/files/5df14d920dc187b112357f1a/minesweeper.png "Minesweeper.png")
+
+To play this game in your browser using this Trinket, you'll probably want to play the "Published" version as it doesn't show the source code and provides a cleaner view of the application.
+
+Here's the published version's linke:
+
+https://pysimplegui.trinket.io/sites/minesweeper
+
+
+
+<iframe src='https://trinket.io/embed/pygame/6db8011bff?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/games/sudoku.md

@@ -0,0 +1,44 @@
+## Sudoku In a Line
+
+This demo began as a demonstration of the many ways a Sudoku board could be created using PySimpleGUI.  It ended up being more complete application.  The "build-a-Sudoku-board" port of the code can be represented in a somewhat boring single line of code.
+
+```python
+sg.Window('Sudoku',[[sg.Frame('',[[sg.I(random.randint(1,9), justification='r', size=(3,1),key=(frow*3+row,fcol*3+col)) for col in range(3)] for row in range(3)]) for fcol in range(3)] for frow in range(3)]+ [[sg.B('Exit')]]).read()
+```
+
+This layout uses list comprehensions to create the classic Sudoku board that is 9 boxes each consisting of 9 numbers.  The single line of code produces this window when run on Windows 10:
+
+![SNAG-0755.jpg](/api/files/5e98e7a84732c8c7199ef189/snag-0755.jpeg "SNAG-0755.jpg")
+
+The board isn't a "valid" one.  It's filled with random digits. 
+
+Building it out further required adding on a board generator and then a few fun features.  The board generation was discovered by searching through GitHub.  I finally settled on this elegantly simple implementaiton found in this GitHub Repository:
+
+https://github.com/MorvanZhou/sudoku
+
+A big thanks is thus owed to Morvan Zhou for creating these puzzles for our enjoyment.
+
+You begin the game with a board much like this one:
+
+![SNAG-0756.jpg](/api/files/5e98e8ff4732c8c7199ef6b8/snag-0756.jpeg "SNAG-0756.jpg")
+
+You can check your progress at any point by clicking `Check`.  This will color each cell depending on the status of the cell.  
+
+* If the answer is correct, the background will be white (or whatever is normal for the theme you're using)
+* If the answer is incorrect, the background color will turn red
+* If the answer is blank, the background will turn yellow
+
+![SNAG-0757.jpg](/api/files/5e98e94c4732c8c7199ef83a/snag-0757.jpeg "SNAG-0757.jpg")
+
+It makes it easy to see what you've won the game.   There's also a popup that's displayed when you click `Check` and the board has been correctly solved.  Click `Solve` and the answers are all filled in for you.
+
+![SNAG-0758.jpg](/api/files/5e98e94c4732c8c7199ef83b/snag-0758.jpeg "SNAG-0758.jpg")
+
+If you wish to start a new game click `New Game`.  The "Mask Rate" determines what percentage of the cells are erased at the beginning.
+
+If you wish to run this program using Trinket without the debugger, the "Published" version is here:
+
+https://pysimplegui.trinket.io/sites/sudoku
+
+
+<iframe src='https://trinket.io/embed/pygame/bb346ef125?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/games/uno-card-game.md

@@ -0,0 +1,12 @@
+**Uno Card Game**
+
+Demonstration of how to use a Graph Element to "draw images", in this case
+cards, so that they overlap.
+
+The low resolution on Trinket resulted in the top and bottom being cropped
+from view.  You can see enough to play and get an understanding one way of
+using PySimpleGUI buttons and the graph element to create a card came.
+
+
+
+<iframe src='https://trinket.io/embed/pygame/4f351525ea?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/games/wordle.md

@@ -0,0 +1,8 @@
+# Wordle
+
+A front-end for the popular Wordle game
+
+You will need to add some additional code to hook up to a dictionary of words.  This Trinket has the code to handle all of the user input & output.  It takes in characters, converts to upper case, handles backspace key and enter key.  It also color codes the submitted answer against the "Current word" (currently a single constant).
+
+
+<iframe src='https://trinket.io/embed/pygame/a047e5303f?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>