cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/javascript/javascript.rb

@@ -14,14 +14,52 @@ module Cyberweb
   require 'cyberweb/javascript/return_javascript.rb'
 
   # ========================================================================= #
-  # === Cyberweb.load_this_external_javascript_file
+  # === Cyberweb.map_symbol_to_javascript_file
+  #
+  # This method assumes that the first argument given is a Symbol.
   # ========================================================================= #
-  def self.load_this_external_javascript_file(i)
-    return '<script src="'+i+'"></script>'+N
+  def self.map_symbol_to_javascript_file(
+      this_symbol,
+      path = ''
+    )
+    case this_symbol
+    # ===================================================================== #
+    # === snake
+    #
+    # This refers to the snake game in javascript.
+    # ===================================================================== #
+    when :snake,
+         :snake_game
+      this_symbol = "#{path}/javascript_code/games/snake.js"
+    # ===================================================================== #
+    # === tetris
+    #
+    # This refers to the tetris game in javascript.
+    # ===================================================================== #
+    when :tetris,
+         :tetris_game
+      this_symbol = "#{path}/javascript_code/games/tetris.js"
+    # ===================================================================== #
+    # === :tic_tac_toe
+    # ===================================================================== #
+    when :tic_tac_toe,
+         :tic_tac_toe_game
+      this_symbol = "#{path}/javascript_code/games/tic-tac-toe.js"
+    # ===================================================================== #
+    # === :fader
+    # ===================================================================== #
+    when :fader,
+         :fader_js
+      this_symbol = "#{path}/javascript_code/FADER.js" # path seems to be used only here.
+    else
+      return "Not registered Symbol `#{this_symbol}`. This is "\
+             "currently not allowed, thus we exit."
+    end
+    return this_symbol
   end
 
   # ========================================================================= #
-  # === javascript_file
+  # === Cyberweb.javascript_file
   #
   # This will "load" a javascript file (actually, the browser will do the 
   # loading part, in here we only generate the necessary string for this.)
@@ -45,26 +83,33 @@ module Cyberweb
       path = ''
     )
     if input.is_a? Symbol
-      case input
-      when :fader,
-           :fader_js
-        input = "#{path}DATA/CODE/javascript/FADER.js" # path seems to be used only here.
-      end
+      input = map_symbol_to_javascript_file(input, path)
     end
-    if is_html5?
+    if is_html5? # This clause is the default.
       return load_this_external_javascript_file(input)
     else
       # ===================================================================== #
       # The next line included the string type="text/javascript", but the
       # W3C validator states that this is unnecessary, so this has been
-      # removed in August 2018. The validator's message was:
+      # removed in August 2018.
+      #
+      # The validator's message was:
+      #
       #   "The type attribute is unnecessary for JavaScript resources."
+      #
       # ===================================================================== #
       return '<script src="'+input+'"></script>'+N
     end
   end; self.instance_eval { alias load_javascript  javascript_file } # === Cyberweb.load_javascript
        self.instance_eval { alias javascript_file= javascript_file } # === Cyberweb.javascript_file=
 
+  # ========================================================================= #
+  # === Cyberweb.load_this_external_javascript_file
+  # ========================================================================= #
+  def self.load_this_external_javascript_file(i)
+    return '<script src="'+i+'"></script>'+N
+  end
+
   # ========================================================================= #
   # === Cyberweb.sanitize_javascript
   #
@@ -117,28 +162,6 @@ module Cyberweb
     return_javascript('document.write('+i+');')
   end
 
-  # ========================================================================= #
-  # === ejavascript
-  #
-  # Tap into the class JavascriptMagic since Aug 2011, then output the 
-  # result. It will invoke the method .return_javascript() (see above).
-  #
-  # It may not always be wanted to output the given javascript code
-  # at hand. Thus, this behaviour may be subject to change eventually.
-  # ========================================================================= #
-  def ejavascript(i)
-    ::Cyberweb.ejavascript(i)
-  end; alias javascript_code=           ejavascript # === javascript_code=
-       alias ejavascript_code           ejavascript # === ejavascript_code
-       alias script_javascript          ejavascript # === script_javascript
-       alias escript_javascript         ejavascript # === escript_javascript
-       alias ejs                        ejavascript # === ejs
-       alias use_this_javascript        ejavascript # === use_this_javascript
-       alias embed_javascript           ejavascript # === embed_javascript
-       alias embed_this_javascript_code ejavascript # === embed_this_javascript_code
-       alias embed_this_javascript      ejavascript # === embed_this_javascript_code
-       alias javascript_code            ejavascript # === javascript_code # experimental as of Nov 2014.
-
   # ========================================================================= #
   # === body_javascript_onload
   # ========================================================================= #
