699 lines
25 KiB
JavaScript
699 lines
25 KiB
JavaScript
/* System Variable */
|
||
var time,timer;
|
||
var MouseOn = false;
|
||
var now = null; // to store whose turn is this. value: "player" or "enemy"
|
||
var socketReady = false;
|
||
var lock = true;
|
||
var debugMode = false;
|
||
var dialogDisplay = false;
|
||
var playerChooseStatus = false;
|
||
var curName = "";
|
||
var eneName = "";
|
||
var drawID = "";
|
||
var poisonDamage = "";
|
||
var tradeChoose = "";
|
||
var handCards = [];
|
||
|
||
/* DOM Objects */
|
||
var cardContainer = $('.cards.container')[0];
|
||
var dialog = $('#modal');
|
||
var grid = $('#grid')[0];
|
||
var column = $('.column');
|
||
var log = $('#log')[0];
|
||
var gameStatus = $('#status');
|
||
var turn = $('#turn')[0];
|
||
var roomNum = $('.statistic > .value')[0];
|
||
|
||
var enemy = $('#enemy');
|
||
var myself = $('#myself');
|
||
|
||
/* text */
|
||
// cards
|
||
var cards = {'1': '攻擊', '2': '防禦', '3': '治癒', '4': '補給', '5': '強奪', '6': '奇襲', '7': '交易', '8': '洞悉', '9': '妙策', '10': '掃射', '11': '加護', '12': '劇毒', '13': '詛咒', '14': '反制', '15': '狂亂', '16': '逆轉'};
|
||
var cardsDescription = {"1":"對敵方造成兩點傷害","2":"回復一點生命<br>被動:抵擋攻擊類卡片","3":"回復兩點生命","4":"抽取兩張手牌","5":"從敵方手牌中選擇一張加入自己的手牌","6":"對敵方造成一點傷害，並使其隨機損失一張手牌","7":"選取一張手牌與敵方交換","8":"抽取三張手牌<br>被動:抵擋攻擊類卡片，並抽取一張手牌、抵擋強奪的效果","9":"從牌庫中隨機挑出三張卡片，選擇一張加入手牌","10":"對敵方造成零～五點傷害","11":"回復三點生命，並解除中毒","12":"使敵方中毒：每個回合，玩家會損失一點生命","13":"使其損失四點生命，並隨機損失一張手牌","14":"使敵方生命減半<br>被動:抵擋攻擊類卡片，並反彈其傷害和效果","15":"回復三點生命，並對敵方造成三點傷害","16":"使自己與敵方的生命交換"}
|
||
|
||
var characters = {'1': '安', '2': '圭月', '3': '梅', '4': '小兔', '5': '銀', '6': '正作', '7': 'W', '8': '桑德', '9': '海爾', '10': '雪村'};
|
||
|
||
// templates
|
||
var cardTemplate = `<a class="ts card" data-id="{{ id }}"><div class="content"><div class="header">{{ name }}</div><div class="meta">{{ id }}</div><div class="description">{{ description }}</div></div></a>`;
|
||
var listCardTemplate = `<div class="disabled item" data-id="{{ id }}"><div class="ts header">{{ name }}<div class="sub header">{{ description }}</div></div></div>`;
|
||
var logTemplate = `<div class="{{ isSelf }} speech"><div class="content">{{ content }}</div></div>`;
|
||
var logDivider = `<div class="ts horizontal divider">{{ player }} Turn {{ turn }}</div>`;
|
||
|
||
// messages
|
||
var messages = {
|
||
"attack": "{} 攻擊 {}",
|
||
"damaged": "{} 受到{}點傷害",
|
||
"defended": "{} 防禦成功",
|
||
"defend": "{} 沒什麼可以防禦的，回復一點生命",
|
||
"heal": "{} 回復兩點生命",
|
||
"supply": "{} 增加兩張手牌",
|
||
"rob": "{} 正在對 {} 行搶",
|
||
"cantRob": "{}沒有搶到任何東西",
|
||
"robbed": "{} 搶到了 {}",
|
||
"surprise": "{} 發動奇襲",
|
||
"surprised": "{} 受到{}點傷害，而且掉了一張手牌",
|
||
"surNoCard": "{} 受到{}點傷害",
|
||
"trade": "{} 想與 {} 進行交易",
|
||
"tradeChoose": "{} 選擇了 {}",
|
||
"tradeNoCard": "{} 沒有卡片可以交易",
|
||
"awared": "{} 洞悉了 {} 的{}，並抽取了一張手牌",
|
||
"aware": "{} 增加三張手牌",
|
||
"plan": "{} 有個妙策",
|
||
"sweep": "{} 對 {} 進行掃射，威力是 {}",
|
||
"bless": "{} 獲得加護，身上的毒素一掃而空，並回復三點生命，還抽取了兩張手牌",
|
||
"poison": "{} 在食物下毒，{}中毒了",
|
||
"curse": "{} 詛咒了 {}，使其損失四點生命，並掉了一張手牌",
|
||
"curseNoCard": "{} 詛咒了 {}，使其損失四點生命",
|
||
"countered": "{} 反制了 {} 的攻擊，反彈了{}點傷害",
|
||
"counteredSur": "{} 反制了 {} 的攻擊，反彈了{}點傷害，並使其掉了一張手牌",
|
||
"counter": "{} 反制了敵手，使 {} 生命值減半了!",
|
||
"chaos": "{} 進入狂亂模式，回復三點生命，並對 {} 造成三點傷害",
|
||
"reverse": "{} 一口氣逆轉了情勢",
|
||
"noCard": "{} 抽到了死神",
|
||
"poisonDamaged": "{} 受到了劇毒的侵蝕，損失{}點生命",
|
||
"surrender": "{}投降",
|
||
"firstAttack": "{}先攻",
|
||
"win": "{}獲勝",
|
||
"draw": "{}抽到了{}",
|
||
"drawEne": "{}抽了一張卡片",
|
||
"use": "{}使用了{}",
|
||
"eneDisconn": "因敵方斷線，所以{}獲勝"
|
||
};
|
||
/* text end */
|
||
|
||
// handler
|
||
function wsHandler(dataJson) {
|
||
if (debugMode) { // debugging data
|
||
rawLog(dataJson);
|
||
}
|
||
// define the current player and update player status
|
||
if (dataJson.now === "player") {
|
||
now = "player";
|
||
gameUpdate(dataJson);
|
||
$('#skip').removeClass('disabled');
|
||
} else if (dataJson.now === "enemy") {
|
||
now = "enemy";
|
||
gameUpdate(dataJson);
|
||
$('#skip').addClass('disabled');
|
||
}
|
||
/* special cases */
|
||
if (dataJson.toString().match(/^[0-9]{1,5}$/)) { // contains only number => room id
|
||
id = dataJson.toString();
|
||
gameUpdate({ "room": id });
|
||
return null;
|
||
}
|
||
if (dataJson.room) { // game start
|
||
curName = dataJson['cur'];
|
||
eneName = dataJson['ene'];
|
||
setPlayerName(curName);
|
||
setEnemyName(eneName);
|
||
$('#enemy .icon').css('opacity','1'); // show enemy avatar
|
||
return null;
|
||
}
|
||
if (dataJson.action) { // time for users to do more action!
|
||
// Received: {"msg": "rob", "data": ["W", "\u96ea\u6751"], "action": "toRob", "value": {"enemy_card": ["5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5"]}}
|
||
statusInitialize();
|
||
lock = false;
|
||
switch (dataJson.action) {
|
||
case "toDefend":
|
||
askGuard(dataJson.value);
|
||
break;
|
||
case "toRob":
|
||
chooseRob(dataJson.value['enemy_card']);
|
||
break;
|
||
case "toBeRobbed":
|
||
askDefendRob();
|
||
break;
|
||
case "toTrade":
|
||
if (dataJson.value) {
|
||
chooseTrade(dataJson.value['hand'])
|
||
} else {
|
||
chooseTrade(handCards,tradeChoose);
|
||
}
|
||
break;
|
||
case "toAdd":
|
||
choosePlan(dataJson.value['cards']);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
// normal situation
|
||
if (dataJson.msg) {
|
||
switch (dataJson.msg) {
|
||
case "draw":
|
||
drawID = dataJson.data[1]; // card ID
|
||
break;
|
||
case "use":
|
||
useID = dataJson.data[1]; // card ID
|
||
dataJson.data[1] = cards[useID]; // edit data
|
||
Log(dataJson);
|
||
break;
|
||
case "robbed":
|
||
LogPlayerChoose("robbed",dataJson.data);
|
||
break;
|
||
case "tradeChoose":
|
||
tradeChoose = dataJson.data[1] // set system variable, cardID
|
||
LogPlayerChoose("tradeChoose",dataJson.data);
|
||
break;
|
||
case "poisonDamaged":
|
||
poisonDamage = dataJson.data[1]; // posion level
|
||
break;
|
||
case "win":
|
||
if (dataJson.data[0] === "player") {
|
||
playerWin();
|
||
dataJson.data[0] = '你';
|
||
Log(dataJson);
|
||
} else if (dataJson.data[0] === "enemy") {
|
||
playerLose();
|
||
}
|
||
break;
|
||
case "eneDisconn":
|
||
playerWin();
|
||
Log(dataJson);
|
||
break;
|
||
default:
|
||
Log(dataJson);
|
||
break;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
function wsOnClose() {
|
||
console.log("Disconnected");
|
||
ts('.snackbar').snackbar({
|
||
content: '已中斷連線',
|
||
});
|
||
statusInitialize();
|
||
gameStatus.html('連線已中斷');
|
||
gameStatus.addClass('warning');
|
||
$('#skip').addClass('disabled');
|
||
$('#giveup').addClass('disabled');
|
||
unsetCardListener();
|
||
socketReady = false;
|
||
}
|
||
|
||
function wsOnOpen(status) {
|
||
console.log("Connected! Status:" + status);
|
||
ts('.snackbar').snackbar({
|
||
content: '連線成功!'
|
||
});
|
||
socketReady = true;
|
||
}
|
||
|
||
function wsOnError(except) {
|
||
ts('.snackbar').snackbar({
|
||
content: '連線失敗!',
|
||
action: '重試',
|
||
actionEmphasis: 'negative',
|
||
onAction: () => {
|
||
init();
|
||
}
|
||
});
|
||
console.log(except);
|
||
} // https://stackoverflow.com/questions/25779831/how-to-catch-websocket-connection-to-ws-xxxnn-failed-connection-closed-be
|
||
|
||
// listener
|
||
function setCardListener() {
|
||
$('.cards.container a.ts.card').each((i,e) => {
|
||
$(e).click(function() {
|
||
useCard(this.dataset.id);
|
||
});
|
||
});
|
||
}
|
||
|
||
function unsetCardListener() {
|
||
$('.cards.container a.ts.card').each((i,e) => {
|
||
$(e).off("click");
|
||
});
|
||
}
|
||
|
||
function setModalCardListListener() {
|
||
$('#modal .ts.list .item').each((i,e) => {
|
||
$(e).click(function() {
|
||
useCard(this.dataset.id);
|
||
modalClose();
|
||
});
|
||
});
|
||
}
|
||
|
||
function setModalSkipButtonListener() {
|
||
$('#modal #modalSkipBtn').click(function() {
|
||
send(0);
|
||
modalClose();
|
||
});
|
||
}
|
||
|
||
$('#skip').click(function() {
|
||
if (!$(this).hasClass('disabled')) {
|
||
send(0);
|
||
}
|
||
});
|
||
|
||
$('#giveup').click(function() {
|
||
dialog.children(".header").html('你放棄人生了，SAD');
|
||
dialog.children(".content").html('<img src="./lose.png"><p class="result enemy name">'+eneName+'</p><p class="result player name">'+curName+'</p>');
|
||
dialog.children(".actions").html('<button id="close" class="ts button">關閉視窗</button><button id="restart" class="ts primary button">重啟對戰</button><button id="returnIndex" class="ts positive button">返回主畫面</button>');
|
||
timerInitialize(); // also remember to stop the timer
|
||
modalOpen();
|
||
resultListener();
|
||
quit();
|
||
});
|
||
|
||
function resultListener() {
|
||
$('#returnIndex').click(function() {
|
||
location.href = './index.html';
|
||
});
|
||
$('#restart').click(function() {
|
||
location.reload();
|
||
});
|
||
$('#close').click(function() {
|
||
modalClose();
|
||
});
|
||
}
|
||
|
||
// log
|
||
log.addEventListener("mouseover", function() { MouseOn = true; }); // if mouse is over the div, don't scroll to bottom
|
||
log.addEventListener("mouseleave", function() { MouseOn = false; });
|
||
|
||
function Log(msgJson) {
|
||
var node = logTemplate;
|
||
node = (now === "player") ? node.replace("{{ isSelf }}","right") : node.replace("{{ isSelf }}",""); // to distinguish if this is self log or enemy log
|
||
node = node.replace("{{ content }}",messages[msgJson['msg']].format(msgJson['data']));
|
||
log.insertAdjacentHTML("beforeend",node); // insert to log
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
}
|
||
|
||
function LogPlayerDraw() {
|
||
var node = logTemplate.replace("{{ isSelf }}","right");
|
||
node = node.replace("{{ content }}",messages['draw'].format([curName,cards[drawID]])); // msgJson['data'][0] player name, msgJson['data'][1] card id
|
||
log.insertAdjacentHTML("beforeend",node); // insert to log
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
drawID = "";
|
||
}
|
||
|
||
function LogPlayerChoose(type,data) {
|
||
var node = logTemplate;
|
||
var name = data[0];
|
||
var chooseID = data[1];
|
||
if (playerChooseStatus || type === "robbed") {
|
||
node = (now === "player") ? node.replace("{{ isSelf }}","right") : node.replace("{{ isSelf }}",""); // to distinguish if this is self log or enemy log
|
||
} else {
|
||
node = (now === "player") ? node.replace("{{ isSelf }}","") : node.replace("{{ isSelf }}","right"); // if this is the second one playerChoose message, then this is another one's choice
|
||
}
|
||
|
||
node = node.replace("{{ content }}",messages[type].format([name,cards[chooseID]])); // msgJson['data'][0] player name, msgJson['data'][1] card id
|
||
log.insertAdjacentHTML("beforeend",node); // insert to log
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
playerChooseStatus = (playerChooseStatus && type !== "robbed") ? false : true; // to count this is first playerChoose message or second one on the turn
|
||
}
|
||
|
||
function LogPlayerPoisonDamaged() {
|
||
var node = logTemplate;
|
||
var tmpName = "";
|
||
if(now === "player") { // to distinguish if this is self log or enemy log
|
||
node = node.replace("{{ isSelf }}","right");
|
||
tmpName = curName;
|
||
} else if (now === "enemy") {
|
||
node = node.replace("{{ isSelf }}","");
|
||
tmpName = eneName;
|
||
}
|
||
node = node.replace("{{ content }}",messages['poisonDamaged'].format([tmpName,poisonDamage])); // msgJson['data'][0] player name, msgJson['data'][1] card id
|
||
log.insertAdjacentHTML("beforeend",node); // insert to log
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
poisonDamage = "";
|
||
}
|
||
|
||
function rawLog(msg) {
|
||
console.log(JSON.stringify(msg));
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
}
|
||
|
||
function logTurn(playerName,playerTurn) {
|
||
var node = logDivider;
|
||
node = node.replace("{{ player }}",playerName);
|
||
node = node.replace("{{ turn }}",playerTurn);
|
||
log.insertAdjacentHTML("beforeend",node); // insert to log
|
||
if (!MouseOn) { // if mouse isn't over the div, scroll to bottom
|
||
log.scrollTop = log.scrollHeight; // scroll to bottom
|
||
}
|
||
}
|
||
|
||
// game status updater
|
||
function gameUpdate(data) {
|
||
if (data.room) {
|
||
roomNum.innerHTML = data.room.padStart(5,'0');
|
||
} else if (data.now) {
|
||
if (data.now === "player") {
|
||
turn.innerHTML = curName+" Turn "+data.player.turn;
|
||
logTurn(curName,data.player.turn);
|
||
if (drawID !== "") {
|
||
LogPlayerDraw(data);
|
||
}
|
||
statusInitialize();
|
||
lock = false; // unlock the cards
|
||
gameStatus.addClass('primary');
|
||
gameStatus.html('輪到你出牌');
|
||
timerSetup(28);
|
||
} else if (data.now === "enemy") {
|
||
turn.innerHTML = eneName+" Turn "+data.enemy.turn;
|
||
logTurn(eneName,data.enemy.turn);
|
||
statusInitialize();
|
||
gameStatus.html('等待對手出牌');
|
||
}
|
||
if (poisonDamage !== "") {
|
||
LogPlayerPoisonDamaged();
|
||
}
|
||
playerUpdate(data['player']);
|
||
enemyUpdate(data['enemy']);
|
||
modalClose();
|
||
}
|
||
}
|
||
|
||
function statusInitialize() {
|
||
gameStatus.removeClass('info negative warning pulsing primary inverted'); // initailize the status
|
||
timerInitialize();
|
||
}
|
||
|
||
// player status updater
|
||
function setPlayerName(name) {
|
||
var selfNameHeader = $('#myself > .profile > .name > .header');
|
||
selfNameHeader.html(name);
|
||
}
|
||
|
||
function setEnemyName(name) {
|
||
var eneNameHeader = $('#enemy > .profile > .name > .header');
|
||
eneNameHeader.html(name);
|
||
}
|
||
|
||
function playerUpdate(data) {
|
||
handCards = data['hand'];
|
||
setCard(data['hand']);
|
||
var selfHand = $('#selfHand'); // 手牌數
|
||
var selfDeck = $('#selfDeck');
|
||
var selfLifeBar = $('#myself > .profile > .life.progress > .bar');
|
||
var selfLifeText = selfLifeBar.children();
|
||
var selfStatus = $('#myself > .profile > .status');
|
||
var barWidth = (parseInt(data['life'])/20)*100 // %
|
||
selfHand.html(data['hand'].length);
|
||
selfDeck.html(data['deck_left']);
|
||
selfLifeBar.css('width',barWidth+'%');
|
||
selfLifeBar.attr('data-life',data['life']);
|
||
selfLifeText.html(data['life']);
|
||
if (parseInt(data['poison']) > 0){
|
||
selfStatus.html('<p class="poison"><i class="theme icon"></i> 中毒 lv.'+data['poison']+'</p>');
|
||
selfLifeBar.addClass('poison');
|
||
} else if (parseInt(data['poison']) == 0) {
|
||
if (selfLifeBar.hasClass('poison')) {
|
||
selfLifeBar.removeClass('poison');
|
||
}
|
||
selfStatus.html('清新');
|
||
}
|
||
|
||
if (parseInt(data['life']) <= 0) { // dead
|
||
if (selfLifeBar.hasClass('poison')) {
|
||
selfLifeBar.removeClass('poison');
|
||
}
|
||
selfLifeBar.addClass('negative');
|
||
}
|
||
}
|
||
|
||
function enemyUpdate(data) {
|
||
var eneHand = $('#eneHand'); // 手牌數
|
||
var eneDeck = $('#eneDeck');
|
||
var eneLifeBar = $('#enemy > .profile > .life.progress > .bar');
|
||
var eneLifeText = eneLifeBar.children();
|
||
var eneStatus = $('#enemy > .profile > .status');
|
||
var barWidth = (parseInt(data['life'])/20)*100 // %
|
||
eneHand.html(data['hand']);
|
||
eneDeck.html(data['deck_left']);
|
||
eneLifeBar.css('width',barWidth+'%');
|
||
eneLifeBar.attr('data-life',data['life']);
|
||
eneLifeText.html(data['life']);
|
||
if (parseInt(data['poison']) > 0){
|
||
eneStatus.html('<p class="poison"><i class="theme icon"></i> 中毒 lv.'+data['poison']+'</p>');
|
||
eneLifeBar.addClass('poison');
|
||
} else if (parseInt(data['poison']) == 0) {
|
||
if (eneLifeBar.hasClass('poison')) {
|
||
eneLifeBar.removeClass('poison');
|
||
}
|
||
eneStatus.html('清新');
|
||
}
|
||
|
||
if (parseInt(data['life']) <= 0) { // dead
|
||
if (eneLifeBar.hasClass('poison')) {
|
||
eneLifeBar.removeClass('poison');
|
||
}
|
||
eneLifeBar.addClass('negative');
|
||
}
|
||
|
||
}
|
||
|
||
// card
|
||
function useCard(id) {
|
||
if (!lock) {
|
||
statusInitialize();
|
||
send(id);
|
||
lock = true;
|
||
}
|
||
}
|
||
|
||
function setCard(cardsArray) {
|
||
$(cardContainer).empty();
|
||
var node = "";
|
||
cardsArray.forEach((id) => {
|
||
var tmp = cardTemplate;
|
||
tmp = tmp.replace(/{{ id }}/g,id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]);
|
||
node += tmp;
|
||
});
|
||
$(cardContainer).append(node);
|
||
setCardListener();
|
||
resize(); // special case
|
||
}
|
||
|
||
// modals
|
||
function chooseRob(data) {
|
||
var list = `<div class="ts selection segmented list">`;
|
||
data.forEach((id) => {
|
||
var tmp = listCardTemplate;
|
||
tmp = tmp.replace('disabled','').replace('{{ id }}',id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]);
|
||
list+=tmp;
|
||
});
|
||
list+='</div>';
|
||
dialog.children(".header").html('請問要搶哪張?');
|
||
dialog.children(".content").html(list);
|
||
dialog.children(".actions").html('');
|
||
setModalCardListListener();
|
||
modalOpen();
|
||
}
|
||
|
||
function chooseTrade(data,tradeID=null) {
|
||
if (data.length == 0) {
|
||
send(0);
|
||
}
|
||
if (tradeID) {
|
||
var text = "<p>對手選擇了"+cards[tradeID]+"</p>";
|
||
} else {
|
||
var text = "<p>選擇一張卡與對手交換</p>";
|
||
}
|
||
var list = `<div class="ts selection segmented list">`;
|
||
data.forEach((id) => {
|
||
var tmp = listCardTemplate;
|
||
tmp = tmp.replace('disabled','').replace('{{ id }}',id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]);
|
||
list+=tmp;
|
||
});
|
||
list+='</div>';
|
||
dialog.children(".header").html('交易')
|
||
dialog.children(".content").html(text+list);
|
||
dialog.children(".actions").html('');
|
||
setModalCardListListener();
|
||
modalOpen();
|
||
tradeChoose = ""; // reset value
|
||
}
|
||
|
||
function choosePlan(data) {
|
||
var text = `<p>請從三張卡中選擇一張加入手牌</p>`;
|
||
var list = `<div class="ts selection segmented list">`;
|
||
data.forEach((id) => {
|
||
var tmp = listCardTemplate;
|
||
tmp = tmp.replace('disabled','').replace('{{ id }}',id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]); // not need to be disabled
|
||
list+=tmp;
|
||
});
|
||
list+='</div>';
|
||
dialog.children(".header").html('妙策');
|
||
dialog.children(".content").html(text+list);
|
||
dialog.children(".actions").html('');
|
||
setModalCardListListener();
|
||
modalOpen();
|
||
}
|
||
|
||
function askGuard(data) {
|
||
var attackType = data['type'];
|
||
var attackName = {"attack": "攻擊","surprise": "奇襲","sweep": "掃射"};
|
||
var damage = data['damage'];
|
||
var text = `對手使用了 `+attackName[attackType]+`，傷害為 `+damage;
|
||
var list = `<div class="ts selection segmented list">`;
|
||
handCards.forEach((id) => {
|
||
var tmp = listCardTemplate;
|
||
tmp = tmp.replace('{{ id }}',id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]);
|
||
list+=tmp;
|
||
});
|
||
list+='</div>';
|
||
dialog.children(".header").html('防禦');
|
||
dialog.children(".content").html(text+list);
|
||
dialog.children(".actions").html('<button id="modalSkipBtn" class="ts primary button">不使用卡片</button>');
|
||
setModalCardListListener();
|
||
setModalSkipButtonListener();
|
||
$('#modal .ts.list .item').each((i,e) => {
|
||
if (e.dataset.id == "2" || e.dataset.id == "8" || e.dataset.id == "14") {
|
||
$(e).removeClass('disabled');
|
||
}
|
||
});
|
||
modalOpen();
|
||
}
|
||
|
||
function askDefendRob() {
|
||
var list = `<div class="ts selection segmented list">`;
|
||
handCards.forEach((id) => {
|
||
var tmp = listCardTemplate;
|
||
tmp = tmp.replace('{{ id }}',id).replace("{{ name }}",cards[id]).replace("{{ description }}",cardsDescription[id]);
|
||
list+=tmp;
|
||
});
|
||
list+='</div>';
|
||
dialog.children(".header").html('防禦強奪');
|
||
dialog.children(".content").html(list);
|
||
dialog.children(".actions").html('<button id="modalSkipBtn" class="ts primary button">不使用卡片</button>');
|
||
setModalCardListListener();
|
||
setModalSkipButtonListener();
|
||
$('#modal .ts.list .item').each((i,e) => {
|
||
if (e.dataset.id == "8") {
|
||
$(e).removeClass('disabled');
|
||
}
|
||
});
|
||
modalOpen();
|
||
}
|
||
|
||
function playerWin() {
|
||
dialog.children(".header").html('你贏了！');
|
||
dialog.children(".content").html('<img src="./won.png"><p class="result enemy name">'+eneName+'</p><p class="result player name">'+curName+'</p>');
|
||
dialog.children(".actions").html('<button id="close" class="ts button">關閉視窗</button><button id="restart" class="ts primary button">重啟對戰</button><button id="returnIndex" class="ts positive button">返回主畫面</button>');
|
||
timerInitialize(); // also remember to stop the timer
|
||
modalOpen();
|
||
resultListener();
|
||
}
|
||
|
||
function playerLose() {
|
||
dialog.children(".header").html('你輸爆了，SAD');
|
||
dialog.children(".content").html('<img src="./lose.png"><p class="result enemy name">'+eneName+'</p><p class="result player name">'+curName+'</p>');
|
||
dialog.children(".actions").html('<button id="close" class="ts button">關閉視窗</button><button id="restart" class="ts primary button">重啟對戰</button><button id="returnIndex" class="ts positive button">返回主畫面</button>');
|
||
timerInitialize(); // also remember to stop the timer
|
||
modalOpen();
|
||
resultListener();
|
||
}
|
||
|
||
function modalClose() {
|
||
if (dialogDisplay) {
|
||
ts('#modal').modal('hide');
|
||
dialogDisplay = false;
|
||
}
|
||
}
|
||
|
||
function modalOpen() {
|
||
if (!dialogDisplay) {
|
||
ts('#modal').modal('show');
|
||
dialogDisplay = true;
|
||
}
|
||
}
|
||
|
||
// countdown timer for each turn
|
||
function timing() {
|
||
if (time == 0) {
|
||
clearInterval(timer); // unset the timer
|
||
gameStatus.removeClass('warning pulsing');
|
||
gameStatus.addClass('negative');
|
||
gameStatus.text('時間到!');
|
||
return null;
|
||
}
|
||
if (time <= 5) {
|
||
if(!gameStatus.hasClass('pulsing')) {
|
||
gameStatus.addClass('pulsing'); // pulsing animation
|
||
}
|
||
gameStatus.removeClass('info');
|
||
gameStatus.addClass('warning');
|
||
gameStatus.text('輪到你出牌 '+time);
|
||
} else if (time <= 10) {
|
||
if(!gameStatus.hasClass('pulsing')) {
|
||
gameStatus.addClass('pulsing'); // pulsing animation
|
||
}
|
||
gameStatus.text('輪到你出牌 '+time);
|
||
} else {
|
||
gameStatus.removeClass('negative pulsing');
|
||
gameStatus.addClass('info');
|
||
gameStatus.text('輪到你出牌');
|
||
}
|
||
time--;
|
||
}
|
||
|
||
function timerSetup(t) {
|
||
time = t;
|
||
timer = setInterval(timing,1000);
|
||
}
|
||
|
||
function timerInitialize() {
|
||
clearInterval(timer);
|
||
gameStatus.addClass('inverted');
|
||
gameStatus.html('等待中');
|
||
}
|
||
|
||
// resize
|
||
function resize() {
|
||
var h = cardContainer.offsetHeight;
|
||
grid.style.height='calc(100vh - ' + h + 'px)';
|
||
column.css('height','calc(100vh - ' + h + 'px)');
|
||
}
|
||
|
||
resize();
|
||
window.addEventListener("resize",resize);
|
||
|
||
// game initailize
|
||
$(document).ready(() => {
|
||
var roomID = localStorage.getItem('room');
|
||
var characterID = localStorage.getItem('character');
|
||
if(!roomID || !characterID){
|
||
roomID = "n";
|
||
characterID = Math.floor(Math.random()*10 + 1).toString(); // randomly choose a player
|
||
}
|
||
curName = characters[characterID];
|
||
setPlayerName(characters[characterID]);
|
||
init();
|
||
var retry = setInterval(() => {
|
||
if(socketReady) { // send the charactor id and room id until the connected
|
||
send(characterID);
|
||
send(roomID);
|
||
clearInterval(retry);
|
||
}
|
||
}, 300); // try every 0.3s
|
||
});
|
||
|
||
/* https://stackoverflow.com/questions/11700927/horizontal-scrolling-with-mouse-wheel-in-a-div */
|
||
function scrollHorizontally(e) {
|
||
e = window.event || e;
|
||
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
|
||
cardContainer.scrollLeft -= (delta*40); // Multiplied by 40
|
||
e.preventDefault();
|
||
}
|
||
cardContainer.addEventListener("mousewheel", scrollHorizontally, false);
|
||
cardContainer.addEventListener("DOMMouseScroll", scrollHorizontally, false); //Firefox
|