From 2c09550ad8f28f396560e9f0116214c067d8a5d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A9bora=20Prud=C3=AAncio?= Date: Wed, 20 Dec 2023 15:23:04 -0300 Subject: [PATCH 1/3] adds game lists that auto-update with itch.io + logo animation --- index.html | 56 ++++++++++++++++++++++++++--- loadGameList.js | 19 ++++++++++ style.css | 93 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 loadGameList.js diff --git a/index.html b/index.html index fef51bd..f890717 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + USPGameDev @@ -11,6 +11,7 @@ + @@ -35,7 +36,7 @@
- +

uspgamedev

Grupo de estudo e desenvolvimento de jogos
da Universidade de São Paulo.

@@ -57,8 +58,53 @@

Conheça o uspgamedev

Nossos projetos

-

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!

-

Veja nossa página na itch.io.

+

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!

+ +
+

Novidades

+

Os projetos mais recentes feitos pelo grupo, todos publicados no último semestre.

+ +
+
+
+
+ +
+

Destaques

+

Nossos jogos mais bem acabados, que marcaram a história do UGD de alguma forma.

+ +
+
+
+
+ +
+

Projetos

+

Projetos desenvolvidos pelo grupo ao longo dos anos.

+ +
+
+
+
+ +
+

Treinamento

+

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.

+ +
+
+
+
+ +
+

Game Jams

+

O grupo participa regularmente de game jams e as vezes organiza suas próprias.

+ +
+
+
+
+

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.

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.

@@ -97,5 +143,7 @@

Discord

+ + diff --git a/loadGameList.js b/loadGameList.js new file mode 100644 index 0000000..7c0ed7d --- /dev/null +++ b/loadGameList.js @@ -0,0 +1,19 @@ +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]; + + document.getElementById(gameList[game][4] + '-list').innerHTML += '
' + title + '
'; + } +} + + +createGameLists() \ No newline at end of file diff --git a/style.css b/style.css index f2c138d..a53b478 100644 --- a/style.css +++ b/style.css @@ -22,7 +22,7 @@ html, body { p { font-family: 'Lato'; - font-weight: 400; + font-weight: 300; font-size: 25px; } @@ -131,6 +131,7 @@ nav a span { section { width: 100%; + padding: 40px 0 50px 0; } section div { @@ -155,7 +156,7 @@ section div div p { } section div div p a { - color: var(--blue-dark); + color: var(--red-dark); } .about { @@ -258,4 +259,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_title { + font-family: 'Lato'; + font-weight: 500; + font-size: 18px; + color: var(--white); + text-decoration: none; + overflow-wrap: break-word; } \ No newline at end of file From 89216501bc31a42b60219153153a68e791270fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A9bora=20Prud=C3=AAncio?= Date: Thu, 21 Dec 2023 08:41:11 -0300 Subject: [PATCH 2/3] including meta line that had been deleted accidentaly --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index f890717..c00ca18 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + USPGameDev From e2a97ad3a047f7e34ba68936a94a72dba41cbc01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A9bora=20Prud=C3=AAncio?= Date: Thu, 21 Dec 2023 08:59:32 -0300 Subject: [PATCH 3/3] slight improvements to code legibility --- loadGameList.js | 6 ++++-- style.css | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/loadGameList.js b/loadGameList.js index 7c0ed7d..3d68a3d 100644 --- a/loadGameList.js +++ b/loadGameList.js @@ -10,8 +10,10 @@ async function createGameLists() { var img = gameList[game][1]; var link = gameList[game][2]; - document.getElementById(gameList[game][4] + '-list').innerHTML += '
' + title + '
'; + var article = gameList[game][4]; + + document.getElementById(article + '-list').innerHTML += '
' + title + '
'; } } diff --git a/style.css b/style.css index a53b478..4a44ca2 100644 --- a/style.css +++ b/style.css @@ -157,6 +157,7 @@ section div div p { section div div p a { color: var(--red-dark); + font-weight: 400; } .about { @@ -340,7 +341,7 @@ article { margin: 0; } -.game_title { +.game_cell a { font-family: 'Lato'; font-weight: 500; font-size: 18px;