Make the select screen index.html
This commit is contained in:
Austin Chen
parent
c3b825cc44
commit
6b5b9b42f5
|
|
@ -1,225 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<!-- Google Tag Manager -->
|
|
||||||
<script>
|
|
||||||
;(function (w, d, s, l, i) {
|
|
||||||
w[l] = w[l] || []
|
|
||||||
w[l].push({
|
|
||||||
'gtm.start': new Date().getTime(),
|
|
||||||
event: 'gtm.js',
|
|
||||||
})
|
|
||||||
var f = d.getElementsByTagName(s)[0],
|
|
||||||
j = d.createElement(s),
|
|
||||||
dl = l !== 'dataLayer' ? '&l=' + l : ''
|
|
||||||
j.async = true
|
|
||||||
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
|
|
||||||
f.parentNode.insertBefore(j, f)
|
|
||||||
})(window, document, 'script', 'dataLayer', 'GTM-M3MBVGG')
|
|
||||||
</script>
|
|
||||||
<!-- End Google Tag Manager -->
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-page {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h3 {
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#submit {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 8px 20px;
|
|
||||||
background-color: cadetblue;
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 1.1em;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#submit:hover {
|
|
||||||
background-color: rgb(0, 146, 156);
|
|
||||||
}
|
|
||||||
|
|
||||||
[type='radio'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type='radio'] + label.radio-label {
|
|
||||||
background: lightgrey;
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.radio-label:hover {
|
|
||||||
background: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type='radio']:checked + label.radio-label {
|
|
||||||
background: lightcoral;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-label h3 {
|
|
||||||
margin: 0;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 67px;
|
|
||||||
height: 48px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding: 70px 0 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#addl-options {
|
|
||||||
position: absolute;
|
|
||||||
top: 30px;
|
|
||||||
right: 30px;
|
|
||||||
background-color: white;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#addl-options > summary {
|
|
||||||
list-style: none;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Google Tag Manager (noscript) -->
|
|
||||||
<noscript>
|
|
||||||
<iframe
|
|
||||||
src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG"
|
|
||||||
height="0"
|
|
||||||
width="0"
|
|
||||||
style="display: none; visibility: hidden"
|
|
||||||
></iframe>
|
|
||||||
</noscript>
|
|
||||||
<!-- End Google Tag Manager (noscript) -->
|
|
||||||
<h1>Magic the Guessering</h1>
|
|
||||||
<div class="play-page" style="justify-content: center">
|
|
||||||
<form
|
|
||||||
method="get"
|
|
||||||
action="index.html"
|
|
||||||
style="display: flex; flex-direction: column; align-items: center"
|
|
||||||
>
|
|
||||||
<!-- <input type="radio" id="wrath" name="whichguesser" value="wrath" />
|
|
||||||
<label class="radio-label" for="wrath">
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/6/0619d670-7b53-4185-a25d-2fab5db1aab5.jpg?1562896185"
|
|
||||||
/>
|
|
||||||
<h3>I'll Clean Sweep</h3></label
|
|
||||||
><br /> -->
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="counterspell"
|
|
||||||
name="whichguesser"
|
|
||||||
value="counterspell"
|
|
||||||
checked
|
|
||||||
/>
|
|
||||||
<label class="radio-label" for="counterspell">
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855"
|
|
||||||
/>
|
|
||||||
<h3>Counterspell Guesser</h3></label
|
|
||||||
><br />
|
|
||||||
|
|
||||||
<!-- <input type="radio" id="terror" name="whichguesser" value="terror" />
|
|
||||||
<label class="radio-label" for="terror">
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/2/d/2dd5d601-aff7-4b7a-ab6c-b89f403af076.jpg?1562905752"
|
|
||||||
/>
|
|
||||||
<h3>I'm a Terror-able Guesser</h3></label
|
|
||||||
><br /> -->
|
|
||||||
|
|
||||||
<input type="radio" id="burn" name="whichguesser" value="burn" />
|
|
||||||
<label class="radio-label" for="burn">
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596"
|
|
||||||
/>
|
|
||||||
<h3>Match With Hot Singles</h3></label
|
|
||||||
><br />
|
|
||||||
|
|
||||||
<!-- <input type="radio" id="beast" name="whichguesser" value="beast" />
|
|
||||||
<label class="radio-label" for="beast">
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469"
|
|
||||||
/>
|
|
||||||
<h3>Finding Fantastic Beasts</h3></label
|
|
||||||
>
|
|
||||||
<br /> -->
|
|
||||||
|
|
||||||
<details id="addl-options">
|
|
||||||
<summary>
|
|
||||||
<img
|
|
||||||
src="http://mythicspoiler.com/images/buttons/ustset.png"
|
|
||||||
style="width: 32px; vertical-align: top"
|
|
||||||
/>
|
|
||||||
Options
|
|
||||||
</summary>
|
|
||||||
<input type="checkbox" name="digital" id="digital" checked />
|
|
||||||
<label for="digital">include digital cards</label>
|
|
||||||
<br />
|
|
||||||
<input type="checkbox" name="un" id="un" checked />
|
|
||||||
<label for="un">include un-cards</label>
|
|
||||||
<br />
|
|
||||||
<input type="checkbox" name="original" id="original" />
|
|
||||||
<label for="original">restrict to only original printing</label>
|
|
||||||
</details>
|
|
||||||
<input type="submit" id="submit" value="Play" />
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin: -40px 0 0; height: 60px">
|
|
||||||
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-size: 0.9em;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
color: grey;
|
|
||||||
font-style: italic;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
made by
|
|
||||||
<a
|
|
||||||
style="color: rgb(0, 146, 156); font-style: italic"
|
|
||||||
href="https://idamayer.com"
|
|
||||||
>Ida Mayer</a
|
|
||||||
>
|
|
||||||
& Alex Lien 2022
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
554
web/public/mtg/guess.html
Normal file
554
web/public/mtg/guess.html
Normal file
|
|
@ -0,0 +1,554 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Google Tag Manager -->
|
||||||
|
<script>
|
||||||
|
;(function (w, d, s, l, i) {
|
||||||
|
w[l] = w[l] || []
|
||||||
|
w[l].push({
|
||||||
|
'gtm.start': new Date().getTime(),
|
||||||
|
event: 'gtm.js',
|
||||||
|
})
|
||||||
|
var f = d.getElementsByTagName(s)[0],
|
||||||
|
j = d.createElement(s),
|
||||||
|
dl = l !== 'dataLayer' ? '&l=' + l : ''
|
||||||
|
j.async = true
|
||||||
|
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
|
||||||
|
f.parentNode.insertBefore(j, f)
|
||||||
|
})(window, document, 'script', 'dataLayer', 'GTM-M3MBVGG')
|
||||||
|
</script>
|
||||||
|
<!-- End Google Tag Manager -->
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<script type="text/javascript" src="app.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 230px;
|
||||||
|
height: 208px;
|
||||||
|
border: 5px solid lightgrey;
|
||||||
|
margin: 5px;
|
||||||
|
align-items: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 11px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
/*background-size: contain;*/
|
||||||
|
background-size: 220px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition: height 1s, background-image 1s, border 0.4s 0.6s;
|
||||||
|
background-position-y: calc(50% - 18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:not([data-name^='name'])::after {
|
||||||
|
content: '';
|
||||||
|
height: 34px;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .card {
|
||||||
|
height: 350px;
|
||||||
|
/*padding-top: 310px;*/
|
||||||
|
/*background-size: cover;*/
|
||||||
|
overflow: hidden;
|
||||||
|
border-color: rgb(0, 146, 156);
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .card.incorrect {
|
||||||
|
border-color: rgb(216, 27, 96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank {
|
||||||
|
position: fixed;
|
||||||
|
padding: 10px 10px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank .name {
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .names-bank .name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .names-bank .word-count {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-count {
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(255, 193, 7);
|
||||||
|
width: 200px;
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank .score {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .names-bank .score {
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1.2s 0.2s;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 230px;
|
||||||
|
min-height: 36px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: lightgrey;
|
||||||
|
padding: 8px 12px 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .name {
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
background-color: cadetblue;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit:hover {
|
||||||
|
background-color: rgb(0, 146, 156);
|
||||||
|
}
|
||||||
|
|
||||||
|
#newGame {
|
||||||
|
padding: 8px 20px;
|
||||||
|
background-color: lightpink;
|
||||||
|
border: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newGame:hover {
|
||||||
|
background-color: coral;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (orientation: landscape) and (max-height: 680px) {
|
||||||
|
/* CSS applied when the device is in landscape mode*/
|
||||||
|
.names-bank {
|
||||||
|
padding: 0;
|
||||||
|
top: 0;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-count {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-right: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (orientation: portrait) and (max-width: 1100px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-page {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank {
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* position: fixed; */
|
||||||
|
padding: 10px 10px 40px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .names-bank {
|
||||||
|
min-width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank .name {
|
||||||
|
margin: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.names-bank .score {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .names-bank .score {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-count {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 300px;
|
||||||
|
background-size: 300px;
|
||||||
|
height: 266px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-page .card {
|
||||||
|
height: 454px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Google Tag Manager (noscript) -->
|
||||||
|
<noscript>
|
||||||
|
<iframe
|
||||||
|
src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG"
|
||||||
|
height="0"
|
||||||
|
width="0"
|
||||||
|
style="display: none; visibility: hidden"
|
||||||
|
></iframe>
|
||||||
|
</noscript>
|
||||||
|
<!-- End Google Tag Manager (noscript) -->
|
||||||
|
|
||||||
|
<h1><span id="guess-type"></span>: <span id="round-number"></span></h1>
|
||||||
|
|
||||||
|
<div class="play-page">
|
||||||
|
<div
|
||||||
|
class="names-bank"
|
||||||
|
ondrop="returnDrop(event)"
|
||||||
|
ondragover="event.preventDefault()"
|
||||||
|
>
|
||||||
|
<div class="score">
|
||||||
|
YOUR SCORE
|
||||||
|
<div>Correct Answers This Round: <span id="score-amount"></span></div>
|
||||||
|
<div>
|
||||||
|
Correct Answers In Total: <span id="score-amount-total"></span>
|
||||||
|
</div>
|
||||||
|
<div>Overall Percent: <span id="score-percent"></span>%</div>
|
||||||
|
</div>
|
||||||
|
<div class="word-count"><span id="words-left"></span></div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-1"
|
||||||
|
>
|
||||||
|
Name 1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-2"
|
||||||
|
>
|
||||||
|
Name 2
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-3"
|
||||||
|
>
|
||||||
|
Name 3
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-4"
|
||||||
|
>
|
||||||
|
Name 4
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-5"
|
||||||
|
>
|
||||||
|
Name 5
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-6"
|
||||||
|
>
|
||||||
|
Name 6
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-7"
|
||||||
|
>
|
||||||
|
Name 7
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-8"
|
||||||
|
>
|
||||||
|
Name 8
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-9"
|
||||||
|
>
|
||||||
|
Name 9
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-10"
|
||||||
|
>
|
||||||
|
Name 10
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-11"
|
||||||
|
>
|
||||||
|
Name 11
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-12"
|
||||||
|
>
|
||||||
|
Name 12
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-13"
|
||||||
|
>
|
||||||
|
Name 13
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-14"
|
||||||
|
>
|
||||||
|
Name 14
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="drag(event)"
|
||||||
|
onClick="selectName(event)"
|
||||||
|
id="name-15"
|
||||||
|
>
|
||||||
|
Name 15
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form onsubmit="toggleMode(event)">
|
||||||
|
<div class="cards-container">
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,1)"
|
||||||
|
ondragover="allowDrop(event,1)"
|
||||||
|
onclick="dropSelected(event, 1)"
|
||||||
|
id="card-1"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,2)"
|
||||||
|
ondragover="allowDrop(event,2)"
|
||||||
|
onclick="dropSelected(event, 2)"
|
||||||
|
id="card-2"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,3)"
|
||||||
|
ondragover="allowDrop(event,3)"
|
||||||
|
onclick="dropSelected(event, 3)"
|
||||||
|
id="card-3"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,4)"
|
||||||
|
ondragover="allowDrop(event,4)"
|
||||||
|
onclick="dropSelected(event, 4)"
|
||||||
|
id="card-4"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,5)"
|
||||||
|
ondragover="allowDrop(event,5)"
|
||||||
|
onclick="dropSelected(event, 5)"
|
||||||
|
id="card-5"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event, 6)"
|
||||||
|
ondragover="allowDrop(event,6)"
|
||||||
|
onclick="dropSelected(event,6)"
|
||||||
|
id="card-6"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,7)"
|
||||||
|
ondragover="allowDrop(event,7)"
|
||||||
|
onclick="dropSelected(event, 7)"
|
||||||
|
id="card-7"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,8)"
|
||||||
|
ondragover="allowDrop(event,8)"
|
||||||
|
onclick="dropSelected(event, 8)"
|
||||||
|
id="card-8"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,9)"
|
||||||
|
ondragover="allowDrop(event,9)"
|
||||||
|
onclick="dropSelected(event, 9)"
|
||||||
|
id="card-9"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,10)"
|
||||||
|
ondragover="allowDrop(event,10)"
|
||||||
|
onclick="dropSelected(event, 10)"
|
||||||
|
id="card-10"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,11)"
|
||||||
|
ondragover="allowDrop(event,11)"
|
||||||
|
onclick="dropSelected(event, 11)"
|
||||||
|
id="card-11"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
ondrop="drop(event,12)"
|
||||||
|
ondragover="allowDrop(event,12)"
|
||||||
|
onclick="dropSelected(event, 12)"
|
||||||
|
id="card-12"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<input type="submit" id="submit" value="Submit" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position: absolute; top: 0; left: 0; right: 0; color: grey">
|
||||||
|
<form method="get" action="index.html">
|
||||||
|
<input type="submit" id="newGame" value="New Game" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div style="margin: -40px 0 0; height: 60px">
|
||||||
|
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-size: 0.9em;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
color: grey;
|
||||||
|
font-style: italic;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
made by
|
||||||
|
<a
|
||||||
|
style="color: rgb(0, 146, 156); font-style: italic"
|
||||||
|
href="https://idamayer.com"
|
||||||
|
>Ida Mayer</a
|
||||||
|
>
|
||||||
|
& Alex Lien 2022
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -19,7 +19,6 @@
|
||||||
</script>
|
</script>
|
||||||
<!-- End Google Tag Manager -->
|
<!-- End Google Tag Manager -->
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<script type="text/javascript" src="app.js"></script>
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -29,123 +28,15 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||||
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1,
|
||||||
|
h3 {
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 230px;
|
|
||||||
height: 208px;
|
|
||||||
border: 5px solid lightgrey;
|
|
||||||
margin: 5px;
|
|
||||||
align-items: flex-end;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 11px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
/*background-size: contain;*/
|
|
||||||
background-size: 220px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
transition: height 1s, background-image 1s, border 0.4s 0.6s;
|
|
||||||
background-position-y: calc(50% - 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:not([data-name^='name'])::after {
|
|
||||||
content: '';
|
|
||||||
height: 34px;
|
|
||||||
background: white;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .card {
|
|
||||||
height: 350px;
|
|
||||||
/*padding-top: 310px;*/
|
|
||||||
/*background-size: cover;*/
|
|
||||||
overflow: hidden;
|
|
||||||
border-color: rgb(0, 146, 156);
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .card.incorrect {
|
|
||||||
border-color: rgb(216, 27, 96);
|
|
||||||
}
|
|
||||||
|
|
||||||
.names-bank {
|
|
||||||
position: fixed;
|
|
||||||
padding: 10px 10px 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.names-bank .name {
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .names-bank .name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .names-bank .word-count {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.word-count {
|
|
||||||
text-align: center;
|
|
||||||
font-style: italic;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background-color: rgb(255, 193, 7);
|
|
||||||
width: 200px;
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.names-bank .score {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .names-bank .score {
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 1.2s 0.2s;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
width: 230px;
|
|
||||||
min-height: 36px;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: lightgrey;
|
|
||||||
padding: 8px 12px 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .name {
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#submit {
|
#submit {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
|
|
@ -161,108 +52,58 @@
|
||||||
background-color: rgb(0, 146, 156);
|
background-color: rgb(0, 146, 156);
|
||||||
}
|
}
|
||||||
|
|
||||||
#newGame {
|
[type='radio'] {
|
||||||
padding: 8px 20px;
|
display: none;
|
||||||
background-color: lightpink;
|
}
|
||||||
border: none;
|
|
||||||
position: absolute;
|
[type='radio'] + label.radio-label {
|
||||||
top: 5px;
|
background: lightgrey;
|
||||||
left: 20px;
|
display: block;
|
||||||
border-radius: 3px;
|
padding: 10px;
|
||||||
font-size: 0.7em;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#newGame:hover {
|
label.radio-label:hover {
|
||||||
background-color: coral;
|
background: darkgrey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
[type='radio']:checked + label.radio-label {
|
||||||
background-color: orange;
|
background: lightcoral;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (orientation: landscape) and (max-height: 680px) {
|
.radio-label h3 {
|
||||||
/* CSS applied when the device is in landscape mode*/
|
margin: 0;
|
||||||
.names-bank {
|
display: inline-block;
|
||||||
padding: 0;
|
vertical-align: middle;
|
||||||
top: 0;
|
width: 220px;
|
||||||
max-height: 100vh;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.word-count {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-right: 240px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (orientation: portrait) and (max-width: 1100px) {
|
.thumbnail {
|
||||||
body {
|
display: inline-block;
|
||||||
font-size: 1.8em;
|
vertical-align: middle;
|
||||||
}
|
width: 67px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.play-page {
|
body {
|
||||||
flex-direction: column;
|
padding: 70px 0 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.names-bank {
|
#addl-options {
|
||||||
flex-direction: row;
|
position: absolute;
|
||||||
display: flex;
|
top: 30px;
|
||||||
flex-wrap: wrap;
|
right: 30px;
|
||||||
/* position: fixed; */
|
background-color: white;
|
||||||
padding: 10px 10px 40px;
|
padding: 10px;
|
||||||
position: sticky;
|
cursor: pointer;
|
||||||
top: 0;
|
width: 200px;
|
||||||
z-index: 100;
|
}
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .names-bank {
|
#addl-options > summary {
|
||||||
min-width: 100%;
|
list-style: none;
|
||||||
justify-content: center;
|
text-align: right;
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.names-bank .name {
|
|
||||||
margin: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.names-bank .score {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .names-bank .score {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.word-count {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 300px;
|
|
||||||
background-size: 300px;
|
|
||||||
height: 266px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-page .card {
|
|
||||||
height: 454px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -277,256 +118,86 @@
|
||||||
></iframe>
|
></iframe>
|
||||||
</noscript>
|
</noscript>
|
||||||
<!-- End Google Tag Manager (noscript) -->
|
<!-- End Google Tag Manager (noscript) -->
|
||||||
|
<h1>Magic the Guessering</h1>
|
||||||
<h1><span id="guess-type"></span>: <span id="round-number"></span></h1>
|
<div class="play-page" style="justify-content: center">
|
||||||
|
<form
|
||||||
<div class="play-page">
|
method="get"
|
||||||
<div
|
action="guess.html"
|
||||||
class="names-bank"
|
style="display: flex; flex-direction: column; align-items: center"
|
||||||
ondrop="returnDrop(event)"
|
|
||||||
ondragover="event.preventDefault()"
|
|
||||||
>
|
>
|
||||||
<div class="score">
|
<!-- <input type="radio" id="wrath" name="whichguesser" value="wrath" />
|
||||||
YOUR SCORE
|
<label class="radio-label" for="wrath">
|
||||||
<div>Correct Answers This Round: <span id="score-amount"></span></div>
|
<img
|
||||||
<div>
|
class="thumbnail"
|
||||||
Correct Answers In Total: <span id="score-amount-total"></span>
|
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/6/0619d670-7b53-4185-a25d-2fab5db1aab5.jpg?1562896185"
|
||||||
</div>
|
/>
|
||||||
<div>Overall Percent: <span id="score-percent"></span>%</div>
|
<h3>I'll Clean Sweep</h3></label
|
||||||
</div>
|
><br /> -->
|
||||||
<div class="word-count"><span id="words-left"></span></div>
|
|
||||||
<div
|
<input
|
||||||
class="name"
|
type="radio"
|
||||||
draggable="true"
|
id="counterspell"
|
||||||
ondragstart="drag(event)"
|
name="whichguesser"
|
||||||
onClick="selectName(event)"
|
value="counterspell"
|
||||||
id="name-1"
|
checked
|
||||||
|
/>
|
||||||
|
<label class="radio-label" for="counterspell">
|
||||||
|
<img
|
||||||
|
class="thumbnail"
|
||||||
|
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855"
|
||||||
|
/>
|
||||||
|
<h3>Counterspell Guesser</h3></label
|
||||||
|
><br />
|
||||||
|
|
||||||
|
<!-- <input type="radio" id="terror" name="whichguesser" value="terror" />
|
||||||
|
<label class="radio-label" for="terror">
|
||||||
|
<img
|
||||||
|
class="thumbnail"
|
||||||
|
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/2/d/2dd5d601-aff7-4b7a-ab6c-b89f403af076.jpg?1562905752"
|
||||||
|
/>
|
||||||
|
<h3>I'm a Terror-able Guesser</h3></label
|
||||||
|
><br /> -->
|
||||||
|
|
||||||
|
<input type="radio" id="burn" name="whichguesser" value="burn" />
|
||||||
|
<label class="radio-label" for="burn">
|
||||||
|
<img
|
||||||
|
class="thumbnail"
|
||||||
|
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596"
|
||||||
|
/>
|
||||||
|
<h3>Match With Hot Singles</h3></label
|
||||||
|
><br />
|
||||||
|
|
||||||
|
<!-- <input type="radio" id="beast" name="whichguesser" value="beast" />
|
||||||
|
<label class="radio-label" for="beast">
|
||||||
|
<img
|
||||||
|
class="thumbnail"
|
||||||
|
src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469"
|
||||||
|
/>
|
||||||
|
<h3>Finding Fantastic Beasts</h3></label
|
||||||
>
|
>
|
||||||
Name 1
|
<br /> -->
|
||||||
</div>
|
|
||||||
<div
|
<details id="addl-options">
|
||||||
class="name"
|
<summary>
|
||||||
draggable="true"
|
<img
|
||||||
ondragstart="drag(event)"
|
src="http://mythicspoiler.com/images/buttons/ustset.png"
|
||||||
onClick="selectName(event)"
|
style="width: 32px; vertical-align: top"
|
||||||
id="name-2"
|
/>
|
||||||
>
|
Options
|
||||||
Name 2
|
</summary>
|
||||||
</div>
|
<input type="checkbox" name="digital" id="digital" checked />
|
||||||
<div
|
<label for="digital">include digital cards</label>
|
||||||
class="name"
|
<br />
|
||||||
draggable="true"
|
<input type="checkbox" name="un" id="un" checked />
|
||||||
ondragstart="drag(event)"
|
<label for="un">include un-cards</label>
|
||||||
onClick="selectName(event)"
|
<br />
|
||||||
id="name-3"
|
<input type="checkbox" name="original" id="original" />
|
||||||
>
|
<label for="original">restrict to only original printing</label>
|
||||||
Name 3
|
</details>
|
||||||
</div>
|
<input type="submit" id="submit" value="Play" />
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-4"
|
|
||||||
>
|
|
||||||
Name 4
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-5"
|
|
||||||
>
|
|
||||||
Name 5
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-6"
|
|
||||||
>
|
|
||||||
Name 6
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-7"
|
|
||||||
>
|
|
||||||
Name 7
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-8"
|
|
||||||
>
|
|
||||||
Name 8
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-9"
|
|
||||||
>
|
|
||||||
Name 9
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-10"
|
|
||||||
>
|
|
||||||
Name 10
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-11"
|
|
||||||
>
|
|
||||||
Name 11
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-12"
|
|
||||||
>
|
|
||||||
Name 12
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-13"
|
|
||||||
>
|
|
||||||
Name 13
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-14"
|
|
||||||
>
|
|
||||||
Name 14
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
draggable="true"
|
|
||||||
ondragstart="drag(event)"
|
|
||||||
onClick="selectName(event)"
|
|
||||||
id="name-15"
|
|
||||||
>
|
|
||||||
Name 15
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form onsubmit="toggleMode(event)">
|
|
||||||
<div class="cards-container">
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,1)"
|
|
||||||
ondragover="allowDrop(event,1)"
|
|
||||||
onclick="dropSelected(event, 1)"
|
|
||||||
id="card-1"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,2)"
|
|
||||||
ondragover="allowDrop(event,2)"
|
|
||||||
onclick="dropSelected(event, 2)"
|
|
||||||
id="card-2"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,3)"
|
|
||||||
ondragover="allowDrop(event,3)"
|
|
||||||
onclick="dropSelected(event, 3)"
|
|
||||||
id="card-3"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,4)"
|
|
||||||
ondragover="allowDrop(event,4)"
|
|
||||||
onclick="dropSelected(event, 4)"
|
|
||||||
id="card-4"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,5)"
|
|
||||||
ondragover="allowDrop(event,5)"
|
|
||||||
onclick="dropSelected(event, 5)"
|
|
||||||
id="card-5"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event, 6)"
|
|
||||||
ondragover="allowDrop(event,6)"
|
|
||||||
onclick="dropSelected(event,6)"
|
|
||||||
id="card-6"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,7)"
|
|
||||||
ondragover="allowDrop(event,7)"
|
|
||||||
onclick="dropSelected(event, 7)"
|
|
||||||
id="card-7"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,8)"
|
|
||||||
ondragover="allowDrop(event,8)"
|
|
||||||
onclick="dropSelected(event, 8)"
|
|
||||||
id="card-8"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,9)"
|
|
||||||
ondragover="allowDrop(event,9)"
|
|
||||||
onclick="dropSelected(event, 9)"
|
|
||||||
id="card-9"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,10)"
|
|
||||||
ondragover="allowDrop(event,10)"
|
|
||||||
onclick="dropSelected(event, 10)"
|
|
||||||
id="card-10"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,11)"
|
|
||||||
ondragover="allowDrop(event,11)"
|
|
||||||
onclick="dropSelected(event, 11)"
|
|
||||||
id="card-11"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="card"
|
|
||||||
ondrop="drop(event,12)"
|
|
||||||
ondragover="allowDrop(event,12)"
|
|
||||||
onclick="dropSelected(event, 12)"
|
|
||||||
id="card-12"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<input type="submit" id="submit" value="Submit" />
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="position: absolute; top: 0; left: 0; right: 0; color: grey">
|
|
||||||
<form method="get" action="choose.html">
|
|
||||||
<input type="submit" id="newGame" value="New Game" />
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div style="margin: -40px 0 0; height: 60px">
|
<div style="margin: -40px 0 0; height: 60px">
|
||||||
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
|
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user