drag-n-drop for cards and decks

examples/react/modules/routes.js

@@ -12,6 +12,7 @@ import phases from './phases';
 import secret_state from './secret-state';
 import random from './random';
 import turnorder from './turnorder';
+import ui from './ui';
 import threejs from './threejs';
 
 const routes = [
@@ -39,6 +40,10 @@ const routes = [
     name: 'Secret State',
     routes: secret_state.routes,
   },
+  {
+    name: 'UI',
+    routes: ui.routes,
+  },
   {
     name: 'Other Frameworks',
     routes: threejs.routes,

examples/react/modules/ui/components/board.js

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import { UI, Card, Deck } from 'boardgame.io/ui';
+
+function handler(type, fn) {
+  return arg => {
+    console.log(type + ': ' + JSON.stringify(arg));
+    if (fn) fn(arg);
+  };
+}
+
+class Board extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      deck1: [1, 2, 3],
+      deck2: [],
+      free: [4],
+    };
+  }
+
+  deck1Drop = arg => {
+    this.setState(s => ({
+      free: s.free.filter(t => t != arg),
+      deck2: s.deck2.filter(t => t != arg),
+      deck1: [...s.deck1.filter(t => t != arg), arg],
+    }));
+  };
+
+  deck2Drop = arg => {
+    this.setState(s => ({
+      free: s.free.filter(t => t != arg),
+      deck1: s.deck1.filter(t => t != arg),
+      deck2: [...s.deck2.filter(t => t != arg), arg],
+    }));
+  };
+
+  render() {
+    return (
+      <UI sandboxMode={true}>
+        <Deck
+          onDrop={handler('deck1 onDrop', this.deck1Drop)}
+          onClick={handler('deck1 onClick')}
+          onRemove={handler('deck1 onRemove', this.deck1Remove)}
+        >
+          {this.state.deck1.map(c => (
+            <Card key={c} data={c} back={c} onClick={handler(c + ' onClick')} />
+          ))}
+        </Deck>
+
+        <Deck
+          onDrop={handler('deck2 onDrop', this.deck2Drop)}
+          onClick={handler('deck2 onClick')}
+          onRemove={handler('deck2 onRemove', this.deck2Remove)}
+        >
+          {this.state.deck2.map(c => (
+            <Card key={c} data={c} back={c} onClick={handler(c + ' onClick')} />
+          ))}
+        </Deck>
+
+        <div>
+          {this.state.free.map(c => (
+            <Card key={c} data={c} back={c} onClick={handler(c + ' onClick')} />
+          ))}
+        </div>
+      </UI>
+    );
+  }
+}
+
+export default Board;

examples/react/modules/ui/components/singleplayer.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2017 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import { Client } from 'boardgame.io/react';
+import TicTacToe from '../game';
+import Board from './board';
+
+const App = Client({
+  game: TicTacToe,
+  board: Board,
+});
+
+const Singleplayer = () => (
+  <div style={{ padding: 50 }}>
+    <h1>Cards & Decks</h1>
+    <App gameID="single" />
+  </div>
+);
+
+export default Singleplayer;

examples/react/modules/ui/game.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { Game } from 'boardgame.io/core';
+
+const UIDemo = Game({
+  name: 'ui-demo',
+});
+
+export default UIDemo;

examples/react/modules/ui/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2017 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import routes from './routes';
+
+// Any other additional setup for this this module
+
+export default {
+  routes,
+};

examples/react/modules/ui/routes.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2017 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import Singleplayer from './components/singleplayer';
+
+const routes = [
+  {
+    path: '/ui',
+    text: 'Cards & Decks',
+    component: Singleplayer,
+  },
+];
+
+export default routes;