[Drupal] Javascript code in een node? - Softwareontwikkeling

maandag 22 december 2008 22:07

Acties:

0 Henk 'm!

Topicstarter

Ik ben al een eindje bezig met een drupal schaaksite, en het lukt allemaal vrij aardig.

Ik zou nu graag volgende automatisch gegenereerde html code in een drupal site invoegen:

code:

<html>
<head>
<style>
a.move {color: black; text-decoration: none;}
html {height: 100%;}
body {height: 100%; margin: 0px; padding: 0px;}
</style>
<script language="javascript" type="text/javascript">

//image data
var pieces = new Array("", "wp", "wn", "wb", "wr", "wq", "wk", "bp", "bn", "bb", "br", "bq", "bk");

ws = new Image();
ws.src = "merida/ws.png";
//... hier worden alle afbeeldingen van een schaakveld geladen...

//initial/current position
var variation = 0;
var move = 0;
var flipped = false;
var board = new Array(10,8,9,11,12,9,8,10,7,7,7,7,7,7,7,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,4,2,3,5,6,3,2,4);

//Start position, moves and variations
var initial = new Array(10,8,9,11,12,9,8,10,7,7,7,7,7,7,7,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,4,2,3,5,6,3,2,4);
parents = new Array();
moves = new Array();
parents[0] = new Array(-1,0);
moves[0] = new Array(52,36,-1,-1,10,18,-1,-1,51,35,-1,-1,11,27,-1,-1,36,28,-1,-1,2,29,-1,-1,62,45,-1,-1,12,20,-1,-1,61,52,-1,-1,18,26,-1,-1,58,44,-1,-1,1,11,-1,-1,57,51,-1,-1,26,34,-1,-1,48,32,-1,-1,15,23,-1,-1,49,41,-1,-1,34,41,-1,-1,51,41,-1,-1,0,2,-1,-1,56,48,-1,-1,3,10,-1,-1,52,43,-1,-1,29,43,-1,-1,59,43,-1,-1,6,12,-1,-1,60,62,63,61,10,34,-1,-1,61,57,-1,-1,9,17,-1,-1,43,61,-1,-1,12,18,-1,-1,50,42,-1,-1,34,42,-1,-1,32,24,-1,-1,5,12,-1,-1,24,17,-1,-1,8,17,-1,-1,61,59,-1,-1,42,34,-1,-1,41,58,-1,-1,18,33,-1,-1,48,8,-1,-1,34,50,-1,-1,59,50,-1,-1,33,50,-1,-1,44,51,-1,-1,50,40,-1,-1,57,56,-1,-1,40,34,-1,-1,8,9,-1,-1,11,1,-1,-1,56,0,-1,-1,4,6,7,5,0,1,-1,-1,34,51,-1,-1,1,2,-1,-1,51,45,-1,-1,54,45,-1,-1,5,2,-1,-1,58,52,-1,-1,12,3,-1,-1,45,37,-1,-1,14,22,-1,-1,62,54,-1,-1,6,5,-1,-1,54,45,-1,-1,2,0,-1,-1,45,44,-1,-1,0,40,-1,-1,44,51,-1,-1,3,39,-1,-1,-1,-1,-1,-1);


//initial timerID
var intervalID = -1;

function autoplay(interval)
{
  if(intervalID != -1)
  {
    clearInterval(intervalID);
  }

  if(interval != -1)
  {
    intervalID = setInterval("forward()", interval * 1000);
  }
}

function flip()
{
  var temp;
  for(square = 0; square < 32; square++)
  {
    temp = board[square];
    board[square] = board[63 - square];
    board[63 - square] = temp
  }
  flipped = ~flipped;
  update();  
}

function domove()
{
  var source = moves[variation][move * 4];
  var destination = moves[variation][move * 4 + 1];

  if(source < 0)
  {
    return;
  }

  if(flipped)
  {
    source = 63 - source;
    destination = 63 - destination;
  }

  board[destination] = board[source];
  board[source] = 0;

  if(moves[variation][move * 4 + 2] < -1)
  {
    board[destination] = - moves[variation][move * 4 + 2];
  }

  source = moves[variation][move * 4 + 2];
  destination = moves[variation][move * 4 + 3];

  if(flipped)
  {
    source = 63 - source;
    destination = 63 - destination;
  }

  if(source >= 0)
  {
    board[destination] = board[source];
    board[source] = 0;
  }

  move++;
}

