BINGO「Webツール」のビンゴカード作成部を作る

-- 目次はこちら。PythonでBINGOの「Webツール」をつくる
-- 記事作成：2019年12月、修正・追記：2020年7月11日（未完）

BINGO「Webツール」のビンゴカード作成部を作る

前回の BINGO「Webツール」の抽選機のみ(デザインなし)を作成する。 からの続きです。

今回は以下のサイトを参考にさせていただきました。

• 【Python入門講座】class習得➂ビンゴカードを作ろう
• Jinja2の使い方がわかるとFlaskを用いた開発がよりスマートになる
• はじめての Flask #2 ~POSTを受け取ろう~
• はじめての Flask #3 ~htmlをrenderしてみよう~

ビンゴカードの構成

日本で一般に市販されているビンゴ(BINGO)カードは次の様な構成になっていると思います。

• ５行５桁のマス目が書いてある
• 各マス目には数字が書いてある
• 各マス目の数字は重複しない
• 中央のマス目は「Free」として既に当選とする
• B列は 1～15
• I列は16～30
• N列は31～45
• G列は46～60
• O列は61～75
• 参加する人の数を用意する。

Ｂ	Ⅰ	Ｎ	Ｇ	Ｏ
3	22	43	59	70
10	18	34	47	61
1	29	Free	56	68
15	23	31	46	72
11	20	35	51	63

ビンゴカードを作り「Webツール」とするのに必要な情報

ビンゴカードの構成を元に必要な情報をまとめると

• 誰のカードかわかる様にする。もしくは、「誰」が分かるとカードが分かる。
• 「誰」の部分は重複しないこと。
• 一人当たりカード番号が入った５×５の枠（リスト）を用意する。
• カードのデータは作成後、ゲーム終了まで変更しない。
• 抽選した結果を記録する５×５の枠（リスト）を用意する。
• BINGOしているか、いつBINGOしたか、リーチは何個かが分かるようにする。

ビンゴカード情報の構造

bingo_cards と名前を付けたリストを作る(例)
bingo_cards = [
　　　[ 誰, BINGOした抽選回数, リーチの数,
　　　　[ 　　#ビンゴカードの内容
　　　　　[ 3, 10, 15, 11, 4 ], # B列
　　　　　[22, 18, 29, 20, 30 ], # I列
　　　　　[43, 34, 0, 35, 41 ], # N列:Freeは0とする
　　　　　[59, 47, 56, 51, 61 ], # G列
　　　　　[70, 61, 68, 72, 63 ], # O列
　　　　], [　#抽選結果
　　　　　[ 0, 0, 0, 0, 0 ], # B列
　　　　　[ 0, 0, 0, 0, 0 ], # I列
　　　　　[ 0, 0, 1, 0, 0 ], # N列
　　　　　[ 0, 0, 0, 0, 0 ], # G列
　　　　　[ 0, 0, 0, 0, 0 ], # O列
　　　　]
　　　]
　　]

１：誰　＝　参加者の名前を入れる。重複禁止とする。
２：BINGOした抽選回数　＝ 最初にBINGOが完成した抽選回数を入れる。
３：リーチの数　＝　抽選する度にリーチの数を確認して更新する。
４：ビンゴカードの内容　　　　－－－＞　　　抽選結果
　　（最初決定した番号）－ー＞（抽選で当たった場合に”１”にする）

Ｂ	Ⅰ	Ｎ	Ｇ	Ｏ	－－－＞	Ｂ	Ⅰ	Ｎ	Ｇ	Ｏ
3	22	43	59	70		0	0	0	0	0
10	18	34	47	61		0	0	0	0	0
1	29	0	56	68		0	0	1	0	0
15	23	31	46	72		0	0	0	0	0
11	20	35	51	63		0	0	0	0	0

※ここまで文章編集してソース見ましたが大変理解しにくいことが判明した。
　読みにくいソースは素人だからととはいえ修正したいと思います。
　(追記：2020/07/11)

まずはWeb側の環境を作成する

Pythonの周りの環境を整備します。
プログラムでは、
　＞　from flask import Flask
を
　＞　from flask import Flask, render_template, request
に変更して、テンプレートのHTMLファイルを送信できるようにするのと、フォームから送信されたデータを扱えるようにします。

BINGOカードの入力画面

card.html を作成して、名前と自分が持っているカードの番号を入力するフォームを作成します。
（ファイルは、実行フォルダ/templates/card.html）
今回はWebツール側でビンゴカードを作りますが、手持ちのカードでも入力できるようにしておきます。
＝＝　送信ボタンの値で切り替えることにします。
１．お名前：に名前を入力する。
　「カードを作る」ボタンをクリックするとPythonで自動作成。
　24マス全てを入力後・確認後に「登録する」をクリックすると登録する。

　●サンプル：名前をいれて「カードを作る」をクリックした後

　●「登録」をクリックする。
　　登録する前に各数値を変更することも可能。

（ここから先は未編集）

-- 目次はこちら。PythonでBINGOの「Webツール」をつくる