Skip to content
Snippets Groups Projects
Commit cdd9f8bc authored by Antoine Rochebois's avatar Antoine Rochebois
Browse files

initial commit

parents
No related branches found
No related tags found
No related merge requests found
[submodule "res/blockly"]
path = res/blockly
url = https://github.com/google/blockly
[submodule "res/JS-Interpreter"]
path = res/JS-Interpreter
url = https://github.com/NeilFraser/JS-Interpreter
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<title>Road to the Moon !</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../res/style.css" />
<!-- Import des bibliothèques js nécessaires -->
<script src="../res/blockly/blockly_compressed.js"></script>
<script src="../res/blockly/blocks_compressed.js"></script>
<script src="../res/blockly/javascript_compressed.js"></script>
<script src="../res/blockly/msg/js/fr.js"></script>
<script src="../res/JS-Interpreter/acorn_interpreter.js"></script>
</head>
<body>
<header>
<p>Road to the moon !</p>
</header>
<section class="mainSection">
<!-- Création de la div portant blockly et d'un conteneur supérieur pour le responsive-->
<div id="blocklyArea"><div id="blocklyDiv" ></div></div>
<div id="toolsArea">
<a onclick="runCode()" id="runButton">Lancer le programme !</a>
</div>
</section>
<footer>
<img src="../res/img/logos/insa.png">
<img src="../res/img/logos/clubelek.png">
<img src="../res/img/logos/blockly.png">
</footer>
</body>
<!-- Définition du contenu et de l'organisation de la "toolbox" -->
<!-- Script d'intanciation lancé au chargement, doit toujours être à la fin-->
<script src="main-script.js"></script>
</html>
var blocklyDiv = document.getElementById('blocklyDiv');
var blocklyArea = document.getElementById('blocklyArea');
var xml = null;
var request = new XMLHttpRequest();
request.open('GET', 'toolbox.xml', false);
request.send();
if (request.readyState == 4 && request.status == 200) {
xml = request.responseXML;
}
var toolbox = new XMLSerializer().serializeToString(xml.documentElement);
var workspace = Blockly.inject(blocklyDiv,
{toolbox: toolbox});
//Ca a l'air dégueulasse pour faire du responsive mais c'est le truc de la doc
//officielle de google xD
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
//Lance le code tel que rentré par le joueur
function runCode() {
var code = Blockly.JavaScript.workspaceToCode(workspace); //On récupère un code javascript
var myInterpreter = new Interpreter(code, initApi); //Intanciation d'une VM avec fonctions réécrites
myInterpreter.run(); //On lance le code de l'utilisateur dans la VM
//Il est possible de lancer le code de façon séquencielle
}
//Interprétation des commandes par l'utiliseur (redéfinition des fonctions avec IO)
function initApi(interpreter, scope) {
// Add an API function for the alert() block.
var wrapper = function(text) {
return alert(arguments.length ? text : '');
};
interpreter.setProperty(scope, 'alert',
interpreter.createNativeFunction(wrapper));
// Add an API function for the prompt() block.
wrapper = function(text) {
return prompt(text);
};
interpreter.setProperty(scope, 'prompt',
interpreter.createNativeFunction(wrapper));
}
<xml xmlns="https://developers.google.com/blockly/xml">
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
<category name="If">
<block type="controls_if"></block>
<block type="controls_if">
<mutation else="1"></mutation>
</block>
<block type="controls_if">
<mutation elseif="1" else="1"></mutation>
</block>
</category>
<category name="Boolean" colour="%{BKY_LOGIC_HUE}">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
<block type="logic_null"></block>
<block type="logic_ternary"></block>
</category>
</category>
<category name="Loops" colour="%{BKY_LOOPS_HUE}">
<block type="controls_repeat_ext">
<value name="TIMES">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
</block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
<field name="VAR">i</field>
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
<block type="controls_forEach"></block>
<block type="controls_flow_statements"></block>
</category>
<category name="Math" colour="%{BKY_MATH_HUE}">
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="math_single"></block>
<block type="math_trig"></block>
<block type="math_constant"></block>
<block type="math_number_property"></block>
<block type="math_round"></block>
<block type="math_on_list"></block>
<block type="math_modulo"></block>
<block type="math_constrain">
<value name="LOW">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="HIGH">
<block type="math_number">
<field name="NUM">100</field>
</block>
</value>
</block>
<block type="math_random_int">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">100</field>
</block>
</value>
</block>
<block type="math_random_float"></block>
<block type="math_atan2"></block>
</category>
<category name="Lists" colour="%{BKY_LISTS_HUE}">
<block type="lists_create_empty"></block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<block type="math_number">
<field name="NUM">5</field>
</block>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf"></block>
<block type="lists_getIndex"></block>
<block type="lists_setIndex"></block>
</category>
<sep></sep>
<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
</category>
<category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
</category>
<sep></sep>
<category name="Library" expanded="true">
<category name="Randomize">
<block type="procedures_defnoreturn">
<mutation>
<arg name="list"></arg>
</mutation>
<field name="NAME">randomize</field>
<statement name="STACK">
<block type="controls_for" inline="true">
<field name="VAR">x</field>
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="lists_length" inline="false">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<statement name="DO">
<block type="variables_set" inline="false">
<field name="VAR">y</field>
<value name="VALUE">
<block type="math_random_int" inline="true">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="lists_length" inline="false">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
</value>
</block>
</value>
<next>
<block type="variables_set" inline="false">
<field name="VAR">temp</field>
<value name="VALUE">
<block type="lists_getIndex" inline="true">
<mutation statement="false" at="true"></mutation>
<field name="MODE">GET</field>
<field name="WHERE">FROM_START</field>
<value name="AT">
<block type="variables_get">
<field name="VAR">y</field>
</block>
</value>
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
</value>
<next>
<block type="lists_setIndex" inline="false">
<value name="AT">
<block type="variables_get">
<field name="VAR">y</field>
</block>
</value>
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
<value name="TO">
<block type="lists_getIndex" inline="true">
<mutation statement="false" at="true"></mutation>
<field name="MODE">GET</field>
<field name="WHERE">FROM_START</field>
<value name="AT">
<block type="variables_get">
<field name="VAR">x</field>
</block>
</value>
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
</value>
<next>
<block type="lists_setIndex" inline="false">
<value name="AT">
<block type="variables_get">
<field name="VAR">x</field>
</block>
</value>
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
<value name="TO">
<block type="variables_get">
<field name="VAR">temp</field>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</statement>
</block>
</statement>
</block>
</category>
<category name="Jabberwocky">
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT">'Twas brillig, and the slithy toves</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT"> Did gyre and gimble in the wabe:</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT">All mimsy were the borogroves,</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT"> And the mome raths outgrabe.</field>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT">"Beware the Jabberwock, my son!</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT"> The jaws that bite, the claws that catch!</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT">Beware the Jubjub bird, and shun</field>
</block>
</value>
<next>
<block type="text_print">
<value name="TEXT">
<block type="text">
<field name="TEXT"> The frumious Bandersnatch!"</field>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</category>
</category>
</xml>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Road to the Moon !</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="res/style.css" />
</head>
<body>
<header>
<p>Road to the moon !</p>
</header>
<section class="mainSection">
<ul class="activitySelector">
<li class="activitySelector">
<a href="activity_1/index.html">
<h2>Activité 1</h2>
<img src="res/img/activities_icons/1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor eros lorem,
sit amet porttitor lacus porta id. Fusce eu faucibus enim, sed dapibus mi.
Nunc sed lectus sit amet orci egestas placerat. Suspendisse quam velit posuere.
</p>
</a>
</li>
<li class="activitySelector">
<a href="activity_2/index.html">
<h2>Activité 2</h2>
<img src="res/img/activities_icons/2.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor eros lorem,
sit amet porttitor lacus porta id. Fusce eu faucibus enim, sed dapibus mi.
Nunc sed lectus sit amet orci egestas placerat. Suspendisse quam velit posuere.
</p>
</a>
</li>
<li class="activitySelector">
<a href="activity_3/index.html">
<h2>Activité 3</h2>
<img src="res/img/activities_icons/3.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor eros lorem,
sit amet porttitor lacus porta id. Fusce eu faucibus enim, sed dapibus mi.
Nunc sed lectus sit amet orci egestas placerat. Suspendisse quam velit posuere.
</p>
</a>
</li>
<li class="activitySelector">
<a href="activity_4/index.html">
<h2>Activité 4</h2>
<img src="res/img/activities_icons/4.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor eros lorem,
sit amet porttitor lacus porta id. Fusce eu faucibus enim, sed dapibus mi.
Nunc sed lectus sit amet orci egestas placerat. Suspendisse quam velit posuere.
</p>
</a>
</li>
</ul>
</section>
<footer>
<img src="res/img/logos/insa.png">
<img src="res/img/logos/clubelek.png">
<img src="res/img/logos/blockly.png">
</footer>
</body>
</html>
Subproject commit f72a7bdcc85487506423fc896b7be9972754fb3e
Subproject commit ba6dfd812552e0823ed75f3dc5133a267cc6fbc9
res/img/activities_icons/1.png