function jumpto(target_variation, target_move)
{ 
  var route;
  unhighlight();
  reset();

  while(variation != target_variation)
  {
    route = target_variation;

    while(parents[route][0] != variation)
    {
      route = parents[route][0];
    }

    while(move != parents[route][1])
    {
      domove();
    }

    variation = route;
    move = 0;
  }

  while(move != target_move)
  {
    domove();
  }

  update();
}

function reset()
{
  variation = 0;
  move = 0;

  for(square = 0; square < 64; square++)
  {
    if(flipped)
    {
      board[square] = initial[63 - square];
    }
    else
    {
      board[square] = initial[square];
    }
  }
}

function unhighlight()
{
  if(move > 0)
  {
    document.getElementById("v" + variation + "m" + move).style.background = "white";
  }
}

function update()
{
  for(square = 0; square < 64; square++)
  {
    document.getElementById("s" + square).src = "/merida/" + pieces[board[square]] + (((square % 8 + Math.floor(square / 8)) % 2) ? "bs" : "ws") + ".png";
  }

  if(move != 0)
  {
    document.getElementById("v" + variation + "m" + move).style.background = "silver";
  }
}

function first()
{
  unhighlight();
  reset();
  update();
}

function backward()
{
  if(move > 1)
  {
    jumpto(variation, move - 1);
  }
  else
  {
    if(parents[variation][0] == -1)
    {
      jumpto(0, 0);
    }
    else
    {
      jumpto(parents[variation][0], parents[variation][1]);
    }
  }
}

function forward()
{
  unhighlight();
  domove();
  update();
}

function last()
{
  unhighlight();
  while(moves[variation][move * 4] != -1)
  {
    domove();
  }
  update();
}

</script>
</head>
<body onLoad="reset(); update();">

<div style="float: left; height: 100%;">

<div style="padding: 8px; text-align: center;">


<p>
<div style="width: 256px;">

<img id="s0" src="/merida/brws.png"><img id="s1" src="/merida/bnbs.png"><img id="s2" src="/merida/bbws.png"><img id="s3" src="/merida/bqbs.png"><img id="s4" src="/merida/bkws.png"><img id="s5" src="/merida/bbbs.png"><img id="s6" src="/merida/bnws.png"><img id="s7" src="/merida/brbs.png"><br>

<img id="s8" src="/merida/bpbs.png"><img id="s9" src="/merida/bpws.png"><img id="s10" src="/merida/bpbs.png"><img id="s11" src="/merida/bpws.png"><img id="s12" src="/merida/bpbs.png"><img id="s13" src="/merida/bpws.png"><img id="s14" src="/merida/bpbs.png"><img id="s15" src="/merida/bpws.png"><br>

<img id="s16" src="/merida/ws.png"><img id="s17" src="/merida/bs.png"><img id="s18" src="/merida/ws.png"><img id="s19" src="/merida/bs.png"><img id="s20" src="/merida/ws.png"><img id="s21" src="/merida/bs.png"><img id="s22" src="/merida/ws.png"><img id="s23" src="/merida/bs.png"><br>

<img id="s24" src="/merida/bs.png"><img id="s25" src="/merida/ws.png"><img id="s26" src="/merida/bs.png"><img id="s27" src="/merida/ws.png"><img id="s28" src="/merida/bs.png"><img id="s29" src="/merida/ws.png"><img id="s30" src="/merida/bs.png"><img id="s31" src="/merida/ws.png"><br>

<img id="s32" src="/merida/ws.png"><img id="s33" src="/merida/bs.png"><img id="s34" src="/merida/ws.png"><img id="s35" src="/merida/bs.png"><img id="s36" src="/merida/ws.png"><img id="s37" src="/merida/bs.png"><img id="s38" src="/merida/ws.png"><img id="s39" src="/merida/bs.png"><br>

