Skip to content
Permalink
Browse files

update stages-1 example to Svelte

  • Loading branch information...
nicolodavis committed Oct 9, 2019
1 parent 20dd281 commit f207ba16ba1dfbbe23a5e36cc05da404041f6022
@@ -0,0 +1,23 @@
<script>
import Player from './Player.svelte';
</script>

<style>
#board {
width: 100%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
</style>

<div>
<div class="container">
<Player playerID="0" />
<Player playerID="1" />
<Player playerID="2" />
</div>
</div>
@@ -0,0 +1,76 @@
<script>
export let playerID;
import { Client } from 'boardgame.io/client';
import Game from './game';
let hand = {};
let deck = 0;
let c = 'client';
let phase = '';
let active = false;
let discard = false;
const client = Client({
...Game,
gameID: 'default',
playerID,
});
function update() {
const { G, ctx, isActive } = client.getState();
hand = G.hand;
deck = G.deck;
phase = ctx.phase;
active = isActive;
discard = ctx.activePlayers && ctx.activePlayers[playerID] == 'discard';
c = isActive ? 'client active' : 'client';
}
client.connect();
client.subscribe(update);
</script>

<style>
.client {
border-radius: 5px;
width: 100px;
border: 1px solid #ddd;
background: #fafafa;
opacity: .8;
}
.client.active {
box-shadow: 0 0 5px #aaa;
background: #fff;
opacity: 1;
}
.client li {
list-style: none;
padding: 5px;
height: 30px;
line-height: 30px;
text-align: center;
font-family: monospace;
}
</style>

<div class={c}>
<li>
<strong>Player {playerID}</strong>
</li>

{#if active}
<li>
{#if discard}
<button on:click={() => client.moves.discard()}>Discard</button>
{:else}
<button on:click={() => client.moves.militia()}>Play Card</button>
{/if}
</li>
<li>
<button on:click={() => client.events.endTurn()}>End Turn</button>
</li>
{/if}
</div>
@@ -0,0 +1,23 @@
function militia(G, ctx) {
ctx.events.setActivePlayers({ others: 'discard', moveLimit: 1 });
}

function discard(G, ctx) {}

const game = {
moves: { militia },
turn: {
stages: {
discard: {
moves: { discard },
},
},
},
};

export default {
game,
debug: false,
numPlayers: 3,
multiplayer: { local: true },
};
@@ -1,62 +1,7 @@
<!DOCTYPE html>
<html>

<head>
<style>
body {
padding: 20px;
font-family: monospace;
}
.msg {
position: absolute;
bottom: 0;
left: 20px;
color: #aaa;
font-size: 12px;
margin-bottom: 20px;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.deck {
width: 40px;
height: 60px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
border-radius: 5px;
margin-bottom: 50px;
}
.client {
border-radius: 5px;
width: 100px;
border: 1px solid #ddd;
background: #fafafa;
opacity: .8;
}
.client.active {
box-shadow: 0 0 5px #aaa;
background: #fff;
opacity: 1;
}
.client li {
list-style: none;
padding: 5px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>

<body>
<div id="app"></div>

<script type="text/javascript" src="./index.js"></script>
</body>

</html>
@@ -1,91 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Client } from 'boardgame.io/react';
import App from './App.svelte';

function militia(G, ctx) {
ctx.events.setActivePlayers({ others: 'discard', moveLimit: 1 });
}

function discard(G, ctx) {}

const game = {
moves: { militia },
turn: {
stages: {
discard: {
moves: { discard },
},
},
const app = new App({
target: document.getElementById('app'),
props: {
name: 'world',
},
};

function Board(props) {
const { playerID, isActive, ctx } = props;
let c = 'client';
if (isActive) {
c += ' active';
}

let move = null;
let endTurn = null;

if (isActive) {
move = (
<li>
<button onClick={props.moves.militia}>
Play Card
</button>
</li>
);

endTurn = (
<li>
<button onClick={() => props.events.endTurn()}>
End Turn
</button>
</li>
);

if (ctx.activePlayers && ctx.activePlayers[playerID] == 'discard') {
move = (
<li>
<button onClick={props.moves.discard}>
Discard
</button>
</li>
);

endTurn = null;
}
}

return (
<div className={c}>
<li>
<strong>Player {playerID}</strong>
</li>
{move}
{endTurn}
</div>
);
}

const Player = Client({
game,
board: Board,
debug: false,
numPlayers: 3,
multiplayer: { local: true },
});

const App = () => (
<div>
<div className="container">
<Player playerID="0" />
<Player playerID="1" />
<Player playerID="2" />
</div>
</div>
);

ReactDOM.render(<App />, document.getElementById('app'));
export default app;

0 comments on commit f207ba1

Please sign in to comment.
You can’t perform that action at this time.