Discussion :

[WaterBottle]

Bonjour,

J'ai un code Javascript qui m'intéresse, mais je ne sais pas programmer. J'essaie de trouver un moyen pour qu'une commande comme "bonjour", renvoie dans le faux terminal un écrit quelconque. Etc. Et pourquoi pas aussi lancer une photo si la bonne commande est entrée. Je ne pense pas que ce soit un code long à faire, mais j'ignore totalement comment l'écrire.

Merci pour votre aide !

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
function fauxTerm(config) {
 
  var term = config.el || document.getElementById('term');
  var termBuffer = config.initialMessage || '';
  var lineBuffer = config.initialLine || '';
  var cwd = config.cwd || "~/";
  var tags = config.tags || ['red', 'blue', 'white', 'bold'];
  var processCommand = config.cmd || false;
  var maxBufferLength = config.maxBufferLength || 8192;
  var commandHistory = [];
  var currentCommandIndex = -1;
  var maxCommandHistory = config.maxCommandHistory || 100;
  var autoFocus = config.autoFocus || false;
  var coreCmds = {
    "clear": clear
  };
 
  var fauxInput = document.createElement('textarea');
  fauxInput.className = "faux-input";
  document.body.appendChild(fauxInput);
  if ( autoFocus ) {
    fauxInput.focus();
  }
 
 
  function getLeader() {
    return cwd + "$ ";
  }
 
  function renderTerm() {
    var bell = '<span class="bell"></span>';
    var ob = termBuffer + getLeader() + lineBuffer;
    term.innerHTML = ob;
    term.innerHTML += bell;
    term.scrollTop = term.scrollHeight;
  }
 
  function writeToBuffer(str) {
    termBuffer += str;
 
    //Stop the buffer getting massive.
    if ( termBuffer.length > maxBufferLength ) {
      var diff = termBuffer.length - maxBufferLength;
      termBuffer = termBuffer.substr(diff);
    }
 
  }
 
  function renderStdOut(str) {
    var i = 0, max = tags.length;
    for ( i; i<max; i++ ) {
      var start = new RegExp('{' + tags[i] + '}', 'g');
      var end = new RegExp('{/' + tags[i] + '}', 'g');
      str = str.replace(start, '<span class="' + tags[i] + '">');
      str = str.replace(end, '</span>');
    }
    return str;
  }
 
  function clear(argv, argc) {
    termBuffer = "";
    return "";
  }
 
  function isCoreCommand(line) {
    if ( coreCmds.hasOwnProperty(line) ) {
      return true;
    }
    return false;
  }
 
  function coreCommand(argv, argc) {
 
    var cmd = argv[0];
    return coreCmds[cmd](argv, argc);
 
  }
 
  function processLine() {
 
    //Dispatch command
    var stdout, line = lineBuffer, argv = line.split(" "), argc = argv.length;
 
    var cmd = argv[0];
 
    lineBuffer += "\n";
    writeToBuffer( getLeader() + lineBuffer );
    lineBuffer = "";
 
    //If it's not a blank line.
    if ( cmd !== "" ) {
 
      //If the command is not registered by the core.
      if ( !isCoreCommand(cmd) ) {
 
        //User registered command
        if ( processCommand ) {
          stdout = processCommand(argv,argc);
        } else {
          stdout = "{white}{bold}" + cmd + "{/bold}{/white}: command not found\n";
        }
      } else {
        //Execute a core command
        stdout = coreCommand(argv,argc);
      }
 
      //If an actual command happened.
      if ( stdout === false ) {
        stdout = "{white}{bold}" + cmd + "{/bold}{/white}: command not found\n";
      }
 
      stdout = renderStdOut(stdout);
      writeToBuffer(stdout);
 
      addLineToHistory(line);
 
    }
 
    renderTerm();
  }
 
  function addLineToHistory(line) {
    commandHistory.unshift( line );
    currentCommandIndex = -1;
    if ( commandHistory.length > maxCommandHistory ) {
      console.log('reducing command history size');
      console.log(commandHistory.length);
      var diff = commandHistory.length - maxCommandHistory;
      commandHistory.splice(commandHistory.length -1, diff);
      console.log(commandHistory.length);
    }
  }
 
  function isInputKey(keyCode) {
    var inputKeyMap = [32,190,192,189,187,220,221,219,222,186,188,191];
    if ( inputKeyMap.indexOf(keyCode) > -1 ) {
      return true;
    }
    return false;
  }
 
  function toggleCommandHistory(direction) {
 
    var max = commandHistory.length -1;
    var newIndex = currentCommandIndex + direction;
 
    if ( newIndex < -1 ) newIndex = -1;
    if ( newIndex >= commandHistory.length) newIndex = commandHistory.length -1;
 
    if ( newIndex !== currentCommandIndex ) {
      currentCommandIndex = newIndex;
    }
 
    if ( newIndex > -1 ) {
      //Change line to something from history.
      lineBuffer = commandHistory[newIndex];
    } else {
      //Blank line...
      lineBuffer = "";
    }
 
 
  }
 
  function acceptInput(e) {
    e.preventDefault();
 
     fauxInput.value = "";
 
    if ( e.keyCode >= 48 && e.keyCode <= 90 || isInputKey(e.keyCode) ) {
      if (! e.ctrlKey ) {
        //Character input
        lineBuffer += e.key;
      } else {
        //Hot key input? I.e Ctrl+C
      }
    } else if ( e.keyCode === 13 ) {
      processLine();
    } else if ( e.keyCode === 9 ) {
      lineBuffer += "\t";
    } else if ( e.keyCode === 38 ) {
      toggleCommandHistory(1);
    } else if ( e.keyCode === 40 ) {
      toggleCommandHistory(-1);
    }
    else if ( e.key === "Backspace" ) {
      lineBuffer = lineBuffer.substr(0, lineBuffer.length -1);
    }
 
    renderTerm();
  }
 
  term.addEventListener('click', function(e){
    fauxInput.focus();
    term.classList.add('term-focus');
  });
  fauxInput.addEventListener('keydown', acceptInput);
  fauxInput.addEventListener('blur', function(e){
    term.classList.remove('term-focus');
  });
  renderTerm();
 
}
var myTerm = new fauxTerm({
  el: document.getElementById("term"),
  cwd: "guest@dam.pe:/",
  initialMessage: "Welcome to dam.pe!\n",
  /*
  tags: ['red', 'blue', 'white', 'bold'],
  maxBufferLength: 8192,
  maxCommandHistory: 500,
  cmd: function(argv, argc) {
    console.log(argv);
    return false;
  }*/
});
var mySecondTerm = new fauxTerm({
  el: document.getElementById("term2"),
  cwd: "guest@dam.pe:/",
  initialMessage: "Welcome to dam.pe! 2\n",
  /*
  autoFocus: false,
  tags: ['red', 'blue', 'white', 'bold'],
  maxBufferLength: 8192,
  maxCommandHistory: 500,
  cmd: function(argv, argc) {
    console.log(argv);
    return false;
  }*/
});

