Browse Source

First Production Build - testing on destination server

master
Unknown 6 years ago
parent
commit
58ebdfbb2d
17 changed files with 2032 additions and 49 deletions
  1. BIN
      .DS_Store
  2. +14
    -0
      googletrendsgame/public/index.html
  3. +17
    -0
      googletrendsgame/public/scripts/TweenMax.min.js
  4. +92
    -0
      googletrendsgame/public/scripts/demo4.js
  5. +16
    -0
      googletrendsgame/public/scripts/index.js
  6. +2
    -0
      googletrendsgame/public/scripts/index.min.js
  7. +1
    -0
      googletrendsgame/public/scripts/index.min.js.map
  8. +310
    -0
      googletrendsgame/public/scripts/perlin.js
  9. +898
    -0
      googletrendsgame/public/scripts/three.min.js
  10. +1
    -1
      googletrendsgame/server/sql.js
  11. +317
    -19
      googletrendsgame/src/App.css
  12. +1
    -1
      googletrendsgame/src/App.js
  13. +304
    -0
      googletrendsgame/src/base.css
  14. +10
    -3
      googletrendsgame/src/components/RoomList.js
  15. +19
    -17
      googletrendsgame/src/components/RoomListItem.js
  16. +2
    -2
      googletrendsgame/src/components/activeButton.js
  17. +28
    -6
      googletrendsgame/src/components/nicknameInput.js

BIN
.DS_Store View File


+ 14
- 0
googletrendsgame/public/index.html View File

@ -10,6 +10,20 @@
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="../src/base.css" />
<link rel="stylesheet" href="../src/App.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:500,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<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>
<script type="text/javascript" src="./scripts/three.min.js"></script>
<script type="text/javascript" src="./scripts/perlin.js"></script>
<script type="text/javascript" src="./scripts/TweenMax.min.js"></script>
<script type="text/javascript" src="./scripts/demo4.js"></script>-->
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.

+ 17
- 0
googletrendsgame/public/scripts/TweenMax.min.js
File diff suppressed because it is too large
View File


+ 92
- 0
googletrendsgame/public/scripts/demo4.js View File