<img id="s40" src="/merida/bs.png"><img id="s41" src="/merida/ws.png"><img id="s42" src="/merida/bs.png"><img id="s43" src="/merida/ws.png"><img id="s44" src="/merida/bs.png"><img id="s45" src="/merida/ws.png"><img id="s46" src="/merida/bs.png"><img id="s47" src="/merida/ws.png"><br>

<img id="s48" src="/merida/wpws.png"><img id="s49" src="/merida/wpbs.png"><img id="s50" src="/merida/wpws.png"><img id="s51" src="/merida/wpbs.png"><img id="s52" src="/merida/wpws.png"><img id="s53" src="/merida/wpbs.png"><img id="s54" src="/merida/wpws.png"><img id="s55" src="/merida/wpbs.png"><br>

<img id="s56" src="/merida/wrbs.png"><img id="s57" src="/merida/wnws.png"><img id="s58" src="/merida/wbbs.png"><img id="s59" src="/merida/wqws.png"><img id="s60" src="/merida/wkbs.png"><img id="s61" src="/merida/wbws.png"><img id="s62" src="/merida/wnbs.png"><img id="s63" src="/merida/wrws.png"><br>

</div>

<p>
<input type="button" value=" |&lt; " onclick="first()">
<input type="button" value=" &lt; " onclick="backward()">
<input type="button" value=" &gt; " onclick="forward()">
<input type="button" value=" &gt;| " onclick="last()">

<p>Autoplay:
<select style="vertical-align: middle" name="autoplay" onchange="autoplay(this.value)">
<option value="-1">Off
<option value="1">1s
<option value="3">3s
<option value="5">5s
<option value="10">10s
<option value="30">30s
</select>
&nbsp;
<input style="vertical-align: middle" type="button" value="Flip board" onclick="flip()">

<p>
<small></small>

</div>

</div>

<div style="float right; height: 100%; overflow: auto;">

<div style="padding: 8px;"> 

<h2>
Svidler, P.
-
Topalov, V.
2008.12.20
</h2>
<h3>
Round 9
Pearl Spring
Nanjing CHN
</h3>

