Ignore:
Timestamp:
04/18/20 20:20:58 (5 years ago)
Author:
Maciej Komosinski
Message:

Attempt to fix upper-row tiles so they cannot be moved below

File:
1 edited

Legend:

Unmodified
Added
Removed

  • js/human_3d_alignment/src/widgets/fitviewer.jsx

    r911 r912  
    116116        this.createThirdRow = this.createThirdRow.bind(this);
    117117        this.createFourthRow = this.createFourthRow.bind(this);
    118         this.select = this.select.bind(this);
    119     }
    120 
    121     select(e) {
     118        this.selectLetter = this.selectLetter.bind(this);
     119        this.selectNumber = this.selectNumber.bind(this);
     120    }
     121
     122    selectNumber(e) {
    122123        let item = null;
    123124        let index;
    124125
     126        let type = 0;
     127
    125128        for (let i = 0; i < this.props.parts1; i++) {
    126129            let index2 = (i+1).toString();
     130            let itemRow1 =  document.querySelector('#rowField1');
    127131            let itemD = document.querySelector('#creature' + index2);
    128132            let itemP = document.querySelector('#p' + index2);
    129             if (e.target === itemD || e.target === itemP) {
     133            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
     134                type = 1;
    130135                item = null;
    131136                index = index2;
    … …  
    134139        }
    135140
    136         for (let i = 0; i < this.props.parts2; i++) {
    137             let index2 = '';
    138             if (i + 1 + 64 > 90) {
    139                 index2 = String.fromCharCode(i + 1 + 70);
    140             } else {
    141                 index2 = String.fromCharCode(i + 1 + 64);
    142             }     
    143             let itemD = document.querySelector('#creature' + index2);
    144             let itemP = document.querySelector('#p' + index2);
    145             if (e.target === itemD || e.target === itemP) {
    146                 item = null;
    147                 index = index2;
    148                 item = document.querySelector('#creature' + index);
    149             }
    150         }
    151 
    152141        if (this.state.choosed != ' ') {
    153             if (!item) {
    154                 if (!isNaN(this.state.choosed)) {
    155                     for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
    156                         let index2 = (i+1).toString();
    157                         let itemD =  document.querySelector('#field1-' + index2);
    158 
    159                        
    160                         if (e.target === itemD) {
    161                             let index3 = this.props.selected1.indexOf(this.state.choosed);
    162 
    163                             if (index3 > -1) {
    164                                 this.props.handleChangeSelected(1, index3, ' ');
    165                             }
    166                             this.props.handleChangeSelected(1, i, this.state.choosed);
    167                         }
    168                     }
    169                 } else {
    170                     for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
    171                         let index2 = (i+1).toString();
    172                         let itemD =  document.querySelector('#field2-' + index2);
    173 
    174                        
    175                         if (e.target === itemD) {
    176 
    177                             let temp = this.state.choosed;
    178                             if (this.state.choosed.charCodeAt(0) > 90) {
    179                                 temp = String.fromCharCode(temp.charCodeAt(0) - 6);
    180                             }
    181 
    182                             let index3 = this.props.selected2.indexOf(temp);
    183 
    184                             if (index3 > -1) {
    185                                 this.props.handleChangeSelected(2, index3, ' ');
    186                             }
    187                             this.props.handleChangeSelected(2, i, this.state.choosed);
    188                         }
    189                     }
    190                 }
     142            if (type == 0) {
    191143                this.setState({ choosed: ' ' }, function() {
    192144                    console.log(this.state.choosed);
    193145                });
    194 
    195             } else {
    196                 let item2 = document.querySelector('#creature' + this.state.choosed);
    197                 if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
    198                     (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
    199                     let nr = 0;
    200                     let index1 = 0;
    201                     let index2 = 0;
    202                     let temp = this.state.choosed;
    203                     if (this.state.choosed.charCodeAt(0) > 90) {
    204                         temp = String.fromCharCode(temp.charCodeAt(0) - 6);
    205                     }
    206                     if (!isNaN(this.state.choosed)) {
    207                         nr = 1;
    208                         index1 = this.props.selected1.indexOf(this.state.choosed);
    209                         index2 = this.props.selected1.indexOf(index);
    210                     } else {
    211                         nr = 2;
    212                         let temp1 = this.state.choosed;
    213                         let temp2 = index;
    214                         if (this.state.choosed.charCodeAt(0) > 90) {
    215                             temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
    216                         }
    217                         if (index.charCodeAt(0) > 90) {
    218                             temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
    219                         }
    220 
    221                         index1 = this.props.selected2.indexOf(temp);
    222                         index2 = this.props.selected2.indexOf(temp2);
    223                     }
    224                     this.props.handleChangeSelected(nr, index1, index);
    225                     this.props.handleChangeSelected(nr, index2, this.state.choosed);
     146            } else {
     147                if (!isNaN(this.state.choosed)) {
     148                    let index1 = this.props.selected1.indexOf(index.toString());
     149                    let index2 = this.props.selected1.indexOf(this.state.choosed);
     150
     151                    this.props.handleChangeSelected(1, index1, this.state.choosed);
     152                    this.props.handleChangeSelected(1, index2, index.toString());
    226153
    227154                    this.setState({ choosed: ' ' }, function() {
    … …  
    229156                    });
    230157                } else {
    231                     if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode ||
    232                         item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
    233                         let nr = 0;
    234                         let index1 = 0;
    235                         let index2 = 0;
    236                         if (!isNaN(this.state.choosed)) {
    237                             nr = 1;
    238                             index1 = this.props.selected1.indexOf(this.state.choosed);
    239                             index2 = this.props.selected1.indexOf(index);
    240                         } else {
    241                             nr = 2;
    242                             let temp = this.state.choosed;
    243                             let temp2 = index;
    244                             if (this.state.choosed.charCodeAt(0) > 90) {
    245                                 temp = String.fromCharCode(temp.charCodeAt(0) - 6);
    246                             }
    247                             if (index.charCodeAt(0) > 90) {
    248                                 temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
    249                             }
    250                             index1 = this.props.selected2.indexOf(temp);
    251                             index2 = this.props.selected2.indexOf(temp2);
    252                         }
    253                         this.props.handleChangeSelected(nr, index1, index);
    254                         this.props.handleChangeSelected(nr, index2, this.state.choosed);
    255                         this.setState({ choosed: ' ' }, function() {
    256                             console.log(this.state.choosed);
    257                         });
    258                     } else {
    259                         this.setState({ choosed: index }, function() {
    260                             console.log(this.state.choosed);
    261                         });
    262                     }
    263                 }
     158                    this.setState({ choosed: index }, function() {
     159                        console.log(this.state.choosed);
     160                    });
     161                }
     162   
     163                   
    264164            }
    265165        } else {
    … …  
    269169                });
    270170            }
     171        }
     172    }
     173
     174    selectLetter(e) {
     175        let index;
     176        let indexL;
     177
     178        let type = 0;
     179
     180        for (let i = 0; i < this.props.parts2; i++) {
     181            let index2 = '';
     182            if (i + 1 + 64 > 90) {
     183                index2 = String.fromCharCode(i + 1 + 70);
     184            } else {
     185                index2 = String.fromCharCode(i + 1 + 64);
     186            }
     187            let itemRow2 =  document.querySelector('#rowCreature2');
     188            let itemD = document.querySelector('#creature' + index2);
     189            let itemP = document.querySelector('#p' + index2);
     190
     191            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) ||
     192                (e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) {
     193                type = 1;
     194                index = index2;
     195                indexL = index2;
     196                if (indexL.charCodeAt(0) > 90) {
     197                    indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
     198                }
     199            }
     200        }
     201
     202        if (this.state.choosed != ' ') {
     203            if (type == 0) {
     204                for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
     205                    let index2 = (i+1).toString();
     206                    let itemD =  document.querySelector('#field2-' + index2);
     207
     208                    if (e.target === itemD) {
     209                        let temp = this.state.choosed;
     210                        if (this.state.choosed.charCodeAt(0) > 90) {
     211                            temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     212                        }
     213
     214                        let index3 = this.props.selected2.indexOf(temp);
     215
     216                        if (index3 > -1) {
     217                            this.props.handleChangeSelected(2, index3, ' ');
     218                        }
     219                        this.props.handleChangeSelected(2, i, this.state.choosed);
     220                    }
     221
     222                }
     223
     224                this.setState({ choosed: ' ' }, function() {
     225                    console.log(this.state.choosed);
     226                });
     227            } else {
     228                if (isNaN(this.state.choosed)) {
     229
     230                    let temp = this.state.choosed;
     231                    if (temp.charCodeAt(0) > 90) {
     232                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     233                    }
     234
     235                    if (indexL == temp) {
     236                        this.setState({ choosed: ' ' }, function() {
     237                            console.log(this.state.choosed);
     238                        });
     239                    } else {
     240                        let index1 = this.props.selected2.indexOf(indexL);
     241                        let index2 = this.props.selected2.indexOf(temp);
     242
     243                        if (index1 > -1 && index2 > -1) {
     244                            this.props.handleChangeSelected(2, index1, this.state.choosed);
     245                            this.props.handleChangeSelected(2, index2, index);
     246                            this.setState({ choosed: ' ' }, function() {
     247                                console.log(this.state.choosed);
     248                            });
     249                        } else if (index1 > -1 && index2 <= -1) {
     250                            this.props.handleChangeSelected(2, index1, this.state.choosed);
     251                            this.setState({ choosed: ' ' }, function() {
     252                                console.log(this.state.choosed);
     253                            });
     254                        } else if (index1 <= -1 && index2 > -1) {
     255                            this.props.handleChangeSelected(2, index2, indexL);
     256                            this.setState({ choosed: ' ' }, function() {
     257                                console.log(this.state.choosed);
     258                            });
     259                        } else {
     260                            this.setState({ choosed: index }, function() {
     261                                console.log(this.state.choosed);
     262                            });
     263                        }
     264                    }
     265                } else {
     266                    this.setState({ choosed: index }, function() {
     267                        console.log(this.state.choosed);
     268                    });
     269                }
     270            }
     271           
     272        } else {
     273            this.setState({ choosed: index }, function() {
     274                console.log(this.state.choosed);
     275            });
    271276        }
    272277    }
    … …  
    285290                                <div id={'creature' + this.props.selected1[i]}
    286291                                    className='creature1'
    287                                     onMouseDown={this.select}
     292                                    onMouseDown={this.selectNumber}
    288293                                    style={styles.creatureBench1}>
    289294                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    302307                                <div id={'creature' + this.props.selected1[i]}
    303308                                    className='creature1'
    304                                     onMouseDown={this.select}
     309                                    onMouseDown={this.selectNumber}
    305310                                    style={styles.creatureBench}>
    306311                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    316321                    <div id='cellnull' className='cell' style={styles.cell}>
    317322                        <div id={'field1-'+(i+1).toString()}
    318                             onMouseDown = {this.select}
     323                            onMouseDown = {this.selectNumber}
    319324                            className='field'
    320325                            style={styles.middleField}>
    … …  
    352357                                <div id={'creature' + value}
    353358                                    className='creature2'
    354                                     onMouseDown={this.select}
     359                                    onMouseDown={this.selectLetter}
    355360                                    style={styles.creatureBench2}>
    356361                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    369374                                <div id={'creature' + value}
    370375                                    className='creature2'
    371                                     onMouseDown={this.select}
     376                                    onMouseDown={this.selectLetter}
    372377                                    style={styles.creatureBench}>
    373378                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    383388                    <div id='cellnull' className='cell' style={styles.cell}>
    384389                        <div id={'field2-'+(i+1).toString()}
    385                             onMouseDown = {this.select}
     390                            onMouseDown = {this.selectLetter}
    386391                            className='field'
    387392                            style={styles.middleField}>
    … …  
    416421                            <div id={'creature' + idtext}
    417422                                className='creature2'
    418                                 onMouseDown={this.select}
     423                                onMouseDown={this.selectLetter}
    419424                                style={styles.creatureBench2}>
    420425                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    429434                            <div id={'creature' + idtext}
    430435                                className='creature2'
    431                                 onMouseDown={this.select}
     436                                onMouseDown={this.selectLetter}
    432437                                style={styles.creatureBench}>
    433438                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    460465                </h2>
    461466
    462                 <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
    463                     <div id='rowCreature1' onMouseDown = {this.select}>
    464                         <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
     467                <div key='rowsFields' className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
     468                    <div id='rowCreature1' onMouseDown = {this.selectNumber}>
     469                        <div id='rowField1' className='rowField' onMouseDown = {this.selectNumber} style={styles.row}>
    465470                            {this.createSecondRow()}
    466471                        </div>
    467472                    </div>
    468                     <div id='rowCreature2'>
    469                         <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
     473                    <div id='rowCreature2' onMouseDown = {this.selectLetter}>
     474                        <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
    470475                            {this.createThirdRow()}
    471476                        </div>
    472                         <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
     477                        <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
    473478                            {this.createFourthRow()}
    474479                        </div>
Note: See TracChangeset for help on using the changeset viewer.