forked from aaronbarker/spot-it
/
spot-it.html
212 lines (177 loc) · 16.8 KB
/
spot-it.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make your own Spot It clone</title>
<link rel="stylesheet" href="spot-it.css" media="all" />
</head>
<body class="print3x5 per-row-3">
<section id="intro" class="hide-for-print">
<h1>Make your own Spot It clone</h1>
<p class="hide" id="urlWarning"><strong>URL Provided content.</strong> The spot it game you are viewing is populated via options provided in the URL. This is not content provided by this site and we take no responsibility for what is contained. This option is made available for sharing spot it games with others without saving data on the website itself.</p>
<p>Make your own <a href="http://www.amazon.com/gp/product/B0039S7NO6">Spot it</a> game with your own words or images. All the card logic taken from a blog post from <a href="http://radiganengineering.com/2013/01/spot-it-howd-they-do-that/">Radigan Engineering</a>.</p>
<div class="displayOptions show-with-items hide-with-game">
<h2>Display Options</h2>
<p>
<strong>Set print size:</strong> <a href="#d" data-size="print3x5" class="active">3x5 (landscape)</a>
<a href="#d" data-size="print5x3">5x3 (portrait)</a>
<a href="#d" data-size="print4x6">4x6 (landscape)</a>
<a href="#d" data-size="print6x4">6x4 (portrait)</a>
<a href="#d" data-size="print4x4">3.5x3.5 (square/circle)</a>
</p>
<p>
<span class="items-per-row"><strong>Items per row:</strong> <a href="#d" data-rowcount="2">2</a> <a href="#d" data-rowcount="3" class="active">3</a> <a href="#d" data-rowcount="4">4</a><br /></span>
<strong>Show labels:</strong> <label for="showvalues"><input type="checkbox" id="showvalues" /> Yes</label><br />
<strong>Randomly rotate items:</strong> <label for="rotate"><input type="checkbox" id="rotate" /> Yes</label><br />
<strong>Big text (for site words):</strong> <label for="bigtext"><input type="checkbox" id="bigtext" /> Yes</label><br />
<strong>Colorize words (for site words):</strong> <label for="colorize"><input type="checkbox" id="colorize" /> Yes</label><br />
</p>
</div>
<p class="show-with-items hide-with-game">
<a href="#printing" class="expander">Show print instructions</a>
</p>
<section id="printing" class="printInstructions hide">
<h2>Print Instructions</h2>
<p>Printing these on to cards is a little bit of a process. We have gone through a lot of effort to make it so that you CAN print these directly to index cards to save you a lot of effort of cutting multiple cards on a single larger paper, but to print on cards you have to do a bit of the work.</p>
<p>You have a few options for printing:</p>
<ul>
<li>Print on a larger sheet of paper and cut the cards out yourself</li>
<li>Print on index cards where one card will print on each with no additional cutting.</li>
<li>Save the print view of the index card version so that you can send it to a photo printer to print the cards</li>
</ul>
<h3>Index card/photo printing</h3>
<p>I am on a Mac and have only gotten this to work on <a href="http://www.google.com/chrome/">Google Chrome</a> (not Safari or Firefox). Hopefully it will similarly work on Chrome on Windows.</p>
<p>When printing do the following:</p>
<ul>
<li><strong>Layout</strong>: Choose portrait or landscape depending on the layout you have chosen</li>
<li>Open "More settings"</li>
<li><strong>Paper size</strong>: choose the size that you will be printing on, for either index cards or photos</li>
<li><strong>Margins</strong>: choose "None"</li>
<li>If you are printing via your own printer, click <strong>Print</strong>. If you are sending to a photo service choose "Open PDF in Preview" on a Mac and hopefully you can find something similar on Windows.</li>
<li>If you are printing to a photo service, they usually do not take PDFs as source for the photos. I used <a href="http://pdf2jpg.net/">PDFtoJPG.net</a> to convert the PDF to jpg images that you can upload to your photo service of choice.</li>
</ul>
<p>The above is complicated and yet at the same time vague. Sorry about that. I wish it could be easier, but printing in this way just isn't an easy thing. Good luck :)</p>
</section>
<section id="game" class="show-with-items">
<h2>Play Spot It Game</h2>
<p>You can also play a game here online to see how fast you can get 10 matches. Click the item on either card that is the match.</p>
<p class="playgamewrapper hide-with-game"><a href="#d" id="playgame">Start game</a></p>
<div id="gamestuff" class="hide show-with-game">
<p>Timer: <span id="timer"></span></p>
<p>Num correct: <span class="num-correct"></span>/10</p>
<p><a href="#d" class="quitgame">Quit game</a></p>
</div>
</section>
</section>
<div id="output" class="cards show-with-items"></div>
<secion class="dataEntry hide-for-print hide-with-game">
<h2>Provide data</h2>
<textarea name="itemEntry" id="itemEntry"></textarea><br />
<button id="submit">Submit</button> <a href="" class="sharelink show-with-items">Link to this set</a>
<p>
<a href="#data-instructions" class="expander">Show instructions on how to provide data</a>
</p>
<div id="data-instructions" class="hide">
<p>In the text area above, enter the items you would like to be made into cards. The game only works with certain numbers of items:</p>
<ul>
<li><strong>3 items</strong> - 2 items per card</li>
<li><strong>7 items</strong> - 3 items per card</li>
<li><strong>13 items</strong> - 4 items per card</li>
<li><strong>31 items</strong> - 6 items per card</li>
<li><strong>57 items</strong> - 8 items per card</li>
</ul>
<p>If you enter more or less than those numbers we will truncate your list down to the next lower number, except for below 2 where we won't be able to use it at all. I don't really understand the math/logic, so I am not sure why there aren't 5 and 7 items per card options. I used what was made available in <a href="http://radiganengineering.com/2013/01/spot-it-howd-they-do-that/">this article</a>. If you know how to do 5 or 7, let me know.</p>
<p>Separate each item in the list by a return. You can use words, or provide images using one of the options below.</p>
<section id="words">
<h3>Adding Words</h3>
<p>Add one work per line. Done.</p>
</section>
<section id="upload">
<h3>Loading Images - Upload</h3>
<p>You can drag images anywhere on to this page and they will be used for your game. The images are NOT uploaded to our site, but are saved in your browser. Images are restricted to 100kb each. Any that are larger than 100kb will automatically be resized for you. Depending on the number and size of your images this can take a while. We encourage you to make smaller images before dropping them onto the page, but we will try to work with what you give us</p>
<p>After you add them to the page an interface will be added where you can remove them from your local storage at any time. The filename before the extention will be used as an optional label. So for <code>Mountain.jpg</code> the label would be <code>Mountain</code>. The reason for the 100kb limit is that browsers restrict how much total can be saved, and this is our attempt to keep you under that limit.</p>
<p>If you upload photos, then you can not use the "Link to this set" option as those that you send links to will not have the images locally. You can not drag imgaes directly from another website, you have to get them on your computer first, and then drag them onto this page.</p>
</section>
<section id="reference">
<h3>Loading Images - URL Reference</h3>
<p>If you provide URLs instead of words we will attempt to load those URLs as images. If your images are different aspect ratios (square, landscape, portrait) your cards will be difference sizes as each card is made up of a different mixture of sizes. For best results, have all images be the same general aspect ratio.</p>
<p>You can optionally provide a label for images by adding a "," to the end of the image URL and then putting your label. <code>http://path/to/image.jpg,label here</code></p>
</section>
</div>
<p class="show-with-items">
<a href="#details" class="expander">Show card build details</a>
</p>
<section id="details" class="hide">
<h3>Details</h3>
<dl>
<dt>Items provided:</dt>
<dd class="wordsProvided"></dd>
<dt>Items used: (may be different due to needing to be specific numbers)</dt>
<dd class="wordsUsed"></dd>
<dt>Cards: </dt>
<dd class="numCards"></dd>
</dl>
</section>
<section id="local" class="hide-for-print hide">
<h2>Locally stored images</h2>
<p>These are the images we are storing locally for you. You can <a href="#d" class="remove-local-all">remove them all</a> or only certain ones by clicking them below. Any you remove will no longer be available for showing in a game. If you have any saved games, the images referenced there that you delete will come up broken.</p>
<p>Items marked in green are used in the current set. Click an image to add it to the current set, click it again to remove it. Click "Delete" to remove it all together.</p>
<p><a href="#d" class="add-all-local">Add all locally stored images to game</a> <a href="#d" class="remove-all-local">Remove all locally stored images from game</a> <a href="#d" class="delete-all-local">Delete all images</a></p>
<ul class="local_show"></ul>
</section>
<div class="setData">
<section id="demo" class="data-group">
<h3>Demo Data</h3>
<ul>
<li><a href="#d" data-demo="words">Load small demo text</a></li>
<li><a href="#d" data-demo="states">Load large demo text (US States)</a></li>
<li><a href="#d" data-demo="kSiteWords">Load large demo text (Kindergarten Site Words)</a></li>
<li> <a href="#d" data-demo="portraits">Load demo images (31 portrait)</a></li>
<li> <a href="#d" data-demo="landscapes">Load demo images (57 landscape)</a></li>
</ul>
</section>
<section id="saves" class="data-group hide">
<h3>Saved data</h3>
<p>You can optionally save your data for later. This is only stored on your machine, nothing is saved on the website itself.</p>
<a href="#d" class="save-it">Save currently entered data</a>
<p>Load previously saved data by clicking its name.</p>
<ul class="saves">
</ul>
</section>
</div>
</section>
<p class=" hide-with-game">
<a href="#about" class="expander">Show information about the project</a>
</p>
<section id="about" class="hide-for-print hide">
<h2>About this project</h2>
<p>Our family purchased the original <a href="http://www.amazon.com/gp/product/B0039S7NO6">Spot it</a> game and I was fascinated by how there could only be one match no matter what two cards you looked at. I went to the internet to find out how it worked. I found <a href="http://math.stackexchange.com/questions/36798/what-is-the-math-behind-the-game-spot-it">several</a> <a href="http://bowmandickson.com/2012/07/15/math-circle-problem-analysis-of-the-game-spot-it/">discussions</a> about it that were all above my mental capacities for math. Then I bumped into <a href="http://radiganengineering.com/2013/01/spot-it-howd-they-do-that/">this article</a> that had examples of what the cards would be for different item counts. Well, if I didn't have to figure things out, I could do something with that.</p>
<p>I thought it would be really cool to make my own Spot It game with my own pictures. So I started digging into making a version that could accept input and generate the game for me. After way too many hours of playing with the code and neglecting my family, this site was created. This allows you to provide your own images or words and cards will be "randomly" generated. I used the structure from RadiganEngineering but randomize the card order and randomize the order of the items within each card.</p>
<p>Naturally I had to keep adding functionality, demo content, save the data locally, pass content in via the URL, load demos via URL, etc. The basic card generation and game I had done in a day, all the other stuff took several weekends.</p>
<p>I hope this is of benefit to others. I found <a href="https://creativenrg.wordpress.com/2015/06/22/mathematical-magic-goldman-family-spot-it/">this blog post</a> about creating a Spot It game with family pictures. It looks like it took a lot of work to make that happen. Hopefully this site allows similar creations in a fraction of the time.</p>
<p>I don't pretend to think this is perfect. It was hacked together pretty quickly despite it taking so long. I debated between using newer technologies (SASS, ES6, etc) to help myself improve, but for now I decided to leave it as basic JavaScript so that it is easier for others to understand. Some day I may make it fancier. So for all my techy friends, don't mock my lack of using the latest and greatest, it was for the greater good :) Some day it will bother me enough to update everything, but for now it is what it is.</p>
<p>If you have any feedback, questions, etc you can find me on <a href="https://twitter.com/zelph">twitter</a> or give feedback on the <a href="https://github.com/aaronbarker/spot-it">GitHub project</a>.</p>
</section>
<div id="drop-box-overlay">
<div class="message">
<p class="instructions">Drop files anywhere to upload. Only .jpg, .gif and .png files are allowed.</p>
<p class="processing hide">
Processing file:<br />
<img src="" class="currentlyProcessing" />
</p>
</div>
</div>
<a href="https://github.com/aaronbarker/spot-it" class="hide-for-print"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<script src="game.js"></script>
<script src="data.js"></script>
<script src="demo.js"></script>
<script src="stopwatch.js"></script>
<script src="spot-it.js"></script>
<script src="storage.js"></script>
<script src="print.js"></script>
<!-- <script src="upload.js"></script> -->
<div id="preview" class="dropzone-previews"></div>
<script src="dropzone.js"></script>
<script src="dropzone.init.js"></script>
</body>
</html>