Commit 8a098e67 authored by berumuron's avatar berumuron
Browse files

Ajoute la première étape du jeu des pizzas

parent 63dc5269
---
title: Une histoire de pizzas, étape 1
template: game
---
<a href="../une-histoire-de-pizzas-1.html">Lire l’article associé</a>
<div id="app">
<div class="board">
<!--
la variable size est passée par VueJS et a pour valeur 6. On répète
donc 6 fois la div "board-line", au sein desquelles on répète 6
fois la div "board-cell".
-->
<div v-for="y in size" :key="y" class="board-line">
<div v-for="x in size" :key="x" class="board-cell">
</div>
</div>
</div>
</div>
<script>
const BOARD_SIZE = 6;
// Un tout petit peu de JS pour dire à VueJS de "monter" l'application sur
// la balise possédant l'id #app et passer la variable size. Je ne rentre
// pas dans le détail ici, ce n’est pas très important.
const app = new Vue({
el: '#app',
data: {
size: BOARD_SIZE,
},
});
</script>
<style type="text/css">
/*
Ici on définit quelques variables CSS, c'est pas forcé mais ça aidera à
la maintenance du code.
*/
#app {
--cell-size: 128px;
--color-floor: #fff;
--color-floor-border: #ccc;
}
/*
Une ligne est un conteneur flex, ça permet de se simplifier la vie pour
aligner les cellules. La conséquence ici est que les .board-cell seront
affichées en lignes et non pas en colonnes.
*/
.board-line {
display: flex;
}
/*
Puis on définit la taille des cellules ainsi qu’une couleur de fond et
de bordure pour les mettre en évidence.
*/
.board-cell {
width: var(--cell-size);
height: var(--cell-size);
background-color: var(--color-floor);
border: 1px solid var(--color-floor-border);
}
</style>
/* Section structure générale */
:root {
--main-color: #2a2230;
--link-color: #a6253a;
}
html {
color: var(--main-color);
font-size: 18px;
line-height: 1.4;
}
@media(min-width: 40rem) {
html {
font-size: 24px;
}
}
/* Section liens */
a {
color: var(--link-color);
}
/* Section principale des pages */
.page {
padding-left: 5rem;
padding-right: 5rem;
}
.page #app {
margin-top: 2rem;
margin-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="{{ SITE_URL }}style/game.css">
{% if SITE_ENVIRONMENT == 'development' %}
<script src="{{ SITE_URL }}scripts/vue.js"></script>
{% else %}
<script src="{{ SITE_URL }}scripts/vue.min.js"></script>
{% endif %}
<title>{{ PAGE_TITLE }}</title>
</head>
<body class="page">
<h1>{{ PAGE_TITLE }}</h1>
{{ PAGE_CONTENT }}
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment