ショーモナイノ/ ソースコード(クライアントサイド)

//window.focus();

const socket = io();
const canvas2d = $('#canvas-2d')[0];
const context = canvas2d.getContext('2d');
const canvas3d = $('#canvas-3d')[0];
//const playerImage = $("#player-image")[0];
const canvasVic = $('#canvas-vic')[0];
const contextVic = canvasVic.getContext('2d');
const canvasMob = $('#canvas-mob')[0];
const contextMob = canvasMob.getContext('2d');

window.onload=function(){
    console.log('------window.onload-------');

}

var mDeviceType = 'PC'; //0:PC, 1:Mobile
function mGetDeviceType() {
    console.log('Device:'+navigator.userAgent);
    if (navigator.userAgent.match(/iPhone|iPad|Android/)) { ///iPhone|Android.+Mobile/
        mDeviceType = 'Mobile';
        //$("#canvas-mob").show();
      //return true;
    } else {
      //return false;
      //$("#canvas-mob").hide();
    }
    //mDeviceType = navigator.userAgent;
}

mGetDeviceType();
console.log('mDeviceType:'+mDeviceType);



const FIELD_SC = 32;
const FIELD_WIDTH = 1000*FIELD_SC, FIELD_HEIGHT = 1000*FIELD_SC;
var mFieldGridSize = 250;

const renderer = new THREE.WebGLRenderer({canvas: canvas3d});
renderer.setClearColor('grey');//'skyblue'
renderer.shadowMap.enabled = true;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 90, 2, 0.1, FIELD_WIDTH*2 );

const textureLoader = new THREE.TextureLoader();

// Floor
var mSc = 2;
const groundTexture = textureLoader.load('/static/image/p0305_m.jpeg');
const groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
const floorGeometry = new THREE.PlaneGeometry(FIELD_WIDTH*2, FIELD_HEIGHT*2, 1, 1);
const floorMaterial = new THREE.MeshLambertMaterial({color : 'green'});//'lawngreen'
const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial); //groundMaterial
floorMesh.position.set(FIELD_WIDTH/2, 0, FIELD_HEIGHT/2);
floorMesh.receiveShadow = true;
floorMesh.rotation.x = - Math.PI / 2; 
scene.add(floorMesh);

// Side 
const sideGeometry = new THREE.CylinderGeometry(FIELD_WIDTH,FIELD_WIDTH,FIELD_WIDTH*2,50,50,true); //(FIELD_WIDTH,FIELD_WIDTH,FIELD_WIDTH,50);
//const sideTexture = new THREE.Texture(playerImage);
const sideTexture = textureLoader.load('/static/image/ELFADSC08963_TP_V.jpg'); //skyimage1.png, skyimage1.png
//sideTexture.needsUpdate = true;
const sideMaterial = new THREE.MeshLambertMaterial({map: sideTexture, side: THREE.DoubleSide});//'lawngreen'
// const sideMaterial = new THREE.MeshBasicMaterial({
//     map: texture, // テクスチャーを指定
//     color: 0x007eff, // 色
//     transparent: true, // 透明の表示許可
//     blending: THREE.AdditiveBlending, // ブレンドモード
//     side: THREE.DoubleSide, // 表裏の表示設定
//     depthWrite: false // デプスバッファへの書き込み可否
//   });
const sideMesh = new THREE.Mesh(sideGeometry, sideMaterial);
sideMesh.position.set(FIELD_WIDTH/2, FIELD_WIDTH-100, FIELD_HEIGHT/2);
sideMesh.receiveShadow = true;
//sideMesh.rotation.x = - Math.PI / 2; 
scene.add(sideMesh);


// Grid
// for(var i=0;i<FIELD_WIDTH/mFieldGridSize/2;i++){
//     for(var j=0;j<FIELD_WIDTH/mFieldGridSize/2;j++){
//     var floorGeometry1 = new THREE.PlaneGeometry(mFieldGridSize, mFieldGridSize, 1, 1);
//     var floorMaterial1 = new THREE.MeshLambertMaterial({color : 'lawngreen'});//'lawngreen'
//     var floorMesh1 = new THREE.Mesh(floorGeometry1, floorMaterial1);
//     floorMesh1.position.set(mFieldGridSize*i*2+mFieldGridSize/2, 1, mFieldGridSize*j*2+mFieldGridSize/2);
//     floorMesh1.receiveShadow = true;
//     floorMesh1.rotation.x = - Math.PI / 2; 
//     scene.add(floorMesh1);
//     }
// } 

var ng_ = 5;
for(var i=0;i<ng_;i++){
    for(var j=0;j<ng_;j++){
        var s_ = FIELD_WIDTH/ng_;
        var floorGeometry1 = new THREE.PlaneGeometry(s_, s_, 1, 1);
        var floorMaterial1 = new THREE.MeshLambertMaterial({color : 'lawngreen'});//'lawngreen'
        var floorMesh1 = new THREE.Mesh(floorGeometry1, groundMaterial);
        floorMesh1.position.set(s_*i+s_/2, 3, s_*j+s_/2);
        floorMesh1.receiveShadow = true;
        floorMesh1.rotation.x = - Math.PI / 2; 
        scene.add(floorMesh1);
    }
} 


camera.position.set(1000*mSc, 300, 1000*mSc);
//camera.lookAt(floorMesh.position);

// Materials
const bulletMaterial = new THREE.MeshLambertMaterial( { color: 'gold' } );

const wallTexture = textureLoader.load('/static/image/picture_pc_74734f96022aee0a492c0d64925a0d1c.jpg'); //KAZTDSCF2532_TP_V.jpg
const wallMaterial = new THREE.MeshLambertMaterial( { map: wallTexture } );
const wallMaterial_t = new THREE.MeshLambertMaterial( { map: wallTexture, opacity: 0.5, transparent: true } );
const rockTexture = textureLoader.load('/static/image/stone_00007.jpg'); 
const rockMaterial = new THREE.MeshLambertMaterial( { map: rockTexture } );

const playerMaterial1 = new THREE.MeshLambertMaterial( { color: 'blue' } );
const playerMaterial2 = new THREE.MeshLambertMaterial( { color: 'red' } );
const playerMaterial3 = new THREE.MeshLambertMaterial( { color: 'yellow' }); //, opacity: 0.5, transparent: true } );
const playerMaterial3b = new THREE.MeshLambertMaterial( { color: 'grey' } );
const playerMaterialg = new THREE.MeshLambertMaterial( { color: 'black' } );
const playerMaterialf = new THREE.MeshBasicMaterial( { color: 'orange' } );
const faceTexture1 = textureLoader.load('/static/image/face20200525_001.png'); 
const faceMaterial1 = new THREE.MeshLambertMaterial( { map: faceTexture1, side: THREE.DoubleSide } );
const botTexture1 = textureLoader.load('/static/image/e0137995_18414394.jpg'); 
const botMaterial1 = new THREE.MeshLambertMaterial( { map: botTexture1 } );
const playerTexture1 = textureLoader.load('/static/image/skin-2933371_960_720.jpg'); 
const playerMaterialtx1 = new THREE.MeshLambertMaterial( { map: playerTexture1 } );
const paraTexture1 = textureLoader.load('/static/image/tatami_1.jpg'); 
const paraMaterial1 = new THREE.MeshLambertMaterial( { map: paraTexture1, side: THREE.DoubleSide } );

