v1.6 - added group mode

src/jsx/main.jsx

@@ -17,13 +17,20 @@ export class Main extends React.Component{
 
             prank:30,
             prank_i:0,
-            prank_delay:100
+            prank_delay:100,
+
+
+            grp_gui:"invi",
+            grp_member:2,
+            css:".group{opacity:0}"
         }
         
         this.selCh = this.selCh.bind(this);
         this.changeChoosen = this.changeChoosen.bind(this);
         this.choose = this.choose.bind(this);
         this.chooseInit = this.chooseInit.bind(this);
+        this.openGrpGui = this.openGrpGui.bind(this);
+        this.chooseGroups = this.chooseGroups.bind(this);
         
         var me = this;
         Classes.load_Classes((data)=>{
@@ -92,12 +99,66 @@ export class Main extends React.Component{
             
         },me.state.prank_delay)
     }
+
+    openGrpGui(){
+        if(this.state.grp_gui==='invi'){
+            this.setState({grp_gui:'vi',"css":".group{opacity:1}"});
+
+        }else{
+            this.setState({grp_gui:'invi',"css":".group{opacity:0}"});
+        }
+    }
+    /**
+     * CHOOSE GROUPS
+     */
+    chooseGroups(){
+        var tmp_map = {}
+        var mk_groups = Math.floor(this.state.students.length/this.state.grp_member);
+        var fill = this.state.students.length%this.state.grp_member;
+
+        for(var z = 0;z<mk_groups;z++){
+            tmp_map["grp_"+z] = [];
+        }
+        
+        for(var i = 0; i<this.state.students.length;i++){
+            var grp = Math.floor(Math.random()*mk_groups);
+            if(this.state.students.length-1-fill>=i || tmp_map['grp_'+grp].length<mk_groups){
+                console.log("TEST")
+                var g = false;
+                var y = 0;
+                while(g==false){
+                    grp = Math.floor(Math.random()*mk_groups);
+                    if(tmp_map['grp_'+grp].length<this.state.grp_member){
+                        g=true;
+                    }
+                    if(y>100){
+                        console.log("ESC");
+                        break;
+                    }
+                    y++;
+                }
+            }else{
+                console.log("FILL")
+            }
+            User.user_arr[i].setGroup(grp)
+            tmp_map["grp_"+grp].push( User.user_arr[i]);
+            
+        }
+
+
+        console.log("INFO");
+        console.log(tmp_map)
+        console.log("REST " +fill);
+        console.log(Math.floor(this.state.students.length/this.state.grp_member));
+        console.log("INFO END")
+    }
+
     render(){
         return (
             <div>
                 <div className="nav">
                     <div>
-                        <select className="select-wrapper" onChange={this.selCh} value={this.state.selected}> 
+                        <select className="select-wrapper" onChange={this.selCh} value={this.state.selected}  title="Gruppe auswählen"> 
                             <option value="-">-</option>
                             {this.state.classes.map((cl,i)=>
                             <option value={cl.toLowerCase()}>{cl.toUpperCase()}</option>  
@@ -105,15 +166,29 @@ export class Main extends React.Component{
                         </select>
                     </div>
                     <div>
-                        <input type="number" min="1" value={this.state.choose} onChange={this.changeChoosen}/>
+                        <input type="number" min="1" value={this.state.choose} onChange={this.changeChoosen} title="Anzahl an zu wählenden Personen"/>
                     </div>
                     <div>
                         <button onClick={this.chooseInit}>Auswählen</button>
                     </div>
+                    <div>
+                        <button onClick={this.openGrpGui} title="Öffnet den Gruppenmodus">Gruppenmodus</button>
+                    </div>
+                </div>
+                <div id="grp_gui" className={this.state.grp_gui}>
+                    <div>
+                        Gruppen aus <input type="number" min="2" value={this.state.grp_member} onChange={(e)=>{this.setState({grp_member:e.target.value})}}/> Personen. 
+                    </div>
+                    <div>
+                        <button onClick={this.chooseGroups} title="BETA feature">Gruppen bilden</button>
+                    </div>
                 </div>
                 <div className="studentList">
                     {this.state.stud_html}
                 </div>
+                <style>
+                    {this.state.css}
+                </style>
             </div>
         )
     }

src/jsx/ui/student.jsx

@@ -11,7 +11,8 @@ export class Student extends React.Component{
             cl:props.cl,
             img_url:'data/class/'+props.cl+'/'+props.username[0]+'.'+props.username[1],
             num:props.i,
-            dis:""
+            dis:"",
+            group:""
         }
         
         this.onErr = this.onErr.bind(this);
@@ -37,10 +38,14 @@ export class Student extends React.Component{
     disappear(){
         this.setState({dis:"disappear"});
     }
+    setGroup(grp_id){
+        this.setState({group:grp_id});
+    }
     render(){
         var c = "user chosen_"+this.state.num+' '+this.state.dis;
         return (
             <div className={c}>
+                <div className="group">{this.state.group}</div>
                 <div className="user_img"><img src={this.state.img_url} onError={this.onErr} alt=""></img></div>
                 <div className="username">{this.state.username}</div>
             </div>