generated from Code-Institute-Org/gitpod-full-template
-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
170 lines (156 loc) · 18.9 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="An easy rock paper scissors game, Big Bang Theory Edition. Play against the computer, who can get to 10 first?" />
<meta name="keywords" content="Rock Paper Scissors Lizard Spock, Big Bang Theory, Game, Computer, win, first">
<meta name="author" content="cla-cif">
<meta name="google-site-verification" content="SqBo65TjJ3LSP_qHj1lmmvKPYpCH-xeWvvYIYpml0IM" />
<link rel="shortcut icon" href="assets/icons/game-favicon.ico" type="image/x-icon">
<link href="assets/icons/apple-touch-icon-home.png" rel="apple-touch-icon" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Rock Paper Scissors Lizard Spock</title>
</head>
<body>
<!--title, subtitle and the support button-->
<header>
<div class="title">
<h1>ROCK PAPER SCISSORS LIZARD SPOCK</h1>
<h2>Who gets to 10 first?</h2>
</div>
<div class="div-support">
<a href="support.html" target="_blank"
aria-label="Psst! Click me, the developer has a favour to ask you. Link opens in a new window"
id="btn-clickme" class="btn" itemscope>Psst! Click me</a>
</div>
</header>
<!--the main area contains the scores, the game and reset button-->
<div class="main">
<!--the scores area -->
<div class="scores-area">
<div class="left">You: <span id="user-score">0</span></div>
<div class="middle" id="result-message"></div>
<div class="right">Computer: <span id="computer-score">0</span></div>
</div>
<!--the game area: user choices on the left, computer choices on the right-->
<div class="game-area">
<!--user choices are clickable-->
<div class="user-choices">
<div class="uchoice" id="urock">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
viewBox="0 0 876.325 876.325" aria-label="rock">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-342.972 31.905c27.99 9.621 49.089 33.512 64.479 63.823m-92.019-54.205c-12.634 49.174-6.615 47.612-5.683 59.888m26.666 21.857c-2.532-21.825-19.442-16.715-26.666-21.857m-29.07 45.244c19.03-30.353 33.031-59.712 75.626-94.204 5.07-2.706 10.691-.545 12.459 1.53 4.338 4.652 7.449 8.541 12.24 26.884 4.764 19.748 6.086 40.872 5.027 62.949-1.148 17.74-6.779 32.337-20.546 43.933-21.05 21.36-58.308 37.535-93.33 54.424m-63.823-220.32c-7.146 38.53-13.381 74.937-17.049 105.352-5.169 38.633-5.203 52.673-5.135 76.641M342.813 393.13c-14.692 43.835-22.198 80.484-28.852 116.28-4.244 28.706-7.849 57.412-10.928 86.117m-12.24-266.22c-25.25 76.803-28.373 129.83-40.217 182.726M692.09 96.31L566.63 205.159c-45.174-3.8-89.604-4.624-132.454.874-48.84 6.633-95.51 17.363-138.137 31.474-32.404 11.596-46.114 27.642-54.206 45.026-10.22 27.47-15.658 57.809-20.109 88.74-5.923 52.507-5.843 76.495-7.431 108.412 1.74 8.503-5.508 20.267 36.256 27.778l1.338 22.493c3.871 32.111 29.683 41.213 50.709 50.709l.437 14.862c4.178 33.697 39.109 36.503 59.014 38.906 9.403 15.342 10.788 33.513 38.469 42.403 14.238 4.091 24.222 5.477 52.02 3.497 4.377 9.096 8.576 18.59 17.486 17.486 48.607-3.125 115.909-27.08 164.803-48.96 26.291-17.054 60.245-66.722 64.697-103.603 3.99-35.519 7.183-69.446 6.557-95.734l149.503-106.226"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div class="uchoice" id="upaper">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
viewBox="0 0 876.325 876.325" aria-label="paper">
<path
d="M345.347 496.045l8.928 9.286m512.05-67.169a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM213.918 95.688c14.625 19.415 31.8 40.383 62.857 55.714 107.806 46.057 166.362 72.514 221.786 104.286 53.262 32.426 97.063 79.13 145.714 136.786 6.407 9.266 20.817 19.528 8.929 51.07 25.544 16.805 14.382 40.12-.357 58.215 17.056 63.944-20.494 72.66-65 71.072-3.952 25.58-20.007 48.421-56.786 41.785-93.833-36.501-141.202-88.508-185.714-118.571l35.357 66.071c19.109 45.608-44.264 63.704-63.214 45.715-24.818-29.7-26.537-38.206-111.072-113.572-29.106-26.034-37.194-44.799-36.428-67.5 2.387-16.591.58-38.342-9.643-54.286-29.21-35.89-73.635-82.276-111.277-108.8 7.273-16.02 13.767-31.944 23.563-48.28 14.614-26.02 35.104-51.489 54.772-71.83 27.94-28.901 48.232-47.46 75.673-60.984zm196.429 334.286c118.474 90.39 144.66 97.411 177.5 142.857M445.968 374.989c21.658 18.492 38.683 33.998 89.399 71.216 53.26 35.53 86.705 52.942 116.673 67.175M475.768 319.178c22.798 24.357 44.335 52.008 83.59 77.024 31.884 23.577 60.628 35.77 93.846 47.343"
stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round"
stroke-linecap="round" />
</svg>
</div>
<div class="uchoice" id="uscissors">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325" aria-label="scissors">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM380.732 645.74c79.965-11.942 139.086-37.008 175.364-76.457m-235.437-8.495c115.112-15.857 152.371-22.868 199.029-30.946 29.74-5.798 47.77-2.006 48.544 20.63l-12.136 18.811c28.367 3.187 59.732 23.357 46.723 47.937l-35.8 60.073M460.828 333.24c-.583 21.5-7.446 45.092.607 63.713 13.331 17.817 18.134 44.164 25.485 67.962 13.566 9.638 20.742 10.252 42.476-4.855 13.395-10.282 18.097-26.393 20.024-41.262 1.905-18.406 4.98-36.812 8.495-55.218 4.258-15.276 31.644-7.954 31.554.606l-.607 31.554c-8.248 86.961 41.883 88.302 79.49 108.01M846.144 325.35l-108.01-4.247c-31.72-25.099-68.4-47.717-109.83-67.961-27.028-16.05-52.052-15.062-75.849-3.641-34.71 17.792-68.087 38.819-91.626 83.738L202.94 256.177c-40.131-15.408-77.837 26.564-34.587 62.5 79.303 46.548 175.223 81.31 244.539 121.966-97.828 23.116-193.757 31.042-290.049 41.869-28.03 5.743-39.547 76.408 6.675 78.883l191.14-.607c9.741 29.346-9.007 61.54 60.074 84.952 8.89 21.937 1.292 46.002 57.039 61.893 38.382 9.471 81.158.634 129.247-30.34 71.296 5.111 84.772 5.361 100.728-1.82 41.158-19.8 69.043-48.791 89.2-83.131l77.062-1.214"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div class="uchoice" id="ulizard">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325" aria-label="Lizard">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM310.95 260.424c43.122-13.3 111.183-40.465 127.427-48.543 14.526-8.933 33.652-1.996 53.702 0-8.45-.855 205.058 87.075 200.85 102.548m-514.26 458.738c1.099-37.04.072-78.335-16.384-150.485-7.016-33.491-17.501-56.112-1.214-162.622 9.305-33.604 18.609-62.849 27.913-124.393 6.13-28.142-7.568-51.807 44.903-90.413 54.428-26.027 104.4-46.961 169.296-84.951 18.09-9.78 35.75-17.541 66.14-4.854 75.478 34.136 162.579 76.022 211.166 92.233 35.771 14.38 52.097 32.456 15.777 61.286-10.91 32.3-13.498 61.535-61.894 54.005-87.253-22.162-261.979-58.043-266.99-2.427.165 36.183 38.848 70.927 103.155 46.723 24.07-5.115 54.814-22.888 78.884-37.621 70.245-35.408 101.107 43.431 79.49 55.218l-112.864 88.592-103.155 89.806c-10.137 10.09-19.944 20.51-18.204 42.476-3.538 92.48 8.33 146.45 15.17 212.985"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div class="uchoice" id="uspock">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325" aria-label="Spock">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-215.961-218.66c-45.325 72.466-53.428 148.35-78.492 207.791M374.664 157.27c23.565 41.229 29.579 175.99 42.475 250m125.24 19.168c25.04-3.913 36.01 9.37 45.05 25.32m-195.168-25.07c15.596-22.457 32.562-20.273 49.757-13.957m-77.09 161.824c68.303-6.792 107.65 30.16 120.398 107.29M325.513 846.589l-.607-99.514c-70.376-63.372-84.47-86.154-108.01-125-23.884-36.311-91.482-56.464-111.65-95.874-18.383-40.373.981-57.424 29.126-62.5 32.84-5.641 49.42.8 61.894 7.888 41.666 24.272 101.431 73.43 120.145 66.141 10.019-162.28-.437-226.742-3.64-325.85.207-33.774 19.748-53.097 61.893-54.611 16.151-50.898 80.908-54.353 84.951-15.777l35.801 242.112 81.31-205.097c18.642-38.158 88.9-15.065 73.638 40.995-4.427 29.11-13.996 15.338-12.014 22.312 42.844-2.636 55.746 9.884 56.338 35.592-81.538 239.28-27.912 195.915-39.684 205.712 10.312-6.949 2.436 100.581-6.372 126.517-21.75 95.853-45.92 85.005-67.658 118.022l1.214 111.65"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<hr>
<!--the computer choices are randomly generated-->
<div class="computer-choices">
<div class="cchoice">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
viewBox="0 0 876.325 876.325">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-342.972 31.905c27.99 9.621 49.089 33.512 64.479 63.823m-92.019-54.205c-12.634 49.174-6.615 47.612-5.683 59.888m26.666 21.857c-2.532-21.825-19.442-16.715-26.666-21.857m-29.07 45.244c19.03-30.353 33.031-59.712 75.626-94.204 5.07-2.706 10.691-.545 12.459 1.53 4.338 4.652 7.449 8.541 12.24 26.884 4.764 19.748 6.086 40.872 5.027 62.949-1.148 17.74-6.779 32.337-20.546 43.933-21.05 21.36-58.308 37.535-93.33 54.424m-63.823-220.32c-7.146 38.53-13.381 74.937-17.049 105.352-5.169 38.633-5.203 52.673-5.135 76.641M342.813 393.13c-14.692 43.835-22.198 80.484-28.852 116.28-4.244 28.706-7.849 57.412-10.928 86.117m-12.24-266.22c-25.25 76.803-28.373 129.83-40.217 182.726M692.09 96.31L566.63 205.159c-45.174-3.8-89.604-4.624-132.454.874-48.84 6.633-95.51 17.363-138.137 31.474-32.404 11.596-46.114 27.642-54.206 45.026-10.22 27.47-15.658 57.809-20.109 88.74-5.923 52.507-5.843 76.495-7.431 108.412 1.74 8.503-5.508 20.267 36.256 27.778l1.338 22.493c3.871 32.111 29.683 41.213 50.709 50.709l.437 14.862c4.178 33.697 39.109 36.503 59.014 38.906 9.403 15.342 10.788 33.513 38.469 42.403 14.238 4.091 24.222 5.477 52.02 3.497 4.377 9.096 8.576 18.59 17.486 17.486 48.607-3.125 115.909-27.08 164.803-48.96 26.291-17.054 60.245-66.722 64.697-103.603 3.99-35.519 7.183-69.446 6.557-95.734l149.503-106.226"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
id="path-rock" />
</svg>
</div>
<div class="cchoice">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
viewBox="0 0 876.325 876.325">
<path
d="M345.347 496.045l8.928 9.286m512.05-67.169a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM213.918 95.688c14.625 19.415 31.8 40.383 62.857 55.714 107.806 46.057 166.362 72.514 221.786 104.286 53.262 32.426 97.063 79.13 145.714 136.786 6.407 9.266 20.817 19.528 8.929 51.07 25.544 16.805 14.382 40.12-.357 58.215 17.056 63.944-20.494 72.66-65 71.072-3.952 25.58-20.007 48.421-56.786 41.785-93.833-36.501-141.202-88.508-185.714-118.571l35.357 66.071c19.109 45.608-44.264 63.704-63.214 45.715-24.818-29.7-26.537-38.206-111.072-113.572-29.106-26.034-37.194-44.799-36.428-67.5 2.387-16.591.58-38.342-9.643-54.286-29.21-35.89-73.635-82.276-111.277-108.8 7.273-16.02 13.767-31.944 23.563-48.28 14.614-26.02 35.104-51.489 54.772-71.83 27.94-28.901 48.232-47.46 75.673-60.984zm196.429 334.286c118.474 90.39 144.66 97.411 177.5 142.857M445.968 374.989c21.658 18.492 38.683 33.998 89.399 71.216 53.26 35.53 86.705 52.942 116.673 67.175M475.768 319.178c22.798 24.357 44.335 52.008 83.59 77.024 31.884 23.577 60.628 35.77 93.846 47.343"
stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round"
id="path-paper" />
</svg>
</div>
<div class="cchoice" id="test">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM380.732 645.74c79.965-11.942 139.086-37.008 175.364-76.457m-235.437-8.495c115.112-15.857 152.371-22.868 199.029-30.946 29.74-5.798 47.77-2.006 48.544 20.63l-12.136 18.811c28.367 3.187 59.732 23.357 46.723 47.937l-35.8 60.073M460.828 333.24c-.583 21.5-7.446 45.092.607 63.713 13.331 17.817 18.134 44.164 25.485 67.962 13.566 9.638 20.742 10.252 42.476-4.855 13.395-10.282 18.097-26.393 20.024-41.262 1.905-18.406 4.98-36.812 8.495-55.218 4.258-15.276 31.644-7.954 31.554.606l-.607 31.554c-8.248 86.961 41.883 88.302 79.49 108.01M846.144 325.35l-108.01-4.247c-31.72-25.099-68.4-47.717-109.83-67.961-27.028-16.05-52.052-15.062-75.849-3.641-34.71 17.792-68.087 38.819-91.626 83.738L202.94 256.177c-40.131-15.408-77.837 26.564-34.587 62.5 79.303 46.548 175.223 81.31 244.539 121.966-97.828 23.116-193.757 31.042-290.049 41.869-28.03 5.743-39.547 76.408 6.675 78.883l191.14-.607c9.741 29.346-9.007 61.54 60.074 84.952 8.89 21.937 1.292 46.002 57.039 61.893 38.382 9.471 81.158.634 129.247-30.34 71.296 5.111 84.772 5.361 100.728-1.82 41.158-19.8 69.043-48.791 89.2-83.131l77.062-1.214"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
id="path-scissors" />
</svg>
</div>
<div class="cchoice">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM310.95 260.424c43.122-13.3 111.183-40.465 127.427-48.543 14.526-8.933 33.652-1.996 53.702 0-8.45-.855 205.058 87.075 200.85 102.548m-514.26 458.738c1.099-37.04.072-78.335-16.384-150.485-7.016-33.491-17.501-56.112-1.214-162.622 9.305-33.604 18.609-62.849 27.913-124.393 6.13-28.142-7.568-51.807 44.903-90.413 54.428-26.027 104.4-46.961 169.296-84.951 18.09-9.78 35.75-17.541 66.14-4.854 75.478 34.136 162.579 76.022 211.166 92.233 35.771 14.38 52.097 32.456 15.777 61.286-10.91 32.3-13.498 61.535-61.894 54.005-87.253-22.162-261.979-58.043-266.99-2.427.165 36.183 38.848 70.927 103.155 46.723 24.07-5.115 54.814-22.888 78.884-37.621 70.245-35.408 101.107 43.431 79.49 55.218l-112.864 88.592-103.155 89.806c-10.137 10.09-19.944 20.51-18.204 42.476-3.538 92.48 8.33 146.45 15.17 212.985"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
id="path-lizard" />
</svg>
</div>
<div class="cchoice">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
width="876.325">
<path
d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-215.961-218.66c-45.325 72.466-53.428 148.35-78.492 207.791M374.664 157.27c23.565 41.229 29.579 175.99 42.475 250m125.24 19.168c25.04-3.913 36.01 9.37 45.05 25.32m-195.168-25.07c15.596-22.457 32.562-20.273 49.757-13.957m-77.09 161.824c68.303-6.792 107.65 30.16 120.398 107.29M325.513 846.589l-.607-99.514c-70.376-63.372-84.47-86.154-108.01-125-23.884-36.311-91.482-56.464-111.65-95.874-18.383-40.373.981-57.424 29.126-62.5 32.84-5.641 49.42.8 61.894 7.888 41.666 24.272 101.431 73.43 120.145 66.141 10.019-162.28-.437-226.742-3.64-325.85.207-33.774 19.748-53.097 61.893-54.611 16.151-50.898 80.908-54.353 84.951-15.777l35.801 242.112 81.31-205.097c18.642-38.158 88.9-15.065 73.638 40.995-4.427 29.11-13.996 15.338-12.014 22.312 42.844-2.636 55.746 9.884 56.338 35.592-81.538 239.28-27.912 195.915-39.684 205.712 10.312-6.949 2.436 100.581-6.372 126.517-21.75 95.853-45.92 85.005-67.658 118.022l1.214 111.65"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
id="path-spock" />
</svg>
</div>
</div>
</div>
<!--the reset button, automatic reset happens when one of the players reaches 10 points-->
<div class="reset-area">
<button id="btn-reset" class="btn">RESET</button>
</div>
</div>
<!--footer sections, no links-->
<footer>
<p>Created by cla-cif (ASK) 2022</p>
</footer>
<!--script-->
<script src="assets/js/script.js"></script>
</body>
</html>