commit 474070a20ebcf1ab12087ec34b961f70ad003a4b · veryroundbird.house/homemadejam

+1 -1

README.md

···

       16
       16
        
       

     

       17
       17
        
       replace things in the template files that are surrounded by double exclamation points (!!). there are some variables to set at the top of the `js/script.mjs` file, and some style variables to set at the top of `css/style.css`. if you want to add more css, there's a `css/custom.css` file you can tack new stuff onto.

     

       18
       18
        
       

     

       19
       19
       -
       also, you will have to fiddle with JSON for game data. unless you want to just code all them manually for some reason, in which case i salute you. i recommend using [json console](https://jsonconsole.com/json-editor) if you're not down with the brackets since the table and graph views are really useful for like. checking your work

     

       19
       19
       +
       also, you will have to fiddle with JSON for game data. unless you want to just code all them manually for some reason, in which case i salute you. i recommend using [jsonswiss](https://jsonswiss.com/json-table-editor) if you're not down with the brackets since it lets you edit in table view

     

       20
       20
        
       

     

       21
       21
        
       ## plain php

     

       22
       22

+79 -4

plain-html/css/style.css

···

       40
       40
        
       .icon {

     

       41
       41
        
       	width: 16px;

     

       42
       42
        
       	height: 16px;

     

       43
       43
       +
       	text-indent: -999px;

     

       44
       44
       +
       	overflow: hidden;

     

       43
       45
        
       	display: inline-block;

     

       46
       46
       +
       	vertical-align: middle;

     

       44
       47
        
       	margin-right: 5px;

     

       48
       48
       +
       }

     

       49
       49
       +
       

     

       50
       50
       +
       .btn {

     

       51
       51
       +
       	padding: 5px 10px;

     

       52
       52
       +
       	font-size: 1em;

     

       53
       53
       +
       	font-weight: bold;

     

       54
       54
       +
       	border-radius: 5px;

     

       55
       55
       +
       	background-color: var(--accent);

     

       56
       56
       +
       	color: var(--background);

     

       57
       57
       +
       	text-decoration: none;

     

       58
       58
       +
       	white-space: pre;

     

       59
       59
       +
       }

     

       60
       60
       +
       

     

       61
       61
       +
       .btn:hover {

     

       62
       62
       +
       	background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);

     

       63
       63
       +
       	color: var(--background);

     

       45
       64
        
       }

     

       46
       65
        
       

     

       47
       66
        
       #page {

     
···

       443
       462
        
       .game .screenshots .gallery a,

     

       444
       463
        
       .game .screenshots .gallery button {

     

       445
       464
        
       	position: relative;

     

       446
       446
       -
       	padding-top: 50%;

     

       465
       465
       +
       	padding-top: 75%;

     

       447
       466
        
       	width: 100%;

     

       448
       467
        
       }

     

       449
       468
        
       

     
···

       469
       488
        
       	padding: 20px;

     

       470
       489
        
       }

     

       471
       490
        
       

     

       491
       491
       +
       .game .downloads ul {

     

       492
       492
       +
       	list-style: none;

     

       493
       493
       +
       	margin: 1em 0;

     

       494
       494
       +
       	padding: 0;

     

       495
       495
       +
       }

     

       496
       496
       +
       

     

       497
       497
       +
       .game .downloads ul li {

     

       498
       498
       +
       	margin-bottom: 10px;

     

       499
       499
       +
       }

     

       500
       500
       +
       

     

       501
       501
       +
       .game .downloads .size {

     

       502
       502
       +
       	color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);

     

       503
       503
       +
       }

     

       504
       504
       +
       

     

       505
       505
       +
       .game .downloads .platforms-label {

     

       506
       506
       +
       	display: inline-block;

     

       507
       507
       +
       	width: 1px;

     

       508
       508
       +
       	overflow: hidden;

     

       509
       509
       +
       	text-indent: -999px;

     

       510
       510
       +
       }

     

       511
       511
       +
       

     

       512
       512
       +
       .game .downloads .icon {

     

       513
       513
       +
       	width: 24px;

     

       514
       514
       +
       	height: 24px;

     

       515
       515
       +
       	background-color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);

     

       516
       516
       +
       }

     

       517
       517
       +
       

     

       472
       518
        
       .game .comments {

     

       473
       519
        
       	border-top: 1px var(--accent) solid;

     

       474
       520
        
       }

     
