game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

Added clipboard & tooltip

commit: ea7b3993d34fc1391162c75a91c9f07000fdc8d7
parent: ec62ffdd3d9cb43a0e8ffb0387a61d936ad41cd4
author: typable <typable.dev@gmail.com>
time: 2021-03-20 20:35

4 file(s) changed, 200 insertion(s), 85 deletion(s)[browse files]

M asset/js/index.js
M asset/less/theme.less
M design-system/color.html
M design-system/icons.html

asset/js/index.js [new file] [old file]

20			}
21		}
22	}
23	let delay;
24	const snackbar = document.querySelector('.snackbar');
25	for(const tone of document.querySelectorAll('.palette-tone')) {
26		tone.onclick = function() {
27			if(snackbar) {
28				snackbar.classList.add('active');
29				let time = new Date().getTime();
30				setTimeout(() => {
31					if(delay === time) {
32						snackbar.classList.remove('active');
33					}
34				}, 3000);
35				const value = `@color-${tone.parentNode.dataset.type}-${tone.textContent}`;
36				navigator.clipboard.writeText(value);
37				delay = time;
38			}
39		}
40	}
41};
41
\ No newline at end of file

asset/less/theme.less [new file] [old file]

315		display: flex;
316		flex-direction: column;
317		border-radius: 4px;
318		overflow: hidden;
318		width: calc(25% - @space-1x * 3 / 4);
319		margin-bottom: @space-1x;
320

327			padding: calc(@space-1x / 1.25);
328			cursor: pointer;
329			user-select: none;
330			transition: margin ease 0.2s, width ease 0.2s, height ease 0.2s, padding ease 0.2s, border-radius ease 0.2s;
331
332			&.dark {
333				color: @color-gray-900;
334				font-weight: 600;
335			}
336
337			&:hover {
338				margin: -4px;
339				width: calc(100% + 8px);
340				height: calc(100% + 8px);
341				padding: calc(@space-1x / 1.25 + 4px);
342				z-index: 1;
343				border-radius: 4px;
344			}
345
346			&:first-of-type {
347				border-top-left-radius: 4px;
348				border-top-right-radius: 4px;
349			}
350
351			&:last-of-type {
352				border-bottom-left-radius: 4px;
353				border-bottom-right-radius: 4px;
354			}
355		}
356	}
357}

375		cursor: pointer;
376		
377		.ico {
359			color: @color-gray-700;
378			color: @color-gray-600;
379			transition: color ease 0.2s;
380		}
381
382		&:hover {
363			
383
384			.ico {
385				color: @color-gray-900;
386			}

408	a {
409		font-size: 16px;
410	}
411}
412
413.tooltip {
414	position: relative;
415
416	&:hover {
417
418		&::before,
419		&::after {
420			opacity: 1;
421			transition-delay: 1s;
422		}
423
424		&::before {
425			bottom: -13px;
426		}
427
428		&::after {
429			bottom: -40px;
430		}
431	}
432
433	&::before,
434	&::after {
435		opacity: 0;
436		content: '';
437		display: inline-block;
438		position: absolute;
439		user-select: none;
440		pointer-events: none;
441		transition: opacity ease 0.1s, bottom ease 0.1s;
442		transition-delay: 0s;
443		z-index: 2;
444		left: 50%;
445		transform: translate(-50%, 0);
446	}
447
448	&::before {
449		border: 3px solid transparent;
450		border-bottom: 3px solid @color-gray-900;
451		bottom: -10px;
452	}
453
454	&::after {
455		content: attr(data-title);
456		background: @color-gray-900;
457		font-size: 12px;
458		color: @color-white;
459		white-space: nowrap;
460		padding: 6px 10px;
461		padding-bottom: 7px;
462		border-radius: 3px;
463		bottom: -37px;
464		height: 15px;
465		min-width: 40px;
466		text-align: center;
467		font-weight: 400;
468	}
469}
470
471.snackbar {
472	background: @color-gray-900;
473	position: fixed;
474	left: @space-2x;
475	bottom: @space-1x;
476	border-radius: 4px;
477	color: @color-white;
478	padding: 18px 30px;
479	pointer-events: none;
480	opacity: 0;
481	transition: opacity ease 0.2s, bottom ease 0.2s;
482
483	&.active {
484		opacity: 1;
485		bottom: @space-2x;
486	}
487}
487
\ No newline at end of file