@@ -198,7 +221,7 @@ module Cyberweb
     array.each {|entry|
       _ << '<script src="'
       _ << use_this_path
-      _ << 'CODE/javascript/'
+      _ << 'javascript_code/'
       _ << entry
       _ <<  '" '
       _ = _.ljust(48)
@@ -208,4 +231,26 @@ module Cyberweb
     _
   end
 
+  # ========================================================================= #
+  # === ejavascript
+  #
+  # Tap into the class JavascriptMagic since Aug 2011, then output the 
+  # result. It will invoke the method .return_javascript() (see above).
+  #
+  # It may not always be wanted to output the given javascript code
+  # at hand. Thus, this behaviour may be subject to change eventually.
+  # ========================================================================= #
+  def ejavascript(i)
+    ::Cyberweb.ejavascript(i)
+  end; alias javascript_code=           ejavascript # === javascript_code=
+       alias ejavascript_code           ejavascript # === ejavascript_code
+       alias script_javascript          ejavascript # === script_javascript
+       alias escript_javascript         ejavascript # === escript_javascript
+       alias ejs                        ejavascript # === ejs
+       alias use_this_javascript        ejavascript # === use_this_javascript
+       alias embed_javascript           ejavascript # === embed_javascript
+       alias embed_this_javascript_code ejavascript # === embed_this_javascript_code
+       alias embed_this_javascript      ejavascript # === embed_this_javascript_code
+       alias javascript_code            ejavascript # === javascript_code # experimental as of Nov 2014.
+
 end

data/lib/cyberweb/javascript/javascript_clock.rb

@@ -19,6 +19,20 @@ module Cyberweb
       css_style  = '',
       javascript = ''
     )
+    if css_class.is_a?(Hash)
+      # ===================================================================== #
+      # === :css_style
+      # ===================================================================== #
+      if css_class.has_key?(:css_style)
+        css_style = css_class.delete(:css_style)
+      end
+      # ===================================================================== #
+      # This entry point should come last, within that given Hash.
+      # ===================================================================== #
+      if css_class.has_key?(:css_class)
+        css_class = css_class.delete(:css_class)
+      end
+    end
     # ======================================================================= #
     # === Handle blocks next
     # ======================================================================= #
@@ -45,23 +59,45 @@ function UpdateClock() {
     clock_id = 0;
   }
   date_object = new Date()
