flickscript_play.html

<html>
<head>
<link rel="icon" 
      type="image/png" 
      href="favicon.png">
<title>flickgame.org</title>


<style>

#header h1 {
  padding:0;
  margin:0;
  line-height: 40px;
}
#header {
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  height:40px;
  background-color: black;
  color:white;
  text-align: center;
  padding: 0px;
  margin:0px;
  border:0px;
}

a {
  color:white;
}

#content {
  position: absolute;
  top:40px;
  bottom:30px;
  left:0px;
  right:0px;
  background-color: white;
  text-align: center;
  padding:0;
  margin:0;
}


#content canvas {
 top:0;
 bottom:0;
 left:0;
 right:0;
 padding: 0;
 margin:0; 
 image-rendering: optimizeSpeed;
 image-rendering: -moz-crisp-edges;
 image-rendering: -webkit-optimize-contrast;
 image-rendering: -o-crisp-edges;
 image-rendering: pixelated;
 -ms-interpolation-mode: nearest-neighbor;
}
#hackLink {
  position: absolute;
  right:10px;
  float: right;
}

#homelink {
  float: center;
}
#footer {
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  height:30px;
  margin:0;
  padding:0;
  background-color: black;
  color:white;
  text-align: center;
  padding: 0;
  line-height: 30px;
}
</style>
<script id="flickgame_base.js">
  // Flick Game JavaScript Library
// Extracted shared functions from HTML files

// Global variables
var gameState;