const textMaterial = new THREE.MeshBasicMaterial({ color: 0xf39800, side: THREE.DoubleSide });
const nicknameMaterial = new THREE.MeshBasicMaterial({ color: 'black', side: THREE.DoubleSide });
const bandageMaterial = new THREE.MeshLambertMaterial( { color: 'white' } );
const bandageMaterial2 = new THREE.MeshLambertMaterial( { color: 'red' } );
const potionMaterial = new THREE.MeshLambertMaterial( { color: 'blue' } );
const stormMaterial = new THREE.MeshLambertMaterial( { color: 'red', side: THREE.DoubleSide,opacity: 0.3, transparent: true } );

// Light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(FIELD_WIDTH/2, FIELD_WIDTH, FIELD_HEIGHT/2);//(-100, 300, -100)
light.castShadow = false; //true;
light.shadow.camera.left = -2000;
light.shadow.camera.right = 2000;
light.shadow.camera.top = 2000;
light.shadow.camera.bottom = -2000;
light.shadow.camera.far = 2000;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add(light);
const ambient = new THREE.AmbientLight(0x808080);
scene.add(ambient);

const loader = new THREE.FontLoader();
let font;
loader.load('/static/helvetiker_bold.typeface.json', function(font_) {
    font = font_;
});
        

// Helpers
// scene.add(new THREE.CameraHelper(light.shadow.camera));
// scene.add(new THREE.GridHelper(200, 50));
// scene.add(new THREE.AxisHelper(2000));
// scene.add(new THREE.DirectionalLightHelper(light, 20));

// Sound
//var music = new Audio('mymusic.mp3');
var ClickSound = new Audio("/static/sound/mBeam.wav");
var ShotSound1 = new Audio("/static/sound/sniperrifle--firing1.mp3");
var ShotSoundOthers1 =  ShotSound1.cloneNode();// new Audio("/static/sound/shotgun-firing1.mp3");
var ShotSound2 = new Audio("/static/sound/shotgun-firing1.mp3");
var ShotSound3 = new Audio("/static/sound/largerifle-firing1.mp3");
var EmptySound = new Audio("/static/sound/handgun-out-bullets1.mp3");　
var SetGunSound = new Audio("/static/sound/set-gun.mp3");　
var ReloadSound1 = new Audio("/static/sound/machinegun-slide1.mp3");
var ReloadSound2 = new Audio("/static/sound/shotgun-pumpaction1.mp3");
var ReloadSound3 = new Audio("/static/sound/largerifle-boltaction1.mp3");
var GiveDamageSound = new Audio("/static/sound/sword-clash4.mp3");//shot-struck1
var RecieveDamageSound = new Audio("/static/sound/stab.mp3");
var RemoveSound = new Audio("/static/sound/flee1.mp3");
var WallSetSound = new Audio("/static/sound/set-wall.mp3");
var WallDamageSound = new Audio("/static/sound/metal1.mp3"); //stab-wall
var UsedBandageSound = new Audio("/static/sound/recovery1.mp3");
var CannotUseBandageSound = new Audio("/static/sound/notcorrect1.mp3");
var ChurchSound = new Audio("/static/sound/church.mp3");
var GetItemSound = new Audio("/static/sound/puyon.mp3");

function mSoundEffect(s_, vol_)
{
    s_.pause();
    s_.currentTime = 0;
    s_.volume = vol_;
    s_.play();
}



//Pointer lock
function ElementRequestPointerLock(element){
    var list = [
        "requestPointerLock",
        "webkitRequestPointerLock",
        "mozRequestPointerLock"
    ];
    var i;
    var num = list.length;
    for(i=0;i < num;i++){
        if(element[list[i]]){
            element[list[i]]();
            return true;
        }
    }
    return false;
}

function DocumentExitPointerLock(document_obj){
    var list = [
        "exitPointerLock",
        "webkitExitPointerLock",
        "mozExitPointerLock"
    ];
    var i;
    var num = list.length;
    for(i=0;i < num;i++){
        if(document_obj[list[i]]){
            document_obj[list[i]]();
            return true;
        }
    }
    return false;
}


function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();


function mShowHelp(){
    $("#help-screen").toggle();
}
$("#help-screen").hide();

//Stats();
const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);


var mID = '';
var mWeapon = 1;
var mIsZoom = 0;
var mMode = 1;
let movement = {};
$(document).on('keydown keyup', (event) => {
    const KeyToCommand = {
        'ArrowUp': 'forward',
        'ArrowDown': 'back',
        'ArrowLeft': 'left',
        'ArrowRight': 'right',
        'w': 'forward',
        's': 'back',
        'a': 'sideleft',
        'd': 'sideright',
    };
    const command = KeyToCommand[event.key];
    if(command){
        if(event.type === 'keydown'){
            movement[command] = true;
        }else{ /* keyup */
            movement[command] = false;
        }
        socket.emit('movement', movement);
    }
    // if(event.key === ' ' && event.type === 'keydown'){
    //     socket.emit('shoot');        
    //     mSoundEffect(ShotSound1,1.0);
    // }
    if(event.key === 'q' && event.type === 'keydown'){
        socket.emit('buildWall');        
        //mSoundEffect(WallSetSound,1.0);
        mMode = 2;
    }
    if(event.key === 'z' && event.type === 'keydown'){
        socket.emit('buildFloor');        
        //mSoundEffect(WallSetSound,1.0);
        mMode = 2;
    }
    if(event.key === 'e' && event.type === 'keydown'){
        socket.emit('buildSlope');        
        //mSoundEffect(WallSetSound,1.0);
        mMode = 2;
    }
    if(event.key === 'y' && event.type === 'keydown'){
        socket.emit('jumper');        
        //mSoundEffect(WallSetSound,1.0);
        //mMode = 2;
    }
    if(event.key === 'Control'  && event.type === 'keydown'){
        socket.emit('squat');        
    }
    if(event.key === ' '  && event.type === 'keydown'){
        socket.emit('jump');        
    }
    if(event.key === '1'  && event.type === 'keydown'){
        socket.emit('weaponChange',1);  
        mWeapon = 1; 
        mSoundEffect(SetGunSound,1.0);
        mMode = 1;
    }
    if(event.key === '2'  && event.type === 'keydown'){
        socket.emit('weaponChange',2);     
        mWeapon = 2;   
        mSoundEffect(SetGunSound,1.0);
        mMode = 1;
    }
    if(event.key === '3'  && event.type === 'keydown'){
        socket.emit('weaponChange',3);       
        mWeapon = 3; 
        mSoundEffect(SetGunSound,1.0);
        mMode = 1;
    }
    if(event.key === '4'  && event.type === 'keydown'){
        socket.emit('weaponChange',4);       
        mWeapon = 4; 
        mMode = 1;
    }
    if(event.key === '5'  && event.type === 'keydown'){
        socket.emit('weaponChange',5);       
        mWeapon = 5;
        mMode = 1; 
    }
    if(event.key === 'r'  && event.type === 'keydown'){
        socket.emit('reload');
        if(mWeapon==1){
            mSoundEffect(ReloadSound1,1.0);
        }
        if(mWeapon==2){
            mSoundEffect(ReloadSound2,1.0);
        }
        if(mWeapon==3){
            mSoundEffect(ReloadSound3,1.0);
        }
    }
    if(event.key === 'f'  && event.type === 'keydown'){
        socket.emit('modeChanged', 1);
        mMode = 1;       
    }
    if(event.key === 'b'  && event.type === 'keydown'){
        socket.emit('emote');       
    }


    if(event.key === 'p'  && event.type === 'keydown'){
        ElementRequestPointerLock(canvas2d);
    }
    if(event.key === 'h'  && event.type === 'keydown'){
        mShowHelp();
    }

});