<p>
<b>
1.<a class="move" href="javascript:jumpto(0, 1);" id="v0m1">e4</a>
<a class="move" href="javascript:jumpto(0, 2);" id="v0m2">c6</a>
2.<a class="move" href="javascript:jumpto(0, 3);" id="v0m3">d4</a>
<a class="move" href="javascript:jumpto(0, 4);" id="v0m4">d5</a>
3.<a class="move" href="javascript:jumpto(0, 5);" id="v0m5">e5</a>
<a class="move" href="javascript:jumpto(0, 6);" id="v0m6">Bf5</a>
4.<a class="move" href="javascript:jumpto(0, 7);" id="v0m7">Nf3</a>
<a class="move" href="javascript:jumpto(0, 8);" id="v0m8">e6</a>
5.<a class="move" href="javascript:jumpto(0, 9);" id="v0m9">Be2</a>
<a class="move" href="javascript:jumpto(0, 10);" id="v0m10">c5</a>
6.<a class="move" href="javascript:jumpto(0, 11);" id="v0m11">Be3</a>
<a class="move" href="javascript:jumpto(0, 12);" id="v0m12">Nd7</a>
7.<a class="move" href="javascript:jumpto(0, 13);" id="v0m13">Nbd2</a>
<a class="move" href="javascript:jumpto(0, 14);" id="v0m14">c4</a>
8.<a class="move" href="javascript:jumpto(0, 15);" id="v0m15">a4</a>
<a class="move" href="javascript:jumpto(0, 16);" id="v0m16">h6</a>
9.<a class="move" href="javascript:jumpto(0, 17);" id="v0m17">b3</a>
<a class="move" href="javascript:jumpto(0, 18);" id="v0m18">cxb3</a>
10.<a class="move" href="javascript:jumpto(0, 19);" id="v0m19">Nxb3</a>
<a class="move" href="javascript:jumpto(0, 20);" id="v0m20">Rc8</a>
11.<a class="move" href="javascript:jumpto(0, 21);" id="v0m21">Ra2</a>
<a class="move" href="javascript:jumpto(0, 22);" id="v0m22">Qc7</a>
12.<a class="move" href="javascript:jumpto(0, 23);" id="v0m23">Bd3</a>
<a class="move" href="javascript:jumpto(0, 24);" id="v0m24">Bxd3</a>
13.<a class="move" href="javascript:jumpto(0, 25);" id="v0m25">Qxd3</a>
<a class="move" href="javascript:jumpto(0, 26);" id="v0m26">Ne7</a>
14.<a class="move" href="javascript:jumpto(0, 27);" id="v0m27">O-O</a>
<a class="move" href="javascript:jumpto(0, 28);" id="v0m28">Qc4</a>
15.<a class="move" href="javascript:jumpto(0, 29);" id="v0m29">Rb1</a>
<a class="move" href="javascript:jumpto(0, 30);" id="v0m30">b6</a>
16.<a class="move" href="javascript:jumpto(0, 31);" id="v0m31">Qf1</a>
<a class="move" href="javascript:jumpto(0, 32);" id="v0m32">Nc6</a>
17.<a class="move" href="javascript:jumpto(0, 33);" id="v0m33">c3</a>
<a class="move" href="javascript:jumpto(0, 34);" id="v0m34">Qxc3</a>
18.<a class="move" href="javascript:jumpto(0, 35);" id="v0m35">a5</a>
<a class="move" href="javascript:jumpto(0, 36);" id="v0m36">Be7</a>
19.<a class="move" href="javascript:jumpto(0, 37);" id="v0m37">axb6</a>
<a class="move" href="javascript:jumpto(0, 38);" id="v0m38">axb6</a>
20.<a class="move" href="javascript:jumpto(0, 39);" id="v0m39">Qd1</a>
<a class="move" href="javascript:jumpto(0, 40);" id="v0m40">Qc4</a>
21.<a class="move" href="javascript:jumpto(0, 41);" id="v0m41">Nc1</a>
<a class="move" href="javascript:jumpto(0, 42);" id="v0m42">Nb4</a>
22.<a class="move" href="javascript:jumpto(0, 43);" id="v0m43">Ra7</a>
<a class="move" href="javascript:jumpto(0, 44);" id="v0m44">Qc2</a>
23.<a class="move" href="javascript:jumpto(0, 45);" id="v0m45">Qxc2</a>
<a class="move" href="javascript:jumpto(0, 46);" id="v0m46">Nxc2</a>
24.<a class="move" href="javascript:jumpto(0, 47);" id="v0m47">Bd2</a>
<a class="move" href="javascript:jumpto(0, 48);" id="v0m48">Na3</a>
25.<a class="move" href="javascript:jumpto(0, 49);" id="v0m49">Ra1</a>
<a class="move" href="javascript:jumpto(0, 50);" id="v0m50">Nc4</a>
26.<a class="move" href="javascript:jumpto(0, 51);" id="v0m51">Rb7</a>
<a class="move" href="javascript:jumpto(0, 52);" id="v0m52">Nb8</a>
27.<a class="move" href="javascript:jumpto(0, 53);" id="v0m53">Ra8</a>
<a class="move" href="javascript:jumpto(0, 54);" id="v0m54">O-O</a>
28.<a class="move" href="javascript:jumpto(0, 55);" id="v0m55">Raxb8</a>
<a class="move" href="javascript:jumpto(0, 56);" id="v0m56">Nxd2</a>
29.<a class="move" href="javascript:jumpto(0, 57);" id="v0m57">Rxc8</a>
<a class="move" href="javascript:jumpto(0, 58);" id="v0m58">Nxf3+</a>
30.<a class="move" href="javascript:jumpto(0, 59);" id="v0m59">gxf3</a>
<a class="move" href="javascript:jumpto(0, 60);" id="v0m60">Rxc8</a>
31.<a class="move" href="javascript:jumpto(0, 61);" id="v0m61">Ne2</a>
<a class="move" href="javascript:jumpto(0, 62);" id="v0m62">Bd8</a>
32.<a class="move" href="javascript:jumpto(0, 63);" id="v0m63">f4</a>
<a class="move" href="javascript:jumpto(0, 64);" id="v0m64">g6</a>
33.<a class="move" href="javascript:jumpto(0, 65);" id="v0m65">Kg2</a>
<a class="move" href="javascript:jumpto(0, 66);" id="v0m66">Kf8</a>
34.<a class="move" href="javascript:jumpto(0, 67);" id="v0m67">Kf3</a>
<a class="move" href="javascript:jumpto(0, 68);" id="v0m68">Ra8</a>
35.<a class="move" href="javascript:jumpto(0, 69);" id="v0m69">Ke3</a>
<a class="move" href="javascript:jumpto(0, 70);" id="v0m70">Ra3+</a>
36.<a class="move" href="javascript:jumpto(0, 71);" id="v0m71">Kd2</a>
<a class="move" href="javascript:jumpto(0, 72);" id="v0m72">Bh4</a>
<b>
0-1
</b>

