Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds game lists that auto-update with itch.io + logo animation #9

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Adds game lists that auto-update with itch.io + logo animation #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c09550
adds game lists that auto-update with itch.io + logo animation
deboraprudencio Dec 20, 2023
8921650
including meta line that had been deleted accidentaly
deboraprudencio Dec 21, 2023
cc48163
Merge branch 'main' into gamelists
deboraprudencio Dec 21, 2023
e2a97ad
slight improvements to code legibility
deboraprudencio Dec 21, 2023
08e0628
Merge branch 'gamelists' of https://github.com/uspgamedev/website int…
deboraprudencio Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 52 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="./assets/logo-dark.png?">
<title>USPGameDev</title>
Expand All @@ -12,6 +12,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

Expand All @@ -36,7 +37,7 @@

<div class="text-box">
<div></div>
<img src="assets/logo-light.png">
<img id="logo" src="assets/logo-light.png">
<h1>uspgame<span>dev</span></h1>
<p>Grupo de estudo e desenvolvimento de jogos<br>da Universidade de São Paulo.</p>
<div></div>
Expand All @@ -58,8 +59,53 @@ <h1>Conheça o uspgame<span>dev</span></h1>
<div>
<h1>Nossos projetos</h1>
<div>
<p>Todos os projetos desenvolvidos no grupo são disponibilizados gratuitamente em nossa página no itch.io! Sinta-se livre para jogar cada um e nos dizer qual mais gostou!</p>
<p><a href="https://uspgamedev.itch.io/" target="_blank">Veja nossa página na itch.io.</a></p>
<p>Todos os projetos desenvolvidos no grupo são disponibilizados gratuitamente em nossa <a href="https://uspgamedev.itch.io/" target="_blank">página no itch.io!</a> Sinta-se livre para jogar cada um e nos dizer qual mais gostou!</p>

<article id="newest" class="newest">
<h2>Novidades</h2>
<p class="collection_description">Os projetos mais recentes feitos pelo grupo, todos publicados no último semestre.</p>

<div class="carousel_wrapper">
<div id="newest-list" class="game_list"></div>
</div>
</article>

<article id="highlights" class="highlights">
<h2>Destaques</h2>
<p class="collection_description">Nossos jogos mais bem acabados, que marcaram a história do UGD de alguma forma.</p>

<div class="carousel_wrapper">
<div id="highlights-list" class="game_list"></div>
</div>
</article>

<article id="projects" class="projects">
<h2>Projetos</h2>
<p class="collection_description">Projetos desenvolvidos pelo grupo ao longo dos anos.</p>

<div class="carousel_wrapper">
<div id="projects-list" class="game_list"></div>
</div>
</article>

<article id="training" class="training">
<h2>Treinamento</h2>
<p class="collection_description">Projetos de treinamento feitos para ensinar o básico de Godot e programação para os novos membros do grupo. Nos treinamentos, que acontecem no início de todo semestre, os participantes tem a missão de reproduir um jogo ou gênero clássico.</p>

<div class="carousel_wrapper">
<div id="training-list" class="game_list"></div>
</div>
</article>

<article id="jams" class="jams">
<h2>Game Jams</h2>
<p class="collection_description">O grupo participa regularmente de game jams e as vezes organiza suas próprias.</p>

<div class="carousel_wrapper">
<div id="jams-list" class="game_list"></div>
</div>
</article>

<p>Mas nem todos os projetos do grupo são jogos digitais! Temos, por exemplo, o Grupo de Estudos, que faz reuniões periodicamente para discutir aspectos teóricos e/ou sociais do mundo de desenvolvimento de jogos.</p>
<p>Temos também o Marmotex, um sistema de RPG de mesa que busca ser simples e adaptável a qualquer tipo de cenário, facilitando o trabalho do mestre e dos jogadores.</p>
</div>
Expand Down Expand Up @@ -98,5 +144,7 @@ <h1>Discord</h1>

</script>


<script src="/loadGameList.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions loadGameList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const sheetLink = "https://sheets.googleapis.com/v4/spreadsheets/1TqoQFEjnZtWwUC2AVBpCvMK72vmBNE6HKRHjoX9UJgs/values/all/?key=AIzaSyB3gtv2pVjqdW3h1tWwOJ1CyInQ2kkYrFU"

async function createGameLists() {

var data = await fetch(sheetLink).then((response) => { return response.json() });
var gameList = data.values;

for (game in gameList) {
var title = gameList[game][0];
var img = gameList[game][1];
var link = gameList[game][2];

var article = gameList[game][4];

document.getElementById(article + '-list').innerHTML += '<div class="game_cell"><a href="'
+ link + '"><img src="' + img + '"></a><a href="' + link + '">' + title + '</a></div>';
}
}


createGameLists()
94 changes: 92 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ html, body {

p {
font-family: 'Lato';
font-weight: 400;
font-weight: 300;
font-size: 25px;
}

Expand Down Expand Up @@ -131,6 +131,7 @@ nav a span {

section {
width: 100%;
padding: 40px 0 50px 0;
}

section div {
Expand All @@ -155,7 +156,8 @@ section div div p {
}

section div div p a {
color: var(--blue-dark);
color: var(--red-dark);
font-weight: 400;
}

.about {
Expand Down Expand Up @@ -258,4 +260,92 @@ nav .fa {
.nav-links ul li:hover::after {
width: 0%;
}
}

@keyframes MoveUpDown {
0%, 100% {
top: 0;
}
50% {
top: 12px;
}
}

#logo {
animation: MoveUpDown 1s linear infinite;
animation-timing-function: ease-in-out;
position: relative;
}

/* width */
::-webkit-scrollbar {
width: 10px;
height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
background: var(--white-black);
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--red-dark);
}

.carousel_wrapper {
overflow-x: auto;
overflow-y: hidden;
margin-top: 20px;
}

h2 {
font-family: 'Quicksand';
font-weight: bold;
font-size: 30px;
color: var(--red-dark);
}

article {
margin: 55px 0 55px 0;
}

.collection_description {
font-size: 22px;
}

.game_list {
display: flex;
grid-gap: 15px;
align-items: start;
padding: 0;
height: 220px;
}

.game_cell {
min-width: 200px;
min-height: 200px;
margin: 0;
padding: 0;
}

.game_cell:hover {
border: solid;
border-width: 5px 0 0 0;
border-color: var(--red-dark);
}

.game_cell img {
max-width: 100%;
padding: 0 0 10px 0;
margin: 0;
}

.game_cell a {
font-family: 'Lato';
font-weight: 500;
font-size: 18px;
color: var(--white);
text-decoration: none;
overflow-wrap: break-word;
}