//--- Mouse event ---//
var mShootCount = 0;
canvas2d.addEventListener('mousedown', function(e)
{
    if(mMode==1){
        if(e.button==0){
            if(mWeapon<=3){
                movement['shoot'] = true;
                socket.emit('movement', movement);    
            }
            else if(mWeapon==4){
                socket.emit('useBandage', 1);
            }
            else if(mWeapon==5){
                socket.emit('usePotion', 1);
            }
        }//    

        if(e.button==2){
            camera.zoom = 2;
            if(mWeapon ==3){
                camera.zoom = 10;
            }
            camera.updateProjectionMatrix();
            //mSoundEffect(ShotSound2,1.0);
        }    
    }//
    else if(mMode==2){
        socket.emit('doBuild');   
        mSoundEffect(WallSetSound,1.0); 
        //mMode = 1;
    }


});

canvas2d.addEventListener('mouseup', function(e)
{
    if(e.button==0){
        movement['shoot'] = false;
        socket.emit('movement', movement);
    }

    if(e.button==2){
        camera.zoom = 1;
        camera.updateProjectionMatrix();
    }

});

var mLastMouseX = 0;
var mLastMouseY = 0;
canvas2d.addEventListener('mousemove', function(e)
{
    // use pointer lock
    var ang_ = (e.movementX) / 250 * 3.1415/2;
    socket.emit('mousemoveX', ang_);

    var ang2_ = (e.movementY) / 500 * 3.1415/2;
    socket.emit('mousemoveY', ang2_);

    //console.log('ang_:'+ang_+' movement:'+e.movementX);  
});

canvas2d.addEventListener('wheel', function(e)
{
    var v_ = e.wheelDelta;
    if(v_<0){ //up
        mWeapon += 1;
        //mWeapon = Math.min(5,mWeapon);
        if(mWeapon>=6){
            mWeapon = 1;
        }
    }
    if(v_>0){ //down
        mWeapon -= 1;
        //mWeapon = Math.max(1,mWeapon);
        if(mWeapon<=0){
            mWeapon = 5;
        }
    }
    console.log('mWeapon:'+mWeapon);  
    socket.emit('weaponChange',mWeapon);       
    //console.log('wheel:'+v_);  
});


//--- Touch event ---//
// Mobile gui
var mBtnRadius = canvasMob.height / 10;
var mBtnUp_Px = canvasMob.width / 5;
var mBtnUp_Py = canvasMob.height / 2;
var mBtnDown_Px = mBtnUp_Px;
var mBtnDown_Py = mBtnUp_Py + mBtnRadius * 3;
var mBtnRight_Px = mBtnUp_Px + mBtnRadius * 1.5;
var mBtnRight_Py = mBtnUp_Py + mBtnRadius * 1.5;
var mBtnLeft_Px = mBtnUp_Px - mBtnRadius * 1.5;
var mBtnLeft_Py = mBtnUp_Py + mBtnRadius * 1.5;

var mBtnAngUp_Px = canvasMob.width / 5 * 4;
var mBtnAngUp_Py = canvasMob.height / 3;
var mBtnAngDown_Px = mBtnAngUp_Px;
var mBtnAngDown_Py = mBtnAngUp_Py + mBtnRadius * 3;
var mBtnAngRight_Px = mBtnAngUp_Px + mBtnRadius * 1.5;
var mBtnAngRight_Py = mBtnAngUp_Py + mBtnRadius * 1.5;
var mBtnAngLeft_Px = mBtnAngUp_Px - mBtnRadius * 1.5;
var mBtnAngLeft_Py = mBtnAngUp_Py + mBtnRadius * 1.5;

var mBtnShoot_Px = canvasMob.width - mBtnRadius*1.5;
var mBtnShoot_Py = canvasMob.height / 4;
var mBtnReload_Px = mBtnShoot_Px;
var mBtnReload_Py = mBtnShoot_Py + mBtnRadius*2.5;
var mBtnJump_Px = mBtnShoot_Px - mBtnRadius*2.5;
var mBtnJump_Py = mBtnShoot_Py;
var mBtnSquat_Px = mBtnJump_Px;
var mBtnSquat_Py = mBtnReload_Py;


