Skip to content

Commit 7da617f

Browse files
boisgeraboisgera
committed
✨ Astro stuff, admo, content, etc.
1 parent 4fc51e2 commit 7da617f

File tree

10 files changed

+139
-62
lines changed

10 files changed

+139
-62
lines changed

‎astro-python-fr/astro.config.mjs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import { defineConfig } from "astro/config";
2-
2+
import remarkToc from "remark-toc";
33
import mdx from "@astrojs/mdx";
44

55
// https://astro.build/config
66
export default defineConfig({
7+
experimental: {
8+
assets: true,
9+
},
710
integrations: [
811
mdx({
912
syntaxHighlight: "shiki",
1013
shikiConfig: { theme: "github-dark" },
14+
// Links don't work as expected
15+
// remarkPlugins: [[remarkToc, { heading: "Table des matières" }]],
16+
//
1117
}),
1218
],
1319
});

‎astro-python-fr/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"@fontsource-variable/fira-code": "^5.0.8",
1515
"@fontsource-variable/inter": "^5.0.8",
1616
"astro": "^2.10.13",
17-
"astro-icon": "^0.8.1"
17+
"astro-icon": "^0.8.1",
18+
"rehype-toc": "^3.0.2",
19+
"remark-toc": "^8.0.1"
1820
}
1921
}

‎astro-python-fr/pnpm-lock.yaml‎

Lines changed: 42 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎astro-python-fr/public/videos/fps.webm‎

42.7 KB
Binary file not shown.

‎astro-python-fr/public/videos/fps.webp‎

66.4 KB
Loading

‎astro-python-fr/src/assets/snake.jpg‎

38.4 KB
Loading

‎astro-python-fr/src/components/Admonition.astro‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
import { Icon } from "astro-icon";
33
44
interface Props {
5-
type?: "note" | "warning";
5+
type?: "note" | "solution" | "warning";
66
label?: string;
7+
open?: boolean;
78
}
89
9-
let { type = "note", label = undefined } = Astro.props;
10+
let { type = "note", label = undefined, open = true } = Astro.props;
1011
1112
function capitalize(word: string) {
1213
return word.charAt(0).toUpperCase() + word.slice(1);
@@ -23,17 +24,21 @@ const styles = {
2324
light: "#ffedd5",
2425
dark: "#ea580c",
2526
},
27+
solution: {
28+
icon: "bulb",
29+
light: "#fbcfe8",
30+
dark: "#db2777",
31+
},
2632
};
2733
2834
const { icon, light, dark } = styles[type];
2935
label = label ? label : capitalize(type);
3036
31-
console.log(`tabler:${icon}`);
32-
37+
console.log(`tabler:${icon}`);
3338
---
3439

3540
<aside>
36-
<details open>
41+
<details open={open}>
3742
<summary
3843
style="display:flex;align-items:center;justify-content:space-between;"
3944
>
@@ -44,14 +49,8 @@ console.log(`tabler:${icon}`);
4449
<span style="font-weight:500;">{label}</span>
4550
</span>
4651
<span class="minmax">
47-
<Icon
48-
class="closed"
49-
name="tabler:arrows-maximize"
50-
/>
51-
<Icon
52-
class="open"
53-
name="tabler:arrows-minimize"
54-
/>
52+
<Icon class="closed" name="tabler:arrows-maximize" />
53+
<Icon class="open" name="tabler:arrows-minimize" />
5554
</span>
5655
</summary>
5756
<div class="content">

‎astro-python-fr/src/env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/// <reference types="astro/client" />
1+
/// <reference types="astro/client-image" />

‎astro-python-fr/src/layouts/MDXLayout.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ const { title, description } = frontmatter;
2222
font-family: "Inter Variable", sans-serif;
2323
}
2424

