diff options
| -rwxr-xr-x | generate-gallery.py | 48 | ||||
| -rw-r--r-- | templates/index.css | 13 | ||||
| -rw-r--r-- | templates/index.html | 60 | ||||
| -rw-r--r-- | templates/index.js | 50 |
4 files changed, 111 insertions, 60 deletions
diff --git a/generate-gallery.py b/generate-gallery.py index 5049d84..773261f 100755 --- a/generate-gallery.py +++ b/generate-gallery.py @@ -61,19 +61,24 @@ def load_projects(root: str) -> dict: with open(parent / 'meta.toml', 'rb') as meta_file: game = tomllib.load(meta_file) - if 'name' not in game: - game['name'] = 'Project' - - if 'authors' not in game: - game['authors'] = ['anonym'] + if 'Name' not in game: + if 'Datei' in game: + game['Name'] = pathlib.Path(game['Datei']).stem + else: + game['Name'] = 'Project' + + if 'Team' not in game: + game['Team'] = ['anonym'] else: - game['authors'] = ', '.join(game['authors']) + game['Team'] = ', '.join(game['Team']) - if 'path' not in game: - game['path'] = parent.relative_to(root) + if 'Pfad' not in game: + game['Pfad'] = str(parent.relative_to(root)) - if 'license' not in game: - game['license'] = 'Alle Rechte vorbehalten' + if 'Lizenz' not in game: + game['Lizenz'] = 'Alle Rechte vorbehalten' + elif game['Lizenz'].startswith('CC') and game['Datei'].endswith('sb3'): + game['Download'] = game['Datei'] nested_set(projects, parent.parts[1:], game) @@ -107,24 +112,25 @@ def package_projects(_indir: str, _outdir: str, all_projects: dict): for section, subsections in all_projects.items(): for subsection, projects in subsections.items(): for title, project in projects.items(): - print(f'package {title}') + print(f'package {title}', file=sys.stderr) projectindir = indir / section / subsection / title projectoutdir = outdir / section / subsection / title - infile = projectindir / project['entry'] + infile = projectindir / project['Datei'] - print(projectindir / 'meta.toml', projectoutdir / 'meta.toml') shutil.copyfile(projectindir / 'meta.toml', projectoutdir / 'meta.toml') + if 'Download' in project: + shutil.copyfile(projectindir / project['Download'], + projectoutdir / project['Download']) + # The project is not a scratch file if not infile.suffix == '.sb3': - print(infile, projectoutdir / project['entry']) - shutil.copyfile(infile, projectoutdir / project['entry']) + shutil.copyfile(infile, projectoutdir / project['Datei']) continue cmd = _cmd.format(infile='..' / infile, outdir='..' / projectoutdir) - print(cmd) subprocess.run(cmd, cwd='turbowarp-packager-cli', check=True, shell=True) - project['entry'] = 'demo_output.html' + project['Datei'] = 'demo_output.html' def main(): @@ -134,6 +140,9 @@ def main(): parser.add_argument('--title', default='Scratch Galerie') parser.add_argument('--no-license', action='store_true') parser.add_argument('--projects-dir', default='projects', help='location of the projects') + parser.add_argument('--no-packaging', + action='store_true', + help='do not package all encountered scratch projects') parser.add_argument('--output-dir', default='build', help='output location of the generated HTML code') @@ -142,11 +151,12 @@ def main(): env = Environment(loader=FileSystemLoader("templates"), autoescape=select_autoescape()) projects = load_projects(args.projects_dir) - print(projects, file=sys.stderr) + # print(projects, file=sys.stderr) prepare_outputdir(args.output_dir, projects) - package_projects(args.projects_dir, args.output_dir, projects) + if not args.no_packaging: + package_projects(args.projects_dir, args.output_dir, projects) template = env.get_template("index.html") with open(pathlib.Path(args.output_dir) / 'index.html', 'w', encoding='utf-8') as outfile: diff --git a/templates/index.css b/templates/index.css index 975c233..08f3f44 100644 --- a/templates/index.css +++ b/templates/index.css @@ -25,11 +25,8 @@ html { body { margin: 0 auto; - /* max-width: 36em; */ - padding-left: 50px; - padding-right: 50px; - padding-top: 50px; - padding-bottom: 50px; + max-width: 80%; + padding: 50px; hyphens: auto; word-wrap: break-word; text-rendering: optimizeLegibility; @@ -37,7 +34,6 @@ body { } footer { - position:absolute; bottom: 0; } @@ -63,11 +59,13 @@ a:visited { /* Position the image container (needed to position the left and right arrows) */ .container { position: relative; + max-height: 100%; } /* Hide the images by default */ -.mySlides { +.slide { display: none; + height: 400px; } /* Add a pointer when hovering over the thumbnail images */ @@ -136,6 +134,7 @@ a:visited { /* Add a transparency effect for thumnbail images */ .demo { opacity: 0.6; + padding: 1px; } .active, diff --git a/templates/index.html b/templates/index.html index 2ee1369..403a8d0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,6 +11,9 @@ </style> <script language="javascript" type="text/javascript"> + var projects = JSON.parse('{{ projects|tojson }}'); + </script> + <script language="javascript" type="text/javascript"> {% include 'index.js' %} </script> </head> @@ -18,53 +21,72 @@ <body> <h1>{{ title }}</h1> {% if halloffame %} - <div id='hall-of-fame'> + <div id='halloffame-slides' class="container"> <h2>Hall of Fame</h2> {% for id, game in halloffame.items() %} - <div class="mySlides"> - <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div> - <iframe src="{{ game.path }}/{{ game.entry }}" - pid="{{ id }}" - title="{{ game.name }}" - style="width:100%" - allow="fullscreen *"> - </iframe> + <div class="slide halloffame-slide"> + <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div> + <iframe src="{{ game.Pfad }}/{{ game.Datei }}" + pid="{{ id }}" + title="{{ game.Name }}" + style="width:100%; height:100%" + allow="fullscreen *"> + </iframe> + </div> +{% endfor %} + + <!-- Next and previous buttons --> + <a class="prev" onclick="plusSlides('halloffame', -1)">❮</a> + <a class="next" onclick="plusSlides('halloffame', 1)">❯</a> + + <!-- Image text --> + <div class="caption-container"> + <p id="halloffame-caption"></p> + </div> + + <!-- Thumbnail images --> + <div class="row"> +{% for _, game in halloffame.items() %} + <div class="column"> + <img class="demo cursor halloffame-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('halloffame', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} "> </div> {% endfor %} + </div> </div> {% endif %} {% for section, subsections in projects.items() %} <h2>{{ section }}</h2> {% for subsection, games in subsections.items() %} <h3>{{ subsection }}</h2> -<div class="container"> +<div id="{{ section }}-{{ subsection }}-slides" class="container"> {% for id, game in games.items() %} <!-- Full-width iframes with number text --> - <div class="mySlides"> + <div id="{{ section }}.{{ subsection }}.{{ id }}" class="slide {{ section }}-{{ subsection }}-slide"> <div class="numbertext">{{ loop.index }}/{{ loop.length }}</div> - <iframe src="{{ game.path }}/{{ game.entry }}" + <iframe src="{{ game.Pfad }}/{{ game.Datei }}" pid="{{ id }}" - title="{{ game.name }}" - style="width:100%" - allow="fullscreen *"> + title="{{ game.Name }}" + style="width:100%; height:100%" + allow="fullscreen *" + loading="lazy"> </iframe> </div> {% endfor %} <!-- Next and previous buttons --> - <a class="prev" onclick="plusSlides(-1)">❮</a> - <a class="next" onclick="plusSlides(1)">❯</a> + <a class="prev" onclick="plusSlides('{{section }}-{{ subsection}}', -1)">❮</a> + <a class="next" onclick="plusSlides('{{section }}-{{ subsection}}', 1)">❯</a> <!-- Image text --> <div class="caption-container"> - <p id="caption"></p> + <p id="{{section }}-{{ subsection}}-caption"></p> </div> <!-- Thumbnail images --> <div class="row"> {% for _, game in games.items() %} <div class="column"> - <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide({{ loop.index }})" alt="{{ game.name }} von {{ game.authors }} {{game.license }} "> + <img class="demo cursor {{ section }}-{{ subsection }}-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('{{ section }}-{{ subsection }}', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} "> </div> {% endfor %} </div> diff --git a/templates/index.js b/templates/index.js index 22d8c4e..9fed4c0 100644 --- a/templates/index.js +++ b/templates/index.js @@ -1,33 +1,53 @@ -let slideIndex = 1; +const deep_value = (o, p) => p.split('.').reduce((a, v) => a[v], o); + +let slideIndeces = {}; // Next/previous controls -function plusSlides(n) { - showSlides(slideIndex += n); +function plusSlides(id, n) { + showSlides(id, slideIndeces[id] += n); } // Thumbnail image controls -function currentSlide(n) { - showSlides(slideIndex = n); +function currentSlide(id, n) { + showSlides(id, slideIndeces[id] = n); } -function showSlides(n) { +function showSlides(id, n) { let i; - let slides = document.getElementsByClassName("mySlides"); - let dots = document.getElementsByClassName("demo"); - let captionText = document.getElementById("caption"); - if (n > slides.length) {slideIndex = 1} - if (n < 1) {slideIndex = slides.length} + console.log(`${id}-slide`); + let slides = document.getElementsByClassName(`${id}-slide`); + let dots = document.getElementsByClassName(`${id}-demo`); + let captionText = document.getElementById(`${id}-caption`); + + // Overflow + if (n > slides.length) { slideIndeces[id] = 1; } + // Underflow + if (n < 1) { slideIndeces[id] = slides.length; } + for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } + for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } - slides[slideIndex-1].style.display = "block"; - dots[slideIndex-1].className += " active"; - captionText.innerHTML = dots[slideIndex-1].alt; + + let slide = slides[slideIndeces[id]-1]; + slide.style.display = "block"; + const project = deep_value(projects, slide.id); + dots[slideIndeces[id]-1].className += " active"; + if ('Download' in project) { + captionText.innerHTML = `<a href="${project.Pfad}/${project.Download}" download>${project.Name}</a> von ${project.Team} ${project.Lizenz}` + } else { + captionText.innerHTML = dots[slideIndeces[id]-1].alt; + } } window.onload = function () { - showSlides(slideIndex); + let slides = document.getElementsByClassName("container"); + for (let slide of slides) { + let id = slide.id.replace("-slides", ""); + slideIndeces[id] = 1; + showSlides(id, 1); + } } |