function mCreateMobileGUI(){

    var W_ = canvasMob.width;
    var H_ = canvasMob.height;
    var x_,y_,w_,w2_,h_;

    contextMob.clearRect(0, 0, W_, H_);
    
    var lw_ = canvasMob.height / 100;
    contextMob.globalAlpha = 0.5;
    contextMob.strokeStyle = "blue";
    contextMob.lineWidth = lw_;

    contextMob.beginPath();
    contextMob.arc(mBtnUp_Px, mBtnUp_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.beginPath();
    contextMob.arc(mBtnDown_Px, mBtnDown_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.beginPath();
    contextMob.arc(mBtnRight_Px, mBtnRight_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.beginPath();
    contextMob.arc(mBtnLeft_Px, mBtnLeft_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.strokeStyle = "red";
    contextMob.beginPath();
    contextMob.arc(mBtnShoot_Px, mBtnShoot_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.beginPath();
    contextMob.arc(mBtnReload_Px, mBtnReload_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.strokeStyle = "green";
    contextMob.beginPath();
    contextMob.arc(mBtnJump_Px, mBtnJump_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.beginPath();
    contextMob.arc(mBtnSquat_Px, mBtnSquat_Py, mBtnRadius, 0, Math.PI*2, 0);
    contextMob.stroke();

    contextMob.globalAlpha = 1.0;
}

function mDis(x1,y1,x2,y2){
    return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );
}


const touches = {};
$('#canvas-mob').on('touchstart', (event)=>{
    // socket.emit('shoot');
    // movement.forward = true;
    // socket.emit('movement', movement);
    Array.from(event.changedTouches).forEach((touch) => {
        touches[touch.identifier] = {pageX: touch.pageX, pageY: touch.pageY};

        var x_ = touch.pageX;
        var y_ = touch.pageY;
        var d_ = mDis(x_,y_,mBtnUp_Px,mBtnUp_Py);
        if( d_ <= mBtnRadius ){
            movement.forward = true;
            socket.emit('movement', movement);
        }

        d_ = mDis(x_,y_,mBtnDown_Px,mBtnDown_Py);
        if( d_ <= mBtnRadius ){
            movement.back = true;
            socket.emit('movement', movement);
        }

        d_ = mDis(x_,y_,mBtnRight_Px,mBtnRight_Py);
        if( d_ <= mBtnRadius ){
            movement.sideright = true;
            socket.emit('movement', movement);
        }

        d_ = mDis(x_,y_,mBtnLeft_Px,mBtnLeft_Py);
        if( d_ <= mBtnRadius ){
            movement.sideleft = true;
            socket.emit('movement', movement);
        }

        d_ = mDis(x_,y_,mBtnShoot_Px,mBtnShoot_Py);
        if( d_ <= mBtnRadius ){
            movement.shoot = true;
            socket.emit('movement', movement);
            ShotSound1.load();
        }

        d_ = mDis(x_,y_,mBtnReload_Px,mBtnReload_Py);
        if( d_ <= mBtnRadius ){
            socket.emit('reload');
        }

        d_ = mDis(x_,y_,mBtnJump_Px,mBtnJump_Py);
        if( d_ <= mBtnRadius ){
            socket.emit('jump');
        }

        d_ = mDis(x_,y_,mBtnSquat_Px,mBtnSquat_Py);
        if( d_ <= mBtnRadius ){
            socket.emit('squat');
        }

    });
    event.preventDefault();
});
$('#canvas-mob').on('touchmove', (event)=>{
    var W_ = canvas2d.width;
    var H_ = canvas2d.height;
    movement.right = false;
    movement.left = false;
    Array.from(event.touches).forEach((touch) => {
        const startTouch = touches[touch.identifier];

        if( (touch.pageX>W_/2) && (startTouch.pageX>W_/2)  ){
            movement.right |= touch.pageX - startTouch.pageX > 30;
            movement.left |= touch.pageX - startTouch.pageX < -30;    

            movement.angdown |= touch.pageY - startTouch.pageY > 30;
            movement.angup |= touch.pageY - startTouch.pageY < -30;
        }
    });
    socket.emit('movement', movement);
    event.preventDefault();
});
$('#canvas-mob').on('touchend', (event)=>{
    Array.from(event.changedTouches).forEach((touch) => {
        delete touches[touch.identifier];
    });
    if(Object.keys(touches).length === 0){
        movement = {};
        socket.emit('movement', movement);
    }
    event.preventDefault();
});


function gameStart(){
    const nickname = $("#nickname").val();
    socket.emit('game-start', {nickname: nickname});
    $("#start-screen").hide();
    $("#canvas-vic").hide();
    $("#help-screen").hide();

    if(mDeviceType=='Mobile'){
        mCreateMobileGUI();
        $("#canvas-mob").show();
        mSoundEffect(ShotSound1,vol_);
    }

    ElementRequestPointerLock(canvas2d);
}
$("#start-button").on('click', gameStart);



var mFontSize1 = Math.floor(canvas2d.width/100);
var mFontSize2 = mFontSize1*2;

var mDisplayDamage = 0;
const Meshes = [];
socket.on('state', (players, bullets, walls, slopes, rocks, bandages, potions, mStorm) => {

    stats.update();

    Object.values(Meshes).forEach((mesh) => {mesh.used = false;});
    
    var W_ = canvas2d.width;
    var H_ = canvas2d.height;
    context.clearRect(-W_/2, -H_/2, W_*2, H_*2);

    //Device
    context.font = mFontSize1+'px Bold Arial'; //'20px Bold Arial';
    context.fillStyle="black";
    context.fillText( mDeviceType+':'+screen.availWidth, W_/4, mFontSize1*1.5);
 

    var p_ = 0;
    // Players
    Object.values(players).forEach((player) => {
        let playerMesh = Meshes[player.id];
        if(!playerMesh){
            //console.log('create player mesh');
            playerMesh = new THREE.Group();
    		playerMesh.castShadow = true;
    		Meshes[player.id] = playerMesh;
    		scene.add(playerMesh);
        }
        playerMesh.used = true;
        var pz = player.tall;
        if(player.isSquat==1){
            pz = player.tall / 2;
        }
        var px = player.x;// + player.width/2;
        var py = player.z + pz/2*0;
        var pz = player.y;// + player.height/2;
        playerMesh.position.set(px, py, pz);
        playerMesh.rotation.y = - player.angle;
        
        var coA_ =-3.1415/180.0*10.0;
        var pL_ = player.tall/3;
        var pW_ = player.tall/2;
        var pW2_ = pL_/2;
        var A_ = 3.1415/10;
        var pA_ = A_;
        var ofz_ = -pW_/2;// * 2;
        var pa2_ = player.angle2;
        var ofx_ = 200 * Math.sin(-pa2_) * 0;
        var sq_ = player.isSquat;
        if(player.isMoving==1){
            pA_ = A_ * Math.sin( player.timeCount/10.0*3.1415*2.0);
        //     //console.log('timeCount:'+player.timeCount);
        }

        if(player.socketId !== socket.id){
            ofx_ = 0;
            ofz_ = 0;
        }

        let mesh1 = playerMesh.getObjectByName('bodyL1');
        if(mesh1){
            playerMesh.remove(mesh1);
            mesh1.geometry.dispose();
            mesh1 = null;
        }
        if(player.isBot==0){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW2_), playerMaterialtx1);//playerMaterial1);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW2_), botMaterial1);
        }
        mesh.position.set(ofx_,pL_/2,pW2_/2+ofz_);
        mesh.rotation.z = - pA_;
        
        mesh.castShadow = true;
        mesh.name = 'bodyL1';
        playerMesh.add(mesh);

        let mesh2 = playerMesh.getObjectByName('bodyL2');
        if(mesh2){
            playerMesh.remove(mesh2);
            mesh2.geometry.dispose();
            mesh2 = null;
        }
        if(player.isBot==0){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW2_), playerMaterialtx1);//playerMaterial1);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW2_), botMaterial1);
        }
        mesh.position.set(ofx_,pL_/2,-pW2_/2+ofz_);
        mesh.rotation.z =  pA_;
        mesh.castShadow = true;
        mesh.name = 'bodyL2';
        playerMesh.add(mesh);
        
        if(!playerMesh.getObjectByName('body')){
            //console.log('create body mesh');
    		// mesh = new THREE.Mesh(new THREE.BoxGeometry(player.width, pz, player.height), playerMaterial);
    		// mesh.castShadow = true;
    		// mesh.name = 'body';
            // playerMesh.add(mesh);
        }

        let meshB = playerMesh.getObjectByName('body');
        if(meshB){
            playerMesh.remove(meshB);
            meshB.geometry.dispose();
            meshB = null;
        }
        if(player.isBot==0){
            //mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW_), playerMaterial2);
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW_), playerMaterialtx1);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pW_), botMaterial1);
        }
        mesh.position.set(ofx_,pL_/2+pL_-pL_/2*sq_,0+ofz_);
        mesh.rotation.y = -3.1415/4;
        mesh.rotation.z = -3.1415/3*sq_;
        mesh.castShadow = true;
        mesh.name = 'body';
        playerMesh.add(mesh);

        let meshA1 = playerMesh.getObjectByName('bodyA1');
        if(meshA1){
            playerMesh.remove(meshA1);
            meshA1.geometry.dispose();
            meshA1 = null;
        }
        if(player.isBot==0){
            //mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), playerMaterial2);
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), playerMaterialtx1);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), botMaterial1);
        }        
        mesh.position.set(ofx_,pL_*2-pL_/4-pL_*sq_,pW_/2+ofz_);
        mesh.rotation.y = 0;
        mesh.rotation.z = -player.angle2;
        mesh.castShadow = true;
        mesh.name = 'bodyA1';
        playerMesh.add(mesh);

        let meshA2 = playerMesh.getObjectByName('bodyA2');
        if(meshA2){
            playerMesh.remove(meshA2);
            meshA2.geometry.dispose();
            meshA2 = null;
        }
        if(player.isBot==0){
            //mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), playerMaterial2);
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), playerMaterialtx1);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_/2, pL_/2), botMaterial1);
        }
        mesh.position.set(ofx_+pL_/2,pL_*2-pL_/4-pL_*sq_, -pW_/2+pL_/4+ofz_);
        mesh.rotation.y = -3.1415/4;;
        mesh.castShadow = true;
        mesh.name = 'bodyA2';
        playerMesh.add(mesh);

        let meshH = playerMesh.getObjectByName('bodyH');
        if(meshH){
            playerMesh.remove(meshH);
            meshH.geometry.dispose();
            meshH = null;
        }
        if(player.isBot==0){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pL_), playerMaterial3);
        }
        else{
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_, pL_, pL_), playerMaterial3b);
        }
        mesh.position.set(ofx_+pL_/2*sq_, pL_/2+pL_*2 -pL_*sq_ ,+ofz_);
        mesh.rotation.y = 0;
        if(player.isEmote == 1){
            mesh.rotation.y = 3.1415 - coA_;
        }
        mesh.castShadow = true;
        mesh.name = 'bodyH';
        playerMesh.add(mesh);

        if(player.isBot==0){

            let meshFace = playerMesh.getObjectByName('bodyFace');
            if(meshFace){
                playerMesh.remove(meshFace);
                meshFace.geometry.dispose();
                meshFace = null;
            }
            meshFace = new THREE.Mesh(new THREE.PlaneGeometry(pL_, pL_, 1, 1), faceMaterial1); //playerMaterial3); //
            
            meshFace.position.set(ofx_+pL_/2*sq_+pL_/2, pL_/2+pL_*2 -pL_*sq_ ,+ofz_);
            meshFace.rotation.y = 3.1415/2;
            if(player.isEmote == 1){
                meshFace.position.set(ofx_+pL_/2*sq_+pL_/2*1.01*Math.cos(3.1415+coA_), pL_/2+pL_*2 -pL_*sq_ ,+ofz_+pL_/2*1.01*Math.sin(-coA_));
                meshFace.rotation.y = 3.1415/2 - coA_;
            } 
            //meshFace.castShadow = true;
            meshFace.name = 'bodyFace';
            playerMesh.add(meshFace);
        }


        let meshG = playerMesh.getObjectByName('bodyG');
        if(meshG){
            playerMesh.remove(meshG);
            meshG.geometry.dispose();
            meshG = null;
        }
        var gL_ = pL_*2;
        var gW_ = pL_/2;
        if(player.weapon==2){
            gW_ = pL_/2*2;
        }
        else if(player.weapon==3){
            gL_ = pL_*4;
        }
        
        if(player.weapon<=3){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(gL_, pL_/2, gW_), playerMaterialg);
            mesh.position.set(ofx_+gL_/2*Math.cos(pa2_) ,pL_*2 -pL_*sq_ +gL_/2*Math.sin(-pa2_), pW_/2+ ofz_);
            mesh.rotation.y = 0;
            mesh.rotation.z = -pa2_;
            mesh.castShadow = true;
            mesh.name = 'bodyG';
            playerMesh.add(mesh);    
        }

        if((player.weapon==4) && (player.bandages>0) ){
            mesh = new THREE.Mesh(new THREE.CylinderGeometry(gW_,gW_,gL_,10,10,false), bandageMaterial); 
            mesh.position.set(ofx_+gL_/2*Math.cos(pa2_) ,pL_*2 -pL_*sq_ +gL_/2*Math.sin(-pa2_), pW_/2+ ofz_);
            mesh.rotation.y = 0;
            mesh.rotation.z = -pa2_;
            mesh.castShadow = true;
            mesh.name = 'bodyG';
            playerMesh.add(mesh);    
        }
        else if( (player.weapon==5) && (player.potions>0) ){
            mesh = new THREE.Mesh(new THREE.CylinderGeometry(gW_,gW_,gL_,10,10,false), potionMaterial); 
            mesh.position.set(ofx_+gL_/2*Math.cos(pa2_) ,pL_*2 -pL_*sq_ +gL_/2*Math.sin(-pa2_), pW_/2+ ofz_);
            mesh.rotation.y = 0;
            mesh.rotation.z = -pa2_;
            mesh.castShadow = true;
            mesh.name = 'bodyG';
            playerMesh.add(mesh);    
        }

        let meshF = playerMesh.getObjectByName('bodyF');
        if(meshF){
            playerMesh.remove(meshF);
            meshF.geometry.dispose();
            meshF = null;
        }
        if(player.isShoot == 1){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(2, gW_*3, gW_*3), playerMaterialf);
            mesh.position.set(ofx_+gL_*Math.cos(pa2_) ,pL_*2 -pL_*sq_ +gL_*Math.sin(-pa2_), pW_/2+ ofz_);
            mesh.rotation.y = 0;
            mesh.rotation.z = -pa2_;
            mesh.rotation.x = Math.random()* 3.1415 / 2;
            mesh.castShadow = true;
            mesh.name = 'bodyF';
            playerMesh.add(mesh);    
        }

        let meshP = playerMesh.getObjectByName('bodyP');
        if(meshP){
            playerMesh.remove(meshP);
            meshP.geometry.dispose();
            meshP = null;
        }
        if(player.mode==0){
            //mesh = new THREE.Mesh(new THREE.PlaneGeometry(pL_*2, pL_*8, 1,1), paraMaterial1);
            mesh = new THREE.Mesh(new THREE.BoxGeometry(pL_*2, pL_/4, pL_*8), paraMaterial1);
            mesh.position.set(ofx_, pL_*4, ofz_);
            //mesh.rotation.x = Math.PI/2;
            mesh.castShadow = true;
            mesh.name = 'bodyP';
            playerMesh.add(mesh);    
        }


        // buildTemp
        if(player.socketId === socket.id){
            if(player.buildTemp)
            { 
                let wallt = player.buildTemp;
                let walltMesh = Meshes[wallt.id];
                if(!walltMesh){
                    console.log('walltMesh');
                    walltMesh = new THREE.Mesh(new THREE.BoxGeometry(wallt.width, wallt.tall, wallt.height), wallMaterial_t);
                    var wx = wallt.x + wallt.width/2 -px*0;
                    var wy = wallt.z + wallt.tall/2 -py*0;
                    var wz = wallt.y + wallt.height/2 -pz*0;
                    if(player.buildType==2){
                        wx = wallt.x + mFieldGridSize/2;
                        wz = wallt.y + mFieldGridSize/2;
                        wy = wallt.z - wallt.tall;
                    }
                    walltMesh.position.set(wx, wy, wz);
                    
                    if(player.buildType==2){
                        walltMesh.rotation.y = wallt.angle;
                        walltMesh.rotation.z = wallt.angle2;
                        if((wallt.angle == 3.1415/2)||(wallt.angle == 3.1415/2*3) ){
                            walltMesh.rotation.z = -wallt.angle2;
                        }    
                    }
                    //walltMesh.castShadow = true;
                    //Meshes.push(walltMesh);
                    Meshes[wallt.id] = walltMesh;
                    scene.add(walltMesh);
                }
                if(player.mode == 2){
                    walltMesh.used = true;
                    console.log('walltMesh used');
                }
                
            }
        }

        
        if(font){
            if(!playerMesh.getObjectByName('nickname'))
            {
                //console.log('create nickname mesh');
                if(player.socketId !== socket.id){
                    let meshN = playerMesh.getObjectByName('nickname');

                    if(!meshN){
                        meshN = new THREE.Mesh(
                            new THREE.TextGeometry(player.nickname,
                                {font: font, size: 10, height: 1}),
                                nicknameMaterial,
                        );
                        meshN.name = 'nickname';
                        playerMesh.add(meshN);    
                    }
                    meshN.position.set(0, player.tall+20, 0);
                    meshN.rotation.y = -Math.PI/2;
                }
            }
            {
                // if(player.socketId !== socket.id)
                // {
                //     let mesh = playerMesh.getObjectByName('health');

                //     if(mesh && mesh.health !== player.health){
                //         playerMesh.remove(mesh);
                //         mesh.geometry.dispose();
                //         mesh = null;
                //     }
                //     if(!mesh){
                //         //console.log('create health mesh');
                //         mesh = new THREE.Mesh(
                //             new THREE.TextGeometry('*'.repeat(player.health),
                //                 {font: font, size: 10, height: 1}),
                //                 textMaterial,
                //         );
                //         mesh.name = 'health';
                //         mesh.health = player.health;
                //         playerMesh.add(mesh);
                //     }
                //     mesh.position.set(0, player.tall, 0);
                //     mesh.rotation.y = -Math.PI/2;
                // }//
            }
        }
        
        
        if(player.socketId === socket.id){
            // Your player
            var d_ = 120;//170;

            // Camera
			camera.position.set(
			    player.x - d_ * Math.cos(player.angle +coA_) * Math.cos(pa2_),
			    player.z + (player.tall -player.tall/2*sq_)*0.8 + d_*Math.sin(pa2_),
                player.y - d_ * Math.sin(player.angle+coA_) * Math.cos(pa2_) 
            );

            //camera.rotation.order = "XYZ";
            camera.rotation.order = "YXZ";
            camera.rotation.y = - player.angle - Math.PI/2;
            camera.rotation.x = -player.angle2;

            // Write to 2D canvas
            var x_,y_,w_,w2_,h_;
            
            // Scope
            if( (mWeapon==3) && (camera.zoom != 1) )
            {    
                context.strokeStyle="black";
                var r_ = W_/2*0.52;
                context.lineWidth = 1;
                context.beginPath();
                context.arc(W_/2, H_/2, r_, 0, Math.PI*2, false);
                context.closePath();
                context.stroke();

                r_ = W_/2*0.6;
                context.lineWidth = 50;
                context.beginPath();
                context.arc(W_/2, H_/2, r_, 0, Math.PI*2, false);
                context.closePath();
                context.stroke();
                
                context.lineWidth = 1;
                context.beginPath();
                context.moveTo(W_/2, H_/2-r_);
                context.lineTo(W_/2, H_/2+r_);
                context.closePath();
                context.stroke();
            }
            //else{
                var s_ = W_/30;
                context.strokeStyle="black";
                context.lineWidth = 2;
                context.beginPath();
                context.setLineDash([5,10]);
                context.moveTo(W_/2, H_/2-s_);
                context.lineTo(W_/2, H_/2+s_);
                context.closePath();
                context.stroke();
                context.beginPath();
                context.moveTo(W_/2-s_, H_/2);
                context.lineTo(W_/2+s_, H_/2);
                context.closePath();
                context.stroke();

                context.setLineDash([]);
            //}

            // Player angle
            x_ = canvas2d.width / 2;
            y_ = mFontSize2;
            context.font = mFontSize2 + 'px Bold Arial';
            context.fillStyle="black";
            context.fillText( Math.floor(player.angle/3.1415*180), x_, y_);

            y_ = mFontSize2*2;
            context.fillText( Math.floor(-player.angle2/3.1415*180), x_, y_);

            // life gauge
            context.strokeStyle = 'black';
            context.fillStyle='green'; 
            if(player.inStorm==1){
                context.fillStyle='red';
            }
            w_ = canvas2d.width / 4;
            w2_ = canvas2d.width / 4 * player.health / player.maxHealth;
            h_ = canvas2d.height / 20;
            x_ = canvas2d.width / 20;
            y_ = canvas2d.height - h_*2;
            //console.log('life:'+[x_,y_,w_,w2_,h_]);
            context.fillRect(x_,y_,w2_,h_);
            context.strokeRect(x_,y_,w_,h_);
            
            // potion gauge
            context.fillStyle='skyblue'; 
            w_ = canvas2d.width / 4;
            w2_ = canvas2d.width / 4 * player.shield / player.maxShield;
            h_ = canvas2d.height / 20;
            x_ = canvas2d.width / 20;
            y_ = canvas2d.height - h_*3;
            context.fillRect(x_,y_,w2_,h_);
            context.strokeRect(x_,y_,w_,h_);


            //weapons
            w_ = canvas2d.width / 5;
            w2_ = w_ / 5;
            h_ = canvas2d.height / 10;
            x_ = canvas2d.width / 4 * 3;
            y_ = canvas2d.height - h_*2;
            
            context.lineWidth = 10;
            for(var i=0;i<5;i++){
                context.strokeStyle = 'white';
                context.strokeRect(x_+w2_*i,y_,w2_,h_);
            }
            context.strokeStyle = 'red';
            context.strokeRect(x_+w2_*(player.weapon-1),y_,w2_,h_);

            context.font = mFontSize2+ 'px Bold Arial';
            context.fillStyle="black";
            context.fillText( 'AR', x_+w2_*0+10,y_+h_*0.7);
            context.fillText( 'SG', x_+w2_*1+10,y_+h_*0.7);
            context.fillText( 'SR', x_+w2_*2+10,y_+h_*0.7);
            context.fillText( 'B'+player.bandages, x_+w2_*3+10,y_+h_*0.7);
            context.fillText( 'P'+player.potions, x_+w2_*4+10,y_+h_*0.7);

            // give damage
            if(mDisplayDamage>0){
                x_ = W_/2;
                y_ = H_/2;
                var t_ = mDisplayDamage * 3;
                context.font = (mFontSize1*5)+'px Bold Arial';
                context.fillStyle="yellow";
                context.fillText( ' +'+player.giveDamage*1, x_+t_,y_-t_);        
            }


        }// your player

        // Player list
        if(1){
            var x_,y_,w_,w2_,h_;
            w_ = canvas2d.width / 8;
            h_ = canvas2d.height / 60;
            x_ = canvas2d.width / 50;
            y_ = 100 + h_*4*p_;

            context.lineWidth = 1;
            context.font = mFontSize1+'px Bold Arial';
            context.fillStyle="white";
            context.fillText(player.nickname, x_, y_-3);
            context.strokeStyle = 'black';

            context.fillStyle='skyblue';
            w2_ = w_ * player.shield / player.maxShield;
            context.fillRect(x_,y_,w2_,h_);
            context.strokeRect(x_,y_,w_,h_);
            context.fillStyle='green';
            if(player.inStorm==1){
                context.fillStyle='red';
            }
            y_ += h_; 
            w2_ = w_ * player.health / player.maxHealth;
            context.fillRect(x_,y_,w2_,h_);
            context.strokeRect(x_,y_,w_,h_);
        }

        p_ += 1;
    }); //players
    
    // Bullets
    Object.values(bullets).forEach((bullet) => {
        let mesh = Meshes[bullet.id];
        if(!mesh){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(bullet.width, bullet.height, bullet.height), bulletMaterial);
		    mesh.castShadow = true;
    		Meshes[bullet.id] = mesh;
		    // Meshes.push(mesh);
		    scene.add(mesh);
        }
        mesh.used = true;
        var bl = bullet.width/2;
        var ba = bullet.angle;
        var ba2 = bullet.angle2;
        mesh.position.set(bullet.x + bl*Math.cos(-ba2)*Math.cos(ba)*0, bullet.z + bl*Math.sin(-ba2)*0, bullet.y + bl*Math.cos(-ba2)*Math.sin(ba)*0);
        mesh.rotation.y = - ba;
        mesh.rotation.z = - ba2;
    });
    
    // Walls
    Object.values(walls).forEach((wall) => {
        let mesh = Meshes[wall.id];
        if(!mesh){
    		mesh = new THREE.Mesh(new THREE.BoxGeometry(wall.width, wall.tall, wall.height), wallMaterial);
    		mesh.castShadow = true;
    		//Meshes.push(mesh);
    		Meshes[wall.id] = mesh;
    		scene.add(mesh);
        }
        mesh.used = true;
        mesh.position.set(wall.x + wall.width/2, wall.z+wall.tall/2, wall.y + wall.height/2);
        //mesh.rotation.y = - wall.angle;
    });

    // Rocks
    Object.values(rocks).forEach((rock) => {
        let mesh = Meshes[rock.id];
        if(!mesh){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(rock.width, rock.tall, rock.height), rockMaterial);
            //Meshes.push(mesh);
            Meshes[rock.id] = mesh;
            scene.add(mesh);
        }
        mesh.used = true;
        mesh.position.set(rock.x + rock.width/2, rock.z+rock.tall/2, rock.y + rock.height/2);
        //mesh.rotation.y = - wall.angle;
    });

    // Slopes
    Object.values(slopes).forEach((slope) => {
        let mesh = Meshes[slope.id];
        if(!mesh){
            mesh = new THREE.Mesh(new THREE.BoxGeometry(slope.width, slope.tall, slope.height), wallMaterial);
            //Meshes.push(mesh);
            Meshes[slope.id] = mesh;
            scene.add(mesh);
        }
        mesh.used = true;
        mesh.position.set(slope.x + mFieldGridSize/2, slope.z - slope.tall, slope.y + mFieldGridSize/2);
        mesh.rotation.y = slope.angle;
        mesh.rotation.z = slope.angle2;    
        if((slope.angle == 3.1415/2)||(slope.angle == 3.1415/2*3) ){
            mesh.rotation.z = -slope.angle2;
        }    
    });

    
    // Bandages
    Object.values(bandages).forEach((bandage) => {
        let mesh = Meshes[bandage.id];
        if(!mesh){
            mesh = new THREE.Mesh(new THREE.CylinderGeometry(bandage.width,bandage.width,bandage.tall,10,10,false), bandageMaterial); 
            mesh.position.set(bandage.x + bandage.width/2, bandage.z+bandage.tall/2, bandage.y + bandage.height/2);
    		mesh.castShadow = true;
    		Meshes.push(mesh);
    		Meshes[bandage.id] = mesh;
    		scene.add(mesh);            
        }
        mesh.used = true;
        
    });

    // Potions
    Object.values(potions).forEach((potion) => {
        let mesh = Meshes[potion.id];
        if(!mesh){
    		mesh = new THREE.Mesh(new THREE.CylinderGeometry(potion.width,potion.width,potion.tall,10,10,false), potionMaterial); 
    		mesh.castShadow = true;
    		Meshes.push(mesh);
    		Meshes[potion.id] = mesh;
    		scene.add(mesh);
        }
        mesh.used = true;
        mesh.position.set(potion.x + potion.width/2, potion.z+potion.tall/2, potion.y + potion.height/2);
    });

    
    let meshStorm = Meshes[mStorm.id];
    if(!meshStorm){
        meshStorm = new THREE.Mesh(new THREE.CylinderGeometry(mStorm.width, mStorm.width, FIELD_WIDTH, 50,50,true), stormMaterial); 
        Meshes.push(meshStorm);
        Meshes[mStorm.id] = meshStorm;
        scene.add(meshStorm);    
    }
    meshStorm.used = true;
    meshStorm.position.set(mStorm.x, -10, mStorm.y);
    var storm_scale = mStorm.width / meshStorm.geometry.parameters.radiusTop;
    //console.log('storm:'+mStorm.width+', '+meshStorm.geometry.parameters.radiusTop);
    console.log('storm:'+storm_scale);
    meshStorm.scale.x = storm_scale;
    meshStorm.scale.z = storm_scale;


    
    // Clear unused Meshes
    Object.keys(Meshes).forEach((key) => {
        const mesh = Meshes[key];
        if(!mesh.used){
            //console.log('removing mesh', key);
            scene.remove(mesh);
            mesh.traverse((mesh2) => {
                if(mesh2.geometry){
                    mesh2.geometry.dispose();
                }
            });
            delete Meshes[key];
        }
    });
});