</div>

</div>

</body>
</html>

De functies (domove() flip() autoplay() reset() jumpto() autoplay() update() unhighlight() first() forward() backward() last() ) heb ik in .js bestand geplaats dat automatisch geladen wordt.

De html code kan ik in een node plaatsen, maar de initialisatie van de arrays verschilt bij elke partij.
het volgende stuk dus:

code:

//Start position, moves and variations
var initial = new Array(10,8,9,11,12,9,8,10,7,7,7,7,7,7,7,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,4,2,3,5,6,3,2,4);
parents = new Array();
moves = new Array();
parents[0] = new Array(-1,0);
moves[0] = new Array(52,36,-1,-1,10,18,-1,-1,51,35,-1,-1,11,27,-1,-1,36,28,-1,-1,2,29,-1,-1,62,45,-1,-1,12,20,-1,-1,61,52,-1,-1,18,26,-1,-1,58,44,-1,-1,1,11,-1,-1,57,51,-1,-1,26,34,-1,-1,48,32,-1,-1,15,23,-1,-1,49,41,-1,-1,34,41,-1,-1,51,41,-1,-1,0,2,-1,-1,56,48,-1,-1,3,10,-1,-1,52,43,-1,-1,29,43,-1,-1,59,43,-1,-1,6,12,-1,-1,60,62,63,61,10,34,-1,-1,61,57,-1,-1,9,17,-1,-1,43,61,-1,-1,12,18,-1,-1,50,42,-1,-1,34,42,-1,-1,32,24,-1,-1,5,12,-1,-1,24,17,-1,-1,8,17,-1,-1,61,59,-1,-1,42,34,-1,-1,41,58,-1,-1,18,33,-1,-1,48,8,-1,-1,34,50,-1,-1,59,50,-1,-1,33,50,-1,-1,44,51,-1,-1,50,40,-1,-1,57,56,-1,-1,40,34,-1,-1,8,9,-1,-1,11,1,-1,-1,56,0,-1,-1,4,6,7,5,0,1,-1,-1,34,51,-1,-1,1,2,-1,-1,51,45,-1,-1,54,45,-1,-1,5,2,-1,-1,58,52,-1,-1,12,3,-1,-1,45,37,-1,-1,14,22,-1,-1,62,54,-1,-1,6,5,-1,-1,54,45,-1,-1,2,0,-1,-1,45,44,-1,-1,0,40,-1,-1,44,51,-1,-1,3,39,-1,-1,-1,-1,-1,-1);

Weet iemand hoe ik dit in een drupal node kan plaatsen?

maandag 22 december 2008 22:11

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Didius schreef op maandag 22 december 2008 @ 22:07:
Weet iemand hoe ik dit in een drupal node kan plaatsen?

Nee, maar ik weet wél hoe je een topic moet starten en dat is:
a) niet met een lap code van hier tot Tokio en terug
b) met een behoorlijke dosis eigen inzet en initiatief (Quickstart)
c) bij voorkeur met correct gebruik van code tags
d) in het juiste forum (Waar hoort mijn topic?)

Daarbij geven we geen support op producten van derden; daarvoor neem je beter contact op met die derden

[ Voor 19% gewijzigd door RobIII op 22-12-2008 22:16 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.