design-system/color.html [new file] [old file]

34					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
35					<code><pre><span class="c">@import</span> <span class="p">url</span>(<span class="s">'<span class="ref ref-link">https://git.typable.dev/std/less/color.less</span>'</span>);</pre></code>
36					<ul class="palette-list">
37						<li class="palette">
37						<li class="palette" data-type="red">
38							<div class="palette-tone dark" style="background: #FFEBEE;">50</div>
39							<div class="palette-tone dark" style="background: #FFCDD2;">100</div>
40							<div class="palette-tone dark" style="background: #EF9A9A;">200</div>

46							<div class="palette-tone" style="background: #C62828;">800</div>
47							<div class="palette-tone" style="background: #B71C1C;">900</div>
48						</li>
49						<li class="palette">
49						<li class="palette" data-type="pink">
50							<div class="palette-tone dark" style="background: #FCE4EC;">50</div>
51							<div class="palette-tone dark" style="background: #F8BBD0;">100</div>
52							<div class="palette-tone dark" style="background: #F48FB1;">200</div>

58							<div class="palette-tone" style="background: #AD1457;">800</div>
59							<div class="palette-tone" style="background: #880E4F;">900</div>
60						</li>
61						<li class="palette">
61						<li class="palette" data-type="purple">
62							<div class="palette-tone dark" style="background: #F3E5F5;">50</div>
63							<div class="palette-tone dark" style="background: #E1BEE7;">100</div>
64							<div class="palette-tone dark" style="background: #CE93D8;">200</div>

70							<div class="palette-tone" style="background: #6A1B9A;">800</div>
71							<div class="palette-tone" style="background: #4A148C;">900</div>
72						</li>
73						<li class="palette">
73						<li class="palette" data-type="blue">
74							<div class="palette-tone dark" style="background: #E3F2FD;">50</div>
75							<div class="palette-tone dark" style="background: #BBDEFB;">100</div>
76							<div class="palette-tone dark" style="background: #90CAF9;">200</div>

82							<div class="palette-tone" style="background: #1565C0;">800</div>
83							<div class="palette-tone" style="background: #0D47A1;">900</div>
84						</li>
85						<li class="palette">
85						<li class="palette" data-type="cyan">
86							<div class="palette-tone dark" style="background: #E0F7FA;">50</div>
87							<div class="palette-tone dark" style="background: #B2EBF2;">100</div>
88							<div class="palette-tone dark" style="background: #80DEEA;">200</div>

94							<div class="palette-tone" style="background: #00838F;">800</div>
95							<div class="palette-tone" style="background: #006064;">900</div>
96						</li>
97						<li class="palette">
97						<li class="palette" data-type="teal">
98							<div class="palette-tone dark" style="background: #E0F7FA;">50</div>
99							<div class="palette-tone dark" style="background: #B2DFDB;">100</div>
100							<div class="palette-tone dark" style="background: #80CBC4;">200</div>

106							<div class="palette-tone" style="background: #00695C;">800</div>
107							<div class="palette-tone" style="background: #004D40;">900</div>
108						</li>
109						<li class="palette">
109						<li class="palette" data-type="green">
110							<div class="palette-tone dark" style="background: #E8F5E9;">50</div>
111							<div class="palette-tone dark" style="background: #C8E6C9;">100</div>
112							<div class="palette-tone dark" style="background: #A5D6A7;">200</div>

118							<div class="palette-tone" style="background: #2E7D32;">800</div>
119							<div class="palette-tone" style="background: #1B5E20;">900</div>
120						</li>
121						<li class="palette">
121						<li class="palette" data-type="lime">
122							<div class="palette-tone dark" style="background: #F9FBE7;">50</div>
123							<div class="palette-tone dark" style="background: #F0F4C3;">100</div>
124							<div class="palette-tone dark" style="background: #E6EE9C;">200</div>

130							<div class="palette-tone" style="background: #9E9D24;">800</div>
131							<div class="palette-tone" style="background: #827717;">900</div>
132						</li>
133						<li class="palette">
133						<li class="palette" data-type="yellow">
134							<div class="palette-tone dark" style="background: #FFFDE7;">50</div>
135							<div class="palette-tone dark" style="background: #FFF9C4;">100</div>
136							<div class="palette-tone dark" style="background: #FFF59D;">200</div>

