├── README
├── cards.gif
├── overview.gif
├── add_names.gif
├── custom_emoji.gif
└── add-many_edit_delete.gif
├── LICENSE
├── isotope-fitColumns-v1.1.4.js
├── README.md
├── leaderboard-cards.html
├── leaderboard.html
├── isotope-v3.0.6.pkgd.min.js
└── jquery-3.5.1.min.js
/README/cards.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgogos/leaderboard/HEAD/README/cards.gif
--------------------------------------------------------------------------------
/README/overview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgogos/leaderboard/HEAD/README/overview.gif
--------------------------------------------------------------------------------
/README/add_names.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgogos/leaderboard/HEAD/README/add_names.gif
--------------------------------------------------------------------------------
/README/custom_emoji.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgogos/leaderboard/HEAD/README/custom_emoji.gif
--------------------------------------------------------------------------------
/README/add-many_edit_delete.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgogos/leaderboard/HEAD/README/add-many_edit_delete.gif
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Anastasios Gogos
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/isotope-fitColumns-v1.1.4.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * fitColumns layout mode for Isotope
3 | * v1.1.4
4 | * https://isotope.metafizzy.co/layout-modes/fitcolumns.html
5 | */
6 |
7 | /*jshint browser: true, devel: false, strict: true, undef: true, unused: true */
8 |
9 | ( function( window, factory ) {
10 | // universal module definition
11 | /* jshint strict: false */ /*globals define, module, require */
12 | if ( typeof define === 'function' && define.amd ) {
13 | // AMD
14 | define( [
15 | 'isotope-layout/js/layout-mode'
16 | ],
17 | factory );
18 | } else if ( typeof exports === 'object' ) {
19 | // CommonJS
20 | module.exports = factory(
21 | require('isotope-layout/js/layout-mode')
22 | );
23 | } else {
24 | // browser global
25 | factory(
26 | window.Isotope.LayoutMode
27 | );
28 | }
29 |
30 | }( window, function factory( LayoutMode ) {
31 | 'use strict';
32 |
33 | var FitColumns = LayoutMode.create('fitColumns');
34 | var proto = FitColumns.prototype;
35 |
36 | proto._resetLayout = function() {
37 | this.x = 0;
38 | this.y = 0;
39 | this.maxX = 0;
40 | };
41 |
42 | proto._getItemLayoutPosition = function( item ) {
43 | item.getSize();
44 |
45 | // if this element cannot fit in the current row
46 | if ( this.y !== 0 && item.size.outerHeight + this.y > this.isotope.size.innerHeight ) {
47 | this.y = 0;
48 | this.x = this.maxX;
49 | }
50 |
51 | var position = {
52 | x: this.x,
53 | y: this.y
54 | };
55 |
56 | this.maxX = Math.max( this.maxX, this.x + item.size.outerWidth );
57 | this.y += item.size.outerHeight;
58 |
59 | return position;
60 | };
61 |
62 | proto._getContainerSize = function() {
63 | return { width: this.maxX };
64 | };
65 |
66 | proto.needsResizeLayout = function() {
67 | return this.needsVerticalResizeLayout();
68 | };
69 |
70 | return FitColumns;
71 |
72 | }));
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # leaderboard
2 |
3 | - Made with ❤️ for friends who were trying to motivate their classes 🧑🏫 during COVID-19 lockdowns.
4 | - Use it together with `leaderboard-cards` for more competition & fun!
5 | - Try them both online at:
6 | - [gogos.me/leaderboard/](https://gogos.me/leaderboard/)
7 | - [gogos.me/leaderboard-cards/](https://gogos.me/leaderboard-cards/)
8 | - alternative codepen links: [leaderboard](https://codepen.io/tgogos/full/qBaEJaa) / [leaderboard-cards](https://codepen.io/tgogos/full/jOMrvmg)
9 |
10 | 
11 |
12 | ✔️ create a class leaderboard by adding names / scores in a few seconds
13 | ✔️ change the score by adding or removing points with the appropriate buttons
14 | ✔️ see the live updates as the players compete and level-up
15 | ✔️ changes are stored to your browser's `local storage`
16 |
17 | # leaderboard-cards
18 |
19 | 
20 |
21 | ✔️ add lucky cards that give extra points (or the opposite)
22 | ✔️ they are randomly placed whenever you refresh the page
23 | ✔️ press the button to shuffle them a little bit
24 | ✔️ when you think its needed, ask the user to pick one card
25 |
26 |
27 |
28 |
29 |
30 | # Instructions
31 |
32 | ## ❔ How to add new names
33 |
34 | Use the ➕ button and a random animal emoji will be selected, then type the name / score and hit OK
35 |
36 | 
37 |
38 | ### 👉 use every emoji you like
39 |
40 | There is a predefined list of animals that are randomly chosen whenever you add a new name:
41 |
42 | ```
43 | 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🐛
44 | 🦋 🐌 🐞 🐜 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🐘 🦛 🦏 🐪
45 | 🐫 🦒 🦘 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕🦺 🐈 🐓 🦃 🦚 🦜 🦢 🦩 🐇 🦝 🦨 🦡 🦦 🦥 🐁 🐀 🦔
46 | ```
47 |
48 | but you can use whatever emoji you prefer by just typing it:
49 |
50 | 
51 |
52 |
53 |
54 | ## ❔ How to add many, edit, delete...
55 |
56 | Use the 📋 button and add, edit or delete lines from the text-area that is poped-up. Make sure that that every line has 3 comma-separated entries of the following format `,,` for example:
57 |
58 | ```
59 | 🐒,Green Monkey,14
60 | 🦎,Orange Iguana,13
61 | 🦜,Purple Parrot,12
62 | 🐟,Blue Barracuda,10
63 | 🐆,Red Jaguar,9
64 | 🐍,Silver Snake,8
65 | ```
66 |
67 | 
68 |
69 |
70 | ## ❔ How to share
71 |
72 | Use the 🔗 button, copy the link created and share it. The current state of your leaderboard will be stored in that looooong `url` and at the time a user pastes it to a browser, the data are moved to the local storage and the url becomes short again. Example:
73 |
74 | ```
75 | https://gogos.me/leaderboard/?q=JTVCJTdCJTIyaWNvbiUyMiUzQSUyMiVGMCU5RiU5MCU5MiUyMiUyQyUyMm5pY2tuYW1lJTIyJTNBJTIyR3JlZW4lMjBNb25rZXklMjIlMkMlMjJzY29yZSUyMiUzQSUyMjE0JTIyJTdEJTJDJTdCJTIyaWNvbiUyMiUzQSUyMiVGMCU5RiVBNiU4RSUyMiUyQyUyMm5pY2tuYW1lJTIyJTNBJTIyT3JhbmdlJTIwSWd1YW5hJTIyJTJDJTIyc2NvcmUlMjIlM0ElMjIxMyUyMiU3RCUyQyU3QiUyMmljb24lMjIlM0ElMjIlRjAlOUYlQTYlOUMlMjIlMkMlMjJuaWNrbmFtZSUyMiUzQSUyMlB1cnBsZSUyMFBhcnJvdCUyMiUyQyUyMnNjb3JlJTIyJTNBJTIyMTIlMjIlN0QlMkMlN0IlMjJpY29uJTIyJTNBJTIyJUYwJTlGJTkwJTlGJTIyJTJDJTIybmlja25hbWUlMjIlM0ElMjJCbHVlJTIwQmFycmFjdWRhJTIyJTJDJTIyc2NvcmUlMjIlM0ElMjIxMCUyMiU3RCUyQyU3QiUyMmljb24lMjIlM0ElMjIlRjAlOUYlOTAlODYlMjIlMkMlMjJuaWNrbmFtZSUyMiUzQSUyMlJlZCUyMEphZ3VhciUyMiUyQyUyMnNjb3JlJTIyJTNBJTIyOSUyMiU3RCUyQyU3QiUyMmljb24lMjIlM0ElMjIlRjAlOUYlOTAlOEQlMjIlMkMlMjJuaWNrbmFtZSUyMiUzQSUyMlNpbHZlciUyMFNuYWtlJTIyJTJDJTIyc2NvcmUlMjIlM0ElMjI4JTIyJTdEJTVE
76 | ```
77 |
78 | # Libraries used
79 |
80 | - jQuery: [jquery.com](https://jquery.com/)
81 | - isotope.js: [isotope.metafizzy.co](https://isotope.metafizzy.co/)
82 |
--------------------------------------------------------------------------------
/leaderboard-cards.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Leaderboard Cards
7 |
8 |
87 |
88 |
89 |