@ -0,0 +1,92 @@
var canvas = document.querySelector('canvas');
var width = canvas.offsetWidth,
height = canvas.offsetHeight;
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x000000,0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000);
camera.position.set(0, 0, 350);
var sphere = new THREE.Group();
scene.add(sphere);
var material = new THREE.LineBasicMaterial({
color: 0x2169e5
});
var linesAmount = 18;
var radius = 100;
var verticesAmount = 50;
for(var j=0;j<linesAmount;j++){
var index = j;
var geometry = new THREE.Geometry();
geometry.y = (index/linesAmount) * radius*2;
for(var i=0;i<=verticesAmount;i++) {
var vector = new THREE.Vector3();
vector.x = Math.cos(i/verticesAmount * Math.PI*2);
vector.z = Math.sin(i/verticesAmount * Math.PI*2);
vector._o = vector.clone();
geometry.vertices.push(vector);
}
var line = new THREE.Line(geometry, material);
sphere.add(line);
}
function updateVertices (a) {
for(var j=0;j<sphere.children.length;j++){
var line = sphere.children[j];
line.geometry.y += 0.3;
if(line.geometry.y > radius*2) {
line.geometry.y = 0;
}
var radiusHeight = Math.sqrt(line.geometry.y * (2*radius-line.geometry.y));
for(var i=0;i<=verticesAmount;i++) {
var vector = line.geometry.vertices[i];
var ratio = noise.simplex3(vector.x*0.009, vector.z*0.009 + a*0.0006, line.geometry.y*0.009) * 15;
vector.copy(vector._o);
vector.multiplyScalar(radiusHeight + ratio);
vector.y = line.geometry.y - radius;
}
line.geometry.verticesNeedUpdate = true;
}
}
function render(a) {
requestAnimationFrame(render);
updateVertices(a);
renderer.render(scene, camera);
}
function onResize() {
canvas.style.width = '';
canvas.style.height = '';
width = canvas.offsetWidth;
height = canvas.offsetHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
var mouse = new THREE.Vector2(0.8, 0.5);
function onMouseMove(e) {
mouse.y = e.clientY / window.innerHeight;
TweenMax.to(sphere.rotation, 2, {
x : (mouse.y * 1),
ease:Power1.easeOut
});
}
requestAnimationFrame(render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function(){
resizeTm = clearTimeout(resizeTm);
resizeTm = setTimeout(onResize, 200);
});

+ 16
- 0
googletrendsgame/public/scripts/index.js View File

@ -0,0 +1,16 @@
// ==========================
// Login
// ==========================
// Enter Button
$(document).ready(function() {
$('#userNickname').on('change', function(){
if($(this).val()) {
$('.button--enter').addClass('is--active');
} else {
$('.button--enter').removeClass('is--active');
}
});
});

+ 2
- 0
googletrendsgame/public/scripts/index.min.js View File

@ -0,0 +1,2 @@
console.log("JavaScript is amazing!");
//# sourceMappingURL=index.min.js.map

+ 1
- 0
googletrendsgame/public/scripts/index.min.js.map View File

@ -0,0 +1 @@
{"version":3,"sources":["scripts/index.js"],"names":["console","log"],"mappings":"AAKAA,QAAQC,IAAI","file":"index.min.js","sourcesContent":["/**\n * index.js\n * - All our useful JS goes here, awesome!\n */\n\nconsole.log(\"JavaScript is amazing!\");"]}

+ 310
- 0
googletrendsgame/public/scripts/perlin.js View File

@ -0,0 +1,310 @@
/*
* A speed-improved perlin and simplex noise algorithms for 2D.
*
* Based on example code by Stefan Gustavson (stegu@itn.liu.se).
* Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
* Better rank ordering method by Stefan Gustavson in 2012.
* Converted to Javascript by Joseph Gentle.
*
* Version 2012-03-09
*
* This code was placed in the public domain by its original author,
* Stefan Gustavson. You may use it as you see fit, but
* attribution is appreciated.
*
*/
(function(global){
var module = global.noise = {};
function Grad(x, y, z) {
this.x = x; this.y = y; this.z = z;
}
Grad.prototype.dot2 = function(x, y) {
return this.x*x + this.y*y;
};
Grad.prototype.dot3 = function(x, y, z) {
return this.x*x + this.y*y + this.z*z;
};
var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)];
var p = [151,160,137,91,90,15,
131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
// To remove the need for index wrapping, double the permutation table length
var perm = new Array(512);
var gradP = new Array(512);
// This isn't a very good seeding function, but it works ok. It supports 2^16
// different seed values. Write something better if you need more seeds.
module.seed = function(seed) {
if(seed > 0 && seed < 1) {
// Scale the seed out
seed *= 65536;
}
seed = Math.floor(seed);
if(seed < 256) {
seed |= seed << 8;
}
for(var i = 0; i < 256; i++) {
var v;
if (i & 1) {
v = p[i] ^ (seed & 255);
} else {
v = p[i] ^ ((seed>>8) & 255);
}
perm[i] = perm[i + 256] = v;
gradP[i] = gradP[i + 256] = grad3[v % 12];
}
};
module.seed(0);
/*
for(var i=0; i<256; i++) {
perm[i] = perm[i + 256] = p[i];
gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
}*/
// Skewing and unskewing factors for 2, 3, and 4 dimensions
var F2 = 0.5*(Math.sqrt(3)-1);
var G2 = (3-Math.sqrt(3))/6;
var F3 = 1/3;
var G3 = 1/6;
// 2D simplex noise
module.simplex2 = function(xin, yin) {
var n0, n1, n2; // Noise contributions from the three corners
// Skew the input space to determine which simplex cell we're in
var s = (xin+yin)*F2; // Hairy factor for 2D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var t = (i+j)*G2;
var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
var y0 = yin-j+t;
// For the 2D case, the simplex shape is an equilateral triangle.
// Determine which simplex we are in.
var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1)
i1=1; j1=0;
} else { // upper triangle, YX order: (0,0)->(0,1)->(1,1)
i1=0; j1=1;
}
// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
// c = (3-sqrt(3))/6
var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
var y1 = y0 - j1 + G2;
var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
var y2 = y0 - 1 + 2 * G2;
// Work out the hashed gradient indices of the three simplex corners
i &= 255;
j &= 255;
var gi0 = gradP[i+perm[j]];
var gi1 = gradP[i+i1+perm[j+j1]];
var gi2 = gradP[i+1+perm[j+1]];
// Calculate the contribution from the three corners
var t0 = 0.5 - x0*x0-y0*y0;
if(t0<0) {
n0 = 0;
} else {
t0 *= t0;
n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.5 - x1*x1-y1*y1;
if(t1<0) {
n1 = 0;
} else {
t1 *= t1;
n1 = t1 * t1 * gi1.dot2(x1, y1);
}
var t2 = 0.5 - x2*x2-y2*y2;
if(t2<0) {
n2 = 0;
} else {
t2 *= t2;
n2 = t2 * t2 * gi2.dot2(x2, y2);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 70 * (n0 + n1 + n2);
};
// 3D simplex noise
module.simplex3 = function(xin, yin, zin) {
var n0, n1, n2, n3; // Noise contributions from the four corners
// Skew the input space to determine which simplex cell we're in
var s = (xin+yin+zin)*F3; // Hairy factor for 2D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var k = Math.floor(zin+s);
var t = (i+j+k)*G3;
var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
var y0 = yin-j+t;
var z0 = zin-k+t;
// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
// Determine which simplex we are in.
var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
if(x0 >= y0) {
if(y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; }
else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; }
else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; }
} else {
if(y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; }
else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; }
else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; }
}
// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
// c = 1/6.
var x1 = x0 - i1 + G3; // Offsets for second corner
var y1 = y0 - j1 + G3;
var z1 = z0 - k1 + G3;
var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
var y2 = y0 - j2 + 2 * G3;
var z2 = z0 - k2 + 2 * G3;
var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
var y3 = y0 - 1 + 3 * G3;
var z3 = z0 - 1 + 3 * G3;
// Work out the hashed gradient indices of the four simplex corners
i &= 255;
j &= 255;
k &= 255;
var gi0 = gradP[i+ perm[j+ perm[k ]]];
var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]];
var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]];
var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]];
// Calculate the contribution from the four corners
var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
if(t0<0) {
n0 = 0;
} else {
t0 *= t0;
n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
if(t1<0) {
n1 = 0;
} else {
t1 *= t1;
n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
}
var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
if(t2<0) {
n2 = 0;
} else {
t2 *= t2;
n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
}
var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
if(t3<0) {
n3 = 0;
} else {
t3 *= t3;
n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 32 * (n0 + n1 + n2 + n3);
};
// ##### Perlin noise stuff
function fade(t) {
return t*t*t*(t*(t*6-15)+10);
}
function lerp(a, b, t) {
return (1-t)*a + t*b;
}
// 2D Perlin Noise
module.perlin2 = function(x, y) {
// Find unit grid cell containing point
var X = Math.floor(x), Y = Math.floor(y);
// Get relative xy coordinates of point within that cell
x = x - X; y = y - Y;
// Wrap the integer cells at 255 (smaller integer period can be introduced here)
X = X & 255; Y = Y & 255;
// Calculate noise contributions from each of the four corners
var n00 = gradP[X+perm[Y]].dot2(x, y);
var n01 = gradP[X+perm[Y+1]].dot2(x, y-1);
var n10 = gradP[X+1+perm[Y]].dot2(x-1, y);
var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1);
// Compute the fade curve value for x
var u = fade(x);
// Interpolate the four results
return lerp(
lerp(n00, n10, u),
lerp(n01, n11, u),
fade(y));
};
// 3D Perlin Noise
module.perlin3 = function(x, y, z) {
// Find unit grid cell containing point
var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z);
// Get relative xyz coordinates of point within that cell
x = x - X; y = y - Y; z = z - Z;
// Wrap the integer cells at 255 (smaller integer period can be introduced here)
X = X & 255; Y = Y & 255; Z = Z & 255;
// Calculate noise contributions from each of the eight corners
var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z);
var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1);
var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z);
var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1);
var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z);
var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1);
var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z);
var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1);
// Compute the fade curve value for x, y, z
var u = fade(x);
var v = fade(y);
var w = fade(z);
// Interpolate
return lerp(
lerp(
lerp(n000, n100, u),
lerp(n001, n101, u), w),
lerp(
lerp(n010, n110, u),
lerp(n011, n111, u), w),
v);
};
})(this);