// Victory
function mDrawVictroy(){

    var W_ = canvasVic.width;
    var H_ = canvasVic.height;
    var x_,y_,w_,w2_,h_;

    contextVic.clearRect(0, 0, W_, H_);
    
    var s_ = (mFontSize1*10);
    x_ = W_ / 4;
    y_ = H_ / 10;
    w_ = W_/2;
    h_ = s_ * 1.3;
    contextVic.fillStyle="blue";
    contextVic.fillRect(x_, y_, w_, h_);

    x_ = W_ / 2 - s_*2;
    y_ += s_;
    contextVic.font = s_+'px Bold Arial';
    contextVic.fillStyle="white";
    contextVic.fillText( '#1 優勝!!', x_, y_);
    s_ = (mFontSize1*2);
    y_ +=  s_;
    contextVic.font = s_+'px Bold Arial';
    contextVic.fillStyle="white";
    x_ = W_ / 2 - s_*3;
    contextVic.fillText( '夕飯はお寿司だ', x_, y_);

}

function mDrawResults(n_){

    var W_ = canvasVic.width;
    var H_ = canvasVic.height;
    var x_,y_,w_,w2_,h_;

    contextVic.clearRect(0, 0, W_, H_);
    
    var s_ = (mFontSize1*10);
    x_ = W_ / 2 - s_;
    y_ = H_ / 5;
    contextVic.font = s_+'px Bold Arial';
    contextVic.fillStyle="black";
    contextVic.fillText( '#'+n_, x_,y_);
    contextVic.font = '40px Bold Arial';

}


