Merge pull request #48 from morganecf/daniel/avatars

Cabin Fever

app/client/jsx/PuckBox.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
 const PuckBox = (props) => {
+  let box_style = 'box'
+  if (props.imageStyle=='non-selected-image') { box_style = 'non-selected-box'}
   return (
-    <div className='box' onClick={props.handleClick} onMouseOver={props.handleTouch}>
+    <div className={box_style} onClick={props.handleClick} onMouseOver={props.handleTouch}>
       <img src={props.image} className={props.imageStyle} />
     </div>
   )

app/client/jsx/PuckSelect.jsx

@@ -8,107 +8,99 @@ class PuckSelect extends Component {
         super(props)
         this.state = {
             columnOpen: false,
-            rowOpen: null,
+            rowOpen: null, 
             avatar: null,
             opacity: this.props.opacity
         }
         this.onButtonClick = this.onButtonClick.bind(this)
       }
 
   onButtonClick() { this.setState({ columnOpen: true }) }
-  onButtonClickReset() {
+  onButtonClickReset() { // to fix
     this.setState({ columnOpen: false })
     this.setState({ rowOpen: null })
     this.setState({ avatar: null })
-    this.forceUpdate()
+    // this.forceUpdate()
   }
-  handleClick(id) { this.setState({ rowOpen: id }) }
+  handleClickDesign(id) { this.setState({ rowOpen: id }) }
   handleClickColor(id) {
     this.setState({ avatar: id })
     this.props.handleSelect([this.state.rowOpen,id])
   }
 
   render() {
 
-    //reselect button WIP
-    if (this.state.avatar!=null) {
-      return (
-        <div className='outer'>
-          <input className='fade' type="button" onClick={this.onButtonClick} value="Pick your puck"/>
-          <div className='spacer'/>
-          <div><img className='image' src={avatars[this.state.rowOpen][this.state.avatar]}/></div>
-        </div>
-      )
-    } else {
+    if (this.state.avatar===null) { // checks whether selection not yet complete
 
+      // puck list generated from 0th colorway of each design
       let puck_list = avatars.map(function(arr,i) { return arr[0] }).slice(0, avatars.length - 1)
-      let puck_array
+      let all_avatar_designs_array
       let fade = this.props.opacity
-      if (this.state.columnOpen) {
+
+      if (this.state.columnOpen) { // checks whether selection begun by clicking button, opening column
 
         fade = 'fade'
+        all_avatar_designs_array = puck_list.map((puck,id) => {
 
-        puck_array = puck_list.map((puck,id) => {
+          if (this.state.rowOpen!==id) { // checks each item in column for whether selected
 
-          if (this.state.rowOpen===id) {
+            let handleClick = () => this.handleClickDesign(id)
+            let image_transparency = 'image'
+            if (this.state.rowOpen!=null && this.state.rowOpen!==id) {
+              image_transparency = 'non-selected-image'
+            }
+            return ( // returns single instance of each nonselected design
+              <PuckBox
+              handleClick={handleClick}
+              key={id}
+              image={puck}
+              style='box'
+              imageStyle={image_transparency}
+              />
+            )
 
-            let variant_array = avatars[this.state.rowOpen].map((color,id) => {
+          } else { // selected design
 
+            let colorway_variants_array = avatars[this.state.rowOpen].map((color,id) => {
               let selected = 'image'
-              // if (id===0) { selected = 'box-selected' }
-              let handleClickColor = () => this.handleClickColor(id)
-
-              // avatar color variant selection
-              return (
+              let handleClick = () => this.handleClickColor(id)
+              return ( // returns all colorways for selected design
                 <PuckBox
-                handleClick={handleClickColor}
+                handleClick={handleClick}
                 key={`puckbox-${id}`}
                 image={color}
                 imageStyle={selected}
                 />
               )
             })
-
-            return (
+            return ( // colorways row in place of selected column item
               <div className='inner'>
-              {variant_array}
+              {colorway_variants_array}
               </div>
             )
 
-          } else {
-
-            let handleClick = () => this.handleClick(id)
-
-            let image_transparency = 'image'
-            if (this.state.rowOpen!=null && this.state.rowOpen!==id) {
-              image_transparency = 'non-selected-image'
-            }
-            // avatar style selection
-            return (
-              <PuckBox
-              handleClick={handleClick}
-              key={id}
-              image={puck}
-              style='box'
-              imageStyle={image_transparency}
-              />
-            )
-
           }
-
         })
       }
 
-      return(
+      return ( // column of singleton nonselected items with at most one of them swapped out for colorway variants row
         <div className='outer'>
         <input className={fade} type="button" onClick={this.onButtonClick} value="Pick your puck"/>
-        {puck_array}
+        {all_avatar_designs_array}
         </div>
       )
 
-    }
+    } else {
 
+      return ( // when avatar state isn't null, collapse all and display choice
+        <div className='outer'>
+          <input className='fade' type="button" onClick={this.onButtonClick} value="Pick your puck"/>
+          <div className='spacer'/>
+          <div><img className='image' src={avatars[this.state.rowOpen][this.state.avatar]}/></div>
+        </div>
+      ) // reselection WIP
 
+    }
 
   }
 }

app/client/jsx/Welcome.jsx

@@ -54,27 +54,30 @@ class Welcome extends Component {
         let text_entry = {
           padding: '6px 10px',
           border: '2px solid #D6D3CD',
+          backgroundColor: '#D6D3CD',
           borderRadius: '7px',
-        //   backgroundColor: '#222426',
-          color: '#D6D3CD',
+          color: '#1B1E1F',
           outline: 'none',
           boxShadow: 'none',
-          fontSize: '14px'
+          fontSize: '20px'
         }
 
         let name_opacity = 'form-fade'
         let avatar_opacity = 'form-fade'
-        let party_opacity = 'form-fade'
+        let party_opacity = 'form-fade-party'
         if (this.state.displayName=='') { name_opacity = 'form' }
         if (this.state.displayName) { avatar_opacity = 'form' }
         if (this.state.displayName && this.state.avatar) { party_opacity = 'form-party' }
 
         return (
             <div className="vestibule">
-                <h1>Welcome have fun</h1>
+                <br/>
+                <div className='serif'>You've met with a terrible fate, haven't you?</div>
+                <h1>Cabin Weekend is Dead. Long Live Cabin Fever.</h1>
+                <img className='splash' src='./js/images/party.png'/>
                 <input style={text_entry} autoComplete="off" className={name_opacity} type="text" placeholder="Name" name="name" minLength="1" onChange={this.handleDisplayNameChange.bind(this)}/><br/>
                 <PuckSelect opacity={avatar_opacity} handleSelect={this.handleAvatarSelect.bind(this)} />
-                <input className={party_opacity} type="button" onClick={this.handleReady.bind(this)} value="Party" disabled={!this.state.displayName} />
+                <input id='button' className={party_opacity} type="button" onClick={this.handleReady.bind(this)} value="Party" disabled={!this.state.displayName} />
             </div>
         )
 

app/client/jsx/avatars.jsx

@@ -7,3 +7,45 @@ export default
   ['./js/images/puck/trippy/trippy1.png','./js/images/puck/trippy/trippy2.png','./js/images/puck/trippy/trippy3.png','./js/images/puck/trippy/trippy4.png',],
   ['./js/images/puck/thumb/thumb1.png','./js/images/puck/thumb/thumb2.png','./js/images/puck/thumb/thumb3.png','./js/images/puck/thumb/thumb4.png',]
 ]
+
+const relativePath = './js/images/puck/'
+const hostedPath = 'https://raw.githubusercontent.com/morganecf/jitsi-party/master/app/client/js/images/puck/'
+
+const avatars = {
+  normal: {
+    purple: { name: 'normal-purple.png' },
+    blue: { name: 'normal-blue.png' },
+    red: { name: 'normal-red.png' },
+    orange: { name: 'normal-orange.png' },
+  },
+  book: {
+    purple: { name: 'book-purple.png' },
+    blue: { name: 'book-blue.png' },
+    red: { name: 'book-red.png' },
+    orange: { name: 'book-orange.png' },
+  },
+  whippit: {
+    purple: { name: 'whippit-purple.png' },
+    blue: { name: 'whippit-blue.png' },
+    red: { name: 'whippit-red.png' },
+    orange: { name: 'whippit-orange.png' },
+  },
+  dancing: {
+    purple: { name: 'dancing-purple.png' },
+    blue: { name: 'dancing-blue.png' },
+    red: { name: 'dancing-red.png' },
+    orange: { name: 'dancing-orange.png' },
+  },
+  trippy: {
+    purple: { name: 'trippy-purple.png' },
+    blue: { name: 'trippy-blue.png' },
+    red: { name: 'trippy-red.png' },
+    orange: { name: 'trippy-orange.png' },
+  },
+  thumb: {
+    purple: { name: 'thumb-purple.png' },
+    blue: { name: 'thumb-blue.png' },
+    red: { name: 'thumb-red.png' },
+    orange: { name: 'thumb-orange.png' },
+  },
+}

app/client/styles/abstracts/_variables.scss

@@ -2,13 +2,15 @@
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
 
-
-
+@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@600;800&display=swap');
 
 
 /// Regular font family
 /// @type List
-$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
+$text-font-stack: 'Darker Grotesque', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
+
+/// @type List
 
 /// Code (monospace) font family
 /// @type List

app/client/styles/base/_fonts.scss

@@ -1,3 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all @font-face declarations, if any.
 // -----------------------------------------------------------------------------
+
+@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
+
+$serif:  'Alegreya', 'Georgia';

app/client/styles/base/_typography.scss

@@ -3,5 +3,5 @@
  */
 body {
   color: $text-color;
-  font: normal 125% / 1.4 $text-font-stack;
+  font: normal 150% / 1.4 $text-font-stack;
 }

app/client/styles/components/_Navigation.scss

@@ -1,15 +1,3 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the Navigation component.
 // -----------------------------------------------------------------------------
-
-
-// .avatar {
-// }
-// .circle {
-// 	width: 80px;
-// 	height: 80px;
-// 	border-radius: 80px;
-// 	// border: solid 2px #D6D3CD;
-// 	background-color: #D6D3CD;
-// 	justify-content: center;
-// }

app/client/styles/components/_PuckSelect.scss

@@ -5,7 +5,7 @@
 
 
 .fade {
-  opacity: .125;
+  opacity: .25;
   transition: opacity .33s;
 }
 

app/client/styles/components/_Welcome.scss

@@ -2,6 +2,26 @@
 // This file contains all styles related to the Welcome component.
 // -----------------------------------------------------------------------------
 
+.splash {
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	position: absolute;
+}
+.serif {
+	font-family: $serif;
+}
+h1 {
+	margin: -20px 0px 30px 0px;
+	-webkit-text-stroke: 1.25px #1B1E1F;
+	font-weight: 800;
+	font-size: 2.25em;
+}
+
+input[type="button"] {
+	background-color: #D6D3CD;
+	color: #1B1E1F;
+}
 
 .form {
 	opacity: 1;
@@ -12,19 +32,37 @@
 	text-align: center;
 	animation: flash linear .666s infinite;
 }
+@-webkit-keyframes flash {
+	0% { opacity: 1; }
+	50% { opacity: .5; }
+	100% { opacity: 1; }
+}
+
+// necessary ugliness to wrangle inherited :disabled effects
+.form-fade-party {
+	opacity: .25;
+	transition: opacity .33s;
+	text-align: center;
+}
+.form-fade-party:hover {
+	opacity: 0;
+	transition: opacity .05s;
+}
 .form-fade {
-	opacity: .125;
+	opacity: .5;
 	transition: opacity .33s;
 	text-align: center;
 }
-.form-fade:focus {
+.form-fade:focus,
+.form-fade:hover {
 	opacity: 1;
-	transition: opacity 1s;
+	transition: opacity .666s;
 	text-align: center;
 }
-
-@-webkit-keyframes flash {
-	0% { opacity: 1; }
-	50% { opacity: .33; }
-	100% { opacity: 1; }
+.form-fade:disabled,
+#button:disabled,
+#button:hover {
+	background-color: #D6D3CD !important;
+	border: 2px solid #D6D3CD !important;
+	color: #1B1E1F !important;
 }

app/client/styles/components/_button.scss

@@ -8,13 +8,13 @@ input[type="button"] {
 	padding: 6px 10px;
 	border: 2px solid $text-color;
 	border-radius: 5px;
-	transition: all 0.3s ease; 
+	transition: all 0.3s ease;
 	background: none;
 	color: $text-color;
-	font-size: 14px;
+	font-size: 20px;
 
 	svg {
-		margin: 0 8px 0 0; 
+		margin: 0 8px 0 0;
 	}
 
 	&:hover,