open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the select screen index.html

Browse Source
This commit is contained in:
Austin Chen 2022-07-20 17:14:49 -07:00
parent c3b825cc44
commit 6b5b9b42f5
3 changed files with 672 additions and 672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
web/public/mtg/choose.html
View File

@ -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
View 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>

565
web/public/mtg/index.html
View File

@ -19,7 +19,6 @@
</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8" />
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
body {
position: relative;
@ -29,123 +28,15 @@
display: flex;
flex-direction: row-reverse;
font-family: Georgia, 'Times New Roman', Times, serif;
min-height: 200px;
}
h1 {
h1,
h3 {
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;
@ -161,108 +52,58 @@
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;
[type='radio'] {
display: none;
}
[type='radio'] + label.radio-label {
background: lightgrey;
display: block;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
#newGame:hover {
background-color: coral;
label.radio-label:hover {
background: darkgrey;
}
.selected {
background-color: orange;
[type='radio']:checked + label.radio-label {
background: lightcoral;
}
@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;
}
.radio-label h3 {
margin: 0;
display: inline-block;
vertical-align: middle;
width: 220px;
}
@media screen and (orientation: portrait) and (max-width: 1100px) {
body {
font-size: 1.8em;
}
.thumbnail {
display: inline-block;
vertical-align: middle;
width: 67px;
height: 48px;
margin-right: 4px;
}
.play-page {
flex-direction: column;
}
body {
padding: 70px 0 30px;
}
.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;
}
#addl-options {
position: absolute;
top: 30px;
right: 30px;
background-color: white;
padding: 10px;
cursor: pointer;
width: 200px;
}
.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;
}
#addl-options > summary {
list-style: none;
text-align: right;
}
</style>
</head>
@ -277,256 +118,86 @@
></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()"
<h1>Magic the Guessering</h1>
<div class="play-page" style="justify-content: center">
<form
method="get"
action="guess.html"
style="display: flex; flex-direction: column; align-items: center"
>
<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"
<!-- <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
>
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" />
<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="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">
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
</div>