socket.on('id', id_ => {
    mID = id_;
    console.log('mID:'+mID);
});

socket.on('shoot', function(a_) {
    var id_ = a_[0];
    var wp_ = a_[1];
    var vol_ = 0.3;

    if(id_==mID){
        vol_=1.0;
        if(wp_==1){
            mSoundEffect(ShotSound1,vol_);
        }
        else if(wp_==2){
            mSoundEffect(ShotSound2,vol_);
        }
        else if(wp_==3){
            mSoundEffect(ShotSound3,vol_);
        }    
    }
    else{
        if(wp_==1){
            mSoundEffect(ShotSound1.cloneNode(),vol_);
        }
        else if(wp_==2){
            mSoundEffect(ShotSound2.cloneNode(),vol_);
        }
        else if(wp_==3){
            mSoundEffect(ShotSound3.cloneNode(),vol_);
        }    
    }


});

socket.on('empty', () => {
    mSoundEffect(EmptySound,1.0);
});

socket.on('shootFromOthers', function(a_) 
{
    //console.log('shootFromOthers:'+a_[0]);
    if(a_[0]==1){
        mSoundEffect(ShotSound1,a_[1]);
    }
    else if(a_[0]==2){
        mSoundEffect(ShotSound2,a_[1]);
    }
    else if(a_[0]==3){
        mSoundEffect(ShotSound3,a_[1]);
    }
    
});