-  xxx = date_object.getSeconds()
-  if(xxx <10) {
-    xxx = "0"+xxx
+  n_seconds = date_object.getSeconds()
+  if (n_seconds < 10) {
+    n_seconds = "0"+n_seconds
   }
-  document.FormClock.Time.value = ""+date_object.getHours()+":"+date_object.getMinutes()+":"+xxx
+  document.form_displaying_a_simple_clock.Time.value = ""+
+  date_object.getHours().toString().padStart(2, \'0\')+
+  ":"+
+  date_object.getMinutes().toString().padStart(2, \'0\')+
+  ":"+
+  n_seconds
   clock_id = setTimeout("UpdateClock()", 1000);
 }
-function StartClock() { clock_id = setTimeout("UpdateClock()", 500); }
-function KillClock()  { if(clock_id) { clearTimeout(clock_id); clock_id = 0; }}'
-    div(css_class, the_id, css_style, javascript){
-      self.javascript 'StartClock()' # Start our clock here.
-      # Give the form the name "FormClock" next.
-      e '<form name="FormClock">'
-      input(:text,'','pad5px s8px','Time',
-      'border:5px solid #040a17;width:150px;'\
-      'background-color: #daffbf;'+css_style,
-      'c')
+function start_the_clock() { clock_id = setTimeout("UpdateClock()", 500); }
+function kill_the_clock()  { if(clock_id) { clearTimeout(clock_id); clock_id = 0; }}'
+    div(
+        css_class,
+        the_id,
+        css_style,
+        javascript
+      ){
+      if css_style
+        css_style = css_style.dup
+        # Prepend CSS style to the input formular.
+        css_style.prepend(
+          'border: 3px solid #040a17;
+           width: 145px;'\
+          'background-color: #daffbf;'+css_style
+        )
+      end
+      self.javascript 'start_the_clock()' # Start our clock here.
+      # ===================================================================== # 
+      # Give the form the name "form_displaying_a_simple_clock" next.
+      # ===================================================================== #
+      e '<form name="form_displaying_a_simple_clock">'
+        input(
+          :text,'','pad5px s8px','Time',
+          css_style,
+          'c'
+        )
       cform
     }
   end; alias javascript_clock display_clock # === javascript_clock

data/lib/cyberweb/javascript/javascript_helper/javascript_helper.rb

@@ -0,0 +1,59 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# === Cyberweb::JavascriptHelper
+# =========================================================================== #
+# require 'cyberweb/javascript/javascript_helper/javascript_helper.rb'
+# Cyberweb::JavascriptHelper.new(ARGV)
+# =========================================================================== #
+module Cyberweb
+
+class JavascriptHelper # === Cyberweb::JavascriptHelper
+
+  # ========================================================================= #
+  # === initialize
+  # ========================================================================= #
+  def initialize(
+      i           = ARGV,
+      run_already = true
+    )
+    reset
+    run if run_already
+  end
+
+  # ========================================================================= #
+  # === reset                                                     (reset tag)
+  # ========================================================================= #
+  def reset
+    # ======================================================================= #
+    # === @content
+    # ======================================================================= #
+    @content = ''.dup
+    # ======================================================================= #
+    # === @work_on_this_id
+    # ======================================================================= #
+    @work_on_this_id = nil
+  end
+
+  # ========================================================================= #
+  # === set_work_on_this_id
+  # ========================================================================= #
+  def set_work_on_this_id(i)
+    @work_on_this_id = i
+  end; alias work_on_this_id= set_work_on_this_id # === work_on_this_id=
+
+  # ========================================================================= #
+  # === set_content
+  # ========================================================================= #
+  def set_content(i)
+    @content = i
+  end; alias content= set_content # === content=
+
+  # ========================================================================= #
+  # === run
+  # ========================================================================= #
+  def run
+  end
+
+end; end

data/lib/cyberweb/javascript/jquery.rb

@@ -20,11 +20,15 @@ module Cyberweb
   # ========================================================================= #
   def self.download_latest_jquery
     file = config_file?
-    jquery_version_string = YAML.load_file(file)['jquery_version']
-    jquery_url = "https://code.jquery.com/jquery-#{jquery_version_string}.js"
-    _ = "wget #{jquery_url}"
-    puts _
-    system _
+    if File.exist? file
+      jquery_version_string = YAML.load_file(file)['jquery_version']
+      jquery_url = "https://code.jquery.com/jquery-#{jquery_version_string}.js"
+      _ = "wget #{jquery_url}"
+      puts _
+      system _
+    else
+      puts "No file exists at #{file}."
+    end
   end
 
 end

data/lib/cyberweb/javascript/on_click_change_opacity.rb

@@ -19,7 +19,9 @@ module Cyberweb
       which_opacity_value_to_use = '0.92'
     )
     which_opacity_value_to_use = which_opacity_value_to_use.to_s
+    # ======================================================================= #
     # The id must be a string.
+    # ======================================================================= #
     use_this_id = use_this_id.to_s.dup # Work on a copy.
     unless use_this_id.start_with? '#'
       use_this_id.prepend('#')
@@ -63,7 +65,9 @@ $(document).ready(function(){
   # ========================================================================= #
   # === return_on_click_change_opacity
   # ========================================================================= #
-  def return_on_click_change_opacity(a = 'pic', b = '0.92')
+  def return_on_click_change_opacity(
+      a = 'pic', b = '0.92'
+    )
     Cyberweb.return_on_click_change_opacity(a, b)
   end; alias string_highlight return_on_click_change_opacity # === string_highlight
 

data/lib/cyberweb/javascript/on_click_hide.rb

@@ -2,6 +2,8 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
+# require 'on_click_hide.rb'
+# =========================================================================== #
 module Cyberweb
 
   # ========================================================================= #

data/lib/cyberweb/javascript/popup.rb

@@ -8,12 +8,15 @@ module Cyberweb
  
   # ========================================================================= #
   # === alert
+  #
+  # This method can be used as a javascript-alert "box". It will show
+  # notifications to the user.
   # ========================================================================= #
   def alert(
       msg_to_display = 'Alert!'
     )
     popup(msg_to_display, :alert)
-  end
+  end; alias javascript_alert alert # === javascript_alert
 
   # ========================================================================= #
   # === Cyberweb.popup
@@ -67,7 +70,7 @@ module Cyberweb
        self.instance_eval { alias message popup } # === Cyberweb.message
 
   # ========================================================================= #
-  # === popup
+  # === popup                                                     (popup tag)
   # ========================================================================= #
   def popup(
       a = 'Hello World!',

data/lib/cyberweb/javascript/resize.rb

@@ -14,7 +14,10 @@ module Cyberweb
     )
     this_id = this_id.to_s
     case this_id # Treat a few IDs in a special.
-    when 'last','last_id','last_id_used','last_image'
+    when 'last',
+         'last_id',
+         'last_id_used',
+         'last_image'
       this_id = @array_registered_ids[-1] if ARRAY_REGISTERED_IDS.size > 0
     end
     # ======================================================================= #

data/lib/cyberweb/javascript_code/README.md

@@ -1,5 +1,5 @@
 This directory may contain javascript code that could be useful
-for other people.
+for users of the cyberweb project.
 
 A requirement is that the javascript code stored here is extensively
 documented - or, at the least, sufficiently documented. It should

data/lib/cyberweb/javascript_code/custom_functions.js

@@ -1,6 +1,36 @@
-/******************************************************************
+/*
+ * === change_the_colour_to()
+ *
+ * Use this function to change the colour of the text at
+ * hand.
+ */
+function change_the_colour_to(
+  this_colour,
+  work_on_this_id = "our_id"
+)
+{
+  document.getElementById(work_on_this_id).style.color = this_colour;
+}
+
+/*
+ * === show_source()
+ *
+ * This simple function just shows the source of a webpage.
+ *
+ */
+function show_source()
+{
+  alert(document.documentElement.innerHTML);
+}
+
+/*
  * 
- * euro_nach_schilling()
+ * === euro_nach_schilling()
+ *
+ * Usage example:
+ *
+ *   euro_nach_schilling(5)
+ *
  */
 function euro_nach_schilling() 
 {
@@ -21,17 +51,6 @@ function schilling_nach_euro()
   document.euroformular.euro.value = e
 }
 
-/*
- * === show_source()
- *
- * This simple function just shows the source of a webpage.
- *
- */
-function show_source()
-{
-  alert(document.documentElement.innerHTML);
-}
-
 function calc_euro(){
   EuroBetrag = parseFloat(document.EURO.Betrag.value);
   result1 = (Math.round(EuroBetrag  *  13.76030*100/100))
@@ -43,6 +62,7 @@ function calc_euro(){
 /* 
  * === set_new_background_colour()
  *
+ * This function requires the RGB value.
  */
 function set_new_background_colour_via_RGB(r,g,b) {
   var background_object = new Object_setColour(r,g,b)
@@ -73,6 +93,7 @@ function toggle(target_id)
 }
 
 /*
+ * === toggle_visibility()
  *
  */
 function toggle_visibility(id)
@@ -112,6 +133,11 @@ function reveal(d) {
  * === popup()
  *
  * An alias to alert.
+ *
+ * Usage example:
+ *
+ *   popup("Hello world!")
+ *
  */
 function popup(i)
 {
@@ -210,22 +236,22 @@ function only_numbers(myfield, e, dec)
   var keychar;
 
   if (window.event)
-     key = window.event.keyCode;
+    key = window.event.keyCode;
   else if (e)
-     key = e.which;
+    key = e.which;
   else
-     return true;
+    return true;
 
   keychar = String.fromCharCode(key);
 
   // control keys
   if ((key==null) || (key==0) || (key==8) || 
       (key==9) || (key==13) || (key==27) )
-     return true;
+    return true;
 
   // numbers
   else if ((("0123456789").indexOf(keychar) > -1))
-     return true;
+    return true;
 
   // decimal point jump
   else if (dec && (keychar == "."))
@@ -234,7 +260,7 @@ function only_numbers(myfield, e, dec)
     return false;
   }
   else
-   return false;
+    return false;
 }
 
 // ============================================================================
@@ -247,12 +273,12 @@ function puts(i)
   document.write(i);
 }
 
-
-// ============================================================================
-// === to_bold
-//
-// <a href="#" onclick="JavaScript:to_bold(this);">blabla</a>
-// ============================================================================
+/*
+ * === to_bold
+ *
+ * <a href="#" onclick="JavaScript:to_bold(this);">blabla</a>
+ *
+ */
 function to_bold(obj)
 {
   obj.style.fontWeight="bold"

data/lib/cyberweb/javascript_code/disable_right_click.js

@@ -0,0 +1,5 @@
+$(document).ready(function(){
+  $(document).bind("contextmenu", function(e){
+    return false;
+  });
+});

data/lib/cyberweb/javascript_code/games/snake.js

@@ -0,0 +1,113 @@
+const cvs = document.getElementById("snake_canvas");
+const ctx = cvs.getContext("2d");
+
+// create the unit
+
+// load images
+ground.src = "ground.png";
+
+const foodImg = new Image();
+foodImg.src = "food.png";
+
+// create the snake
+let snake = [];
+
+snake[0] = {
+  x :  9 * box,
+  y : 10 * box
+};
+
+// create the food
+let food = {
+  x : Math.floor(Math.random()*17+1) * box,
+  y : Math.floor(Math.random()*15+3) * box
+}
+
+// create the score var
+let score = 0;
+
+//control the snake
+let d;
+
+document.addEventListener("keydown", direction);
+
+function direction(event){
+  let key = event.keyCode;
+  if( key == 37 && d != "RIGHT"){
+    d = "LEFT";
+  } else if(key == 38 && d != "DOWN"){
+    d = "UP";
+  } else if(key == 39 && d != "LEFT"){
+    d = "RIGHT";
+  } else if(key == 40 && d != "UP"){
+    d = "DOWN";
+  }
+}
+
+// cheack collision function
+function collision(head,array){
+  for(let i = 0; i < array.length; i++){
+    if(head.x == array[i].x && head.y == array[i].y){
+      return true;
+    }
+  }
+  return false;
+}
+
+// draw everything to the canvas
+function draw(){
+  
+  ctx.drawImage(ground,0,0);
+
+  for( let i = 0; i < snake.length ; i++){
+    ctx.fillStyle = ( i == 0 )? "green" : "white";
+    ctx.fillRect(snake[i].x,snake[i].y,box,box);
+
+    ctx.strokeStyle = "red";
+    ctx.strokeRect(snake[i].x,snake[i].y,box,box);
+  }
+  
+  ctx.drawImage(foodImg, food.x, food.y);
+  
+  // old head position
+  let snakeX = snake[0].x;
+  let snakeY = snake[0].y;
+  
+  // which direction to use:
+  if( d == "LEFT")  snakeX -= box;
+  if( d == "UP")    snakeY -= box;
+  if( d == "RIGHT") snakeX += box;
+  if( d == "DOWN")  snakeY += box;
+  
+  // if the snake eats the food
+  if(snakeX == food.x && snakeY == food.y){
+    score++;
+    food = {
+      x : Math.floor(Math.random()*17+1) * box,
+      y : Math.floor(Math.random()*15+3) * box
+    }
+    // we don't remove the tail
+  } else {
+    // remove the tail
+    snake.pop();
+  }
+  
+  // add new Head
+  let newHead = {
+    x : snakeX,
+    y : snakeY
+  }
+
+  // game over
+  if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){
+    clearInterval(game);
+  }
+
+  snake.unshift(newHead);
+
+  ctx.fillStyle = "white";
+  ctx.font = "45px Changa one";
+  ctx.fillText(score,2*box,1.6*box);
+}
+
+// call draw function every 100 ms