RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/games/tetris/tetris.html ADDED Viewed

@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Tetris</title>
+<style>
+body     { font-family: Helvetica, sans-serif; }
+#tetris  { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
+#stats   { display: inline-block; vertical-align: top; }
+#canvas  {
+  display: inline-block;
+  vertical-align: top;
+  background: url(https://raw.githubusercontent.com/jakesgordon/javascript-tetris/master/texture.jpg);
+  box-shadow: 10px 10px 10px #999;
+  border: 2px solid #333;
+}
+#menu    { display: inline-block; vertical-align: top; position: relative; }
+#menu p  { margin: 0.5em 0; text-align: center; }
+#menu p a { text-decoration: none; color: black; }
+#upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
+#score  { color: red; font-weight: bold; vertical-align: middle; }
+#rows   { color: blue; font-weight: bold; vertical-align: middle; }
+#stats  { position: absolute; bottom: 0em; right: 1em; }
+@media screen and (min-width:  0px) and (min-height:  0px) { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width: 50px; height: 50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
+@media screen and (min-width: 400px) and (min-height: 400px) { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width: 75px; height: 75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
+@media screen and (min-width: 500px) and (min-height: 500px) { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
+@media screen and (min-width: 600px) and (min-height: 600px) { #tetris { font-size: 1.50em; width: 550px; } #menu { width: 250px; height: 500px; } #upcoming { width: 125px; height: 125px; } #canvas { width: 250px; height: 500px; } } /* 25px chunks */
+@media screen and (min-width: 700px) and (min-height: 700px) { #tetris { font-size: 1.75em; width: 650px; } #menu { width: 300px; height: 600px; } #upcoming { width: 150px; height: 150px; } #canvas { width: 300px; height: 600px; } } /* 30px chunks */
+@media screen and (min-width: 800px) and (min-height: 800px) { #tetris { font-size: 2.00em; width: 750px; } #menu { width: 350px; height: 700px; } #upcoming { width: 175px; height: 175px; } #canvas { width: 350px; height: 700px; } } /* 35px chunks */
+@media screen and (min-width: 900px) and (min-height: 900px) { #tetris { font-size: 2.25em; width: 850px; } #menu { width: 400px; height: 800px; } #upcoming { width: 200px; height: 200px; } #canvas { width: 400px; height: 800px; } } /* 40px chunks */
+</style>
+</head>
+<body>
+<div id="tetris">
+<div id="menu">
+ <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
+ <p><canvas id="upcoming"></canvas></p>
+ <p>score <span id="score">00000</span></p>
+ <p>rows <span id="rows">0</span></p>
+</div>
+<canvas id="canvas">
+Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
+</canvas>
+</div>
+<script>
+// stats.js r6 - https://github.com/mrdoob/stats.js
+var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c<g?(a[e]=b[d].bg.r,a[e+1]=b[d].bg.g,a[e+2]=b[d].bg.b):(a[e]=b[d].fg.r,a[e+1]=b[d].fg.g,a[e+2]=b[d].fg.b)}var r=0,t=2,g,u=0,j=(new Date).getTime(),F=j,v=j,l=0,w=1E3,x=0,k,d,a,m,y,n=0,z=1E3,A=0,f,c,o,B,p=0,C=1E3,D=0,h,i,q,E,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mb:{bg:{r:48,g:16,
+b:26},fg:{r:255,g:0,b:128}}};g=document.createElement("div");g.style.cursor="pointer";g.style.width="80px";g.style.opacity="0.9";g.style.zIndex="10001";g.addEventListener("click",function(){r++;r==t&&(r=0);k.style.display="none";f.style.display="none";h.style.display="none";switch(r){case 0:k.style.display="block";break;case 1:f.style.display="block";break;case 2:h.style.display="block"}},!1);k=document.createElement("div");k.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
+2)+","+Math.floor(b.fps.bg.b/2)+")";k.style.padding="2px 0px 3px 0px";g.appendChild(k);d=document.createElement("div");d.style.fontFamily="Helvetica, Arial, sans-serif";d.style.textAlign="left";d.style.fontSize="9px";d.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";d.style.margin="0px 0px 1px 3px";d.innerHTML='<span style="font-weight:bold">FPS</span>';k.appendChild(d);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";k.appendChild(a);
+m=a.getContext("2d");m.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";m.fillRect(0,0,a.width,a.height);y=m.getImageData(0,0,a.width,a.height);f=document.createElement("div");f.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";f.style.padding="2px 0px 3px 0px";f.style.display="none";g.appendChild(f);c=document.createElement("div");c.style.fontFamily="Helvetica, Arial, sans-serif";c.style.textAlign="left";c.style.fontSize=
+"9px";c.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";c.style.margin="0px 0px 1px 3px";c.innerHTML='<span style="font-weight:bold">MS</span>';f.appendChild(c);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";f.appendChild(a);o=a.getContext("2d");o.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";o.fillRect(0,0,a.width,a.height);B=o.getImageData(0,0,a.width,a.height);try{performance&&performance.memory&&performance.memory.totalJSHeapSize&&
+(t=3)}catch(G){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.mb.bg.r/2)+","+Math.floor(b.mb.bg.g/2)+","+Math.floor(b.mb.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";g.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize="9px";i.style.color="rgb("+b.mb.fg.r+","+b.mb.fg.g+","+b.mb.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MB</span>';
+h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);q=a.getContext("2d");q.fillStyle="#301010";q.fillRect(0,0,a.width,a.height);E=q.getImageData(0,0,a.width,a.height);return{domElement:g,update:function(){u++;j=(new Date).getTime();n=j-F;z=Math.min(z,n);A=Math.max(A,n);s(B.data,Math.min(30,30-n/200*30),"ms");c.innerHTML='<span style="font-weight:bold">'+n+" MS</span> ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
+v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML='<span style="font-weight:bold">'+l+" FPS</span> ("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML='<span style="font-weight:bold">'+Math.round(p)+" MB</span> ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};
+// ----------------------------------------------------------------------------
+// base helper methods
+// ----------------------------------------------------------------------------
+function get(id)     { return document.getElementById(id); }
+function hide(id)    { get(id).style.visibility = 'hidden'; }
+function show(id)    { get(id).style.visibility = null;   }
+function html(id, html) { get(id).innerHTML = html;      }
+function timestamp()      { return new Date().getTime();               }
+function random(min, max)   { return (min + (Math.random() * (max - min)));      }
+function randomChoice(choices) { return choices[Math.round(random(0, choices.length-1))]; }
+if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
+                 window.mozRequestAnimationFrame  ||
+                 window.oRequestAnimationFrame   ||
+                 window.msRequestAnimationFrame   ||
+                 function(callback, element) {
+                  window.setTimeout(callback, 1000 / 60);
+                 }
+}
+// ----------------------------------------------------------------------------
+// game constants
+// ----------------------------------------------------------------------------
+var KEY     = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
+    DIR     = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 },
+    stats   = new Stats(),
+    canvas  = get('canvas'),
+    ctx     = canvas.getContext('2d'),
+    ucanvas = get('upcoming'),
+    uctx    = ucanvas.getContext('2d'),
+    speed   = { start: 0.6, decrement: 0.005, min: 0.1 }, // how long before piece drops by 1 row (seconds)
+    nx      = 10, // width of tetris court (in blocks)
+    ny      = 20, // height of tetris court (in blocks)
+    nu      = 5; // width/height of upcoming preview (in blocks)
+ // ----------------------------------------------------------------------------
+ // game variables (initialized during reset)
+ // ----------------------------------------------------------------------------
+var dx, dy,   // pixel size of a single tetris block
+    blocks,   // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
+    actions,  // queue of user actions (inputs)
+    playing,  // true|false - game is in progress
+    dt,       // time since starting this game
+    current,  // the current piece
+    next,     // the next piece
+    score,    // the current score
+    vscore,   // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
+    rows,     // number of completed rows in the current game
+    step;     // how long before current piece drops by 1 row
+  // ----------------------------------------------------------------------------
+  // tetris pieces
+  //
+  // blocks: each element represents a rotation of the piece (0, 90, 180, 270)
+  //         each element is a 16 bit integer where the 16 bits represent
+  //         a 4x4 set of blocks, e.g. j.blocks[0] = 0x44C0
+  //
+  //       0100 = 0x4 << 3 = 0x4000
+  //       0100 = 0x4 << 2 = 0x0400
+  //       1100 = 0xC << 1 = 0x00C0
+  //       0000 = 0x0 << 0 = 0x0000
+  //                ------
+  //                0x44C0
+  //
+  // ----------------------------------------------------------------------------
+var i = { size: 4, blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan'  };
+var j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue'  };
+var l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'orange' };
+var o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'yellow' };
+var s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'green' };
+var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };
+var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red'  };
+  //------------------------------------------------
+  // do the bit manipulation and iterate through each
+  // occupied block (x,y) for a given piece
+  //------------------------------------------------
+function eachblock(type, x, y, dir, fn) {
+  var bit, result, row = 0, col = 0, blocks = type.blocks[dir];
+  for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {
+    if (blocks & bit) {
+      fn(x + col, y + row);
+    }
+    if (++col === 4) {
+     col = 0;
+     ++row;
+    }
+  }
+}
+//-----------------------------------------------------
+// check if a piece can fit into a position in the grid
+//-----------------------------------------------------
+function occupied(type, x, y, dir) {
+  var result = false
+  eachblock(type, x, y, dir, function(x, y) {
+    if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x,y))
+      result = true;
+  });
+  return result;
+}
+function unoccupied(type, x, y, dir) {
+  return !occupied(type, x, y, dir);
+}
+//-----------------------------------------
+// start with 4 instances of each piece and
+// pick randomly until the 'bag is empty'
+//-----------------------------------------
+var pieces = [];
+function randomPiece() {
+  if (pieces.length == 0)
+    pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];
+  var type = pieces.splice(random(0, pieces.length-1), 1)[0];
+  return { type: type, dir: DIR.UP, x: Math.round(random(0, nx - type.size)), y: 0 };
+}
+// ----------------------------------------------------------------------------
+// GAME LOOP
+// ----------------------------------------------------------------------------
+function run() {
+  showStats(); // initialize FPS counter
+  addEvents(); // attach keydown and resize events
+  var last = now = timestamp();
+  function frame() {
+    now = timestamp();
+    update(Math.min(1, (now - last) / 1000.0)); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
+    draw();
+    stats.update();
+    last = now;
+    requestAnimationFrame(frame, canvas);
+   }
+  resize(); // setup all our sizing information
+  reset(); // reset the per-game variables
+  frame(); // start the first frame
+}
+function showStats() {
+  stats.domElement.id = 'stats';
+  get('menu').appendChild(stats.domElement);
+}
+function addEvents() {
+  document.addEventListener('keydown', keydown, false);
+  window.addEventListener('resize', resize, false);
+}
+function resize(event) {
+  canvas.width  = canvas.clientWidth; // set canvas logical size equal to its physical size
+  canvas.height = canvas.clientHeight; // (ditto)
+  ucanvas.width = ucanvas.clientWidth;
+  ucanvas.height = ucanvas.clientHeight;
+  dx = canvas.width / nx; // pixel size of a single tetris block
+  dy = canvas.height / ny; // (ditto)
+  invalidate();
+  invalidateNext();
+}
+function keydown(ev) {
+  var handled = false;
+  if (playing) {
+   switch(ev.keyCode) {
+    case KEY.LEFT:  actions.push(DIR.LEFT); handled = true; break;
+    case KEY.RIGHT: actions.push(DIR.RIGHT); handled = true; break;
+    case KEY.UP:   actions.push(DIR.UP);  handled = true; break;
+    case KEY.DOWN:  actions.push(DIR.DOWN); handled = true; break;
+    case KEY.ESC:  lose();         handled = true; break;
+  }
+}
+else if (ev.keyCode == KEY.SPACE) {
+  play();
+  handled = true;
+}
+if (handled)
+  ev.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers)
+}
+// ----------------------------------------------------------------------------
+// GAME LOGIC
+// ----------------------------------------------------------------------------
+function play() { hide('start'); reset();     playing = true; }
+function lose() { show('start'); setVisualScore(); playing = false; }
+function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
+function setScore(n)            { score = n; setVisualScore(n); }
+function addScore(n)            { score = score + n;  }
+function clearScore()           { setScore(0); }
+function clearRows()            { setRows(0); }
+function setRows(n)             { rows = n; step = Math.max(speed.min, speed.start - (speed.decrement*rows)); invalidateRows(); }
+function addRows(n)             { setRows(rows + n); }
+function getBlock(x,y)          { return (blocks && blocks[x] ? blocks[x][y] : null); }
+function setBlock(x,y,type)     { blocks[x] = blocks[x] || []; blocks[x][y] = type; invalidate(); }
+function clearBlocks()          { blocks = []; invalidate(); }
+function clearActions()         { actions = []; }
+function setCurrentPiece(piece) { current = piece || randomPiece(); invalidate();   }
+function setNextPiece(piece)    { next  = piece || randomPiece(); invalidateNext(); }
+function reset() {
+  dt = 0;
+  clearActions();
+  clearBlocks();
+  clearRows();
+  clearScore();
+  setCurrentPiece(next);
+  setNextPiece();
+}
+function update(idt) {
+  if (playing) {
+    if (vscore < score)
+      setVisualScore(vscore + 1);
+    handle(actions.shift());
+    dt = dt + idt;
+    if (dt > step) {
+      dt = dt - step;
+      drop();
+    }
+  }
+}
+function handle(action) {
+  switch(action) {
+    case DIR.LEFT: move(DIR.LEFT); break;
+    case DIR.RIGHT: move(DIR.RIGHT); break;
+    case DIR.UP:  rotate();    break;
+    case DIR.DOWN: drop();     break;
+  }
+}
+function move(dir) {
+  var x = current.x, y = current.y;
+  switch(dir) {
+    case DIR.RIGHT: x = x + 1; break;
+    case DIR.LEFT: x = x - 1; break;
+    case DIR.DOWN: y = y + 1; break;
+  }
+  if (unoccupied(current.type, x, y, current.dir)) {
+    current.x = x;
+    current.y = y;
+    invalidate();
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+function rotate() {
+  var newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
+  if (unoccupied(current.type, current.x, current.y, newdir)) {
+    current.dir = newdir;
+    invalidate();
+  }
+}
+function drop() {
+  if (!move(DIR.DOWN)) {
+    addScore(10);
+    dropPiece();
+    removeLines();
+    setCurrentPiece(next);
+    setNextPiece(randomPiece());
+    clearActions();
+    if (occupied(current.type, current.x, current.y, current.dir)) {
+      lose();
+    }
+  }
+}
+function dropPiece() {
+  eachblock(current.type, current.x, current.y, current.dir, function(x, y) {
+    setBlock(x, y, current.type);
+  });
+}
+function removeLines() {
+  var x, y, complete, n = 0;
+  for(y = ny ; y > 0 ; --y) {
+    complete = true;
+    for(x = 0 ; x < nx ; ++x) {
+     if (!getBlock(x, y))
+      complete = false;
+    }
+   if (complete) {
+    removeLine(y);
+    y = y + 1; // recheck same line
+    n++;
+   }
+  }
+  if (n > 0) {
+    addRows(n);
+    addScore(100*Math.pow(2,n-1)); // 1: 100, 2: 200, 3: 400, 4: 800
+  }
+}
+function removeLine(n) {
+  var x, y;
+  for(y = n; y >= 0; --y) {
+    for(x = 0; x < nx; ++x)
+      setBlock(x, y, (y == 0) ? null : getBlock(x, y-1));
+  }
+}
+// ----------------------------------------------------------------------------
+// RENDERING
+// ----------------------------------------------------------------------------
+var invalid = {};
+function invalidate()       { invalid.court = true; }
+function invalidateNext()   { invalid.next  = true; }
+function invalidateScore()  { invalid.score = true; }
+function invalidateRows()   { invalid.rows  = true; }
+function draw() {
+  ctx.save();
+  ctx.lineWidth = 1;
+  ctx.translate(0.5, 0.5); // for crisp 1px black lines
+  drawCourt();
+  drawNext();
+  drawScore();
+  drawRows();
+  ctx.restore();
+}
+function drawCourt() {
+  if (invalid.court) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (playing)
+      drawPiece(ctx, current.type, current.x, current.y, current.dir);
+    var x,
+        y,
+        block;
+    for (y = 0; y < ny; y++) {
+      for (x = 0; x < nx; x++) {
+        if (block = getBlock(x,y))
+          drawBlock(ctx, x, y, block.color);
+      }
+    }
+    ctx.strokeRect(0, 0, nx*dx - 1, ny*dy - 1); // court boundary
+    invalid.court = false;
+  }
+}
+function drawNext() {
+  if (invalid.next) {
+    var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
+    uctx.save();
+    uctx.translate(0.5, 0.5);
+    uctx.clearRect(0, 0, nu*dx, nu*dy);
+    drawPiece(uctx, next.type, padding, padding, next.dir);
+    uctx.strokeStyle = 'black';
+    uctx.strokeRect(0, 0, nu*dx - 1, nu*dy - 1);
+    uctx.restore();
+    invalid.next = false;
+  }
+}
+function drawScore() {
+  if (invalid.score) {
+    html('score', ("00000" + Math.floor(vscore)).slice(-5));
+    invalid.score = false;
+  }
+}
+function drawRows() {
+  if (invalid.rows) {
+    html('rows', rows);
+    invalid.rows = false;
+  }
+}
+function drawPiece(ctx, type, x, y, dir) {
+  eachblock(type, x, y, dir, function(x, y) {
+    drawBlock(ctx, x, y, type.color);
+  });
+}
+function drawBlock(ctx, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x*dx, y*dy, dx, dy);
+  ctx.strokeRect(x*dx, y*dy, dx, dy)
+}
+// ----------------------------------------------------------------------------
+// FINALLY, lets run the game
+// ----------------------------------------------------------------------------
+run();
+</script>
+</body>
+</html>