···

       476
       522
        
       [popover] {

     

       477
       523
        
       	position: fixed;

     

       478
       524
        
       	z-index: 99;

     

       479
       479
       -
       	top: 50%;

     

       480
       480
       -
       	left: 50%;

     

       481
       525
        
       	max-width: 90%;

     

       482
       526
        
       	max-height: 90%;

     

       483
       483
       -
       	transform: translate(-50%, -50%);

     

       484
       527
        
       }

     

       485
       528
        
       

     

       486
       529
        
       [popover]:-internal-popover-in-top-layer::backdrop {

     

       487
       530
        
       	background-color: rgba(0,0,0,.5);

     

       531
       531
       +
       }

     

       532
       532
       +
       

     

       533
       533
       +
       .icon.web {

     

       534
       534
       +
       	mask: url(../images/web.svg);

     

       535
       535
       +
       }

     

       536
       536
       +
       

     

       537
       537
       +
       .icon.windows {

     

       538
       538
       +
       	mask: url(../images/windows.svg);

     

       539
       539
       +
       }

     

       540
       540
       +
       

     

       541
       541
       +
       .icon.macos {

     

       542
       542
       +
       	mask: url(../images/macos.svg);

     

       543
       543
       +
       }

     

       544
       544
       +
       

     

       545
       545
       +
       .icon.linux {

     

       546
       546
       +
       	mask: url(../images/linux.svg);

     

       547
       547
       +
       }

     

       548
       548
       +
       

     

       549
       549
       +
       .icon.android {

     

       550
       550
       +
       	mask: url(../images/android.svg);

     

       551
       551
       +
       }

     

       552
       552
       +
       

     

       553
       553
       +
       .icon.random {

     

       554
       554
       +
       	mask: url(../images/random.svg);

     

       555
       555
       +
       }

     

       556
       556
       +
       

     

       557
       557
       +
       .icon.sort-asc {

     

       558
       558
       +
       	mask: url(../images/sort-asc.svg);

     

       559
       559
       +
       }

     

       560
       560
       +
       

     

       561
       561
       +
       .icon.sort-desc {

     

       562
       562
       +
       	mask: url(../images/sort-desc.svg);

     

       488
       563
        
       }

+4 -3

plain-html/game.html

···

       1
       1
        
       <!doctype html>

     

       2
       2
        
       <html>

     

       3
       3
        
       	<head>

     

       4
       4
       -
       		<title>!!YOUR GAME JAM TITLE!!</title>

     

       4
       4
       +
       		<title>!!YOUR GAME JAM TITLE!! | !! GAME NAME !!</title>

     

       5
       5
        
       		<link rel="stylesheet" type="text/css" href="./css/style.css" />

     

       6
       6
        
       		<link rel="stylesheet" type="text/css" href="./css/custom.css" />

     

       7
       7
        
       		<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">

     
···

       39
       39
        
       						!! BLURB GOES HERE !!

     

       40
       40
        
       					</div>

     

       41
       41
        
       					<div class="authors">

     

       42
       42
       -
       						Submitted by <a href="#">Author 1</a>, <a href="#">Author 2</a> &mdash; <span id="timebefore">!! TIME !!</span> before deadline

     

       42
       42
       +
       						Submitted by <a href="#">Author 1</a>, <a href="#">Author 2</a> at <span class="submissiontime">!! SUBMISSION TIME !!</span>

     

       43
       43
        
       					</div>

     

       44
       44
        
       				</div>

     

       45
       45
        
       				<div class="screenshots">

     
···

       60
       60
        
       					<div class="downloads">

     

       61
       61
        
       						<h3>Downloads</h3>

     

       62
       62
        
       						<ul>

     

       63
       63
       -
       							<li></li>

     

       63
       63
       +
       							<li><a href="!! DL LINK !!" class="btn" download>Download</a> <b>!! FILE NAME !!</b> <span class="size">!! # MB !!</span> <span class="platforms"><span class="platforms-label">Platforms: </span><span class="icon windows" title="Windows">Windows</span><span class="icon linux" title="Linux">Linux</span></li>

     

       64
       64
       +
       							<li><a href="!! DL LINK !!" class="btn" download>Download</a> <b>!! FILE NAME !!</b> <span class="size">!! # MB !!</span> <span class="platforms"><span class="platforms-label">Platforms: </span><span class="icon macos" title="MacOS">MacOS</span></li>

     

       64
       65
        
       						</ul>

     

       65
       66
        
       					</div>

     

       66
       67
        
       					<!-- uncomment if you want to drop in some kind of commenting system and put in whatever script you're using -->

+98 -98

plain-html/js/script.mjs