142							<div class="palette-tone" style="background: #F9A825;">800</div>
143							<div class="palette-tone" style="background: #F57F17;">900</div>
144						</li>
145						<li class="palette">
145						<li class="palette" data-type="orange">
146							<div class="palette-tone dark" style="background: #FFF3E0;">50</div>
147							<div class="palette-tone dark" style="background: #FFE0B2;">100</div>
148							<div class="palette-tone dark" style="background: #FFCC80;">200</div>

154							<div class="palette-tone" style="background: #EF6C00;">800</div>
155							<div class="palette-tone" style="background: #E65100;">900</div>
156						</li>
157						<li class="palette">
157						<li class="palette" data-type="brown">
158							<div class="palette-tone dark" style="background: #EFEBE9;">50</div>
159							<div class="palette-tone dark" style="background: #D7CCC8;">100</div>
160							<div class="palette-tone dark" style="background: #BCAAA4;">200</div>

166							<div class="palette-tone" style="background: #4E342E;">800</div>
167							<div class="palette-tone" style="background: #3E2723;">900</div>
168						</li>
169						<li class="palette">
169						<li class="palette" data-type="gray">
170							<div class="palette-tone dark" style="background: #FAFAFA;">50</div>
171							<div class="palette-tone dark" style="background: #F5F5F5;">100</div>
172							<div class="palette-tone dark" style="background: #EEEEEE;">200</div>

193				</div>
194			</div>
195		</footer>
196		<div class="snackbar">Copied to clipboard</div>
197	</body>
198</html>

design-system/icons.html [new file] [old file]

