From a3ec9ae6ea7b71ada2cd931898d55668a0ba6fbd Mon Sep 17 00:00:00 2001 From: "Jesse C. Fisher" Date: Wed, 28 Oct 2015 20:28:29 -0700 Subject: [PATCH] Add player and inventory components --- app/assets/javascripts/components.js | 1 + app/assets/javascripts/components/game.js.jsx | 36 +++++---- .../javascripts/components/inventory.js.jsx | 64 ++++++++------- .../javascripts/components/mixins.js.jsx | 14 ++++ .../javascripts/components/player.js.jsx | 81 +++++++++++++++++++ app/views/games/show.html.haml | 20 ++--- app/views/games/show.json.jbuilder | 9 +++ app/views/players/show.html.haml | 8 +- app/views/players/show.json.jbuilder | 6 +- 9 files changed, 179 insertions(+), 60 deletions(-) create mode 100644 app/assets/javascripts/components/mixins.js.jsx create mode 100644 app/assets/javascripts/components/player.js.jsx diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js index 9ce7a4f3..c0fcdbce 100644 --- a/app/assets/javascripts/components.js +++ b/app/assets/javascripts/components.js @@ -1 +1,2 @@ +//= require ./components/mixins //= require_tree ./components diff --git a/app/assets/javascripts/components/game.js.jsx b/app/assets/javascripts/components/game.js.jsx index 27632f1b..9f665fe9 100644 --- a/app/assets/javascripts/components/game.js.jsx +++ b/app/assets/javascripts/components/game.js.jsx @@ -1,47 +1,49 @@ var Game = React.createClass({ + mixins: [SetIntervalMixin], propTypes: { title: React.PropTypes.string, - id: React.PropTypes.number + players: React.PropTypes.array, + id: React.PropTypes.number, + source: React.PropTypes.string }, getInitialState: function() { return { - id: 0, + //id: 0, + players: [], title: "" }; }, - componentDidMount: function() { + loadGameFromServer: function() { + //console.log(this.props.source); $.get(this.props.source, function(result) { if (this.isMounted()) { - console.log("Mounted"); + //console.log("Mounted"); this.setState({ - title: result.title - }); - this.setProps({ - id: result.id + title: result.title, + players: result.players }); } }.bind(this)); }, + componentDidMount: function() { + this.loadGameFromServer(); + this.setInterval(this.loadGameFromServer, 3000); + }, + render: function() { return (
Title: {this.state.title}
Id: {this.props.id}
+
+ +
-
); } }); - -$(document).on("page:change", function() { - if (document.getElementById("game-container") != null) { - React.render( - , document.getElementById('game-container') - ); - } -}) diff --git a/app/assets/javascripts/components/inventory.js.jsx b/app/assets/javascripts/components/inventory.js.jsx index 5f9dcdbb..be4fcde6 100644 --- a/app/assets/javascripts/components/inventory.js.jsx +++ b/app/assets/javascripts/components/inventory.js.jsx @@ -1,31 +1,32 @@ var Inventory = React.createClass({ - propTypes: { - cards: React.PropTypes.array - }, + // propTypes: { + // cards: React.PropTypes.array + // }, - getInitialState: function() { - return { - cards: [] - }; - }, + getInitialState: function() { + return { + cards: this.props.cards + }; + }, - componentDidMount: function() { - $.get(this.props.source, function(result) { - if (this.isMounted()) { - this.setState({ - cards: result - }); - } - }.bind(this)); - }, + // componentDidMount: function() { + // $.get(this.props.source, function(result) { + // console.log("Hi from inventory didmount"); + // if (this.isMounted()) { + // this.setState({ + // cards: result + // }); + // } + // }.bind(this)); + // }, render: function() { - return ( -
-
Cards:
+ if (this.props.cards) { + return (
+ Inventory:
    - {this.state.cards.map(function(card) { + {this.props.cards.map(function(card) { return
-
- ); + ); + } + else { + return (
); + } } }); // TODO: Remove this? -$(document).on("page:change", function() { - if (document.getElementById("inventory") != null) { - React.render( - , document.getElementById('inventory') - ); - } -}) +//$(document).on("page:change", function() { +// if (document.getElementById("inventory") != null) { +// React.render( +// , document.getElementById('inventory') +// ); +// } +//}) diff --git a/app/assets/javascripts/components/mixins.js.jsx b/app/assets/javascripts/components/mixins.js.jsx new file mode 100644 index 00000000..372e101c --- /dev/null +++ b/app/assets/javascripts/components/mixins.js.jsx @@ -0,0 +1,14 @@ +var SetIntervalMixin = { + componentWillMount: function() { + this.intervals = []; + }, + setInterval: function() { + //console.log('interval set'); + this.intervals.push(setInterval.apply(null, arguments)); + }, + componentWillUnmount: function() { + //console.log('interval unmount'); + this.intervals.forEach(clearInterval); + } +}; + diff --git a/app/assets/javascripts/components/player.js.jsx b/app/assets/javascripts/components/player.js.jsx new file mode 100644 index 00000000..50ebf672 --- /dev/null +++ b/app/assets/javascripts/components/player.js.jsx @@ -0,0 +1,81 @@ +var Player = React.createClass({ + propTypes: { + email: React.PropTypes.string, + id: React.PropTypes.number + }, + + //getInitialState: function() { + //return { + //id: this.props.id + //email: "" + //}; + //}, + + // componentDidMount: function() { + // $.get(this.props.source, function(result) { + // if (this.isMounted()) { + // console.log("Mounted from player"); + // //this.setState({ + // //id: result.id + // //email: result.email + // //}); + // console.log(result.id); + // this.setProps({ + // id: result.id + // }); + // } + // }.bind(this)); + // }, + + render: function() { + return ( +
+
Id: {this.props.id}
+
Email: {this.props.email}
+
Inventory count: {this.props.inventory_count}
+
+
+ ); + } +}); + + +var PlayerList = React.createClass({ + // propTypes: { + // players: React.PropTypes.array + // }, + + // getInitialState: function() { + // return { + // players: [] + // }; + // }, + + // componentDidMount: function() { + // $.get(this.props.source, function(result) { + // if (this.isMounted()) { + // this.setState({ + // players: result.players + // }); + // console.log("Mounted from playerList"); + // } + // }.bind(this)); + // }, + + render: function() { + var playerNodes = this.props.players.map(function (player) { + return ( + + ); + }); + // + + return ( +
+ PlayerList: + {playerNodes} +
+ ); + } + +}); diff --git a/app/views/games/show.html.haml b/app/views/games/show.html.haml index 0dc1ef73..b7c073de 100644 --- a/app/views/games/show.html.haml +++ b/app/views/games/show.html.haml @@ -1,24 +1,24 @@ -#game-container += react_component 'Game', source: "#{game_path @game}.json" -%p +-#%p %b Status: = @game.status -%p +-#%p %b Title: = @game.title -- if @game.can_accomodate(current_user) +-#- if @game.can_accomodate(current_user) = link_to 'Join', game_join_path(@game) -- if @game.startable? && @game.already_has?(current_user) +-#- if @game.startable? && @game.already_has?(current_user) = link_to 'Start', game_start_path(@game) -.debug +-#.debug = button_to 'Debug Start', game_start_path(@game), method: :get = link_to 'Edit Game', edit_game_path(@game) -.players +-#.players %b Players: %ol - @game.players.each do |player| @@ -39,8 +39,8 @@ -##inventory -# TODO better logic, not in view -- unless @game.status == nil - .table +-#- unless @game.status == nil + -#.table -# TODO better logic, not in view. Set play to beat = nil; instead of view logic - if @game.play_to_beat && @game.player_to_beat != @game.current_player - if @game.play_to_beat.play @@ -57,7 +57,7 @@ .controls - if @game.control_user == current_user // Play hand form - = form_for @game, :url => play_hand_game_path(@game) do |f| + = form_for @game, :url => play_hand_game_path(@game), remote: true do |f| // Provide id of current game -#= f.hidden_field :id = f.submit "Play Hand" diff --git a/app/views/games/show.json.jbuilder b/app/views/games/show.json.jbuilder index 8eceebb7..cacda23b 100644 --- a/app/views/games/show.json.jbuilder +++ b/app/views/games/show.json.jbuilder @@ -1 +1,10 @@ json.extract! @game, :id, :title, :created_at, :updated_at +json.players @game.players do |player| + json.id player.id + json.email player.user.email + json.inventory_count player.inventory.count + + if player.user == current_user + json.inventory player.inventory + end +end diff --git a/app/views/players/show.html.haml b/app/views/players/show.html.haml index f01d7db3..fdf2e1c8 100644 --- a/app/views/players/show.html.haml +++ b/app/views/players/show.html.haml @@ -7,9 +7,13 @@ %b User: = @player.user +- if @player.user == current_user + %p + %b Inventory: + = @player.inventory.map{|c| c.to_s} %p - %b Inventory: - = @player.inventory.map{|c| c.class} + %b Inventory count: + = @player.inventory.count = link_to 'Edit', edit_player_path(@player) \| diff --git a/app/views/players/show.json.jbuilder b/app/views/players/show.json.jbuilder index 74fc67e3..673e634e 100644 --- a/app/views/players/show.json.jbuilder +++ b/app/views/players/show.json.jbuilder @@ -1 +1,5 @@ -json.extract! @player, :id, :game_id, :user_id, :inventory, :created_at, :updated_at +json.extract! @player, :id, :game_id, :user_id, :created_at, :updated_at +if @player.user == current_user + json.inventory @player.inventory +end +json.inventory_count @player.inventory.count