Newer
Older
Skillsemi2023_WEB_Otaki_Nemoto / flask / testapp / static / javascript / beautyVote.js

class Question{
    constructor(){
        this.question = 0;
        this.answer = new Array(CHOICE_NUMBER).fill(0);
        this.people = new Array(CHOICE_NUMBER).fill(0);
        this.realAnswer = 0;
        this.choiceA = 0;
        this.choiceB = 0;
        this.choiceC = 0;
        this.choiceD = 0;
    }
    join(question, realAnswer, choiceA, choiceB, choiceC, choiceD){
        this.question = question;
        this.realAnwer = realAnswer;
        this.choiceA = choiceA;
        this.choiceB = choiceB;
        this.choiceC = choiceC;
        this.choiceD = choiceD;
    }
}

class Player{
    constructor(){
        this.points = Array(MAX_ROUND).fill(0);
        this.choice = 0;
        this.score = 0;
        this.name = 0;
        this.number = 0;
    }
    calcScore(){
        var score = 0;
        for(var i = 0; i < MAX_ROUND; i ++){
                score += this.points[i];
        }
        return score;
    }
}


function setup(){
    canvasSize(960, 1200);
    lineW(3);
    timer = 0;
    scene = START_SCENE;
    setQuestion(round);
}


function mainloop(){
    timer ++;
    
    switch(scene){

        case START_SCENE:
        case CAPASITY_ERROR:
            inputName();
            break;
        
        case WAIT_START:
            WaitStart();
            if(timer > 30){
                timer = 0;
                CheckStart();// 他のプレイヤーが名前を書き終わるのを待機
            }
            break;            

        case GAME_SCENE:
            //ゲーム画面を表示
            showQuestion();

            //制限時間を過ぎた場合にはEを選択
            if(timer > TIME_LIMIT){
                player.choice = E;
                sendChoice()
                break;
            }
            
            if(tapC == 1){
                tapC ++;

                if(50 <= tapX && tapX <= 450 && 300 <= tapY && tapY <= 550){
                    player.choice = A;
                    sendChoice();
                }
                else if(500 <= tapX && tapX <= 900 && 300 <= tapY && tapY <= 550){
                    player.choice = B;
                    sendChoice();
                }   
                else if(50 <= tapX && tapX <= 450 && 600 <= tapY && tapY <= 850){
                    player.choice = C;
                    sendChoice();
                }   
                else if(500 <= tapX && tapX <= 900 && 600 <= tapY && tapY <= 850){
                    player.choice = D;
                    sendChoice();
                }
            } 
            break;

        //集計結果待ち
        case WAIT_SCENE:
            showQuestion();
            if(timer > 30){
                timer = 0;
                CheckOthers(); // 他のプレイヤーが終わるまで待機する処理
            }
            break;
        
        case ROUND_RESULT:
            showQuestion();
            if(timer > 90){
                timer = 0;
                round ++;
                if(round < MAX_ROUND){
                    setQuestion(round);
                    scene = GAME_SCENE;
                }
                else{
                    scene = WAIT_RESULT;
                    postForm();
                }
            }
            break;
        

        //最終集計結果待ち
        case WAIT_RESULT:
            if(timer > 30){
                timer = 0; 
                CheckResult();  //順位表を受け取るための処理
            }

        //結果表示
        case RESULT_SCENE:
            showResult();
            if(tapC == 1){
                tapC ++;
                if(80 <= tapX && tapX <= 180 && 1080 <= tapY && tapY <= 1130){
                    console.log("show result")
                    break;
                }
                else{
                    for(var i = 0; i < MAX_ROUND; i ++){
                        if(450 + 50*i < tapX && tapX < 450 + 50*i + 50 && 1080 < tapY && tapY < 1130){
                            console.log("show round"+i)
                            showOtherResult(i)
                            view_result = i
                            scene = CHECK_RESULT
                        }
                    }    
                }
            } 
            break;

        case CHECK_RESULT:
            showOtherResult(view_result);
            if(tapC == 1){
                tapC ++;
                if(80 <= tapX && tapX <= 180 && 1080 <= tapY && tapY <= 1130){
                    showResult();
                    console.log("show result")
                    scene = RESULT_SCENE;
                }
                else{
                    for(var i = 0; i < MAX_ROUND; i ++){
                        if(450 + 50*i <= tapX && tapX <= 450 + 50*i + 50 && 1080 <= tapY && tapY <= 1130){
                            showOtherResult(i)
                            console.log("show round"+(i+1))
                            view_result = i
                        }
                    }    
                }
            } 
            break;
    }
}



function setQuestion(round){
    question[round].join(questions[round], realAnswer[round],choices[round][A], choices[round][B], choices[round][C], choices[round][D]);
}


function checkAnswer(){ 
    var j = 0;// 選択した人数が同じ数のpoint調整変数
    for(var i = 0; i < CHOICE_NUMBER; i ++){
        if (i>=1){
            if(question[round].people[i]==question[round].people[i-1]){
                j ++;
            }
        }
        if(player.choice == question[round].answer[i]){
            // 未選択を選んだ場合
            if(player.choice == E){
                player.points[round] = 0;
                break;
            }
            else{
                player.points[round] = 4-i+j;                
            }
            break;
        }
    }
    player.score = player.calcScore();
    console.log(player.points[round])
}

//スコアと識別番号をサーバーに送信する処理
function postForm(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //識別番号とスコアを送信
    xhr.send('number='+player.number + '&score=' + player.score); //変更
}

//選択をサーバーに送信する処理
function sendChoice(){
    timer = 0;
    scene = WAIT_SCENE;
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //選択を送信
    xhr.send('choice=' + player.choice); 
    //WAITコードを受信
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
        }
    }
}

//ユーザーネームをサーバーに送信する処理
function sendName(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //ユーザーネームを送信
    xhr.send('username=' + player.name); 
    timer = 0;
    //識別番号を受信
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
            if(xhr.responseText == "Capasity ERROR"){
                scene = CAPASITY_ERROR;
            }
            else{    
                console.log("識別番号:" + xhr.responseText);
                player.number = xhr.responseText;
                scene = WAIT_START;
            }
        }
    }
}

//ユーザーネームをサーバーに送信する処理
function sendStart(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //ユーザーネームを送信
    xhr.send('start=' + "GAMESTART"); 
    //識別番号を受信
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log("参加人数:" + xhr.responseText);
        }
    }
}


//参加するプレイヤーが揃ったか確認(nemoto追記)
function CheckStart(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //待機コードを送信
    xhr.send('checkStart=' + "check"); 
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
            if(xhr.responseText=="START"){
                console.log(xhr.responseText);
                scene = GAME_SCENE;
            }
            //他の参加者が集まるまで待機
            else{
                var max_current_player = xhr.responseText
                var splitplayer = max_current_player.split(" ");
                max_player = splitplayer[0]
                current_player = splitplayer[1]
                console.log(max_player);
            }
        }
    }
}


// 集計結果待機中処理
function CheckOthers(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //待機コード送信
    xhr.send('checkothers=' + "check"); 
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
            if(xhr.responseText=="WAIT"){
                console.log(xhr.responseText);
            }
            //正解選択肢を取得(選択が多い順に表示)
            else{
                console.log(xhr.responseText);
                answerTable = xhr.responseText
                var splitAnswer = answerTable.split("\n");
                for(var i = 0; i < CHOICE_NUMBER; i ++){
                    // i番目に多かった答えと人数
                    var arr_answer = splitAnswer[i].split(" "); 
                    question[round].answer[i] = arr_answer[0];
                    question[round].people[i] = arr_answer[1];
                }   
                //正解判定
                checkAnswer();
                timer = 0;
                scene = ROUND_RESULT;
            }

        }
    }
}

//最終集計結果(順位表)待機処理
function CheckResult(){
    xhr.open('POST', '/form');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    //待機コードを送信
    xhr.send('checkResult=' + "check"); 
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) {
            if(xhr.responseText=="WAIT"){
                console.log(xhr.responseText);
            }
            //順位表を受信
            else{
                orderTable = xhr.responseText;
                scene = RESULT_SCENE;
            }
        }
    }
}


var xhr = new XMLHttpRequest();


var round = 0;   //変更
var MAX_ROUND = 3;
var CHOICE_NUMBER = 4;
var max_player = 0; // 最大のplayer数(変更不要)
var current_player = 0;

var timer = 0;
var TIME_LIMIT = 900;

var A = 0;
var B = 1;
var C = 2;
var D = 3;
var E = 4;


var CORRECT = 1;
var WRONG = 0;

var START_SCENE = 1;
var GAME_SCENE = 2;
var RESULT_SCENE = 3;
var WAIT_SCENE = 4; // nemoto追記
var WAIT_RESULT = 5;
var WAIT_START = 6; // nemoto追記
var CHECK_RESULT = 7;
var ROUND_RESULT = 8;
var CAPASITY_ERROR = 9;

var scene = 0;

var orderTable = "";

var question = new Array(MAX_ROUND);
for(var i = 0; i < MAX_ROUND+1; i ++){
    question[i] = new Question();
}

var player = new Player();


var questions = ["「にっこり」の対義語は?",
                "もっとも年齢が高いのは?", 
                "中国語で「勉強」意味は?",
                "焼き肉の「テッポウ」はどこの部位?",
                "アフリカ大陸でもっとも面積が大きい国は?",
                "実在する生き物は?",
                "カスタネットの名前の由来となったものは?",
                "名前が人物に由来しているのは?", 
                "ジンベイザメは英語で何シャーク?",
                "心臓がない生き物は?"];
/*
var answers = new Array(MAX_ROUND);
for (var i = 0; i < MAX_ROUND; i++) {
    answers[i] = new Array(CHOICE_NUMBER).fill(0);
}*/

var choices = [["がっくり", "げっそり", "むっつり", "しっとり"],
                ["ドナルド・トランプ", "ボリス・ジョンソン", "ウラジーミル・プーチン", "アンゲラ・メルケル"],
                ["喧嘩っ早い", "無理やり", "細かい", "意地悪な"],
                ["食道", "直腸", "こめかみ", "胃袋"],
                ["エチオピア", "リビア", "アルジェリア", "ケニア"],
                ["キリンコウモリ", "ライオンコウモリ", "ウサギコウモリ", "オオカミコウモリ"],
                ["ハサミの刃", "貝の殻", "栗の実", "両手"],
                ["そら豆", "えんどう豆", "いんげん豆", "ひよこ豆"],
                ["エレファント", "ホエール", "ダイナソー", "メガ"],
                ["カニ", "ナマコ", "タコ", "ホタテ"]];

var realAnswer = new Array(MAX_ROUND).fill(0);

var view_result = 0;