In my research, I need to generate Fricke Polynomials. Luckily the job has been done for me on a website. However, it is in javascript+html+css so I am not sure how it works as I only use Mathematica. I was wondering if anyone could explain how I could make all of this work on a single javascript code with a single input (and where to put the input). My plan is then to just take the code and embed it in Mathematica as I have seen this is possible. The input is a word say made up of a's and b's say aabbbaa and an output is a polynomial. I do not need to understand the code really.
Thank you
function Polynomial(){
this.data = "";
this.setData = function(str){
this.data = str;
}
this.toString = function(){
var s = this.data;
if (this.data.startsWith("x0y0z0"))
s = s.replace("x0y0z0", "1");
s = s.replace(/x0y0z0/g, "")
.replace(/\s\+\s-/g, "</sup> - ").replace(/\s\+/g, "</sup> +")
.replace(/x/g, "x<sup>").replace(/y/g, "</sup>y<sup>")
.replace(/z/g, "</sup>z<sup>")
.replace(/\s1x/g, " x").replace(/\s1y/g, " y").replace(/\s1z/g, " z");
s += "</sup>";
s = s.replace(/x<sup>0<\/sup>/g, "").replace(/y<sup>0<\/sup>/g, "")
.replace(/z<sup>0<\/sup>/g, "")
.replace(/x<sup>1<\/sup>/g, "x").replace(/y<sup>1<\/sup>/g, "y")
.replace(/z<sup>1<\/sup>/g, "z");
if (s.startsWith("1x"))
s = s.replace("1x", "x");
if (s.startsWith("1y"))
s = s.replace("1y", "y");
if (s.startsWith("1z"))
s = s.replace("1z", "z");
return s;
}
}
function compareMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
if (m1s[3]< m2s[3]) return -1;
else if (m1s[3] > m2s[3]) return 1;
else if (m1s[2]< m2s[2]) return -1;
else if (m1s[2] > m2s[2]) return 1;
else if (m1s[1]< m2s[1]) return -1;
else if (m1s[1] > m2s[1]) return 1;
else return 0;
}
function addMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) + parseInt(m2s[0]);
if (coef == 0)
return "ZERO"
else
return coef + "x" + m1s[1] + "y" + m1s[2] + "z" + m1s[3];
}
function subMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) - parseInt(m2s[0]);
if (coef == 0)
return "ZERO";
else
return coef + "x" + m1s[1] + "y" + m1s[2] + "z" + m1s[3];
}
function mulMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) * parseInt(m2s[0]);
coefx = parseInt(m1s[1]) + parseInt(m2s[1]);
coefy = parseInt(m1s[2]) + parseInt(m2s[2]);
coefz = parseInt(m1s[3]) + parseInt(m2s[3]);
if (coef == 0)
return "ZERO";
else
return coef + "x" + coefx + "y" + coefy + "z" + coefz;
}
function add(p1, p2){
if (p1.data == "")
return p2;
if (p2.data == "")
return p1;
var r = new Polynomial();
p1Mos = p1.data.split(" + ");
p2Mos = p2.data.split(" + ");
var data = "";
var k = 0; var current = p1Mos[0];
for (var i = 0; i < p2Mos.length; i++){
if (k >= p1Mos.length)
data += " + " + p2Mos[i];
else {
while (k < p1Mos.length && compareMonomial(current, p2Mos[i]) < 0){
data += " + " + p1Mos[k]; k++; current = p1Mos[k];
}
if (current == undefined)
data += " + " + p2Mos[i];
else if (compareMonomial(current, p2Mos[i]) == 0){
if (addMonomial(current, p2Mos[i]) != "ZERO")
data += " + " + addMonomial(current, p2Mos[i]);
k++; current = p1Mos[k];
}
else{
data += " + " + p2Mos[i];
}
}
}
while (k < p1Mos.length){
data += " + " + p1Mos[k]; k++
}
r.setData(data.substring(3));
return r;
}
function sub(p1, p2){
if (p2.data == "")
return p1;
if (p1.data == ""){
//need to update here
return p2;
}
var r = new Polynomial();
p1Mos = p1.data.split(" + ");
p2Mos = p2.data.split(" + ");
var data = "";
var k = 0; var current = p1Mos[0];
for (var i = 0; i < p2Mos.length; i++){
p2coef = p2Mos[i].split(/[x|y|z]g/)[0];
if (parseInt(p2coef) < 0)
p2MoNeg = p2Mos[i].substring(1);
else
p2MoNeg = "-" + p2Mos[i];
if (k >= p1Mos.length)
data += " + " + p2MoNeg;
else {
while (k < p1Mos.length && compareMonomial(current, p2Mos[i])< 0){
data += " + " + p1Mos[k]; k++; current = p1Mos[k];
}
if (current == undefined)
data += " + " + p2MoNeg;
else if (compareMonomial(current, p2Mos[i]) == 0){
if (subMonomial(current, p2Mos[i]) != "ZERO")
data += " + " + subMonomial(current, p2Mos[i]);
k++; current = p1Mos[k];
}
else{
data += " + " + p2MoNeg;
}
}
}
while (k < p1Mos.length){
data += " + " + p1Mos[k]; k++
}
r.setData(data.substring(3));
return r;
}
// multiply polynomial p1 (with array of monomials p1Mos) with a monomial m2
function mulPM(p1Mos, m2){
r = new Polynomial();
var data = "";
for (var i = 0; i < p1Mos.length; i++){
if (mulMonomial(p1Mos[i], m2) != "ZERO")
data += " + " + mulMonomial(p1Mos[i], m2);
}
r.setData(data.substring(3)); return r;
}
// multiply polynomial p1 with polynomial p2
function mul(p1, p2){
p1s = p1.data.split(" + ");
p2s = p2.data.split(" + ");
r = new Polynomial();
for (var i = 0; i < p2s.length; i++){
r = add(r, mulPM(p1s, p2s[i]));
}
return r;
}
function Fricke(s){
var w = new Word();
w.setWordString(s);
w.reduce(); s = w.toString();
var r = new Polynomial();
var l = s.length;
// Trivial case or case where 2 consecutive letters among last 4 letter
// are the same
if (l == 0){
r.setData("2x0y0z0");
return r;
}
if (l == 1){
if (s == "a" || s == "A")
r.setData("1x1y0z0");
else
r.setData("1x0y1z0");
return r;
}
if (s.charAt(l-1) == s.charAt(l-2)){
var c = s.charAt(l-1);
var s1 = s.substring(0, l-2);
r = sub(mul(Fricke(s1 + c), Fricke(c + "")), Fricke(s1));
return r;
}
if (l == 2){
if (s == "ab" || s == "ba" || s == "AB" || s == "BA"){
r.setData("1x0y0z1");
return r;
}
else if (s == "aB" || s == "Ba" || s == "Ab" || s == "bA"){
r.setData("1x1y1z0 + -1x0y0z1");
return r;
}
}
if (s.charAt(l-2) == s.charAt(l-3)){
s = s.charAt(l-1) + s.substring(0, l-1);
r = Fricke(s);
return r;
}
if (l == 3){
s = s.charAt(l-1) + s.substring(0, l-1);
r = Fricke(s);
return r;
}
if (s.charAt(l-3) == s.charAt(l-4)){
s = s.substring(l-2, l) + s.substring(0, l-2);
r = Fricke(s);
return r;
}
// Case 2: w = x1Yx2y
var t = s.charCodeAt(l-1) - s.charCodeAt(l-3);
if ( t == 32 || t == -32){
var w1 = new Word();
w1.setWordString(s.substring(l-2, l));
var s2 = s.substring(0, l-2) + w1.bar().toString();
r = sub(mul(Fricke(s.substring(0, l-2)), Fricke(s.substring(l-2, l))),
Fricke(s2));
return r;
}
// Case 3: w = ...Xyxy
t = s.charCodeAt(l-2) - s.charCodeAt(l-4);
if ( t == 32 || t == -32){
r = Fricke(s.charAt(l-1) + s.substring(0, l-1));
return r;
}
// Last case 4: w = ...xyxy
r = sub(mul(Fricke(s.substring(0, l-2)), Fricke(s.substring(l-4, l-2))),
Fricke(s.substring(0, l-4)));
return r;
}
// Helper methods:
function cancel2Char(src, i){
dest = [];
for (var j = 0; j < i; j++)
dest[j] = src[j];
for (var j = i; j < src.length - 2; j++)
dest[j] = src[j+2];
return dest;
}
function trim2Ends(src){
dest = [];
for (var j = 1; j < src.length - 1; j++)
dest[j - 1] = src[j];
return dest;
}
// Function to find the minimum equivalent class of a reduced cyclic word rc.
function minReduceCyclic(rc){
var min = rc.clone();
var W = new Word();
for (var i = 0; i < rc.word.length; i++){
W = rc.permute(i);
if (min.compareTo(W) > 0)
min = W;
}
return min;
}
function canonical(W){
W.reduce();
W.toReduceCyclic();
W = minReduceCyclic(W);
return W;
}
// CLASS Word
function Word(){
this.word = [];
this.setWord = function(w){
this.word = w;
}
this.setWordString = function(s){
// a-z = 1-26 && A-Z = -1 - -26;
for (var i = 0; i < s.length; i++){
var c = s.charCodeAt(i);
if (c >= 65 && c <= 90 )
this.word[i] = -(c - 64);
else if (c >= 97 && c < 122)
this.word[i] = c - 96;
else {
this.word = []; return;
}
}
}
this.length = function(){ return this.word.length; }
}
Word.prototype.isReduce = function(){
for(var i = 0; i < this.word.length - 1; i++)
if (this.word[i] == -this.word[i+1])
return false;
return true;
}
Word.prototype.reduce = function(){
var i = -2;
while(i != this.word.length - 1){
if (this.word.length == 0)
return;
for(i = 0; i < this.word.length - 1; i++)
if (this.word[i] == -this.word[i+1]){
this.word = cancel2Char(this.word, i);
break;
}
}
return;
}
Word.prototype.toReduceCyclic = function(){
this.reduce();
while(this.word[0] == -this.word[this.word.length - 1])
this.word = trim2Ends(this.word);
return;
}
Word.prototype.toString = function(){
var s = "";
for (var i = 0; i < this.word.length; i++){
if (this.word[i] < 0)
s = s + String.fromCharCode(-this.word[i] + 64);
else
s = s + String.fromCharCode(this.word[i] + 96);
}
return s;
}
Word.prototype.bar = function(){
var r = new Word();
var w = r.word;
for (var j = 0; j < this.word.length; j++)
w[j] = - this.word[this.word.length - 1 - j];
return r;
}
Word.prototype.permute = function(i){
var r = new Word();
var w = r.word;
for (var j = 0; j < this.word.length; j++)
w[j] = this.word[(j + i) % this.word.length];
return r;
}
Word.prototype.isEqual = function(W2){
var w1 = this.word;
var w2 = W2.word;
if (w1.length != w2.length)
return false;
for (var i = 0; i < w1.length; i++)
if (w1[i] != w2[i])
return false;
return true;
}
Word.prototype.compareTo = function(W2){
var w1 = this.word;
var w2 = W2.word;
var l = Math.min(w1.length, w2.length);
for (var i = 0; i < l; i++){
if (w1[i] < w2[i])
return -1;
if (w1[i] > w2[i])
return 1;
}
if (w1.length > w2.length)
return 1;
if (w1.length < w2.length)
return -1;
return 0;
}
Word.prototype.clone = function(){
var r = new Word();
w = r.word;
for (var i = 0; i < this.word.length; i++)
w[i] = this.word[i];
return r;
}
Word.prototype.primitiveExp = function(){
w = this.word; l = w.length;
for(var i = 1; i <= l/2; i++){
if (l % i == 0){
found = true;
test:
for (var j = 0; j < l/i; j++)
for (var t = 0; t < i; t++)
if (w[t] != w[t + j * i]){
found = false;
break test;
}
}
if (found)
return l/i;
}
return 1;
}
// Need to debug
function concat(W1, W2){
r = new Word();
var w1 = W1.word;
var w2 = W2.word;
var w = []
for (var i = 0; i < w1.length; i++)
w[i] = w1[i];
for (var i = 0; i < w2.length; i++)
w[i + w1.length] = w2[i];
r.setWord(w);
return r;
}
// These are supposed to be surface word methods
// sw is a word and the order is a map, which
// maps characters in a word (1-k or (-1)-(-k)) to its order in the alphabet
function order(sw){
var w = sw.word;
var o = new Map();
for (var i = 0; i < w.length; i++)
o.set(w[i], i);
return o;
}
function findCharPos(sw, c){
for (var i = 0; i < sw.word.length; i++)
if (sw.word[i] == c)
return i;
}
var time;
$(document).ready(function(){
$("#compute").click(function(){
$("#note").text("Note: Computing.....");
time = new Date().getTime();
setTimeout(function(){
new Promise(compute).then(doneCompute("Note: Done! The computation time is about "));
}, 50);
});
$("#reset").click(function(){
$("#note").text("Note:");
$("#word").val("");
$("#fpOutput").text("");
});
});
function compute(value){
$("#fpOutput").html(Fricke($("#word").val()).toString());
$("#fpOutput").slideDown("slow");
}
function doneCompute(value){
$("#note").text(value + (new Date().getTime() - time - 50) + " milliseconds.");
}
<!DOCTYPE html>
<html>
<head>
<link href="fricke.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="Word.js"></script>
<script type="text/javascript" src="Polynomial.js"></script>
<script type="text/javascript" src="gui.js"></script>
</head>
<body>
<h2>Computing Fricke Polynomial for word with 2 generators a and b</h2>
<br>
<b>Word: </b>
<input type="text" class="inputText" id="word"></input><br><br>
<br><br>
<button class="button" id="compute">Compute</button>
<button class="button" id="reset">Reset</button>
<br><br>
<div id="note">Note:</div>
<br><br>
<div class="slide">Fricke Polynomial</div>
<div class="output" id="fpOutput"></div>
</body>
</html>
I am trying to make a contenteditable div that has syntax highlighting, but when I type, the cursor is fixed and text flows backwards. Please help me. What did I do wrong? I tried changing the direction of text, that didn't work out well. Also, when I type < after typing a few chracters, it clears the whole div!
Any answer is highly appreciated.
Thanks in advance!
P.S. Below is the code
var div = document.getElementById("myDiv");
div.oninput = function () {
this.innerHTML = this.textContent.replace("<", "<");
text = document.getElementById("myDiv");
syntaxHighlight(text);
}
function syntaxHighlight(elmnt, mode) {
var lang = (mode || "html");
var elmntObj = (document.getElementById(elmnt) || elmnt);
var elmntTxt = elmntObj.innerHTML;
var tagcolor = "mediumblue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "mediumblue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "mediumblue";
var cssdelimitercolor = "black";
var cssimportantcolor = "red";
var jscolor = "black";
var jskeywordcolor = "mediumblue";
var jsstringcolor = "brown";
var jsnumbercolor = "red";
var jspropertycolor = "black";
elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
if (!lang) {lang = "html"; }
if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
elmntObj.innerHTML = elmntTxt;
function extract(str, start, end, func, repl) {
var s, e, d = "", a = [];
while (str.search(start) > -1) {
s = str.search(start);
e = str.indexOf(end, s);
if (e == -1) {e = str.length;}
if (repl) {
a.push(func(str.substring(s, e + (end.length))));
str = str.substring(0, s) + repl + str.substr(e + (end.length));
} else {
d += str.substring(0, s);
d += func(str.substring(s, e + (end.length)));
str = str.substr(e + (end.length));
}
}
this.rest = d + str;
this.arr = a;
}
function htmlMode(txt) {
var rest = txt, done = "", php, comment, angular, startpos, endpos, note, i;
comment = new extract(rest, "<!--", "-->", commentMode, "W3HTMLCOMMENTPOS");
rest = comment.rest;
while (rest.indexOf("<") > -1) {
note = "";
startpos = rest.indexOf("<");
if (rest.substr(startpos, 9).toUpperCase() == "<STYLE") {note = "css";}
if (rest.substr(startpos, 10).toUpperCase() == "<SCRIPT") {note = "javascript";}
endpos = rest.indexOf(">", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
if (note == "css") {
endpos = rest.indexOf("</style>");
if (endpos > -1) {
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
if (note == "javascript") {
endpos = rest.indexOf("</script>");
if (endpos > -1) {
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
}
rest = done + rest;
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3HTMLCOMMENTPOS", comment.arr[i]);
}
return rest;
}
function tagMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.search(/(\s|<br>)/) > -1) {
startpos = rest.search(/(\s|<br>)/);
endpos = rest.indexOf(">");
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = "<span style=color:" + tagcolor + "><</span>" + result.substring(4);
if (result.substr(result.length - 4, 4) == ">") {
result = result.substring(0, result.length - 4) + "<span style=color:" + tagcolor + ">></span>";
}
return "<span style=color:" + tagnamecolor + ">" + result + "</span>";
}
function attributeMode(txt) {
var rest = txt, done = "", startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
while (rest.indexOf("=") > -1) {
endpos = -1;
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(" ", startpos + 2);
if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
endpos = rest.indexOf(" ", startpos);
} else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
} else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
}
if (!endpos || endpos == -1 || endpos < startpos) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
return "<span style=color:" + attributecolor + ">" + done + rest + "</span>";
}
function attributeValueMode(txt) {
return "<span style=color:" + attributevaluecolor + ">" + txt + "</span>";
}
function commentMode(txt) {
return "<span style=color:" + commentcolor + ">" + txt + "</span>";
}
function cssMode(txt) {
var rest = txt, done = "", s, e, comment, i, midz, c, cc;
comment = new extract(rest, /\/\*/, "*/", commentMode, "W3CSSCOMMENTPOS");
rest = comment.rest;
while (rest.search("{") > -1) {
s = rest.search("{");
midz = rest.substr(s + 1);
cc = 1;
c = 0;
for (i = 0; i < midz.length; i++) {
if (midz.substr(i, 1) == "{") {cc++; c++}
if (midz.substr(i, 1) == "}") {cc--;}
if (cc == 0) {break;}
}
if (cc != 0) {c = 0;}
e = s;
for (i = 0; i <= c; i++) {
e = rest.indexOf("}", e + 1);
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s + 1);
done += cssPropertyMode(rest.substring(s + 1, e));
rest = rest.substr(e);
}
rest = done + rest;
rest = rest.replace(/{/g, "<span style=color:" + cssdelimitercolor + ">{</span>");
rest = rest.replace(/}/g, "<span style=color:" + cssdelimitercolor + ">}</span>");
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3CSSCOMMENTPOS", comment.arr[i]);
}
return "<span style=color:" + cssselectorcolor + ">" + rest + "</span>";
}
function cssPropertyMode(txt) {
var rest = txt, done = "", s, e, n, loop;
if (rest.indexOf("{") > -1 ) { return cssMode(rest); }
while (rest.search(":") > -1) {
s = rest.search(":");
loop = true;
n = s;
while (loop == true) {
loop = false;
e = rest.indexOf(";", n);
if (rest.substring(e - 5, e + 1) == " ") {
loop = true;
n = e + 1;
}
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s);
done += cssPropertyValueMode(rest.substring(s, e + 1));
rest = rest.substr(e + 1);
}
return "<span style=color:" + csspropertycolor + ">" + done + rest + "</span>";
}
function cssPropertyValueMode(txt) {
var rest = txt, done = "", s;
rest = "<span style=color:" + cssdelimitercolor + ">:</span>" + rest.substring(1);
while (rest.search(/!important/i) > -1) {
s = rest.search(/!important/i);
done += rest.substring(0, s);
done += cssImportantMode(rest.substring(s, s + 10));
rest = rest.substr(s + 10);
}
result = done + rest;
if (result.substr(result.length - 1, 1) == ";" && result.substr(result.length - 6, 6) != " " && result.substr(result.length - 4, 4) != "<" && result.substr(result.length - 4, 4) != ">" && result.substr(result.length - 5, 5) != "&") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">;</span>";
}
return "<span style=color:" + csspropertyvaluecolor + ">" + result + "</span>";
}
function cssImportantMode(txt) {
return "<span style=color:" + cssimportantcolor + ";font-weight:bold;>" + txt + "</span>";
}
function jsMode(txt) {
var rest = txt, done = "", esc = [], i, cc, tt = "", sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
for (i = 0; i < rest.length; i++) {
cc = rest.substr(i, 1);
if (cc == "\\") {
esc.push(rest.substr(i, 2));
cc = "W3JSESCAPE";
i++;
}
tt += cc;
}
rest = tt;
y = 1;
while (y == 1) {
sfnuttpos = getPos(rest, "'", "'", jsStringMode);
dfnuttpos = getPos(rest, '"', '"', jsStringMode);
compos = getPos(rest, /\/\*/, "*/", commentMode);
comlinepos = getPos(rest, /\/\//, "<br>", commentMode);
numpos = getNumPos(rest, jsNumberMode);
keywordpos = getKeywordPos("js", rest, jsKeywordMode);
dotpos = getDotPos(rest, jsPropertyMode);
if (Math.max(numpos[0], sfnuttpos[0], dfnuttpos[0], compos[0], comlinepos[0], keywordpos[0], dotpos[0]) == -1) {break;}
mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
if (mypos[0] == -1) {break;}
if (mypos[0] > -1) {
done += rest.substring(0, mypos[0]);
done += mypos[2](rest.substring(mypos[0], mypos[1]));
rest = rest.substr(mypos[1]);
}
}
rest = done + rest;
for (i = 0; i < esc.length; i++) {
rest = rest.replace("W3JSESCAPE", esc[i]);
}
return "<span style=color:" + jscolor + ">" + rest + "</span>";
}
function jsStringMode(txt) {
return "<span style=color:" + jsstringcolor + ">" + txt + "</span>";
}
function jsKeywordMode(txt) {
return "<span style=color:" + jskeywordcolor + ">" + txt + "</span>";
}
function jsNumberMode(txt) {
return "<span style=color:" + jsnumbercolor + ">" + txt + "</span>";
}
function jsPropertyMode(txt) {
return "<span style=color:" + jspropertycolor + ">" + txt + "</span>";
}
function getDotPos(txt, func) {
var x, i, j, s, e, arr = [".","<", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%"];
s = txt.indexOf(".");
if (s > -1) {
x = txt.substr(s + 1);
for (j = 0; j < x.length; j++) {
cc = x[j];
for (i = 0; i < arr.length; i++) {
if (cc.indexOf(arr[i]) > -1) {
e = j;
return [s + 1, e + s + 1, func];
}
}
}
}
return [-1, -1, func];
}
function getMinPos() {
var i, arr = [];
for (i = 0; i < arguments.length; i++) {
if (arguments[i][0] > -1) {
if (arr.length == 0 || arguments[i][0] < arr[0]) {arr = arguments[i];}
}
}
if (arr.length == 0) {arr = arguments[i];}
return arr;
}
function getKeywordPos(typ, txt, func) {
var words, i, pos, rpos = -1, rpos2 = -1, patt;
if (typ == "js") {
words = ["abstract","arguments","boolean","break","byte","case","catch","char","class","const","continue","debugger","default","delete",
"do","double","else","enum","eval","export","extends","false","final","finally","float","for","function","goto","if","implements","import",
"in","instanceof","int","interface","let","long","NaN","native","new","null","package","private","protected","public","return","short","static",
"super","switch","synchronized","this","throw","throws","transient","true","try","typeof","var","void","volatile","while","with","yield"];
}
for (i = 0; i < words.length; i++) {
pos = txt.indexOf(words[i]);
if (pos > -1) {
patt = /\W/g;
if (txt.substr(pos + words[i].length,1).match(patt) && txt.substr(pos - 1,1).match(patt)) {
if (pos > -1 && (rpos == -1 || pos < rpos)) {
rpos = pos;
rpos2 = rpos + words[i].length;
}
}
}
}
return [rpos, rpos2, func];
}
function getPos(txt, start, end, func) {
var s, e;
s = txt.search(start);
e = txt.indexOf(end, s + (end.length));
if (e == -1) {e = txt.length;}
return [s, e + (end.length), func];
}
function getNumPos(txt, func) {
var arr = ["<br>", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "="], i, j, c, startpos = 0, endpos, word;
for (i = 0; i < txt.length; i++) {
for (j = 0; j < arr.length; j++) {
c = txt.substr(i, arr[j].length);
if (c == arr[j]) {
if (c == "-" && (txt.substr(i - 1, 1) == "e" || txt.substr(i - 1, 1) == "E")) {
continue;
}
endpos = i;
if (startpos < endpos) {
word = txt.substring(startpos, endpos);
if (!isNaN(word)) {return [startpos, endpos, func];}
}
i += arr[j].length;
startpos = i;
i -= 1;
break;
}
}
}
return [-1, -1, func];
}
}
$('div[contenteditable]').keydown(function(e) {
if (e.keyCode === 13) {
document.execCommand('insertHTML', false, '<br><br>');
return false;
}
});
div {
width: 300px;
height: 300px;
border: red solid;
box-sizing: border-box;
padding: 20px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" contenteditable></div>
You're missing an ending brace for your syntaxHighlight function, you have this:
function syntaxHighlight(elmnt, mode) {
var lang = (mode || "html");
var elmntObj = (document.getElementById(elmnt) || elmnt);
var elmntTxt = elmntObj.innerHTML;
var tagcolor = "mediumblue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "mediumblue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "mediumblue";
var cssdelimitercolor = "black";
var cssimportantcolor = "red";
var jscolor = "black";
var jskeywordcolor = "mediumblue";
var jsstringcolor = "brown";
var jsnumbercolor = "red";
var jspropertycolor = "black";
elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
if (!lang) {lang = "html"; }
if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
elmntObj.innerHTML = elmntTxt;
But you want this:
function syntaxHighlight(elmnt, mode) {
var lang = (mode || "html");
var elmntObj = (document.getElementById(elmnt) || elmnt);
var elmntTxt = elmntObj.innerHTML;
var tagcolor = "mediumblue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "mediumblue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "mediumblue";
var cssdelimitercolor = "black";
var cssimportantcolor = "red";
var jscolor = "black";
var jskeywordcolor = "mediumblue";
var jsstringcolor = "brown";
var jsnumbercolor = "red";
var jspropertycolor = "black";
elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
if (!lang) {lang = "html"; }
if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
elmntObj.innerHTML = elmntTxt;
}
--SOLVED--
I was just forgetting to reset the number of flags after each game.
I'm having issues with the number of flags in my minesweeper game. For some reason, sometimes when I flag a tile the number of flags increases by more than 1. Sometimes it increases by 3, sometimes 4, sometimes 7. I can't find the issue in my logic, so I was hoping to get another set of eyes on it.
The only sort of pattern I can see when it adds more flags than it should, i.e. the flags variable is incremented more than once, is when I flag a tile that is mostly surrounded by revealed tiles.
Javascript:
var flags = 0;
var trueFlags = 0;
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
var q = Math.floor(Math.random() * 50);
if (0 <= q && q <= 2) {
numBombs += 1;
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 0 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + 'data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
$("#board").append("<br/>");
}
$(".controls h2").text("Bombs to go: " + numBombs);
$(".tile").css("background-color", "white");
$(".tile").width(15);
$(".tile").height(15);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
$(".tile").click(function(e) {
if (e.shiftKey) {
flagKey($(this));
$(".controls h2").text("Bombs to go: " + (numBombs - flags));
}
else if ($(this).data("contains") == 0) {
console.log("you lose");
boardClear();
newGame();
return;
}
else {
revealNeighbors($(this));
// if (gameWon() == true) {
// alert("You have won!");
// newGame();
// }
return;
}
});
}
function boardClear() {
$("#board").empty();
}
function revealNeighbors(tile) {
var cordsx = tile.data("row");
var cordsy = tile.data("col");
// tile has bomb
if(tile.data("contains") == 0) {return;}
// tile is flagged
else if(tile.data("flagged") == true){return;}
// tile has been revealead already
else if(tile.prop("revealed") == true) {return;}
// reveal the tile
var tileBombs = nearbyBombCount(tile);
tile.prop("revealed", true);
tile.text(tileBombs);
tile.css("background-color", "grey");
if (tileBombs == 0){tile.text("");}
else if(tileBombs != 0) {return;}
for (var i = -1; i <= 1; i++) {
for (var j = -1; j <= 1; j++) {
if (cordsx + i < 1 || cordsy + j < 1) {continue;}
else if (cordsx + i > $("#width").val() || cordsy + j > $("#height").val()) {continue;}
else if (i == 0 && j == 0) {continue;}
var neighbor = $('.tile[data-row="' + (cordsx+i) + '"][data-col ="'+(cordsy+j)+'"]');
revealNeighbors(neighbor);
}
}
}
function nearbyBombCount(tile) {
var cx = tile.data("row");
var cy = tile.data("col");
var nearbyBombs = 0;
for (var n = -1; n < 2; n++) {
for (var m = -1; m < 2; m++) {
if (cx + n < 1 || cy + m < 1) {continue;}
else if (cx + n > $("#width").val() || cy + m > $("#height").val()) {continue;}
var neighbor = $('.tile[data-row="' + (cx+n) + '"][data-col ="'+(cy+m)+'"]');
if (neighbor.data("contains") == 0) {
nearbyBombs++;
}
}
}
return nearbyBombs;
}
function flagKey(tile) {
// tile is already revealed
if (tile.data("revealed") == true) {
return;
}
// tile is already flagged
else if (tile.data("flagged") == true) {
tile.data("flagged", false);
tile.css("background-color", "white");
flags--;
// contains bomb
if (tile.data("contains") == 0) {
trueFlags--;
}
return;
}
// tile not flagged
else if (tile.data("flagged") == false) {
flags++;
tile.data("flagged", true);
tile.css("background-color", "red");
// contains bomb
if (tile.data("contains") == 0) {
trueFlags++;
console.log(trueFlags);
}
}
else {
return;
}
}
My guess is that there's something wrong with my revealNeighbors() function or it's some scope issue, but I can't for the life of me figure out what it is.
Hi I change a litle and works fine
<html>
<head>
<style>
.tile{padding:5px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Width : <input type="text" id="width" value="15" /> Height :<input type="text" id="height" value="15" /><input type="button" onclick="newGame()" id="btnstart" value="start" />
<br />
<div>
<div id="board" >
</div>
</div>
<script>
var flags = 0;
var trueFlags = 0;
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
var q = Math.floor(Math.random() * 50) + 1;
if (q <= 2) {
numBombs += 1;
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 0 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + 'data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
$("#board").append("<br/>");
}
$(".controls h2").text("Bombs to go: " + numBombs);
$(".tile").css("background-color", "white");
$(".tile").width(15);
$(".tile").height(15);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
$(".tile").click(function (e) {
if (e.shiftKey) {
flagKey($(this));
$(".controls h2").text("Bombs to go: " + (numBombs - flags));
}
else if ($(this).data("contains") == 0) {
console.log("you lose");
boardClear();
newGame();
return;
}
else {
revealNeighbors($(this));
// if (gameWon() == true) {
// alert("You have won!");
// newGame();
// }
return;
}
});
}
function boardClear() {
$("#board").empty();
}
function revealNeighbors(tile) {
var cordsx = tile.data("row");
var cordsy = tile.data("col");
// tile has bomb
if(tile.data("contains") == 0) {return;}
// tile is flagged
else if(tile.data("flagged") == true){return;}
// tile has been revealead already
else if(tile.prop("revealed") == true) {return;}
// reveal the tile
var tileBombs = nearbyBombCount(tile);
tile.prop("revealed", true);
tile.text(tileBombs);
tile.css("background-color", "grey");
if (tileBombs == 0){tile.text("");}
else if(tileBombs != 0) {return;}
for (var i = -1; i <= 1; i++) {
for (var j = -1; j <= 1; j++) {
if (cordsx + i < 1 || cordsy + j < 1) {continue;}
else if (cordsx + i > $("#width").val() || cordsy + j > $("#height").val()) {continue;}
else if (i == 0 && j == 0) {continue;}
var neighbor = $('.tile[data-row="' + (cordsx+i) + '"][data-col ="'+(cordsy+j)+'"]');
revealNeighbors(neighbor);
}
}
}
function nearbyBombCount(tile) {
var cx = tile.data("row");
var cy = tile.data("col");
var nearbyBombs = 0;
for (var n = -1; n < 2; n++) {
for (var m = -1; m < 2; m++) {
if (cx + n < 1 || cy + m < 1) {continue;}
else if (cx + n > $("#width").val() || cy + m > $("#height").val()) {continue;}
var neighbor = $('.tile[data-row="' + (cx+n) + '"][data-col ="'+(cy+m)+'"]');
if (neighbor.data("contains") == 0) {
nearbyBombs++;
}
}
}
return nearbyBombs;
}
function flagKey(tile) {
// tile is already revealed
if (tile.data("revealed") == true) {
return;
}
// tile is already flagged
else if (tile.data("flagged") == true) {
tile.data("flagged", false);
tile.css("background-color", "white");
flags--;
// contains bomb
if (tile.data("contains") == 0) {
trueFlags--;
}
return;
}
// tile not flagged
else if (tile.data("flagged") == false) {
flags++;
tile.data("flagged", true);
tile.css("background-color", "red");
// contains bomb
if (tile.data("contains") == 0) {
trueFlags++;
console.log(trueFlags);
}
}
else {
return;
}
}
</script>
</body>
</html>