jrtechs
/
jrtechs-GoogleTrendsGame
mirror of https://github.com/jrtechs/GoogleTrendsGame.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master'

master
Jeffery R 6 years ago
parent
aaf5fc709c 41588135ba
commit
09f0c7d682
9 changed files with 118 additions and 29 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +74
    -0
      game.html
  2. +18
    -12
      googletrendsgame/src/App.js
  3. +1
    -0
      googletrendsgame/src/components/GameScreen.js
  4. +19
    -12
      googletrendsgame/src/components/RoomList.js
  5. +3
    -2
      googletrendsgame/src/components/RoomListItem.js
  6. +0
    -0
      googletrendsgame/src/components/User.js
  7. +1
    -1
      googletrendsgame/src/components/activeButton.js
  8. +1
    -1
      googletrendsgame/src/components/createRoomInput.js
  9. +1
    -1
      googletrendsgame/src/components/nicknameInput.js

+ 74
- 0
game.html View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Trend Spotter | Game</title>
<!-- / -->
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="styles/app.css">
<!-- / -->
</head>
<body>
<div class="container-fluid game">
<div class="row">
<!-- Main -->
<div class="col-xs-12 game__main">
<div class="logo">trend spot</div>
<div class="game__user-score">jesseg89: 20,005 points</div>
<div class="game__round">Round 4/7</div>
<div class="game__phrase">
<input class="game__phrase--entry" type="text">
<div class="game__phrase--clue">car</div>
<button class="game__submit">Submit my answer!</button>
</div>
<div class="game__room">You're in <em>dave61's room</em> | 12/20 players</div>
<a href="lobby.html" class="game__exit">Leave Game</a>
</div>
<!-- / -->
<!--
<div class="col-xs-12 col-sm-3 game__sidebar">
<div class="game__timer">60 seconds</div>
<ol class="game__players">
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
</ol>
</div>
</div>
</div>
-->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/index.js"></script>
<!-- / -->
</body>
</html>

+ 18
- 12
googletrendsgame/src/App.js View File

@ -2,8 +2,8 @@ import React, { Component } from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import openSocket from 'socket.io-client'; import openSocket from 'socket.io-client';
import NicknameInput from './components/NicknameInput';
import CreateRoomInput from './components/CreateRoomInput';
import NicknameInput from './components/nicknameInput';
import CreateRoomInput from './components/createRoomInput';
import RoomList from './components/RoomList'; import RoomList from './components/RoomList';
const socket = openSocket('129.21.91.149:3000'); const socket = openSocket('129.21.91.149:3000');
@ -13,19 +13,26 @@ class App extends Component {
super(props); super(props);
this.state={ this.state={
progression: 'createRoom',
roomList: []
progression: 'register',
roomsList: []
} }
this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this);
} }
componentDidMount(){
modifyStateToCreateRoom() {
this.setState({
progression: 'createRoom'
});
} }
stateHandler(){
socket.on('sendRooms', payload => this.setState({
progression: 'roomChoose',
roomList: payload.rooms
}));
componentDidMount(){
socket.on('sendRooms', payload => {
const rooms = payload.rooms;
this.setState({
progression: 'roomChoose',
roomsList: rooms
})
});
} }
render() { render() {
@ -34,9 +41,8 @@ class App extends Component {
<NicknameInput socket = {socket}/> <NicknameInput socket = {socket}/>
) )
} else if(this.state.progression === 'roomChoose') { } else if(this.state.progression === 'roomChoose') {
return( return(
<RoomList roomArray = {this.state.roomList}/>
<RoomList stateModifier={this.modifyStateToCreateRoom} roomArray = {this.state.roomsList}/>
) )
} else if (this.state.progression === 'createRoom') { } else if (this.state.progression === 'createRoom') {

+ 1
- 0
googletrendsgame/src/components/GameScreen.js View File

@ -0,0 +1 @@
import React, {Component} from 'react';

+ 19
- 12
googletrendsgame/src/components/RoomList.js View File

@ -1,18 +1,25 @@
import React, { Component } from 'react';
import RoomListItem from 'roomListItem';
import React from 'react';
import RoomListItem from './RoomListItem';
import {modifyStateToCreateRoom} from '../App'
class RoomList extends Component {
renderRooms(roomArray) {
return(
<RoomListItem key = {room.name} roomName = {room.name} private = {room.passwordBool} capacity = {room.capacity} occupancy = {room.occupants} />
)
}
render(){
export default (props) => {
let rooms = props.roomArray;
console.log(rooms);
if (rooms.length != 0) {
let roomsList = rooms.map((room) =>
<RoomListItem roomName={room.name} private={room.passwordBool} capacity={room.capacity} occupancy={room.occupants} />
);
return( return(
<div> <div>
{this.props.roomArray.map(this.renderRooms)}
<div>{roomsList}</div>
<button>Create Room</button>
</div>
);
} else {
return (
<div>
<div>No current rooms, you should create one!</div>
<button onClick={props.stateModifier}>Create Room</button>
</div> </div>
) )
} }

+ 3
- 2
googletrendsgame/src/components/RoomListItem.js View File

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
export default (props) => { export default (props) => {
var privateString =''
if (props.private = false){ if (props.private = false){
const privateString = "Public"
privateString = "Public"
} else { } else {
const privateString = "Private"
privateString = "Private"
} }
return( return(
<div> <div>

+ 0
- 0
googletrendsgame/src/components/User.js View File


+ 1
- 1
googletrendsgame/src/components/activeButton.js View File

@ -16,7 +16,7 @@ export default class activeButton extends Component {
) )
} }
case 'createRoom': case 'createRoom':
if(this.props.passInput != '' && this.props.capacityInput != '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
if(this.props.passInput !== '' && this.props.capacityInput !== '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
return( return(
<button>Create Room</button> <button>Create Room</button>
) )

+ 1
- 1
googletrendsgame/src/components/createRoomInput.js View File

@ -9,7 +9,7 @@ export default class CreateRoomInput extends Component {
passwordFieldValue: '', passwordFieldValue: '',
capacityFieldValue:'' capacityFieldValue:''
} }
//test Comment
this.onInputChangePass = this.onInputChangePass.bind(this); this.onInputChangePass = this.onInputChangePass.bind(this);
this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this); this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this);
this.sendRoomData = this.sendRoomData.bind(this); this.sendRoomData = this.sendRoomData.bind(this);

+ 1
- 1
googletrendsgame/src/components/nicknameInput.js View File

@ -25,7 +25,7 @@ export default class NicknameInput extends Component {
render() { render() {
return( return(
<form onSubmit={this.sendNickname}> <form onSubmit={this.sendNickname}>
<input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
<input maxLength="30" placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
<span> <span>
<ActiveButton input = {this.state.fieldValue} type='register' /> <ActiveButton input = {this.state.fieldValue} type='register' />
</span> </span>

Write Preview
Loading…
Cancel
Save