Skip to content

Commit

Permalink
Progress with Spades game area
Browse files Browse the repository at this point in the history
  • Loading branch information
@Molanda
Molanda committed Jul 4, 2021
1 parent cc744d7 commit 04dac62
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 7 deletions.
2 changes: 1 addition & 1 deletion Resources/js/framework.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ There.playSound = function(name) {
'cards take trick': 12291,
'cards your turn': 12292,
};
const id = typeof(name) == 'string' ? names[name] : name;
const id = typeof(name) == 'string' ? names[name.replaceAll('_', ' ')] : name;
if (id != undefined) {
if (id == 4104 || id == 4105) {
There.private.stopSoundId = id + 2;
Expand Down
31 changes: 30 additions & 1 deletion Resources/sg/ak_spades_hud.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<script src="hud_spades.js"></script>
</head>
<body>
<div class="hud" data-gamestate="pregame">
<div class="hud" data-gamestate="">
<div class="left">
<div class="tabs">
<div class="tab" data-id="game" data-selected="1">Game</div>
Expand Down Expand Up @@ -54,7 +54,36 @@
</div>
</div>
<div class="middle">
<div class="table" data-player="1">
<div class="title">My Hand</div>
<div class="message"></div>
<div class="player"></div>
<div class="stats">
<div><span>Bid:</span><span data-id="bid">--</span></div>
<div><span>Tricks:</span><span data-id="tricks">--</span></div>
</div>
</div>
<div class="table" data-player="2">
<div class="player"></div>
<div class="stats">
<div><span>Bid:</span><span data-id="bid">--</span></div>
<div><span>Tricks:</span><span data-id="tricks">--</span></div>
</div>
</div>
<div class="table" data-player="3">
<div class="player"></div>
<div class="stats">
<div><span>Bid:</span><span data-id="bid">--</span></div>
<div><span>Tricks:</span><span data-id="tricks">--</span></div>
</div>
</div>
<div class="table" data-player="4">
<div class="player"></div>
<div class="stats">
<div><span>Bid:</span><span data-id="bid">--</span></div>
<div><span>Tricks:</span><span data-id="tricks">--</span></div>
</div>
</div>
</div>
<div class="right">
<div class="buttons">
Expand Down
7 changes: 7 additions & 0 deletions Resources/sg/hud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,13 @@ class Messages {

addMessage(id, text) {
let self = this;
text = text.trim();
if (text == '') {
return;
}
if (!text.endsWith('.') && !text.endsWith('!') && text.includes(' ')) {
text += '.';
}
let index = self.queue.findIndex(e => e.id == id);
if (index < 0) {
if (id == 0 || id > self.lastId) {
Expand Down
98 changes: 93 additions & 5 deletions Resources/sg/hud_spades.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@
margin-right:5px;
}

.hud[data-gamestate="bid"] .left .panel[data-id="game"] .logo,
.hud[data-gamestate="bid"] .left .panel[data-id="game"] .button[data-id="newgame"],
.hud[data-gamestate="bid"] .left .panel[data-id="game"] .button[data-id="rules"] {
.hud[data-gamestate="bid"][data-isactiveplayer="1"] .left .panel[data-id="game"] .logo,
.hud[data-gamestate="bid"][data-isactiveplayer="1"] .left .panel[data-id="game"] .button[data-id="newgame"],
.hud[data-gamestate="bid"][data-isactiveplayer="1"] .left .panel[data-id="game"] .button[data-id="rules"] {
display:none;
}

.hud:not([data-gamestate="bid"]) .left .panel[data-id="game"] .bid {
.hud:not([data-gamestate="bid"][data-isactiveplayer="1"]) .left .panel[data-id="game"] .bid {
display:none;
}

Expand All @@ -71,7 +71,95 @@
display:inline-block;
}

.middle .message {
.middle {
display:flex;
flex-direction:row;
height:100%;
}

.middle .table {
position:relative;
height:100%;
}

.middle .table::before {
position:absolute;
left:0px;
right:0px;
height:100%;
border-left:1px solid rgba(255, 255, 255, 0.25);
border-right:1px solid rgba(0, 0, 0, 0.5);
content:' ';
pointer-events:none;
}

.middle .table[data-player="1"] {
width:340px;
}

.middle .table:not([data-player="1"]) {
width:68px;
border-left:1px solid #000;
}

.middle .table[data-player="1"] .title {
position:absolute;
left:21px;
top:5px;
width:250px;
height:14px;
line-height:14px;
font-size:11px;
font-weight:bold;
color:#fff;
text-align:center;
}


.middle .table[data-player="1"] .message {
position:absolute;
left:21px;
top:64px;
width:250px;
height:14px;
line-height:14px;
font-size:11px;
font-weight:bold;
color:#fff;
text-align:center;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

.middle .table .player {
position:absolute;
right:2px;
top:5px;
width:64px;
height:14px;
line-height:14px;
font-size:11px;
font-weight:bold;
color:#fff;
text-align:center;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

.middle .table .stats {
position:absolute;
right:4px;
bottom:6px;
width:60px;
line-height:11px;
font-size:11px;
color:#fff;
}

.middle .table .stats div {
display:flex;
flex-direction:row;
justify-content:space-between;
}
79 changes: 79 additions & 0 deletions Resources/sg/hud_spades.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,64 @@
class Game {
constructor() {
let self = this;
self.previousGameStatesCount = 0;
There.data.listeners.push(self);
}

onData(name, data) {
let self = this;
if (name == 'player' || name == 'team' || name == 'game') {
let playerData = There.data.channels?.player?.data;
let teamData = There.data.channels?.team?.data;
let gameData = There.data.channels?.game?.data;
if (playerData != undefined && teamData != undefined && gameData != undefined) {
self.players = playerData.player.map(function(e, i) {
return {
id: i + 1,
name: e.avname.trim(),
bid: e.bid == '' ? null : Number(e.bid),
tricks: e.tricks == '' ? null : Number(e.tricks),
team: null,
};
});
self.thisPlayer = playerData.player.findIndex(e => e.avoid == There.variables.there_pilotdoid);
self.teams = teamData.team.map(function(e) {
let team = {
id: Number(e.index),
players: [...Array(4).keys()].map(function(v) {
return Number(e[`player${v + 1}`] ?? 0) - 1;
}).filter(v => v >= 0).map(v => self.players[v]),
};
team.players.forEach(e => e.team = team);
return team;
});
self.playableCards = Number(gameData.playablecards ?? 1);
self.activePlayer = Number(gameData.currentplayer) - 1;
let state = gameData.state.toLowerCase();
if (self.state != state) {
self.state = state;
if (self.state == 'endgame' && self.previousGameStatesCount > 0) {
There.playSound('cards game over');
}
self.previousGameStatesCount++;
}
self.isActivePlayer = (self.activePlayer == self.thisPlayer && self.thisPlayer >= 0);
self.isDealer = (Number(gameData.dealer) - 1 == self.thisPlayer && self.thisPlayer >= 0);
self.isHost = (Number(gameData.host) - 1 == self.thisPlayer && self.thisPlayer >= 0);
$('.hud').attr('data-gamestate', self.state).attr('data-isactiveplayer', self.isActivePlayer ? '1' : '0');
$('.button[data-id="newgame"]').attr('data-enabled', self.isHost ? '1' : '0');
$('.button[data-id="deal"]').attr('data-enabled', self.isActivePlayer && self.state == 'deal' ? '1' : '0');
$('.button[data-id="play"]').attr('data-enabled', self.isActivePlayer && self.state == 'play' ? '1' : '0');
$('.button[data-id="taketrick"]').attr('data-enabled', self.isActivePlayer && self.state == 'taketrick' ? '1' : '0');
for (let player of self.players) {
let tableDiv = $(`.middle .table[data-player="${player.id}"]`);
$(tableDiv).find('.player').text(player.name);
$(tableDiv).find('.stats span[data-id="bid"]').text(player.bid == null ? '--' : player.bid);
$(tableDiv).find('.stats span[data-id="tricks"]').text(player.tricks == null ? '--' : player.tricks);
}
}
}
}
}

$(document).ready(function() {
Expand All @@ -19,6 +75,9 @@ $(document).ready(function() {
});

$('.button[data-id="newgame"]').on('click', function() {
if ($(this).attr('data-enabled') == 0) {
return;
}
There.sendEventMessageToClient(1);
});

Expand All @@ -33,17 +92,37 @@ $(document).ready(function() {
});

$('.button[data-id="deal"]').on('click', function() {
if ($(this).attr('data-enabled') == 0) {
return;
}
There.sendEventMessageToClient(2);
});

$('.button[data-id="play"]').on('click', function() {
if ($(this).attr('data-enabled') == 0) {
return;
}
if (There.data.game.state != 'play') {
There.data.messages.addMessage(0, `It isn't your turn to play a card.`);
return;
}
if (There.data.game.playersHand?.selectedCards?.length ?? 0 == 0) {
There.data.messages.addMessage(0, `Please select a card to be played.`);
return;
}
});

$('.button[data-id="taketrick"]').on('click', function() {
if ($(this).attr('data-enabled') == 0) {
return;
}
There.sendEventMessageToClient(5);
});

$('.button[data-id="bid"]').on('click', function() {
if ($(this).attr('data-enabled') == 0) {
return;
}
There.sendEventMessageToClient(4, {
action: 100 + Number($(this).attr('data-index')),
});
Expand Down

0 comments on commit 04dac62

Please sign in to comment.