// Helper function to get URL parameters
function getParameterByName(name) {
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Helper function to strip http/https from URLs
function strip_http(url) {
   url = url.replace(/^https?:\/\//,'');
   return url;
}

// Helper function to qualify URLs
function qualifyURL(url) {
    var aurl = document.createElement('a');
    aurl.href = url;
    return aurl.href;
}

// RLE decode function
function RLE_decode(encoded) {
    var output = "";
    for (var i=0;i<encoded.length;i+=2) {
      var count = encoded[i];
      var ch = encoded[i+1];
      for (var j=0;j<count;j++){
        output+=ch;
      }
    }
    return output;
}


// Generic getData function that can be used by both player and editor
function getData(options) {
    options = options || {};
    var onSuccess = options.onSuccess || function(code) {};
    var onError = options.onError || console.log;
    var onEmbedded = options.onEmbedded || function(code) {};

    // Handle embedded data
    if (typeof embeddedDat !== 'undefined' && embeddedDat[0] !== '_') {
        embeddedDat = decodeURI(embeddedDat);
        onEmbedded(embeddedDat);
        return true;
    }

    // Get ID from URL parameter
    var id = getParameterByName("p").replace(/[\\\/]/, "");
    if (id === null || id.length === 0) {
        // onError("No ID specified in URL.");
        return false;
    }

    // Choose URL based on whether to use proxy
    var url = "https://ded.increpare.com/cgi-bin/gist_proxy.py?id=" + id;
    
    // this instead to use the GitHub API directly (which is broken because of https://github.com/increpare/flickgame/issues/77 )
    // url = 'https://api.github.com/gists/' + id;
    
    var httpClient = new XMLHttpRequest();
    httpClient.open('GET', url);
    httpClient.onreadystatechange = function() {
        if (httpClient.readyState != 4) {
            return;
        }

        var code;        
        
        // Handle proxy response
        if (httpClient.status === 200) {
            try {
                var response = JSON.parse(httpClient.responseText);
                if (response.error) {
                    onError("Proxy error: " + response.error);
                    return;
                } else if (response.content) {
                    code = response.content;
                } else {
                    onError("Invalid proxy response");
                    return;
                }
            } catch (e) {
                onError("Failed to parse proxy response");
                return;
            }
        } else {
            onError("Proxy request failed with status " + httpClient.status);
            return;
        }
    

        // Call success callback with the loaded code
        onSuccess(code);
    }
    
    httpClient.send();
    return true;
}

</script>
<script>

<!--__EmbedBegin__-->
var embeddedDat="__EMBED__";
<!--__EmbedEnd__-->


var pages = 50;
  var width=200;
  var height=100;
var curCanvasToDraw=null;

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
}

var urlVars = getUrlVars();

var zoom=1;
function redraw(){
  console.log("resized "+window.innerWidth +"x"+window.innerHeight);  
  mainCanvas.width=mainCanvasContainer.clientWidth;
  mainCanvas.height=mainCanvasContainer.clientHeight;
  mainCanvasCtx.width=mainCanvasContainer.clientWidth;
  mainCanvasCtx.height=mainCanvasContainer.clientHeight;

  if (images.length>0){

    mainCanvasCtx.imageSmoothingEnabled = false;
    mainCanvasCtx.mozImageSmoothingEnabled = false;
    mainCanvasCtx.oImageSmoothingEnabled = false;
    mainCanvasCtx.webkitImageSmoothingEnabled = false;
    mainCanvasCtx.msImageSmoothingEnabled = false;

    var w = mainCanvasCtx.width;
    var h = mainCanvasCtx.height;
    var wd = w/width;
    var hd = h/height;
    zoom=1;
    if (wd<hd){
      zoom=wd;//Math.floor(wd);
    } else {
      zoom=hd;//Math.floor(hd);
    }
    if(zoom<1){
      zoom=1;
    }
    var dx=(w-width*zoom)/2;
    var dy=(h-height*zoom)/2;
    mainCanvasCtx.fillStyle="#000000";
    mainCanvasCtx.fillRect(0,0,w,h);
    if (curCanvasToDraw===null){
      for (var i=0;i<pages;i++)
      {
        if (gameState.visibleCanvasses[i]===1)
        {
          mainCanvasCtx.drawImage(images[i],0,0,width,height,dx,dy,width*zoom,height*zoom);
        }
      }
    } else {
      mainCanvasCtx.drawImage(curCanvasToDraw,0,0,width,height,dx,dy,width*zoom,height*zoom);
    }
  } else {    
    mainCanvasCtx.fillStyle="#ff0000";
    mainCanvasCtx.fillRect(0,0,mainCanvas.width/2,mainCanvas.height/2);
    mainCanvasCtx.fillStyle="#00ff00";
    mainCanvasCtx.fillRect(mainCanvas.width/2,0,mainCanvas.width/2,mainCanvas.height/2);
    mainCanvasCtx.fillStyle="#ff00ff";
    mainCanvasCtx.fillRect(0,mainCanvas.height/2,mainCanvas.width/2,mainCanvas.height/2);
    mainCanvasCtx.fillStyle="#00ffff";
    mainCanvasCtx.fillRect(mainCanvas.width/2,mainCanvas.height/2,mainCanvas.width/2,mainCanvas.height/2);
  }
}


  function getCoords(e) {
    var x,y; 
    if(e.offsetX) {
        x = e.offsetX;
        y = e.offsetY;
    }
    else if(e.layerX) {
        x = e.layerX;
        y = e.layerY;
    }

    return [x,y];
  }

  var target=0;

  function printNonZeros(a,stack){
    var count=0;
    for (var i=0;i<width;i++){
      for (var j=0;j<height;j++){
        if (a[j][i]!==null)
          count++;
      }
    }
    window.console.log(count + " non-zero entries.");
    window.console.log("stack length " + stack.length+".");
  }


  function processClick(e){

    var coords = getCoords(e);

    var w = mainCanvasCtx.width;
    var h = mainCanvasCtx.height;
    var wd = w/width;
    var hd = h/height;
    zoom=1;
    if (wd<hd){
      zoom=wd;//Math.floor(wd);
    } else {
      zoom=hd;//Math.floor(hd);
    }
    if(zoom<1){
      zoom=1;
    }
    var dx=(w-width*zoom)/2;
    var dy=(h-height*zoom)/2;

    var x=Math.floor((coords[0]-dx)/zoom);
    var y=Math.floor((coords[1]-dy)/zoom);
    target=0;

    if(x<0||x>=width||y<0||y>=height) {
        return;
    }

    for (var i=pages-1;i>=0;i--){
      if (
        gameState.visibleCanvasses[i]===1 && 
        gameState.imageDats[i][x+width*y]!=="0"){
          if (gameState.scripts[i].trim()!=="" && gameState.enabled[i]===1){
            executeScript(i);
            redraw();        
            mouseMove(e);
            return;
          } else {
            return;
          }
        }
      }
  }

  function mouseDown(e){
    mouseMove(e);
    processClick(e);
  }
  function mouseMove(e){

    if (gameState==null){
      return;
    }
    var coords = getCoords(e);

    var w = mainCanvasCtx.width;
    var h = mainCanvasCtx.height;
    var wd = w/width;
    var hd = h/height;
    zoom=1;
    if (wd<hd){
      zoom=wd;//Math.floor(wd);
    } else {
      zoom=hd;//Math.floor(hd);
    }
    if(zoom<1){
      zoom=1;
    }
    var dx=(w-width*zoom)/2;
    var dy=(h-height*zoom)/2;

    var x=Math.floor((coords[0]-dx)/zoom);
    var y=Math.floor((coords[1]-dy)/zoom);
    target=0;
    if(x>=0&&x<width&&y>=0&&y<height) {
      
      loopblock: {
        for (var i=pages-1;i>=0;i--){
          if (
            gameState.visibleCanvasses[i]===1 && 
            gameState.imageDats[i][x+width*y]!=="0"){
              if (gameState.scripts[i].trim()!=="" && gameState.enabled[i]===1){
                mainCanvas.style.cursor="pointer";        
              } else {
                mainCanvas.style.cursor="default";                     
              }
              break loopblock;
            }
          }
        mainCanvas.style.cursor="default";              
      }      

    } else {
      mainCanvas.style.cursor="default";
    }
    
  }

var mainCanvas;
var mainCanvasCtx;
var mainCanvasContainer;

var trace = console.log

function logError(s,orig_line,orig_line_number){
        window.alert("ERROR"+"\n"+"Line " + orig_line_number +" : " + s+"\n"+orig_line);
}


function enable(l){
    console.log("enabling layer "+l);
    gameState.enabled[l]=true;
}

function disable(l){
    console.log("disabling layer "+l);
    gameState.enabled[l]=false;
}


function setLayerVisible(index){
    // for (var i=0;i<pages;i++){
    //     if (gameState.visibleCanvasses[i]===1 && gameState.colors[i]===gameState.colors[index]){
    //         gameState.visibleCanvasses[i]=0;
    //     }
    // }
    gameState.enabled[index]=1;
    gameState.visibleCanvasses[index]=1;
}


function setLayerInvisible(index){
    gameState.visibleCanvasses[index]=0;
}

function show(l){
    console.log("showing layer "+l);
    setLayerVisible(l)

}

function hide(l){
    console.log("hiding layer "+l);
    setLayerInvisible(l)
}

function reset(){
    loadState(gamecode);
}


tate=null;//just used for interpreter


/***************/
/* START SCRIPT*/
/***************/

var commands = ["enable","disable","show","hide"];

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function calculateFrameReference(t,frameNumber, orig_line,orig_line_number){
    if (t.match("this")){
        return frameNumber;
    } else if (t.match(/^[\+\-]?[\d]+$/)===null){
        logError("malformed thing given '"+t+"'.  Expected a reference to a frame, like '4' or '+2' or '-1' or 'this'" ,orig_line,orig_line_number)
        return frameNumber;
    }
    var target = frameNumber;
    if (!isNumeric(t)){
        logError(`${t} isn't a frame reference. I'm expecting a one here, something like '2' or '-3' or '+4' or 'this'.`, orig_line,orig_line_number);
    }

    if (t[0]==="+" || t[0]==="-"){
        target+=parseInt(t)
    } else {
        target=parseInt(t)-1;
    }

    if (target<0||target>=pages){
        logError("trying to access frame number "+(target+1)+", which is out of range", orig_line,orig_line_number);
    }
    return target;
}


//assumes line already nicely formatted
function runCommandLine(line,frameNumber,orig_line, orig_line_number){
    var tokens = line.split(/\s+/);
    var command = tokens[0];

    if (tokens.length<=1){
        logError(`command ${command} requires a parameter - like "${command} 3" or "${command} -1"`,orig_line,orig_line_number)
        return;
    }

    for (var i=1;i<tokens.length;i++){
        var t= tokens[i];
        var target = calculateFrameReference(t,frameNumber, orig_line, orig_line_number)

        switch(command){
            case "enable":
            {
                enable(target);
                break;
            }
            case "disable":
            {
                disable(target);
                break;
            }
            case "show":
            {
                show(target);
                break;
            }
            case "hide":
            {
                hide(target);
                break;
            }
        }
    }
}


function evaluateIf(line, frameNumber, orig_line,orig_line_number){

    //i know there's an if at the start and a then at the end
    var substr = line.substr(2,line.length-6).trim();
    var tokens = substr.split(",").map( t => t.trim() );
    if (tokens.length===0){
        logError("if statement must have arguments, e.g. 'IF 1, 3 THEN' ",orig_line,orig_line_number)        
        return true;
    }

    var truthfulness=true;
    trace("evaluatig truthfuless")
    for (var i=0;i<tokens.length;i++){
        var t = tokens[i];
        var s = t.split(/\s+/);
        var fr = s[s.length-1];
        var target = calculateFrameReference(fr,frameNumber,orig_line, orig_line_number);
        if (gameState!==null){
            if (s[0]==="not"){
                trace("\t"+t)
                truthfulness = truthfulness && gameState.visibleCanvasses[target]===0;
            } else {
                trace("\t"+t)
                truthfulness = truthfulness && gameState.visibleCanvasses[target]===1;            
            }
        }
    }
    trace("T = "+truthfulness);
    return truthfulness;
}

function runScript(s, frameNumber){
    trace("running script")
    var lines = s.split('\n');
    for (var i=0;i<lines.length;i++){
        var orig_line = lines[i];
        var line = orig_line.split(";",1)[0].trim().toLowerCase();
        if (line===""){
            continue;
        }
        var tokens = line.split(/\s+/);
        if (commands.indexOf(tokens[0])>=0){
            runCommandLine(line,frameNumber,orig_line, i)
        }
        else if (tokens[0]==="if"){
            if (tokens[tokens.length-1]!=="then"){
                logError("IF statement must have a THEN at the end - of the form like 'IF 3, 4, +2 THEN'"+orig_line,orig_line,i);
            } else if (evaluateIf(line,frameNumber,orig_line, i)){
                //keep going as usual
            }
            else {
                var targetdepth=depth-1;
                //skip ahead until "else" or "end"
                outloop:
                {
                    var depth=1;
                    for (var j=i+1;j<lines.length;j++){
                        var line2= lines[j]
                        var firsttokens = line2.trim().split(";",1)[0].split(/\s+/,1);
                        if (firsttokens.length>0){
                            var firsttoken = firsttokens[0];
                            if (firsttoken==="if"){
                              depth++;
                            }
                            else if ((depth==1&&firsttoken==="else") || firsttoken ==="end") {
                              depth--;
                              if (depth===0){                                
                                i=j;
                                break outloop;
                              }
                            }
                        }
                    }
                    i=lines.length;
                }
            }
            //no nested if statements allowed
        } else if (tokens[0]==="else"){
            var targetdepth=depth-1;
            //skip ahead to end
            outloop:
            {
                var depth=1;
                for (var j=i+1;j<lines.length;j++){
                    var line2= lines[j]
                    var firsttokens = line2.trim().split(";",1)[0].split(/\s+/,1);
                    if (firsttokens.length>0){
                        var firsttoken= firsttokens[0]
                        if (firsttoken==="if"){
                          depth++;
                        }
                        if (firsttoken==="end") {
                            depth--;
                            if (depth===0){
                              i=j;
                              break outloop;
                            }
                        }
                    }
                }   
                i=lines.length;
            }
        } else if (tokens[0]==="end"){
            //do nothing
        } else if (tokens[0]==="reset"){
            reset();
        } else {
            logError("ERROR here "+orig_line,orig_line,i);
        }
    }
}

/**************/
/* END SCRIPT */
/**************/


function init(){  
  window.addEventListener('resize', redraw, false);


  mainCanvas=document.getElementById("mainCanvas");
  mainCanvasCtx=mainCanvas.getContext("2d");
  mainCanvasContainer=document.getElementById("content");

  mainCanvas.addEventListener('mousemove', mouseMove,false);
  mainCanvas.addEventListener('mousedown', mouseDown,false);

  redraw();

  get_page_data();

}


var gameState;
var gamecode;

function executeScript(frameNumber){
    var s = gameState.scripts[frameNumber];
    runScript(s,frameNumber);
}

function loadState(code){
    gamecode=code;
    gameState=JSON.parse(code);
    gameState.enabled=[]

    gameState.visibleCanvasses[0]=1;
    for (var i=1;i<pages;i++){
      gameState.enabled[i]=1;
      gameState.visibleCanvasses[i]=0;
    }    

    executeScript(0);
    renderImages();
}


function get_page_data() {
    return getData({
        onSuccess: function(code) {
            loadState(code);
            
            var homepage = gameState.gameLink;
            var homepageLink = document.getElementById("homeLink");
            if (homepageLink) {
                homepageLink.innerHTML = strip_http(homepage);
                if (!homepage.match(/^https?:\/\//)) {
                    homepage = "http://" + homepage;
                }
                homepageLink.href = homepage;
            }
      
            var hacklink = document.getElementById("hackLink");
            if (hacklink) {
                var id = getParameterByName("p").replace(/[\\\/]/, "");
                var url = "flickscript.html?p=" + id;
                url = qualifyURL(url);
                hacklink.href = url;
                hacklink.innerHTML = "&sdotb; edit";
            }
            
            renderImages();
        },
        onEmbedded: function(code) {
            loadState(code);
            
            var homepage = gameState.gameLink;
            var homepageLink = document.getElementById("homeLink");
            if (homepageLink) {
                homepageLink.innerHTML = strip_http(homepage);
                if (!homepage.match(/^https?:\/\//)) {
                    homepage = "http://" + homepage;
                }
                homepageLink.href = homepage;
            }
            
            renderImages();
        }
    });
}


 var colorPalette = [
           "#000000",
            "#9D9D9D",
            "#FFFFFF",
            "#BE2633",
            "#E06F8B",
            "#493C2B",
            "#A46422",
            "#EB8931",
            "#F7E26B",
            "#2F484E",
            "#44891A",
            "#A3CE27",
            "#1B2632",
            "#005784",
            "#31A2F2",
            "#B2DCEF"
            ];

var images = new Array();
var imageCtxts = new Array();

function printCanvas(descriptionString){
    var canvas = document.createElement('canvas');
    canvas.width=width;
    canvas.height=height;
    var ctx=canvas.getContext("2d");
    for (var j=0;j<descriptionString.length;j++){
      var x = j%width;
      var y = Math.floor(j/width);
      var ch=descriptionString[j];
      var pint = parseInt(ch,17);

      if (pint>0)
      {
        ctx.fillStyle=colorPalette[pint-1];
        ctx.fillRect(x,y,1,1);
      }
    }
    return [canvas,ctx];
}

function renderImages(){
  gameState.imageDats = new Array();

  for (var i=0;i<pages;i++){
    var descriptionArray = gameState.canvasses[i];
    var descriptionString = RLE_decode(descriptionArray);

    var canvas_context=printCanvas(descriptionString);
    var canvas=canvas_context[0];
    var ctx=canvas_context[1];

    gameState.imageDats.push(descriptionString);
    images.push(canvas);
    imageCtxts.push(ctx);
  }
  redraw();
}

function goFullscreen(evt){    
  evt = evt || window.event;
 if (evt.keyCode===70) { //f
    var elem = document.getElementById("mainCanvas");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  }
}
document.addEventListener("keydown", goFullscreen);

</script>
</head>
<body onload="init()" onkeydown="goFullscreen(event);">
<div id="header">
</div>
<p>
<div id="content">
<canvas id="mainCanvas"></canvas>
</div>
<p>
<div id="footer">
 <a href="http://www.flickgame.org" id="hackLink"></a> <a  id="homeLink" href="http://www.flickgame.org"></a> 
</div>
</body>
</html>