25+
h2 {
26+
margin-top: 64px;
27+
}
28+
2529
pre.astro-code { /* pre:has(> code) support not there yet */
2630
border-radius: 0.25rem;
2731
overflow-x: auto;
@@ -30,6 +34,9 @@ const { title, description } = frontmatter;
3034
code {
3135
font-family: "Fira Code Variable", sans-serif;
3236
}
37+
pre > code {
38+
line-height: 1rem;
39+
}
3340
</style>
3441
<style>
3542
main {

‎astro-python-fr/src/pages/snake-1.mdx‎

Lines changed: 67 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,17 @@ license: "[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)"
66
layout: ../layouts/MDXLayout.astro
77
---
88

9-
---
10-
11-
🙏 Projet original par Aurélien Noce ([@ushu](https://github.com/ushu)).
9+
import Admonition from '/src/components/Admonition.astro';
10+
import { Image } from 'astro:assets';
1211

13-
---
1412

15-
## Sandbox
13+
import snake from "/src/assets/snake.jpg";
1614

17-
import Admonition from '/src/components/Admonition.astro'
15+
<Image src={snake} alt="Boa constrictor by Jan Kopřiva"/>
1816

19-
<Admonition type="note">
20-
Hey dude! I can see you now!
21-
```python
22-
import pyxel
17+
Projet original par Aurélien Noce (aka [@ushu](https://github.com/ushu)).
2318

24-
def update():
25-
if pyxel.btnp(pyxel.KEY_Q):
26-
pyxel.quit()
27-
28-
def draw():
29-
pyxel.cls(0)
30-
pyxel.text(56, 54, "Hello, Snake!", pyxel.frame_count % 16)
31-
32-
pyxel.init(160, 120, title="Hello Pyxel")
33-
pyxel.run(update, draw)
34-
```
35-
</Admonition >
36-
37-
<Admonition type="warning" label="🐺 Attention les p'tits loups !">
38-
Nan rien, c'est un test ...
39-
</Admonition>
19+
{/* ## Table des matières */}
4020

4121
## Introduction
4222

@@ -46,7 +26,7 @@ d'un programme complet.
4626

4727
Son sujet est un standard du jeu vidéo, le 🐍 [snake].
4828

49-
![[🎮 Snake!](https://kitao.github.io/pyxel/wasm/examples/07_snake.html) ;
29+
[[🎮 Snake!](https://kitao.github.io/pyxel/wasm/examples/07_snake.html) ;
5030
une version classique du snake, réalisée avec la plate-forme de retro-gaming
5131
Python [Pyxel](https://github.com/kitao/pyxel).](images/snake-pyxel.jpg)
5232

@@ -85,29 +65,70 @@ pyxel.run(update, draw)
8565

8666
## Comment ça marche ?
8767

88-
- 🗔 **Fenêtre.** Agrandissez la fenêtre du jeu -- initialement 300x300 --
89-
pour adopter une taille de votre choix.
68+
**TODO:**
69+
70+
- couleurs: faire le tour des possibles, renvoyer sur la "doc"?
9071

91-
- ⏲️ **Horloge.** Dans l'appel à la fonction `clock.tick`,
72+
- Text: comprendre la taille (fixe) de chaque caractère,
73+
display d'une "grille" de caractères., comprendre comment est
74+
placé le "Hello world!", ajuster le programme pour que le texte
75+
soit toujours centré (même si plusieurs lignes ?).
9276

93-
- remplacez l'argument `1` par `2` (puis exécutez le programme),
77+
## Nombre d'images par seconde
9478

95-
- procédez de même avec `5`,
79+
La fonction `time.time` de la bibliothèque standard Python renvoie le temps
80+
écoulé en secondes depuis le 1er janvier 1970 à midi.
9681

97-
- puis supprimez (ou commentez) l'appel à `clock.tick`.
82+
```
83+
>>> import time
84+
>>> time.time()
85+
1692980870.0990813
86+
>>> time.time()
87+
1692980871.2445116
88+
>>> time.time()
89+
1692980872.3245282
90+
```
91+
Utilisez-là pour mesurer le temps qui s'écoule entre deux appels à la fonction
92+
`draw` de Pyxel. Puis, affichez le nombre d'images par seconde
93+
(ou FPS pour *frames per second*) dans le coin en haut à gauche de la fenêtre.
94+
95+
<video controls width="768">
96+
<source src="/videos/fps.webm" type="video/webm" />
97+
</video>
9898

99-
Que se passe-t'il dans chaque cas ?
100-
A votre avis, quel est le rôle de la fonction `clock.tick`
101-
et de son argument ?
10299

103-
- 🖌️ **Affichage.**
104-
Que se passe-t'il si l'on commente la ligne `pygame.display.update()` ?
105-
Savez-vous expliquer ce phénomène ?
100+
<Admonition type="solution" open={false} >
101+
```python
102+
import math
103+
import time
104+
import pyxel
105+
106+
def update():
107+
if pyxel.btnp(pyxel.KEY_Q):
108+
pyxel.quit()
109+
110+
def draw():
111+
global t
112+
t_new = time.time()
113+
dt = t_new - t
114+
t = t_new
115+
fps = 1.0 / dt
116+
pyxel.cls(0)
117+
pyxel.text(0, 0, f"fps: {int(round(fps))}", 7)
118+
119+
pyxel.init(160, 120, title="🐍 Snake")
120+
t = time.time()
121+
pyxel.run(update, draw)
122+
```
123+
</Admonition>
124+
125+
## Evènements
106126

107-
- 🎨 **Couleurs.** Faites en sorte que les couleurs qui s'affichent
108-
soient toujours aléatoires, mais uniquement parmi des nuances de bleu.
127+
- évènement claviers: détecter les flèches, afficher les symboles,
128+
avec ceux qui sont pressés d'une couleur différente (plus vive).
109129

110-
🗝️ On pourra consulter l'annexe ["Codes RGB"](#annexe--codes-rgb).
130+
- éventuellement: "P" pour pause ? Plus rien n'est mis à jour ?
131+
(sauf la détection de la touche "P")
111132

112133
## Événements
113134

@@ -162,7 +183,7 @@ Nous allons commencer par construire notre plateau de jeu ainsi :
162183
Pour vérifier la validité de ce plateau de jeu,
163184
écrivez un programme qui dessine un damier :
164185

165-
![](images/damier.png)
186+
{/* ![](images/damier.png) */}
166187

167188
🗝️ Vous pouvez utiliser la méthode [`pygame.draw.rect`](https://www.pygame.org/docs/ref/draw.html#pygame.draw.rect) :
168189

@@ -199,7 +220,7 @@ pour obtenir un schéma comme suit ;
199220
disons pour fixer les idées que dans ce cas de figure `[10, 15]` est la queue
200221
et `[12, 15]` est la tête :
201222

202-
![](images/serpent.png)
223+
{/* ![](images/serpent.png) */}
203224

204225
<details>
205226
<summary>
@@ -253,7 +274,7 @@ Ensuite, nous allons faire bouger le serpent :
253274
- à chaque itération de la boucle, nous pouvons déplacer le serpent dans
254275
cette direction en "ajoutant" ce vecteur à la position de la tête du serpent
255276

256-
![](images/serpent-bouge.gif)
277+
{/* ![](images/serpent-bouge.gif) */}
257278

258279
Une fois que le serpent bouge, ajouter les commandes pour se déplacer dans
259280
les 4 directions, en appuyant sur les touches de direction du clavier.
@@ -333,7 +354,7 @@ On va procéder comme suit:
333354
on place un nouveau fruit à une position aléatoire
334355
et on allonge le serpent d'une case
335356

336-
![](images/manger.gif)
357+
{/* ![](images/manger.gif) */}
337358

338359
<details>
339360
<summary>

0 commit comments

Comments
 (0)