[mathieu]

d'où vient le code que vous nous montrez ?

[darkstar123456]

Bonjour,

J'ai trouvé la fonction sur le net, qui semble provenir de ce CodePen : https://codepen.io/isdampe/pen/YpgOYr

D'après ce que je vois, il faut :

1] Ajouter la commande à la liste des commandes disponibles :
commande => callback

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var coreCmds = {
    "clear": clear,
    "test": testMessage
  };

2] Ajouter la méthode : (callback défini dans le point 1)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function clear(argv, argc) {
    termBuffer = "";
    return "";
  }
 
// Nouvelle fonction pour afficher un message test
// Je mets ma méthode après la clear() existante
function testMessage(argv, argc) {
    return "Ceci est un {red}test{/red} de message\n"; // Le \n permet d'ajouter un saut de ligne
  }

Et voici le CodePen mis à jour avec mon test : https://codepen.io/DarkStar123456/pen/Vwbqdzm

[WaterBottle]

Bonjour,

Oui, j'aurais dû poster le lien avant.

Tu as trouvé la solution que je cherchais darkstar123456. Merci ! C'est presque un rêve qui se réalise.

J'avais bidouillé un peu vers là, mais j'ai dû oublier une virgule. Et comme un petit détail suffit pour que rien ne marche, j'ai fini par baisser les bras.

Mais plus "technique", je cherche aussi à savoir comment une commande puisse lancer pour l'utilisateur un téléchargement d'un pdf par exemple. Ou lancer une vidéo. Ou une musique en fond. Je suis allé voir un peu le code ici https://github.com/tojrobinson/jurassicsystems.com du type qui a fait ce site : https://www.jurassicsystems.com. Un site vraiment génial qui simule le système d'exploitation du film Jurassic Park !

Pourquoi ai-je pensé à aller voir là-bas ? Parce qu'il simule une console où une commande permet de lancer une photo ou une musique et d'autres choses encore.

Bref, je pense que là le travail est un peu plus dur ici. Et plus long à modifier pour l'incorporer dans le premier code que je vous ai envoyé. Vous allez finir par m'envoyer balader x).

[darkstar123456]

Hello,

C'est compliqué de répondre, c'est un peu comme si tu allais voir quelqu'un qui bosse dans le bâtiment et que tu lui demandais "Comment on construit une maison ?"

Néanmoins, pour apporter mon aide, je peux au moins expliquer comment je ferais.
Ce qu'on fait souvent, c'est qu'on place déjà tout sur le site et qu'on cache simplement les éléments tant qu'ils ne sont pas demandés

Par exemple, je placerais déjà l'/les image(s), la/les vidéo(s) et les commandes ne feraient que toggle des classes sur les différents éléments pour les afficher/cacher (s'il y a besoin d'un toggle, sinon juste une classe pour les afficher)

Pour ce qui est de forcer un téléchargement, je ne suis pas certain que ça soit directement possible en Javascript. Etant donné que les PDF sont maintenant lisibles dans la plupart des navigateurs, il y a fort à parier qu'il s'ouvre directement dans le navigateur. Il faudrait alors donc passer par une partie côté serveur (PHP par exemple), pour forcer via les headers() le téléchargement

[WaterBottle]

Je vois !

Merci en tous cas !