public static void AttachAsNextOrToDocument(this IHTMLElement e, IHTMLElement anchor)
{
if (anchor == null)
{
e.AttachToDocument();
}
else
{
anchor.insertNextSibling(e);
}
}
public Butterfly(IHTMLElement e)
{
e.insertNextSibling(Control);
Control.appendChild(@"
There is a buttrfly under your mouse.
Can you see it? :)
Click to capture pointer lock and see how the butterfly warps from left to right.
");
Spawn(Control);
}
public Butterfly(IHTMLElement e)
{
e.insertNextSibling(Control);
Control.appendChild(@"
There is a buttrfly under your mouse.
Can you see it? :)
Click to capture pointer lock and see how the butterfly warps from left to right.
");
Spawn(Control);
}
public HulaGirl(IHTMLElement e)
{
IHTMLImage[] Frames = new HTML.Pages.FramesImages().Images;
e.insertNextSibling(Control);
Control.innerHTML = "hello world (javascript) : " /* base.SpawnString*/;
Control.onmouseover += delegate { Style.color = Color.Blue; };
Control.onmouseout += delegate { Style.color = Color.None; };
Style.cursor = IStyle.CursorEnum.pointer;
var btn = IHTMLButton.Create("go!",
delegate
{
Control.innerHTML = "you clicked me!";
}
);
var img = Frames[52];
img.AttachToDocument();
var _width = 120;
var _height = 100;
var _zoom = 1.0;
Native.Document.body.onmousewheel +=
ev =>
{
_zoom += 0.1 * ev.WheelDirection;
img.style.width = (_width * _zoom) + "px";
img.style.height = (_height * _zoom) + "px";
};
var index = 0;
new Timer(
delegate
{
index++;
if (index >= Frames.Length)
index = 0;
img.Orphanize();
img = Frames[index].AttachToDocument();
img.style.width = (_width * _zoom) + "px";
img.style.height = (_height * _zoom) + "px";
}, 0, 1000 / 24);
//var bytes = frames.Sum(x => x.Length);
//Console.WriteLine(new { bytes });
// Error 4 The 'await' operator can only be used within an async method. Consider marking this method with the 'async' modifier and changing its return type to 'Task'. X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 89 26 HulaGirl
//var frames = await Task.WhenAll(Frames.Select(k => k.bytes));
new IHTMLButton { innerText = "gif" }.AttachToDocument().WhenClicked(
async xbtn =>
{
Action<int> y = xindex =>
{
xbtn.innerText = new { xindex, Frames.Length }.ToString();
};
Console.WriteLine("are we loaded yet? " + new { Frames.Length });
// Error 4 The 'await' operator can only be used within an async method. Consider marking this method with the 'async' modifier and changing its return type to 'Task'. X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 89 26 HulaGirl
//var bytes = await Task.WhenAll(frames);
//var bytes = await Task.WhenAll(Frames.Select(k => k.bytes));
//byte[][] bytes = await frames;
//frames = (from f in Frames select f.bytes).ToArray();
// why do we have to use static?
//bytes = await Task.WhenAll(frames);
// Error 5 Cannot await 'System.Collections.Generic.IEnumerable<System.Threading.Tasks.Task<byte[]>>' X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 117 34 HulaGirl
var bytes = await from f in Frames select f.bytes;
//bytes.DebuggerBreakIfMissing();
//Console.WriteLine("are we loaded yet? yes " + new { bytes.Length });
//Console.WriteLine(new { bytes.Length });
var a = new { Frames.First().width, Frames.First().height };
Console.WriteLine(new { a });
var src = await new GIFEncoderWorker(
a.width,
a.height,
delay: 1000 / 24,
//transparentColor: 0x0,
frames: bytes
,
AtFrame: y
);
Console.WriteLine("done!");
new IHTMLImage { src = src }.AttachToDocument();
}
);
}
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public LightsOut2(IHTMLElement DataElement)
{
// based on http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx
// what happens in beta2 when the anonymous types are immutable? :)
var usersettings = new { x = 5, y = 5, tile = new { w = 64, h = 64, cold = 0.8 } };
var a = new Array2D<IHTMLDiv>(usersettings.x, usersettings.y);
var m = a.ToBooleanArray();
var r = new System.Random();
m.ForEach(
(x, y) =>
{
m[x, y] = r.NextDouble() > 0.5;
}
);
var canvas = new IHTMLDiv();
canvas.className = "canvas";
var canvas_size = new __Type1 { x = ((a.XLength + 1) * usersettings.tile.w), y = ((a.YLength + 1) * usersettings.tile.h) };
canvas.style.position = IStyle.PositionEnum.relative;
canvas.style.border = "2px solid black";
canvas.style.width = canvas_size.x + "px";
canvas.style.height = canvas_size.y + "px";
var canvas_bg = new IHTMLDiv();
//var canvas_bg_tween = new TweenDataDouble();
//canvas_bg_tween.Value = 1;
//canvas_bg_tween.ValueChanged += delegate { canvas_bg.style.Opacity = canvas_bg_tween.Value; };
new HTML.Images.FromAssets.background().ToBackground(canvas_bg.style);
//canvas_bg.style.backgroundImage = Assets.Default.Background.StyleSheetURL;
canvas_bg.style.SetLocation(0, 0, canvas_size.x * 2, canvas_size.y);
canvas.appendChild(canvas_bg);
IStyleSheet.Default.AddRule(".info").style
.Aggregate(s =>
{
s.backgroundColor = Color.Black;
s.color = Color.White;
s.padding = "2em";
s.fontFamily = IStyle.FontFamilyEnum.Tahoma;
s.Float = IStyle.FloatEnum.right;
})
;
IStyleSheet.Default.AddRule(".canvas").style
.Aggregate(s => s.overflow = IStyle.OverflowEnum.hidden)
.Aggregate(s => s.backgroundColor = Color.Black)
;
IStyleSheet.Default.AddRule(".on").style
.Aggregate(s =>
new HTML.Images.FromAssets.vistaLogoOn().ToBackground(s)
)
//.Aggregate(s => s.Opacity = 0.8)
;
IStyleSheet.Default.AddRule(".off").style
.Aggregate(s =>
new HTML.Images.FromAssets.vistaLogoOff().ToBackground(s)
)
//.Aggregate(s => s.Opacity = 0.5)
;
Action<int, int> UpdateColor =
(x, y) =>
{
var n = a[x, y];
if (m[x, y])
{
n.className = "on";
}
else
{
n.className = "off";
}
};
Action<int, int> ToggleDirect =
(x, y) =>
{
var n = a[x, y];
if (n == null)
return;
m[x, y] = !m[x, y];
UpdateColor(x, y);
};
Action<int, int> Toggle =
(x, y) =>
{
//Console.WriteLine("click at: " + new { x, y } + " = " + m[x, y]);
var f = ToggleDirect.WithOffset(x, y);
f(-1, 0);
f(0, -1);
f(0, 0);
f(0, 1);
f(1, 0);
};
var info_stats_clicks = new IHTMLDiv();
var info_stats_clicks_count = 0;
var info_stats_off = new IHTMLDiv();
var info_stats_on = new IHTMLDiv();
Action info_stats_update =
() =>
{
info_stats_clicks.innerHTML = info_stats_clicks_count + " clicks made so far";
info_stats_on.innerHTML = m.Count(i => i) + " blocks are on";
info_stats_off.innerHTML = m.Count(i => !i) + " blocks are off";
};
var info_stats = new IHTMLDiv(info_stats_clicks, info_stats_off, info_stats_on);
info_stats.className = "info";
a.ForEach(
(x, y) =>
{
var n = new IHTMLDiv();
n.style.left = (x * usersettings.tile.w + usersettings.tile.w / 2) + "px";
n.style.top = (y * usersettings.tile.h + usersettings.tile.h / 2) + "px";
n.style.width = usersettings.tile.w + "px";
n.style.height = usersettings.tile.h + "px";
n.style.position = IStyle.PositionEnum.absolute;
n.style.overflow = IStyle.OverflowEnum.hidden;
//n.style.border = "1px solid black";
n.style.cursor = IStyle.CursorEnum.pointer;
canvas.appendChild(n);
var tween = new TweenDataDouble();
tween.ValueChanged += () => n.style.Opacity = tween.Value;
tween.Value = usersettings.tile.cold;
n.style.Opacity = tween.Value;
n.onmouseover += delegate
{
tween.Value = 1;
//canvas_bg_tween.Value = 0.5;
};
n.onmouseout += delegate
{
tween.Value = usersettings.tile.cold;
//canvas_bg_tween.Value = 1;
};
n.onclick += delegate
{
info_stats_clicks_count++;
Toggle(x, y);
info_stats_update();
};
a[x, y] = n;
UpdateColor(x, y);
}
);
var ani = new Timer(t =>
canvas_bg.style.left = -(int)System.Math.Floor((double)((IDate.Now.getTime() / 75) % canvas_size.x)) + "px");
var info = new IHTMLDiv();
var info_header_text = "Lights out 2";
Native.Document.title = info_header_text;
info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, info_header_text));
info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "based on SilverlightsOut"));
info.appendChild(new IHTMLBreak());
info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/CommentView,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "cjcraft blog post"));
info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.p,
@"Lights out is a one player puzzle that is played on a 5 by 5 grid of squares in which every square has two states: on and off. The game starts off with all squares off, where the goal is to turn on every square. By selecting a square, all the surrounding squares' (up, down, left, right) state is turned toggled. For example, on a 3 by 3 grid of squares with all squares off, if the center one is selected, it will turn 'on' the 4 up, down, left, right squares from it."));
info.appendChild(new IHTMLDiv("Mozilla based browsers seem to suffer in performance while animating contents under semitransparent elements."));
info.appendChild(new IHTMLButton("Animate background").Aggregate(btn => btn.onclick += delegate { ani.StartInterval(50); }));
info.appendChild(new IHTMLButton("Freeze background").Aggregate(btn => btn.onclick += delegate { ani.Stop(); }));
info.appendChild(info_stats);
info.appendChild(canvas);
info_stats_update();
DataElement.insertNextSibling(info);
}
public HulaGirl(IHTMLElement e)
{
IHTMLImage[] Frames = new HTML.Pages.FramesImages().Images;
e.insertNextSibling(Control);
Control.innerHTML = "hello world (javascript) : " /* base.SpawnString*/;
Control.onmouseover += delegate { Style.color = Color.Blue; };
Control.onmouseout += delegate { Style.color = Color.None; };
Style.cursor = IStyle.CursorEnum.pointer;
var btn = IHTMLButton.Create("go!",
delegate
{
Control.innerHTML = "you clicked me!";
}
);
var img = Frames[52];
img.AttachToDocument();
var _width = 120;
var _height = 100;
var _zoom = 1.0;
Native.Document.body.onmousewheel +=
ev =>
{
_zoom += 0.1 * ev.WheelDirection;
img.style.width = (_width * _zoom) + "px";
img.style.height = (_height * _zoom) + "px";
};
var index = 0;
new Timer(
delegate
{
index++;
if (index >= Frames.Length)
{
index = 0;
}
img.Orphanize();
img = Frames[index].AttachToDocument();
img.style.width = (_width * _zoom) + "px";
img.style.height = (_height * _zoom) + "px";
}, 0, 1000 / 24);
//var bytes = frames.Sum(x => x.Length);
//Console.WriteLine(new { bytes });
// Error 4 The 'await' operator can only be used within an async method. Consider marking this method with the 'async' modifier and changing its return type to 'Task'. X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 89 26 HulaGirl
//var frames = await Task.WhenAll(Frames.Select(k => k.bytes));
new IHTMLButton {
innerText = "gif"
}.AttachToDocument().WhenClicked(
async xbtn =>
{
Action <int> y = xindex =>
{
xbtn.innerText = new { xindex, Frames.Length }.ToString();
};
Console.WriteLine("are we loaded yet? " + new { Frames.Length });
// Error 4 The 'await' operator can only be used within an async method. Consider marking this method with the 'async' modifier and changing its return type to 'Task'. X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 89 26 HulaGirl
//var bytes = await Task.WhenAll(frames);
//var bytes = await Task.WhenAll(Frames.Select(k => k.bytes));
//byte[][] bytes = await frames;
//frames = (from f in Frames select f.bytes).ToArray();
// why do we have to use static?
//bytes = await Task.WhenAll(frames);
// Error 5 Cannot await 'System.Collections.Generic.IEnumerable<System.Threading.Tasks.Task<byte[]>>' X:\jsc.svn\examples\javascript\HulaGirl\HulaGirl\Library\HulaGirl.cs 117 34 HulaGirl
var bytes = await from f in Frames select f.bytes;
//bytes.DebuggerBreakIfMissing();
//Console.WriteLine("are we loaded yet? yes " + new { bytes.Length });
//Console.WriteLine(new { bytes.Length });
var a = new { Frames.First().width, Frames.First().height };
Console.WriteLine(new { a });
var src = await new GIFEncoderWorker(
a.width,
a.height,
delay: 1000 / 24,
//transparentColor: 0x0,
frames: bytes
,
AtFrame: y
);
Console.WriteLine("done!");
new IHTMLImage {
src = src
}.AttachToDocument();
}
);
}
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public LightsOut2(IHTMLElement DataElement)
{
// based on http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx
// what happens in beta2 when the anonymous types are immutable? :)
var usersettings = new { x = 5, y = 5, tile = new { w = 64, h = 64, cold = 0.8 } };
var a = new Array2D <IHTMLDiv>(usersettings.x, usersettings.y);
var m = a.ToBooleanArray();
var r = new System.Random();
m.ForEach(
(x, y) =>
{
m[x, y] = r.NextDouble() > 0.5;
}
);
var canvas = new IHTMLDiv();
canvas.className = "canvas";
var canvas_size = new __Type1 {
x = ((a.XLength + 1) * usersettings.tile.w), y = ((a.YLength + 1) * usersettings.tile.h)
};
canvas.style.position = IStyle.PositionEnum.relative;
canvas.style.border = "2px solid black";
canvas.style.width = canvas_size.x + "px";
canvas.style.height = canvas_size.y + "px";
var canvas_bg = new IHTMLDiv();
//var canvas_bg_tween = new TweenDataDouble();
//canvas_bg_tween.Value = 1;
//canvas_bg_tween.ValueChanged += delegate { canvas_bg.style.Opacity = canvas_bg_tween.Value; };
new HTML.Images.FromAssets.background().ToBackground(canvas_bg.style);
//canvas_bg.style.backgroundImage = Assets.Default.Background.StyleSheetURL;
canvas_bg.style.SetLocation(0, 0, canvas_size.x * 2, canvas_size.y);
canvas.appendChild(canvas_bg);
IStyleSheet.Default.AddRule(".info").style
.Aggregate(s =>
{
s.backgroundColor = Color.Black;
s.color = Color.White;
s.padding = "2em";
s.fontFamily = IStyle.FontFamilyEnum.Tahoma;
s.Float = IStyle.FloatEnum.right;
})
;
IStyleSheet.Default.AddRule(".canvas").style
.Aggregate(s => s.overflow = IStyle.OverflowEnum.hidden)
.Aggregate(s => s.backgroundColor = Color.Black)
;
IStyleSheet.Default.AddRule(".on").style
.Aggregate(s =>
new HTML.Images.FromAssets.vistaLogoOn().ToBackground(s)
)
//.Aggregate(s => s.Opacity = 0.8)
;
IStyleSheet.Default.AddRule(".off").style
.Aggregate(s =>
new HTML.Images.FromAssets.vistaLogoOff().ToBackground(s)
)
//.Aggregate(s => s.Opacity = 0.5)
;
Action <int, int> UpdateColor =
(x, y) =>
{
var n = a[x, y];
if (m[x, y])
{
n.className = "on";
}
else
{
n.className = "off";
}
};
Action <int, int> ToggleDirect =
(x, y) =>
{
var n = a[x, y];
if (n == null)
{
return;
}
m[x, y] = !m[x, y];
UpdateColor(x, y);
};
Action <int, int> Toggle =
(x, y) =>
{
//Console.WriteLine("click at: " + new { x, y } + " = " + m[x, y]);
var f = ToggleDirect.WithOffset(x, y);
f(-1, 0);
f(0, -1);
f(0, 0);
f(0, 1);
f(1, 0);
};
var info_stats_clicks = new IHTMLDiv();
var info_stats_clicks_count = 0;
var info_stats_off = new IHTMLDiv();
var info_stats_on = new IHTMLDiv();
Action info_stats_update =
() =>
{
info_stats_clicks.innerHTML = info_stats_clicks_count + " clicks made so far";
info_stats_on.innerHTML = m.Count(i => i) + " blocks are on";
info_stats_off.innerHTML = m.Count(i => !i) + " blocks are off";
};
var info_stats = new IHTMLDiv(info_stats_clicks, info_stats_off, info_stats_on);
info_stats.className = "info";
a.ForEach(
(x, y) =>
{
var n = new IHTMLDiv();
n.style.left = (x * usersettings.tile.w + usersettings.tile.w / 2) + "px";
n.style.top = (y * usersettings.tile.h + usersettings.tile.h / 2) + "px";
n.style.width = usersettings.tile.w + "px";
n.style.height = usersettings.tile.h + "px";
n.style.position = IStyle.PositionEnum.absolute;
n.style.overflow = IStyle.OverflowEnum.hidden;
//n.style.border = "1px solid black";
n.style.cursor = IStyle.CursorEnum.pointer;
canvas.appendChild(n);
var tween = new TweenDataDouble();
tween.ValueChanged += () => n.style.Opacity = tween.Value;
tween.Value = usersettings.tile.cold;
n.style.Opacity = tween.Value;
n.onmouseover += delegate
{
tween.Value = 1;
//canvas_bg_tween.Value = 0.5;
};
n.onmouseout += delegate
{
tween.Value = usersettings.tile.cold;
//canvas_bg_tween.Value = 1;
};
n.onclick += delegate
{
info_stats_clicks_count++;
Toggle(x, y);
info_stats_update();
};
a[x, y] = n;
UpdateColor(x, y);
}
);
var ani = new Timer(t =>
canvas_bg.style.left = -(int)System.Math.Floor((double)((IDate.Now.getTime() / 75) % canvas_size.x)) + "px");
var info = new IHTMLDiv();
var info_header_text = "Lights out 2";
Native.Document.title = info_header_text;
info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, info_header_text));
info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "based on SilverlightsOut"));
info.appendChild(new IHTMLBreak());
info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/CommentView,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "cjcraft blog post"));
info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.p,
@"Lights out is a one player puzzle that is played on a 5 by 5 grid of squares in which every square has two states: on and off. The game starts off with all squares off, where the goal is to turn on every square. By selecting a square, all the surrounding squares' (up, down, left, right) state is turned toggled. For example, on a 3 by 3 grid of squares with all squares off, if the center one is selected, it will turn 'on' the 4 up, down, left, right squares from it."));
info.appendChild(new IHTMLDiv("Mozilla based browsers seem to suffer in performance while animating contents under semitransparent elements."));
info.appendChild(new IHTMLButton("Animate background").Aggregate(btn => btn.onclick += delegate { ani.StartInterval(50); }));
info.appendChild(new IHTMLButton("Freeze background").Aggregate(btn => btn.onclick += delegate { ani.Stop(); }));
info.appendChild(info_stats);
info.appendChild(canvas);
info_stats_update();
DataElement.insertNextSibling(info);
}