···

       98
       98
        
       	list.innerHTML = games.map((item, i) => {

     

       99
       99
        
       		return `<div class="item" id="item-${i}" data-authors="${item.authors.map(a => a.name)}" data-categories="${item.tags.map(t => 'tags:'+t).join(" ")} ${item.platforms.map(p => 'platforms:'+p).join(" ")}" data-title="${item.title}" data-date="${item.submitTime}">

     

       100
       100
        
       		<div class="thumb">

     

       101
       101
       -
       			<img src="${item.thumbnail}" alt="${item.title} thumbnail image" />

     

       101
       101
       +
       			<a href="${item.page}"><img src="${item.thumbnail}" alt="${item.title} thumbnail image" /></a>

     

       102
       102
        
       		</div>

     

       103
       103
        
       		<h3><a href="${item.page}">${item.title}</a></h3>

     

       104
       104
        
       		<div class="authors">${item.authors.map((auth) => { return `<a href="${auth.link}" target="_blank">${auth.name}</a>`; }).join(", ")}</div>

     
···

       110
       110
        
       	tagsElt.innerHTML = `<button class="afs-btn-filter" data-filter="*">all</button>`+allTags.map((t) => {

     

       111
       111
        
       		return `<button class="afs-btn-filter" data-filter="tags:${t}">#${t}</button>`

     

       112
       112
        
       	}).join("");

     

       113
       113
       -
       }

     

       114
       114
       -
       

     

       115
       115
       -
       const afs = new AFS({

     

       116
       116
       -
           // Required Selectors

     

       117
       117
       -
           containerSelector: '#list',

     

       118
       118
       -
           itemSelector: '.item',

     

       119
       119
       -
           filterButtonSelector: '.afs-btn-filter',

     

       120
       120
       -
           searchInputSelector: '.afs-filter-search',

     

       121
       121
       -
           counterSelector: '.afs-filter-counter',

     

       113
       113
       +
       	

     

       114
       114
       +
       	const afs = new AFS({

     

       115
       115
       +
       	    // Required Selectors

     

       116
       116
       +
       	    containerSelector: '#list',

     

       117
       117
       +
       	    itemSelector: '.item',

     

       118
       118
       +
       	    filterButtonSelector: '.afs-btn-filter',

     

       119
       119
       +
       	    searchInputSelector: '.afs-filter-search',

     

       120
       120
       +
       	    counterSelector: '.afs-filter-counter',

     

       122
       121
        
           

     

       123
       123
       -
           // CSS Classes

     

       124
       124
       -
           activeClass: 'active',

     

       125
       125
       -
           hiddenClass: 'hidden',

     

       126
       126
       -
           transitionClass: 'afs-transition',

     

       122
       122
       +
       	    // CSS Classes

     

       123
       123
       +
       	    activeClass: 'active',

     

       124
       124
       +
       	    hiddenClass: 'hidden',

     

       125
       125
       +
       	    transitionClass: 'afs-transition',

     

       127
       126
        
           

     

       128
       128
       -
           // Filter & Search Configuration

     

       129
       129
       -
           filterMode: 'OR',      // or 'AND'

     

       130
       130
       -
           groupMode: 'AND',     // or 'OR'

     

       131
       131
       -
           searchKeys: ['title', 'authors', 'tags'],

     

       132
       132
       -
           debounceTime: 200,    // search input delay

     

       127
       127
       +
       	    // Filter & Search Configuration

     

       128
       128
       +
       	    filterMode: 'OR',      // or 'AND'

     

       129
       129
       +
       	    groupMode: 'AND',     // or 'OR'

     

       130
       130
       +
       	    searchKeys: ['title', 'authors', 'tags'],

     

       131
       131
       +
       	    debounceTime: 200,    // search input delay

     

       133
       132
        
           

     

       134
       134
       -
           // Date Handling

     

       135
       135
       -
           dateFormat: 'YYYY-MM-DD',

     

       136
       136
       -
       		dateFilter: {

     

       137
       137
       -
               enabled: true,

     

       138
       138
       -
               format: 'YYYY-MM-DDThh:mm:ss'

     

       139
       139
       -
           },

     

       133
       133
       +
       	    // Date Handling

     

       134
       134
       +
       	    dateFormat: 'YYYY-MM-DD',

     

       135
       135
       +
       			dateFilter: {

     

       136
       136
       +
       	        enabled: true,

     

       137
       137
       +
       	        format: 'YYYY-MM-DDThh:mm:ss'

     

       138
       138
       +
       	    },

     

       140
       139
        
           

     

       141
       141
       -
           // Counter Configuration

     

       142
       142
       -
           counter: {

     

       143
       143
       -
               template: 'Showing {visible} of {total}',

     

       144
       144
       -
               showFiltered: true,

     

       145
       145
       -
               filteredTemplate: '({filtered} filtered)',

     

       146
       146
       -
               noResultsTemplate: 'No items found',

     

       147
       147
       -
               formatter: (num) => num.toLocaleString()

     

       148
       148
       -
           },

     

       140
       140
       +
       	    // Counter Configuration

     

       141
       141
       +
       	    counter: {

     

       142
       142
       +
       	        template: 'Showing {visible} of {total}',

     

       143
       143
       +
       	        showFiltered: true,

     

       144
       144
       +
       	        filteredTemplate: '({filtered} filtered)',

     

       145
       145
       +
       	        noResultsTemplate: 'No items found',

     

       146
       146
       +
       	        formatter: (num) => num.toLocaleString()

     

       147
       147
       +
       	    },

     

       149
       148
        
       		

     

       150
       150
       -
       		sort: {

     

       151
       151
       -
               enabled: true,

     

       152
       152
       -
               buttonSelector: '.afs-btn-sort'

     

       153
       153
       -
           },

     

       149
       149
       +
       			sort: {

     

       150
       150
       +
       	        enabled: true,

     

       151
       151
       +
       	        buttonSelector: '.afs-btn-sort'

     

       152
       152
       +
       	    },

     

       154
       153
        
       		

     

       155
       155
       -
       		filter: {

     

       156
       156
       -
               enabled: true,

     

       157
       157
       -
               buttonSelector: '.afs-btn-filter',

     

       158
       158
       -
               mode: 'AND',

     

       159
       159
       -
               activeClass: 'afs-active',

     

       160
       160
       -
               hiddenClass: 'afs-hidden'

     

       161
       161
       -
           },

     

       154
       154
       +
       			filter: {

     

       155
       155
       +
       	        enabled: true,

     

       156
       156
       +
       	        buttonSelector: '.afs-btn-filter',

     

       157
       157
       +
       	        mode: 'AND',

     

       158
       158
       +
       	        activeClass: 'afs-active',

     

       159
       159
       +
       	        hiddenClass: 'afs-hidden'

     

       160
       160
       +
       	    },

     

       162
       161
        
       

     

       163
       163
       -
           // Animation Configuration

     

       164
       164
       -
           animation: {

     

       165
       165
       -
               type: 'fade',

     

       166
       166
       -
               duration: 200,

     

       167
       167
       -
               easing: 'ease-out',

     

       168
       168
       -
               inClass: 'afs-animation-enter',

     

       169
       169
       -
               outClass: 'afs-animation-leave'

     

       170
       170
       -
           },

     

       162
       162
       +
       	    // Animation Configuration

     

       163
       163
       +
       	    animation: {

     

       164
       164
       +
       	        type: 'fade',

     

       165
       165
       +
       	        duration: 200,

     

       166
       166
       +
       	        easing: 'ease-out',

     

       167
       167
       +
       	        inClass: 'afs-animation-enter',

     

       168
       168
       +
       	        outClass: 'afs-animation-leave'

     

       169
       169
       +
       	    },

     

       171
       170
        
       

     

       172
       172
       -
           // Lifecycle Options

     

       173
       173
       -
           responsive: true,

     

       174
       174
       -
           preserveState: false,

     

       175
       175
       -
           stateExpiry: 86400000, // 24 hours

     

       176
       176
       -
           observeDOM: false,

     

       171
       171
       +
       	    // Lifecycle Options

     

       172
       172
       +
       	    responsive: true,

     

       173
       173
       +
       	    preserveState: false,

     

       174
       174
       +
       	    stateExpiry: 86400000, // 24 hours

     

       175
       175
       +
       	    observeDOM: false,

     

       177
       176
        
       

     

       178
       178
       -
           // Style Configuration

     

       179
       179
       -
           styles: {

     

       180
       180
       -
               colors: {

     

       181
       181
       -
                   primary: '#000',

     

       182
       182
       -
                   background: '#e5e7eb',

     

       183
       183
       -
                   text: '#000',

     

       184
       184
       -
                   textHover: '#fff'

     

       185
       185
       -
               }

     

       186
       186
       -
           }

     

       187
       187
       -
       });

     

       177
       177
       +
       	    // Style Configuration

     

       178
       178
       +
       	    styles: {

     

       179
       179
       +
       	        colors: {

     

       180
       180
       +
       	            primary: '#000',

     

       181
       181
       +
       	            background: '#e5e7eb',

     

       182
       182
       +
       	            text: '#000',

     

       183
       183
       +
       	            textHover: '#fff'

     

       184
       184
       +
       	        }

     

       185
       185
       +
       	    }

     

       186
       186
       +
       	});

     

       188
       187
        
       

     

       189
       189
       -
       afs.dateFilter.addDateRange({

     

       190
       190
       -
           key: 'date',

     

       191
       191
       -
           container: document.querySelector('#date-filter'),

     

       192
       192
       -
           format: 'YYYY-MM-DD',

     

       193
       193
       -
       		minDate: new Date(startDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0]),

     

       194
       194
       -
           maxDate: new Date(endDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0])

     

       195
       195
       -
       });

     

       188
       188
       +
       	afs.dateFilter.addDateRange({

     

       189
       189
       +
       	    key: 'date',

     

       190
       190
       +
       	    container: document.querySelector('#date-filter'),

     

       191
       191
       +
       	    format: 'YYYY-MM-DD',

     

       192
       192
       +
       			minDate: new Date(startDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0]),

     

       193
       193
       +
       	    maxDate: new Date(endDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0])

     

       194
       194
       +
       	});

     

       196
       195
        
       

     

       197
       197
       -
       afs.filter.setGroupMode('AND');

     

       196
       196
       +
       	afs.filter.setGroupMode('AND');

     

       198
       197
        
       

     

       199
       199
       -
       document.querySelectorAll('button.custom-sort:not([data-sort-key="shuffle"])').forEach((elt) => {

     

       200
       200
       -
       	elt.addEventListener('click', (e) => {

     

       201
       201
       -
       		e.preventDefault();

     

       202
       202
       -
       		e.stopPropagation();

     

       203
       203
       -
       		const btn = e.target.closest('button');

     

       204
       204
       -
       		document.querySelectorAll('button.custom-sort:not([data-sort-key="'+btn.getAttribute('data-sort-key')+'"])').forEach((s) => {

     

       205
       205
       -
       			s.classList.remove('sort-active');

     

       206
       206
       -
       		});

     

       207
       207
       -
       		if (btn.classList.contains('sort-active')) {

     

       208
       208
       -
       			if (btn.getAttribute('data-sort-direction') === 'asc') {

     

       209
       209
       -
       				btn.setAttribute('data-sort-direction', 'desc');

     

       210
       210
       -
       				btn.querySelector('img').src = './images/sort-desc.svg';

     

       198
       198
       +
       	document.querySelectorAll('button.custom-sort:not([data-sort-key="shuffle"])').forEach((elt) => {

     

       199
       199
       +
       		elt.addEventListener('click', (e) => {

     

       200
       200
       +
       			e.preventDefault();

     

       201
       201
       +
       			e.stopPropagation();

     

       202
       202
       +
       			const btn = e.target.closest('button');

     

       203
       203
       +
       			document.querySelectorAll('button.custom-sort:not([data-sort-key="'+btn.getAttribute('data-sort-key')+'"])').forEach((s) => {

     

       204
       204
       +
       				s.classList.remove('sort-active');

     

       205
       205
       +
       			});

     

       206
       206
       +
       			if (btn.classList.contains('sort-active')) {

     

       207
       207
       +
       				if (btn.getAttribute('data-sort-direction') === 'asc') {

     

       208
       208
       +
       					btn.setAttribute('data-sort-direction', 'desc');

     

       209
       209
       +
       					btn.querySelector('img').src = './images/sort-desc.svg';

     

       210
       210
       +
       				} else {

     

       211
       211
       +
       					btn.setAttribute('data-sort-direction', 'asc');

     

       212
       212
       +
       					btn.querySelector('img').src = './images/sort-asc.svg';

     

       213
       213
       +
       				}

     

       214
       214
       +
       				afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       211
       215
        
       			} else {

     

       212
       212
       -
       				btn.setAttribute('data-sort-direction', 'asc');

     

       213
       213
       -
       				btn.querySelector('img').src = './images/sort-asc.svg';

     

       216
       216
       +
       				btn.classList.add('sort-active');

     

       217
       217
       +
       				afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       214
       218
        
       			}

     

       215
       215
       -
       			afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       216
       216
       -
       		} else {

     

       217
       217
       -
       			btn.classList.add('sort-active');

     

       218
       218
       -
       			afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       219
       219
       -
       		}

     

       219
       219
       +
       		});

     

       220
       220
        
       	});

     

       221
       221
       -
       });

     

       222
       221
        
       

     

       223
       223
       -
       document.querySelector('[data-sort-key="shuffle"]').addEventListener('click', (e) => {

     

       224
       224
       -
       	afs.sort.shuffle();

     

       225
       225
       -
       });
     

       222
       222
       +
       	document.querySelector('[data-sort-key="shuffle"]').addEventListener('click', (e) => {

     

       223
       223
       +
       		afs.sort.shuffle();

     

       224
       224
       +
       	});

     

       225
       225
       +
       }