35					<code><pre><span class="c">@import</span> <span class="p">url</span>(<span class="s">'<span class="ref ref-link">https://git.typable.dev/std/less/icons.less</span>'</span>);</pre></code>
36					<div class="space-2"></div>
37					<ul class="icon-list">
38						<li class="icon"><span class="ico">menu</span></li>
39						<li class="icon"><span class="ico">close</span></li>
40						<li class="icon"><span class="ico">expand_more</span></li>
41						<li class="icon"><span class="ico">expand_less</span></li>
42						<li class="icon"><span class="ico">navigate_before</span></li>
43						<li class="icon"><span class="ico">navigate_next</span></li>
44						<li class="icon"><span class="ico">arrow_back</span></li>
45						<li class="icon"><span class="ico">arrow_forward</span></li>
46						<li class="icon"><span class="ico">more_horiz</span></li>
47						<li class="icon"><span class="ico">refresh</span></li>
48						<li class="icon"><span class="ico">fullscreen</span></li>
49						<li class="icon"><span class="ico">fullscreen_exit</span></li>
50						<li class="icon"><span class="ico">search</span></li>
51						<li class="icon"><span class="ico">done</span></li>
52						<li class="icon"><span class="ico">settings</span></li>
53						<li class="icon"><span class="ico">favorite_outline</span></li>
54						<li class="icon"><span class="ico">delete_outline</span></li>
55						<li class="icon"><span class="ico">language</span></li>
56						<li class="icon"><span class="ico">schedule</span></li>
57						<li class="icon"><span class="ico">event</span></li>
58						<li class="icon"><span class="ico">logout</span></li>
59						<li class="icon"><span class="ico">login</span></li>
60						<li class="icon"><span class="ico">code</span></li>
61						<li class="icon"><span class="ico">print</span></li>
62						<li class="icon"><span class="ico">bookmark_border</span></li>
63						<li class="icon"><span class="ico">https</span></li>
64						<li class="icon"><span class="ico">inbox</span></li>
65						<li class="icon"><span class="ico">add</span></li>
66						<li class="icon"><span class="ico">send</span></li>
67						<li class="icon"><span class="ico">link</span></li>
68						<li class="icon"><span class="ico">edit</span></li>
69						<li class="icon"><span class="ico">push_pin</span></li>
70						<li class="icon"><span class="ico">block</span></li>
71						<li class="icon"><span class="ico">undo</span></li>
72						<li class="icon"><span class="ico">redo</span></li>
73						<li class="icon"><span class="ico">gesture</span></li>
74						<li class="icon"><span class="ico">tag</span></li>
75						<li class="icon"><span class="ico">play_arrow</span></li>
76						<li class="icon"><span class="ico">pause</span></li>
77						<li class="icon"><span class="ico">mic</span></li>
78						<li class="icon"><span class="ico">star</span></li>
79						<li class="icon"><span class="ico">insert_photo</span></li>
80						<li class="icon"><span class="ico">format_quote</span></li>
81						<li class="icon"><span class="ico">pie_chart</span></li>
82						<li class="icon"><span class="ico">format_size</span></li>
83						<li class="icon"><span class="ico">format_bold</span></li>
84						<li class="icon"><span class="ico">format_italic</span></li>
85						<li class="icon"><span class="ico">format_underlined</span></li>
86						<li class="icon"><span class="ico">bubble_chart</span></li>
87						<li class="icon"><span class="ico">border_color</span></li>
88						<li class="icon"><span class="ico">format_color_fill</span></li>
89						<li class="icon"><span class="ico">share</span></li>
90						<li class="icon"><span class="ico">public</span></li>
91						<li class="icon"><span class="ico">person</span></li>
92						<li class="icon"><span class="ico">people</span></li>
93						<li class="icon"><span class="ico">person_add</span></li>
94						<li class="icon"><span class="ico">notifications_none</span></li>
95						<li class="icon"><span class="ico">notifications</span></li>
96						<li class="icon"><span class="ico">notifications_active</span></li>
97						<li class="icon"><span class="ico">file_download</span></li>
98						<li class="icon"><span class="ico">file_upload</span></li>
99						<li class="icon"><span class="ico">upload</span></li>
100						<li class="icon"><span class="ico">download</span></li>
101						<li class="icon"><span class="ico">upload_file</span></li>
102						<li class="icon"><span class="ico">folder</span></li>
103						<li class="icon"><span class="ico">cloud</span></li>
104						<li class="icon"><span class="ico">email</span></li>
105						<li class="icon"><span class="ico">call</span></li>
106						<li class="icon"><span class="ico">chat_bubble</span></li>
107						<li class="icon"><span class="ico">alternate_email</span></li>
38						<li class="icon tooltip" data-title="Menu"><span class="ico">menu</span></li>
39						<li class="icon tooltip" data-title="Close"><span class="ico">close</span></li>
40						<li class="icon tooltip" data-title="Expand"><span class="ico">expand_more</span></li>
41						<li class="icon tooltip" data-title="Minimize"><span class="ico">expand_less</span></li>
42						<li class="icon tooltip" data-title="Before"><span class="ico">navigate_before</span></li>
43						<li class="icon tooltip" data-title="Next"><span class="ico">navigate_next</span></li>
44						<li class="icon tooltip" data-title="Back"><span class="ico">arrow_back</span></li>
45						<li class="icon tooltip" data-title="Foward"><span class="ico">arrow_forward</span></li>
46						<li class="icon tooltip" data-title="More"><span class="ico">more_horiz</span></li>
47						<li class="icon tooltip" data-title="Refresh"><span class="ico">refresh</span></li>
48						<li class="icon tooltip" data-title="Fullscreen"><span class="ico">fullscreen</span></li>
49						<li class="icon tooltip" data-title="Exit Fullscreen"><span class="ico">fullscreen_exit</span></li>
50						<li class="icon tooltip" data-title="Search"><span class="ico">search</span></li>
51						<li class="icon tooltip" data-title="Done"><span class="ico">done</span></li>
52						<li class="icon tooltip" data-title="Settings"><span class="ico">settings</span></li>
53						<li class="icon tooltip" data-title="Favorite"><span class="ico">favorite_outline</span></li>
54						<li class="icon tooltip" data-title="Delete"><span class="ico">delete_outline</span></li>
55						<li class="icon tooltip" data-title="Language"><span class="ico">language</span></li>
56						<li class="icon tooltip" data-title="Schedule"><span class="ico">schedule</span></li>
57						<li class="icon tooltip" data-title="Event"><span class="ico">event</span></li>
58						<li class="icon tooltip" data-title="Login"><span class="ico">login</span></li>
59						<li class="icon tooltip" data-title="Logout"><span class="ico">logout</span></li>
60						<li class="icon tooltip" data-title="Code"><span class="ico">code</span></li>
61						<li class="icon tooltip" data-title="Print"><span class="ico">print</span></li>
62						<li class="icon tooltip" data-title="Bookmkar"><span class="ico">bookmark_border</span></li>
63						<li class="icon tooltip" data-title="Secure"><span class="ico">https</span></li>
64						<li class="icon tooltip" data-title="Inbox"><span class="ico">inbox</span></li>
65						<li class="icon tooltip" data-title="Add"><span class="ico">add</span></li>
66						<li class="icon tooltip" data-title="Send"><span class="ico">send</span></li>
67						<li class="icon tooltip" data-title="Link"><span class="ico">link</span></li>
68						<li class="icon tooltip" data-title="Edit"><span class="ico">edit</span></li>
69						<li class="icon tooltip" data-title="Pin"><span class="ico">push_pin</span></li>
70						<li class="icon tooltip" data-title="Block"><span class="ico">block</span></li>
71						<li class="icon tooltip" data-title="Undo"><span class="ico">undo</span></li>
72						<li class="icon tooltip" data-title="Redo"><span class="ico">redo</span></li>
73						<li class="icon tooltip" data-title="Gesture"><span class="ico">gesture</span></li>
74						<li class="icon tooltip" data-title="Tag"><span class="ico">tag</span></li>
75						<li class="icon tooltip" data-title="Payl"><span class="ico">play_arrow</span></li>
76						<li class="icon tooltip" data-title="Pause"><span class="ico">pause</span></li>
77						<li class="icon tooltip" data-title="Mic"><span class="ico">mic</span></li>
78						<li class="icon tooltip" data-title="Star"><span class="ico">star</span></li>
79						<li class="icon tooltip" data-title="Photo"><span class="ico">insert_photo</span></li>
80						<li class="icon tooltip" data-title="Quote"><span class="ico">format_quote</span></li>
81						<li class="icon tooltip" data-title="Chart"><span class="ico">pie_chart</span></li>
82						<li class="icon tooltip" data-title="Size"><span class="ico">format_size</span></li>
83						<li class="icon tooltip" data-title="Bold"><span class="ico">format_bold</span></li>
84						<li class="icon tooltip" data-title="Italic"><span class="ico">format_italic</span></li>
85						<li class="icon tooltip" data-title="Underline"><span class="ico">format_underlined</span></li>
86						<li class="icon tooltip" data-title="Bubble"><span class="ico">bubble_chart</span></li>
87						<li class="icon tooltip" data-title="Border Color"><span class="ico">border_color</span></li>
88						<li class="icon tooltip" data-title="Fill Color"><span class="ico">format_color_fill</span></li>
89						<li class="icon tooltip" data-title="Share"><span class="ico">share</span></li>
90						<li class="icon tooltip" data-title="Public"><span class="ico">public</span></li>
91						<li class="icon tooltip" data-title="Person"><span class="ico">person</span></li>
92						<li class="icon tooltip" data-title="Group"><span class="ico">people</span></li>
93						<li class="icon tooltip" data-title="Add Person"><span class="ico">person_add</span></li>
94						<li class="icon tooltip" data-title="No Notification"><span class="ico">notifications_none</span></li>
95						<li class="icon tooltip" data-title="Notification"><span class="ico">notifications</span></li>
96						<li class="icon tooltip" data-title="Notification Active"><span class="ico">notifications_active</span></li>
97						<li class="icon tooltip" data-title="Download"><span class="ico">file_download</span></li>
98						<li class="icon tooltip" data-title="Upload"><span class="ico">file_upload</span></li>
99						<li class="icon tooltip" data-title="Upload File"><span class="ico">upload_file</span></li>
100						<li class="icon tooltip" data-title="Help"><span class="ico">lightbulb</span></li>
101						<li class="icon tooltip" data-title="Credit Card"><span class="ico">credit_card</span></li>
102						<li class="icon tooltip" data-title="Folder"><span class="ico">folder</span></li>
103						<li class="icon tooltip" data-title="Cloud"><span class="ico">cloud</span></li>
104						<li class="icon tooltip" data-title="Mail"><span class="ico">email</span></li>
105						<li class="icon tooltip" data-title="Call"><span class="ico">call</span></li>
106						<li class="icon tooltip" data-title="Chat"><span class="ico">chat_bubble</span></li>
107						<li class="icon tooltip" data-title="Email"><span class="ico">alternate_email</span></li>
108					</ul>
109					<p>Source: <a href="https://fonts.google.com/icons">Material Icons - Google</a></p>
110				</div>

so://phie

game-engine

Added clipboard & tooltip