data/examples/games/tic-tac-toe/index.js ADDED Viewed

@@ -0,0 +1,125 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const tiles = Array.from(document.querySelectorAll('.tile'));
+  const playerDisplay = document.querySelector('.display-player');
+  const resetButton = document.querySelector('#reset');
+  const announcer = document.querySelector('.announcer');
+  let board = ['', '', '', '', '', '', '', '', ''];
+  let currentPlayer = 'X';
+  let isGameActive = true;
+  const PLAYERX_WON = 'PLAYERX_WON';
+  const PLAYERO_WON = 'PLAYERO_WON';
+  const TIE = 'TIE';
+  /*
+    Indexes within the board
+    [0] [1] [2]
+    [3] [4] [5]
+    [6] [7] [8]
+  */
+  const winningConditions = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+  ];
+  function handleResultValidation() {
+    let roundWon = false;
+    for (let i = 0; i <= 7; i++) {
+      const winCondition = winningConditions[i];
+      const a = board[winCondition[0]];
+      const b = board[winCondition[1]];
+      const c = board[winCondition[2]];
+      if (a === '' || b === '' || c === '') {
+        continue;
+      }
+      if (a === b && b === c) {
+        roundWon = true;
+        break;
+      }
+    }
+  if (roundWon) {
+     announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
+     isGameActive = false;
+     return;
+  }
+  if (!board.includes(''))
+    announce(TIE);
+  }
+  const announce = (type) => {
+    switch(type){
+      case PLAYERO_WON:
+        announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
+        break;
+      case PLAYERX_WON:
+        announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
+        break;
+      case TIE:
+        announcer.innerText = 'Tie';
+    }
+    announcer.classList.remove('hide_tic_tac_toe');
+  };
+  const isValidAction = (tile) => {
+    if (tile.innerText === 'X' || tile.innerText === 'O'){
+      return false;
+    }
+    return true;
+  };
+  const updateBoard =  (index) => {
+    board[index] = currentPlayer;
+  }
+  const changePlayer = () => {
+    playerDisplay.classList.remove(`player${currentPlayer}`);
+    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+    playerDisplay.innerText = currentPlayer;
+    playerDisplay.classList.add(`player${currentPlayer}`);
+  }
+  const userAction = (tile, index) => {
+    if(isValidAction(tile) && isGameActive) {
+      tile.innerText = currentPlayer;
+      tile.classList.add(`player${currentPlayer}`);
+      updateBoard(index);
+      handleResultValidation();
+      changePlayer();
+    }
+  }
+  /*
+   * reset the game-board here
+   */
+  const resetBoard = () => {
+    board = ['', '', '', '', '', '', '', '', ''];
+    isGameActive = true;
+    announcer.classList.add('hide_tic_tac_toe');
+    if (currentPlayer === 'O') {
+      changePlayer();
+    }
+    tiles.forEach(tile => {
+      tile.innerText = '';
+      tile.classList.remove('playerX');
+      tile.classList.remove('playerO');
+    });
+  }
+  tiles.forEach( (tile, index) => {
+    tile.addEventListener('click', () => userAction(tile, index));
+  });
+  resetButton.addEventListener('click', resetBoard);
+});

data/examples/games/tic-tac-toe/style.css ADDED Viewed

@@ -0,0 +1,79 @@
+* {
+  padding: 0;
+  margin: 0;
+  font-family: 'Itim', cursive;
+}
+.background {
+  background-color: #12181B;
+  height: 100vh;
+  padding-top: 1px;
+}
+.title {
+  color: white;
+  text-align: center;
+  font-size: 40px;
+  margin-top: 10%;
+}
+.display_for_tic_tac_toe {
+  color: white;
+  font-size: 25px;
+  text-align: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.hide_tic_tac_toe {
+  display: none;
+}
+.container_for_tic_tac_toe {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 33% 33% 33%;
+  max-width: 300px;
+}
+.tile {
+  border: 1px solid white;
+  min-width: 100px;
+  min-height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 50px;
+  cursor: pointer;
+}
+.playerX {
+  color: #09C372;
+}
+.playerO {
+  color: #498AFB;
+}
+.controls_for_tic_tac_toe {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1em;
+}
+.controls_for_tic_tac_toe button {
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  border: none;
+  font-size: 20px;
+  margin-left: 1em;
+  cursor: pointer;
+}
+#reset_for_tic_tac_toe {
+  background-color: #FF3860;
+}