量子戰艦遊戲前端實作與雲端佈署

var dif = (json.bombs[player - 1] + 1) - json.bombs[1 - (player - 1)];
if (dif >= 2) {
    if (BOMBS[player - 1][qubit] < 1) {
        $('#' + id).attr('checked', false);
    }
    return error("Not your turn. It's player " + ((1 - (player - 1)) + 1));
}

BOMBS[player - 1][qubit]++;
$('#b' + player + qubit).html("(" + BOMBS[player - 1][qubit] + ")");
notify('Bomb ready. Click Submit', 'info');
mustSubmit = true;

function submit() {
    var url = "cgi-bin/qiskit-driver.sh";
    var data = 'ships1=' + s1 + '&ships2=' + s2 + '&bombs1=' + BOMBS[0].join(',') + '&bombs2=' + BOMBS[1].join(',') + '&device=' + $('#device').val();
    $.get(url, data)
        .done(function(json) {
            handleResponse(json);
        })
        .fail(function() {
            notify('Internal Server Error. Check logs.', 'danger');
        });
}

function handleResponse(json) {
    var damage = json.damage;
    var d1 = damage[0];
    var d2 = damage[1];
    for (var i = 0; i < 5; i++) {
        var pct1 = (d1[i] * 100).toFixed(1);
        var pct2 = (d2[i] * 100).toFixed(1);
        // 更新介面顯示損傷百分比
    }
    // 判斷遊戲勝負
    var s1 = d1.reduce(function(total, currentValue) { return total + currentValue; }, 0);
    var s2 = d2.reduce(function(total, currentValue) { return total + currentValue; }, 0);
    if (s1 > 2.85) winner = 2;
    if (s2 > 2.85) winner = 1;
    if (winner != 0) {
        notify('** G.A.M.E O.V.E.R Player ' + winner + ' wins **', 'success');
        gameover = true;
    }
}

function reset_click() {
    gameover = false;
    for (var i = 0; i < 5; i++) {
        $('#p1s' + i).attr('checked', false);
        $('#p2s' + i).attr('checked', false);
        // 重置其他相關介面元素
    }
}

#!/bin/sh
# home dir
root=/home/centos
program=qbattleship.py
# 啟用Python 3
source $root/qiskit/qiskit/bin/activate
# 執行Python量子程式
python $program

<IfModule mod_userdir.c>
    #UserDir disabled
    # 要啟用對/~user/的請求以服務使用者的public_html目錄，
    # 請刪除上面的"UserDir disabled"行，並取消註解下面的行：
    UserDir public_html
</IfModule>
<Directory /home/*/public_html>
    AllowOverride FileInfo AuthConfig Limit
    Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec +ExecCGI
    AddHandler cgi-script .cgi
    <Limit GET POST OPTIONS>
        Order allow,deny
        Allow from all
    </Limit>
</Directory>
<Directory "/home/*/public_html/cgi-bin">
    AllowOverride None
    Options ExecCGI
    SetHandler cgi-script
</Directory>

// 伺服器WebSocket端點
var END_POINT = "ws://localhost:8080/BattleShip/WSBattleship";
// 用於追蹤客戶端的隨機ID
var CLIENT_ID = Math.floor(Math.random() * 10000);

function WS_connect(host) {
    // ...
}

function WS_initialize() {
    var clientId = CLIENT_ID;
    var host = END_POINT;
    this.url = host + '?clientId=' + clientId;
    WS_connect(this.url);
}

function WS_send(text) {
    this.socket.send(text);
}

this.socket.onmessage = function(message) {
    var json = JSON.parse(message.data);
    // 處理接收到的JSON訊息
    handleResponse(json);
}

@ServerEndpoint(value = "/WSBattleship")
public class WSConnector {
    // 連線列表
    private static final List<WSConnectionDescriptor> connections = new CopyOnWriteArrayList<>();
    // 遊戲資料
    private static final Map<String, JSONObject> data = new HashMap<>();

    /** 客戶端ID */
    String clientId;

    // ...
}

@ServerEndpoint(value = "/WSBattleship")
public class WSConnector {
    private static List<WSConnectionDescriptor> connections = new ArrayList<>();
    private String clientId;

    private String getSessionParameter(Session session, String key) {
        if (!session.getRequestParameterMap().containsKey(key)) {
            return null;
        }
        return session.getRequestParameterMap().get(key).get(0);
    }

    @OnOpen
    public void open(Session session) {
        clientId = getSessionParameter(session, "clientId");
        WSConnectionDescriptor conn = findConnection(clientId);
        if (conn != null) {
            unicast(conn.session, WSMessages.createStatusMessage(400, "Rejected duplicate session.").toString());
        } else {
            connections.add(new WSConnectionDescriptor(clientId, session));
        }
        dumpConnections("ONOPEN " + clientId);
    }

    @OnClose
    public void end() {
    }

    @OnMessage
    public void incoming(String message) {
        WSConnectionDescriptor d = findConnection(clientId);
        try {
            JSONObject root = new JSONObject(message);
            String name = root.getString("name");
            String action = root.optString("action");

            if (action.equalsIgnoreCase("reset")) {
                multicast(WSMessages.createStatusMessage(300, "Game reset by " + name).toString());
                data.clear();
                return;
            }

            // 驗證遊戲規則...
            // 執行 Python 指令碼
            linuxExecPython(args);
        } catch (Exception e) {
            LOGE("OnMessage", e);
        }
    }

    @OnError
    public void onError(Throwable t) throws Throwable {
        LOGE("WSError: " + t.toString());
    }
}

public class SysRunner {
    final String command;
    final StringBuffer stdout = new StringBuffer();
    final StringBuffer stderr = new StringBuffer();

    public SysRunner(String command) {
        this.command = command;
    }

    public void run() throws IOException, InterruptedException {
        final Process process = Runtime.getRuntime().exec(command);
        pipeStream(process.getInputStream(), stdout);
        pipeStream(process.getErrorStream(), stderr);
        process.waitFor();
    }

    private void pipeStream(InputStream is, StringBuffer buf) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line;
        while ((line = br.readLine()) != null) {
            buf.append(line);
        }
    }

    public StringBuffer getStdOut() {
        return stdout;
    }

    public StringBuffer getStdErr() {
        return stderr;
    }
}

// 取得 Python 程式碼的基本路徑
String root = IOTools.getResourceAbsolutePath("/") + "../../";
// 設定 chmod 命令
String cmd = "/bin/chmod 755 " + base + "python" + File.separator;
String[] names = {"Qconfig.py", "qiskit-basic-test.py", "qiskit-driver.sh", "qbattleship-sim.py", "qbattleship.py"};
for (int i = 0; i < names.length; i++) {
    SysRunner r = new SysRunner(cmd + names[i]);
    r.run();
}

// 在 @OnMessage 方法中執行 Python 指令碼
linuxExecPython(args);