Python でターン制の戦略ゲーム (Dominion と考えてください) を作成しようとしています。コア ゲーム オブジェクトとメソッドは、メソッドを含む Python クラスです (典型的な OO のものにすぎません)。UI は、Bottle を使用した HTML クライアントです。私は完全に非同期のアプローチを目指しています。そのため、唯一のページのコンテンツは Python オブジェクトから生成されます。ページから送信して、ボトル Web サーバー (これには jQuery AJAX を使用) を介してページを離れることなく、これらのオブジェクトを更新する必要があります。
現時点では、プレイヤーが書いたメッセージを取得し、Chat オブジェクト (プレイヤーとテキスト データのみを含む) として保存する基本的なチャット システムに取り組んでいます。これらのオブジェクトは、1 秒ごとにウィンドウを更新する AJAX を使用してチャット ウィンドウに書き込まれます。チャット ラインの HTML 形式は<div class="chatLine"><p>Player > </p><p>Text</p></div>かなり標準的なものです。
この基本的な図は、実際には技術的ではなく概念的なものではありませんが、もう少し明確にすることができます。
私の BottleUI.py (これは、サーバーを起動するために実行するものです):
from Populate import * # Everything in Populate can now be directly called.
# NOTE: Populate allows access to "bottle" and "Main"
# This ensures the css file is available
@route('/theCSS')
def static():
return static_file('main.css', root='static')
@route('/citadel/:game/:player')
def gamePage(game, player):
if not (game.isdigit()) or not (player.isdigit()):
return "Invalid page."
game = int(game)
player = int(player)
if ((game >= 0) and (game < listOfGames.__len__())) and ((player >= 0) and (player < listOfGames[game].listOfPlayers.__len__())):
return '''
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/theCSS">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Sample AJAX script below, change as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('#chatForm').submit(function(e) {
$.ajax({
type: 'POST',
url: "/AddToChat/''' + str(game) + '''/''' + str(player) + '''",
success: function() {
$('#chatInput').val("");
}
});
e.preventDefault();
});
});
setInterval("updateChat();", 1000);
$(function() {
updateChat = function() {
$('#chatText').load('/GenerateChat/''' + str(game) + '''');
};
});
</script>
<!-- Script to scroll to bottom of divs - needs to be changed into called function -->
<script type="text/javascript">
window.onload = function () {
var objDiv = document.getElementById("gameFlow");
objDiv.scrollTop = objDiv.scrollHeight;
objDiv = document.getElementById("chatText");
objDiv.scrollTop = objDiv.scrollHeight;
};
</script>
</head>
<body>
<div id="container">
<!-- Make this have background-image with the game number displaying programmatically -->
<div id="banner">
<h1>Citadel - Game ''' + str(game) + ''', Player ''' + str(player) + '''</h1>
</div>
<div id="main">
<div id="leftPanel">
<div id="playerTotals">
<h4>Player Totals:</h4>
<div id="totalsText">
<p>Money:</p>
<p>Population:</p>
<p>Troops:</p>
<p>Friend:</p>
<p>Enemy:</p>
</div>
<!-- Player totals go here (money, population/limit, troops, friend, enemy) -->
<div id="totalsNums">
</div>
<div class="clear"></div>
</div>
<div class="leftSegment">
<h4>Troop Cards:</h4>
<!-- Player's troopCards here -->
<select size=2>
</select>
</div>
<div class="leftSegment">
<h4>Territory Cards:</h4>
<!-- Player's territoryCards here -->
<select size=2>
</select>
</div>
<div class="leftSegment">
<h4>Region Cards:</h4>
<!-- Player's regionCards here -->
<select size=2>
</select>
</div>
<div class="leftSegment">
<h4>Resource Cards:</h4>
<!-- Player's resourceCards here -->
<select size=2>
</select>
</div>
<div class="leftSegment">
<h4>Diplomacy Cards:</h4>
<!-- Player's diplomacyCards here -->
<select size=2>
</select>
</div>
<div id="chatPane">
<form id="chatForm" method="POST" action="/AddToChat/''' + str(game) + '''/''' + str(player) + '''">
<textarea name="theChatText" id="chatInput"></textarea>
<input id="chatSubmit" class="button" type="submit" value="Send" />
</form>
</div>
<div class="clear"></div>
</div>
<div id="rightPanel">
<!-- Game flow goes here (shows current player/phase, attacks with results, etc) -->
<div id="gameFlow">
</div>
<!-- Player turn stuff goes here (changes depending on which phase, etc) -->
<div id="playerActions">
</div>
<!-- Chat goes here (implement last) -->
<div id="chatText">
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
'''
else:
return "Invalid page."
run(host='localhost', port=8080)
そして、これが私の Populate.py です (これは、私の AJAX @route メソッドが格納されている場所です):
"""
This module contains the bottle routs for AJAX population of the various parts
of the game page.
"""
from bottle import route, run, template, static_file, request
from Main import * # Everything in Main can now be directly called.
globalBegin()
@route('/AddToChat/:game/:player', method='POST')
def AddToChat(game, player):
theText = request.POST.get('theChatText', '').strip()
game = int(game)
player = int(player)
listOfGames[game].listOfPlayers[player].addChat(theText)
@route('/GenerateChat/:game')
def GenerateChat(game):
chatText = ""
game = int(game)
for line in listOfGames[game].chatList:
chatText += '<div class="chatLine"><p>'
chatText += line.player.name
chatText += ' > </p><p>'
chatText += line.text
chatText += '</p></div>'
return chatText
問題は、「chatForm」フォームが意図したとおりに機能しないことです。テキストを送信しようとすると、AddToChat()それだと思うようです。request.POST.get('theChatText', '')NoneType
ええ、なぜこれをしているのか、私は困惑しています。私が見る限り'theChatText'、POST dict の有効なキーである必要があります。
また、すべてのコア ゲーム ロジックが動作することも述べておきます (ここでの問題ではないことは明らかですが)。
どんな助けでも大歓迎です。