+ 898
- 0
googletrendsgame/public/scripts/three.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
googletrendsgame/server/sql.js View File

@ -72,4 +72,4 @@ module.exports=
this.insertData(user); this.insertData(user);
}); });
} }
};
};

+ 317
- 19
googletrendsgame/src/App.css View File

@ -1,28 +1,326 @@
.App {
body {
-moz-osx-font-smoothing: grayscale;
background: #B9B9B9;
background: #FFF;
color: #0459ed; }
.logo {
width: auto;
flex: 0;
padding: 20px;
color: #0459ed;
font-size: 50px;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
font-weight: 900;
background: #0459ed;
color: #FFF; }
.logo {
float: left;
margin: 0 0 60px 40px;
font-size: 30px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.logo:hover {
color: #FFF;
text-decoration: none; }
.logo div {
line-height: 30px; }
a {
color: #b3b3b3; }
a:hover {
color: #999999; }
.button--enter, .game__submit {
height: 70px;
width: 100%;
margin-top: 0em;
border: 0;
outline: 0;
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 500; }
.button--enter, .game__submit {
color: #FFF;
overflow: hidden;
border-radius: 8px;
background: #0459ed;
transition: all 0.5s; }
.button--enter:hover, .game__submit:hover {
background: #0346bb;
transform: scale(1.05); }
.button--enter,
.button__top,
.button__bottom {
transition: all 0.7s; }
.button--enter .button__top,
.button--enter .button__bottom {
height: 100%;
width: 100%;
padding: 20px;
text-align: center; text-align: center;
}
font-size: 20px;
display: block; }
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.button--enter.is--active .button__top {
margin-top: -140px; }
.App-header {
background-color: #222;
height: 150px;
.button__top {
background-color: #0459ed;
color: #FFF;
border: none;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
height: 100%;
width: 100%;
padding: 20px; padding: 20px;
color: white;
text-align: center;
font-size: 20px;
display: block;
} }
.App-title {
font-size: 1.5em;
}
.login__input:focus{
outline: none;
.App-intro {
font-size: large;
} }
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.button__bottom {
color: #FFF;
background: #30ce4b; }
.button__bottom:hover {
text-decoration: none;
color: #FFF; }
.button__spacer {
background: linear-gradient(#0459ed, #30ce4b);
height: 70px;
width: 100%; }
.btn-5 {
border: 0 solid;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); }
.game__sidebar:hover .btn-5 {
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388; }
.field--nickname input {
font-size: 20px;
padding: 20px;
border: none;
border: 1px solid #ddd;
border-radius: 8px; }
.field--nickname label {
font-size: 20px; }
.login__input {
float: left;
padding: 0 0 15px 0;
padding-left: 0;
font-size: 100px;
font-family: 'Josefin Sans', sans-serif;
vertical-align: baseline;
min-width: 100px;
margin: 0 15px 10px 0;
background: transparent;
box-shadow: 0;
font-weight: 300;
border: none;
color: #4286fc; }
.lobby__rooms {
padding: 0;
margin: 0; }
.lobby__room {
z-index: 2;
height: auto;
overflow: auto;
padding: 15px;
margin: -2px 0 0 0;
list-style: none;
font-size: 24px;
background: #FFF;
color: #0459ed;
border: 2px solid #0459ed;
transition: all 0.5s; }
.lobby__room:hover {
transform: scale(1.05); }
.lobby__room:first-child {
z-index: 1;
padding: 15px 0;
border: none;
font-weight: 600;
background: transparent; }
.lobby__room:first-child:hover {
transform: scale(1); }
.lobby__room:first-child .lobby__room-status {
background: transparent;
color: #0459ed; }
.lobby__room-name {
width: 50%;
float: left;
display: block;}
.lobby__room-occupancy {
width: 40%;
text-align: center;
float: left;
display: block; }
.lobby__room-status {
padding: 3px 10px 2px;
float: right;
text-align: right;
width: 10%;
text-align: center;
background: #0459ed;
color: #FFF;
border-radius: 8px;
border: none;
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
float: left;
display: block; }
.game [class^="col"] {
height: 100vh; }
.game__main {
display: flex;
flex-direction: column;
padding: 0 40px 40px;
clear: both; }
.game__sidebar {
position: relative;
display: flex;
flex-direction: column;
padding: 40px;
color: #FFF;
background: #0459ed;
border: 40px solid #fff;
border-right-width: 80px;
overflow: hidden;
border-radius: 8px; }
.game__room {
z-index: 2;
margin: 0 0 5px 0;
font-size: 24px;
font-weight: 400;
font-family: 'Poppins', sans-serif; }
.game__capacity {
z-index: 2;
margin: 0 0 20px; }
.game__players {
z-index: 2;
padding: 0;
margin: 0; }
.game__player {
margin: 0 0 5px 0;
list-style-position: inside; }
.game__player-name {
margin: 0 10px 0 0;
font-weight: 700; }
.game__player-ready {
float: right; }
.scene {
z-index: 1;
top: 0;
left: 0; }
.game__user-name,
.game__user-score {
text-align: center; }
.game__user-name {
margin: 0 0 20px 0;
font-size: 32px;
font-weight: 400; }
.game__user-score {
z-index: 2;
width: auto;
padding: 20px;
margin: 20px 0 25px;
font-size: 20px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
color: #FFF;
border: 2px solid #FFF; }
.game__user-score div + div {
font-size: 24px; }
.game__round {
z-index: 2;
margin: 0 0 20px 0;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif; }
.game__phrase {
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 0 30px 0; }
.game__phrase--entry,
.game__phrase--clue {
float: left;
padding: 0 0 15px 0;
padding-left: 0;
font-size: 100px;
font-family: 'Josefin Sans', sans-serif;
vertical-align: baseline; }
.game__phrase--entry {
min-width: 100px;
margin: 0 15px 10px 0;
border-right: none;
background: transparent;
box-shadow: 0;
text-align: right;
font-weight: 300;
border-bottom: 2px dashed #4286fc;
color: #4286fc; }
.game__phrase--entry:focus {
outline: 0; }
.game__phrase--entry[contenteditable="true"]:focus, .game__phrase--entry[contenteditable="true"]:active {
color: #0459ed;
border-bottom: 2px dashed #0459ed; }
.game__phrase--clue {
font-weight: 900; }
.game__submit {
margin: 0 0 30px;
max-width: 540px; }
.game__exit {
text-decoration: underline; }
.game__timer {
z-index: 2;
float: right;
margin: 0 0 20px 0; }
/*# sourceMappingURL=app.css.map */

+ 1
- 1
googletrendsgame/src/App.js View File

@ -7,7 +7,7 @@ import CreateRoomInput from './components/createRoomInput';
import RoomList from './components/RoomList'; import RoomList from './components/RoomList';
import GameScreen from './components/GameScreen'; import GameScreen from './components/GameScreen';
const socket = openSocket('129.21.91.149:3000');
const socket = openSocket('165.227.76.156:3000');
class App extends Component { class App extends Component {
constructor(props){ constructor(props){

+ 304
- 0
googletrendsgame/src/base.css View File

@ -0,0 +1,304 @@
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
background: #000;
}
body {
font-family: 'Barlow', Helvetica, Arial, sans-serif;
font-weight: 500;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #000;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Fade effect */
.js body {
opacity: 0;
transition: opacity 0.6s;
}
.js body.render {
opacity: 1;
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
.message {
position: relative;
z-index: 100;
display: none;
padding: 1em;
text-align: center;
color: var(--color-bg);
background: var(--color-text);
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
.icon--keyboard {
display: none;
}
main {
position: relative;
width: 100%;
}
.content {
position: relative;
display: grid;
justify-content: center;
align-items: center;
align-content: center;
margin: 0 auto;
min-height: 100vh;
}
.content--fixed {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1.5em;
pointer-events: none;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto 4em;
grid-template-areas: 'header ...'
'... ...'
'github demos';
}
.content--fixed a {
pointer-events: auto;
}
/* Header */
.codrops-header {
position: relative;
z-index: 100;
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
align-self: start;
grid-area: header;
justify-self: start;
}
.codrops-header__title {
font-size: 1em;
font-weight: 500;
margin: 0;
padding: 0.75em 0;
}
.info {
margin: 0 0 0 1.25em;
color: var(--color-info);
}
.github {
display: block;
align-self: end;
grid-area: github;
justify-self: start;
}
.demos {
position: relative;
display: block;
align-self: end;
text-align: center;
grid-area: demos;
}
.demo {
margin: 0 0.15em;
}
.demo:hover,
.demo:focus {
opacity: 0.5;
}
.demo span {
white-space: nowrap;
text-transform: lowercase;
pointer-events: none;
}
.demo span::before {
content: '#';
}
a.demo--current {
pointer-events: none;
color: var(--color-link-hover);
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: center;
margin: 0 1em 0 0;
text-align: center;
white-space: nowrap;
}
.codrops-icon {
display: inline-block;
margin: 0.15em;
padding: 0.25em;
}
/* Canvas positions */
.content__inner {
grid-area: 1 / 1 / 1 / 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
}
.scene {
position: absolute;
}
.scene--left {
width: 100vmin;
height: 100vmin;
transform: translate3d(-50vmin,0,0);
}
.scene--full {
width: 100%;
height: 100vh;
}
.scene--up {
height: 150vmin;
width: 150vmin;
top: -50vh;
left: 50%;
margin-left: -75vmin;
}
@media screen and (min-width: 55em) {
.icon--keyboard {
position: absolute;
right: 0.55em;
bottom: -30%;
display: block;
width: 54px;
height: 46px;
fill: var(--color-link);
}
.demos {
display: flex;
padding-right: 80px;
justify-self: end;
}
.demo {
display: block;
width: 17px;
height: 17px;
margin: 0 4px;
border-radius: 50%;
background: var(--color-link);
}
a.demo--current {
background: var(--color-link-hover);
}
.demo span {
line-height: 1;
position: absolute;
right: 100%;
display: none;
margin: 0 1em 0 0;
}
.demo--current span {
display: block;
}
}
@media screen and (max-width: 55em) {
.message {
/* display: block; */
}
.content {
flex-direction: column;
height: auto;
}
.content--fixed {
position: relative;
z-index: 1000;
display: block;
padding: 0.85em;
}
.content:not(.content--fixed) {
margin-bottom: 6em;
}
.codrops-header {
flex-direction: column;
align-items: center;
}
.codrops-header__title {
font-weight: bold;
padding-bottom: 0.25em;
text-align: center;
}
.info {
margin: 0;
}
.github {
display: block;
margin: 1em auto;
}
.codrops-links {
margin: 0;
}
}

+ 10
- 3
googletrendsgame/src/components/RoomList.js View File

@ -9,17 +9,24 @@ export default (props) => {
const roomNameArray = rooms.map(room => room.name); const roomNameArray = rooms.map(room => room.name);
const publicPrivateArray = rooms.map(room => room.passwordBool); const publicPrivateArray = rooms.map(room => room.passwordBool);
const capacityArray = rooms.map(room => room.capacity); const capacityArray = rooms.map(room => room.capacity);
const occupancyArray = rooms.map(room => room.occupants)
const occupancyArray = rooms.map(room => room.occupants);
var roomsArray = []; var roomsArray = [];
for(var i = 0; i < roomNameArray.length; i++){ for(var i = 0; i < roomNameArray.length; i++){
roomsArray.push(<RoomListItem roomName={roomNameArray[i]} occupancy={occupancyArray[i]} private={publicPrivateArray[i]} capcity={capacityArray[i]} socket={props.socket}/>);
roomsArray.push(<RoomListItem roomName={roomNameArray[i]} occupancy={occupancyArray[i]} private={publicPrivateArray[i]} capacity={capacityArray[i]} socket={props.socket} />);
} }
return( return(
<div> <div>
<div>{roomsArray}</div>
<ul>
<li className="lobby__room">
<span className="lobby__room-name">Room Name</span>
<span className="lobby__room-occupancy">Occupancy</span>
<span className="lobby__room-status">Status</span>
</li>
{roomsArray}
</ul>
<button onClick={props.stateModifier}>Create Room</button> <button onClick={props.stateModifier}>Create Room</button>
</div> </div>
) )

+ 19
- 17
googletrendsgame/src/components/RoomListItem.js View File

@ -18,30 +18,32 @@ export default class RoomListItem extends Component {
} }
buttonClickHandler(event){ buttonClickHandler(event){
this.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term})
this.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term});
} }
render(){ render(){
if (this.props.private === 'false'){
if (this.props.private === false){
console.log("The public listItem was called")
return( return(
<div>
<h1>{this.props.roomName}'s Room</h1>
<h3>{this.props.occupancy}/{this.props.capacity}</h3>
<h5>Public</h5>
<button type="submit" onClick={this.buttonClickHandler}>Join Room</button>
</div>
);
<li className = 'lobby__room'>
<span className="lobby__room-name">{this.props.roomName}'s Room</span>
<span className="lobby__room-occupancy">{this.props.occupancy}/{this.props.capacity}</span>
<span className="lobby__room-name">Public</span>
<span className="lobby__room-status"><button type="submit" onClick={this.buttonClickHandler}>Join Room</button></span>
</li>
)
} else { } else {
console.log("the private listItem was called")
return( return(
<div>
<h1>{this.props.roomName}'s Room</h1>
<h3>{this.props.occupancy}/{this.props.capacity}</h3>
<h5>Private</h5>
<input onChange={this.onInputChange} placeholder="Password"></input>
<button type='submit' onClick={this.buttonClickHandler}>Join Room</button>
</div>
<li className = 'lobby__room'>
<span className="lobby__room-name">{this.props.roomName}'s Room</span>
<span className="lobby__room-occupancy">{this.props.occupancy}/{this.props.capacity}</span>
<span className="lobby__room-occupancy">Private</span>
<span className="field--nickname"><input onChange={this.onInputChange} /></span>
<span className="lobby__room-status"><button type="submit" onClick={this.buttonClickHandler}>Join Room</button></span>
</li>
) )
} }
}
}
} }

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

@ -9,11 +9,11 @@ export default class activeButton extends Component {
case 'register': case 'register':
if(this.props.input != ''){ if(this.props.input != ''){
return( return(
<button>Let's play!</button>
<button className="button__top">Let's play!</button>
) )
} else { } else {
return( return(
<button disabled>Enter a nickname to play.</button>
<button className="button__top" disabled>Enter a nickname to play.</button>
) )
} }
case 'createRoom': case 'createRoom':

+ 28
- 6
googletrendsgame/src/components/nicknameInput.js View File

@ -25,12 +25,34 @@ export default class NicknameInput extends Component {
render() { render() {
return( return(
<form onSubmit={this.sendNickname}>
<input maxLength="30" placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
<span>
<ActiveButton input = {this.state.fieldValue} type='register' />
</span>
</form>
<div className="container-fluid game">
<div className="row">
<div className="col-xs-12 col-sm-7">
<a className="logo">
<div>WHAT</div>
<div>THE </div>
<div>TREND?!</div>
</a>
<div className="game__main">
<form onSubmit={this.sendNickname}>
<input className="login__input" maxLength="30" placeholder="Nickname" onChange = {this.onInputChange} value={this.state.fieldValue} />
<span>
<ActiveButton input = {this.state.fieldValue} type='register' />
</span>
</form>
</div>
</div>
<div className="col-xs-12 col-sm-5 game__sidebar">
<canvas className="scene scene--full" id="scene" ></canvas>
</div>
</div>
</div>
) )
} }
} }

Loading…
Cancel
Save