40.5 KiB

res/img/activities_icons/2.png

18.5 KiB

res/img/activities_icons/3.png

17.9 KiB

res/img/activities_icons/4.png

27 KiB

res/img/logos/blockly.png

11.3 KiB

res/img/logos/clubelek.png

2.91 KiB

res/img/logos/insa.png

17.3 KiB

/* PARAMETRES DE MISE EN PAGE GENERIQUES A TOUTES LES PAGES */
:root {
--main-bg-color-dark: #212140;
--main-bg-color-light: #B4B0FF;
--clubelek-violet-color: #d150ac;
--clubelek-rosa-color: #ef4178;
--clubelek-chair-color: #ffac78;
--clubelek-yellow-color: #fcd03d;
--clubelek-blue-color: #1baec2;
--clubelek-light-blue-color: #c6e1d3;
}
body {
font-family: sans-serif;
}
header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height:8%;
background-color: var(--main-bg-color-dark);
color: white;
}
header p {
font-size:30px;
font-family:"Arial";
font-weight:bold;
}
footer{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
bottom: 0;
width: 100%;
height:8%;
background-color: var(--main-bg-color-dark);
color: white;
}
footer img {
width: auto;
max-height: 80%;
margin-left: 5%;
margin-right: 5%;
}
.mainSection {
/*Ouais j'ai la flemme d'être propre, déso si un puriste passe par ici...*/
position: fixed;
display: flex;
top: 10%;
left: 1%;
width: 98%;
height: 80%;
}
/*PARAM SPECIFIQUES A LA MAIN PAGE*/
ul.activitySelector {
display: flex;
flex-wrap: wrap;
margin: auto;
list-style: none;
align-items: center;
justify-content: center;
text-align: center;
}
li.activitySelector a{
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
text-decoration: none;
color: black;
width: 300px;
min-height: 300px;
margin: 50px;
background-color: var(--main-bg-color-light);
transition: color 1s, background-color 1s;
}
li.activitySelector:hover a{
background-color: var(--main-bg-color-dark);
color: white;
}
li.activitySelector a h2 {
font-size: 30px;
text-align: center;
}
li.activitySelector:hover a h2 {
display: inline-block;
/*opacity: 0;*/
height: 100%;
}
li.activitySelector a img {
display: inline;
max-height: 210px;
max-width: 280px;
align-self: center;
}
li.activitySelector:hover a img {
display: none;
}
li.activitySelector a p {
display: none;
padding: 10px 10px;
text-align: justify;
color: var(--main-bg-color-light);
transition: color 1s;
}
li.activitySelector:hover a p {
display: inline-block;
color: white;
transition: color 1s;
}
/*PARAM SPECIFIQUES AUX PAGES D'ACTIVITES*/
#runButton {
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
background-color:#77b55a;
border-radius:20px;
border:3px solid #4b8f29;
display:block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:25px;
font-weight:bold;
padding:30px;
margin: 0% 2%;
text-decoration:none;
text-shadow:0px 1px 0px #5b8a3c;
}
#runButton:hover {
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
background-color:#72b352;
}
#runButton:active {
position:relative;
top:3px;
}
#blocklyArea {
width:50%;
height:100%;
float:left;
}
#toolsArea {
float:right;
height:100%;
width:48%;
margin-right:2%;
text-align:center;
}
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