FootballGame/fbgame_beta.html at master · nikonov91-dev/FootballGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="peer.js"></script>
<script src='fbgame_beta.js'></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="fbgame_beta.css">
<link href="https://fonts.googleapis.com/css?family=Squada+One|Faster+One|PT+Sans" rel="stylesheet">
</head>
<body>
    <h1>Football game</h1>
    <div class="flexContainer">
        <div class="mainButtons">
            <form id='connField'>
                <input type='button' id = 'getID' name='getID' class="ui-button ui-corner-all ui-widget" value = 'Start new game' style="float:left;">
                <input type = 'button' id = 'connectToID' class="ui-button ui-corner-all ui-widget" value = 'Connect to game'>
                <input id = 'destroy' class='ui-button ui-corner-all ui-widget' type='button' value="Close connection">
            </form>
            <div class="loading">
                <span id="load-icon" hidden="hidden"><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i></span>
            </div>
            <div id="chartField">
            <form id="chat_form" autocomplete="off">
                <span>Chat Box:</span>
                <input class="chat-outcoming-message" type = 'text' id = 'chat-sent-message' placeholder = 'Write you message here'>
                <input type='button' id = 'send' name='getID' class="ui-button ui-corner-all ui-widget" value = 'Send' style="float:left;">
            </form>
            <div id="chatScreen">
                <p class="chat-service-message"></p>
            </div>
        </div>
        <div class='centralContainer'>
            <div id="gameOverLayer">
                <p><span>GAME OVER</span>
                    <button id="startGame" class="ui-button ui-corner-all ui-widget">Send request to play again</button>
                </p>

            </div>
                <div id="goal">
                    <p><span>GOAL!</span>
                </div>
            <div class="countPlateContainer">
                <span>Player 1</span><div class="countPlate" id="leftGoalPlate">0</div>
                <div class="countPlate" id="rightGoalPlate">0</div><span>Player 2</span>
            </div>
            <svg class='fieldWrapper' id='fieldWrapper' width='800' height='500' >
                <rect x='25' y='25' width='740' height='450' style='fill:rgb(102, 255, 102); stroke-width:10; stroke:rgb(51, 51, 0)' rx='20' ry='20'>
                </rect>
                <line x1='95' y1='30' x2='95' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='155' y1='30' x2='155' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='215' y1='30' x2='215' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='275' y1='30' x2='275' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='335' y1='30' x2='335' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='395' y1='30' x2='395' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='455' y1='30' x2='455' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='515' y1='30' x2='515' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='575' y1='30' x2='575' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='635' y1='30' x2='635' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='695' y1='30' x2='695' y2='470' style='stroke:rgb(0, 204, 102); stroke-width:30';/>
                <line x1='395' y1='50' x2='395' y2='450' style='stroke:rgb(255, 255, 255); stroke-width:5';/>
                <circle cx='395' cy='250' r='75' stroke='white' stroke-width='5' style='fill:none'/>
                <rect width='93' height='280' x='45' y='110' style='stroke-width:4; stroke:rgb(255,255,255); fill:none'></rect>
                <rect width='93' height='280' x='652' y='110' style='stroke-width:4; stroke:rgb(255,255,255); fill:none'></rect>
                <rect  width='700' height='400' x='45' y='50' style='stroke-width:4; stroke:rgb(255,255,255); fill:none'></rect>
                <rect id="field" width='655' height='360' x='65' y='70' style='stroke-width:1; fill:none'></rect>
                <!--ниже главные объекты-->
                <rect id="goalkeeperLeft" width='10' height='50' x='90' y='185'  style='fill:rgb(0,0,0);'></rect>
                <rect id="goalkeeperRight" width='10' height='50' x='690' y='285' style='fill:rgb(0,0,0);'></rect>
                <polyline id="goalLeft" points="80,160 45,160 45,340 80,340" style="stroke:rgb(255,0,0); fill:rgb(102, 255, 102); stroke-width:7" />
                <polyline id="goalRight" points="710,160 745,160 745,340 710,340" style="stroke:rgb(255,0,0); fill:rgb(102, 255, 102); stroke-width:7" />
                <circle id="ball" cx='395' cy='255' r='20' stroke='black' stroke-width='5' fill='white'></circle>
            </svg>
        </div>
        </div>
    </div>


    <div id="dialog-start" title="Player 1 - new P2P game">
      <span>The code below is for connecting to this game</span>
      <span style="color:white; font-size: 10px;">Click on the code for copy to clipboard</span>
      <form autocomplete="off">
        <fieldset>
          <label id="code" style="cursor:pointer;"></label>
        </fieldset><input id = 'clipboard' type="text" style="position:absolute; top:-1000px">
        <div class="load-icon-big" style="color:#0094FF; margin-top: 20px;"><div><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div><div>Waiting for connection of second player...</div><span style="color:white; font-size: 10px;">Message will disappear when the second player will confirm ready status</span></div>

      </form>
    </div>

    <div id="dialog-connect" title="Player 2 - connect to the game">
      <span>For connection to game insert the code below</span>

      <form autocomplete="off">
        <fieldset>
          <input type="text" id="insert-code" style="width: 100%">
        </fieldset>
        <div id="load-connection" class="load-icon-big" hidden="hidden" style="color:#0094FF; margin-top: 20px;"><div><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div><div>Sending connection request...</div><span style="color:white; font-size: 10px;">Message will disappear when the second player will confirm ready status</span></div>
      </form>
    </div>
</body>
</html>