socket.on('shootFromBot', vol_ => {
    mSoundEffect(ShotSoundOthers1,vol_);
});

socket.on('displayGiveDamage', v_ => {
    mDisplayDamage = v_;
});

socket.on('givedamage', vol_ => {
    mSoundEffect(GiveDamageSound,vol_);
});
socket.on('recievedamage', vol_ => {
    mSoundEffect(RecieveDamageSound,vol_);
});
socket.on('walldamage', vol_ => {
    mSoundEffect(WallDamageSound,vol_);
});

socket.on('deadothers', () => {
    mSoundEffect(RemoveSound,1.0);
});

socket.on('getItem', () => {
    mSoundEffect(GetItemSound,1.0);
});

socket.on('usedBandage', () => {
    mSoundEffect(UsedBandageSound,1.0);
});

socket.on('cannotUseBandage', () => {
    mSoundEffect(CannotUseBandageSound,1.0);
});

socket.on('usedPotion', () => {
    mSoundEffect(UsedBandageSound,1.0);
});

socket.on('cannotUsePotion', () => {
    mSoundEffect(CannotUseBandageSound,1.0);
});

socket.on('victory', () => {
    DocumentExitPointerLock(canvas2d);
    mDrawVictroy();
    //$("#help-screen").show();
    $("#canvas-vic").show();
    //$("#start-screen").show();
    
    //mSoundEffect(ChurchSound,1.0);
    ChurchSound.play();
});

socket.on('dead', n_ => {
    if(n_>1){
        mDrawResults(n_);
        $("#canvas-vic").show();
    }
    $("#help-screen").show();
    $("#start-screen").show();  
});