From 771f354d74118ffae715ad3e4228f992513cb2de Mon Sep 17 00:00:00 2001 From: OriginalUsername843 Date: Tue, 26 May 2026 12:19:08 -0600 Subject: [PATCH] Initial Commit --- games.html | 165 ++++++++++ index.html | 43 +++ index.html.251031 | 322 ++++++++++++++++++++ index.html.old | 15 + lib/codef_core.js | 649 ++++++++++++++++++++++++++++++++++++++++ lib/codef_scrolltext.js | 303 +++++++++++++++++++ res/logo3.png | Bin 0 -> 1233 bytes res/qtxfont.png | Bin 0 -> 789 bytes script.js | 118 ++++++++ style.css | 270 +++++++++++++++++ 10 files changed, 1885 insertions(+) create mode 100644 games.html create mode 100644 index.html create mode 100644 index.html.251031 create mode 100644 index.html.old create mode 100644 lib/codef_core.js create mode 100644 lib/codef_scrolltext.js create mode 100644 res/logo3.png create mode 100644 res/qtxfont.png create mode 100644 script.js create mode 100644 style.css diff --git a/games.html b/games.html new file mode 100644 index 0000000..740f855 --- /dev/null +++ b/games.html @@ -0,0 +1,165 @@ + + + + + + angry.hair | Game Server Fury + + + + + + + + + + + + + +
+
+
+

+ Self-Hosted Game Servers. +

+
+ +
+ +
+
+ Minecraft +
+
+
+ IP: angry.hair
+ Port: DEFAULT
+ Client Compatibility: Use either Java or Bedrock clients +
+
+ Status: ONLINE
+ Players: 0 / 50
+ Version: 1.20.4 (Paper) +
+
+
+ +
+
+ World of Warcraft +
+
+
+ Account creation and instructions: CLICK HERE +
+
+ Status: ONLINE
+ Expansion: Wrath of the Lich King (3.3.5a)
+ Server: wow.angry.hair
+ Realm: Angry Haircraft +
+
+
+ +
+
+ BF1942 + Desert Combat
+ +
+
+ IP: angry.hair:14567
+ Install DC Final + hotfixes. Pure rage. +
+
+ Mod: Desert Combat 0.7
+ Map: Baghdad Nights
+ Status: OFFLINE +
+
+
+ +
+
+ Unreal Tournament 2004
+ +
+
+ IP: angry.hair:7777
+ Patch to 3369. All bots. Pure skill. +
+
+ Mode: CTF
+ Map: Face3
+ Status: ONLINE +
+
+
+ +
+
+ Valheim +
+
+
+ IP: angry.hair:2456
+ Password: badhairday
+ Vanilla+ mods. Vikings welcome. +
+
+ World: FuryViking
+ Seed: ANGRYHAIR
+ Status: OFFLINE +
+
+
+
+ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..602f080 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + angry.hair | Self-hosted Server Fury + + + + + + + + + + + + +
+
+
+

+ Self-Hosted Stuff. +

+
+ +
+
+

🎮


Game Servers +

⚙️


Self-hosted Services +
+
+ + + + + + diff --git a/index.html.251031 b/index.html.251031 new file mode 100644 index 0000000..6a0dd66 --- /dev/null +++ b/index.html.251031 @@ -0,0 +1,322 @@ + + + + + + angry.hair | Game Server Fury + + + + + + + + + + + + +
+
+
+

+ Self-Hosted Servers. +

+
+ +
+
+ +
+
Minecraft
+
+ Version: 1.20.4 (Paper)
+ Players: 3000 / 20
+ Status: ONLINE +
+ CONNECT +
+ IP: angry.hair
+ Port: DEFAULT
+ Request an invite: Mail david.n.mitchell@gmail.com
+ Use either Java or Bedrock clients +
+
+ + +
+
World of Warcraft
+
+ Expansion: Wrath of the Lich King
+ Realm: Angry Haircraft
+ Status: ONLINE +
+ DOWNLOAD CLIENT + DOWNLOAD CLIENT (HD) +
+ 1. Email Dave to request an account:
+  - include your preferred username
+  - include the password that you will use
+ 2. You will get a password in the email response so you can download one of the clients above
+ 3. Unzip client, run wow.exe, and use credentials from email
+ 4. ???
+ 5. Profit +
+
+ + +
+
BF1942 + Desert Combat
+
+ Mod: Desert Combat 0.7
+ Map: Baghdad Nights
+ Status: ONLINE +
+ JOIN SERVER +
+ IP: angry.hair:14567
+ Install DC Final + hotfixes. Pure rage. +
+
+ + +
+
UT2004
+
+ Mode: Onslaught
+ Map: ONS-Torlan
+ Status: ONLINE +
+ LAUNCH +
+ IP: angry.hair:7777
+ Patch to 3369. All bots. Pure skill. +
+
+ + +
+
Valheim
+
+ World: FuryViking
+ Seed: ANGRYHAIR
+ Status: ONLINE +
+ JOIN WORLD +
+ IP: angry.hair:2456
+ Password: badhairday
+ Vanilla+ mods. Vikings welcome. +
+
+
+
+ + + + + + diff --git a/index.html.old b/index.html.old new file mode 100644 index 0000000..c8bd906 --- /dev/null +++ b/index.html.old @@ -0,0 +1,15 @@ + + + + + + Angry Hair + + +
+

Angery Hair

+ Winders +
+ + + diff --git a/lib/codef_core.js b/lib/codef_core.js new file mode 100644 index 0000000..746b489 --- /dev/null +++ b/lib/codef_core.js @@ -0,0 +1,649 @@ +/*------------------------------------------------------------------------------ +Copyright (c) 2011 Antoine Santo Aka NoNameNo + +This File is part of the CODEF project. + +More info : http://codef.santo.fr +Demo gallery http://www.wab.com + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +------------------------------------------------------------------------------*/ + +window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(/* function */ callback, /* DOMElement */ element){ + window.setTimeout(callback, 1000 / 60); + }; +})(); + +/** + Create a new canvas object.
+ canvas(w, h, divname)
+ + @class canvas + @param {Number in pixel} w The Width of the canvas you want to create. + @param {Number in pixel} h The Height of the canvas you want to create. + @param {String} [divname] The div id you want the create the canvas to. If not specified, the canvas will be hidden. + @property {Number in pixel} width The Width of the canvas. + @property {Number in pixel} height The Height of the canvas. + @property {Object} canvas object of this canvas. ;) + @property {Object} contex the 2d context of this canvas. + @property {Number in pixel} handlex the x coord of the handle (0 by default). + @property {Number in pixel} handley the y coord of the handle (0 by default). + @property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset). + @property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset). + @property {Number} tilestart the number of the first tile (usefull for tileset like font). + @example + var mycanvas = new canvas(640, 480, "main"); + +*/ +function canvas(w, h, divname){ + this.width=w; + this.height=h; + this.canvas; + this.contex; + this.canvas = document.createElement("canvas"); + if(divname) document.getElementById(divname).appendChild(this.canvas); + this.canvas.setAttribute('width', w); + this.canvas.setAttribute('height', h); + this.canvas.id="maincanvas"; + this.contex = this.canvas.getContext('2d'); + + this.handlex=0; + this.handley=0; + this.midhandled=false; + this.tilew=0; + this.tileh=0; + this.tilestart=0; + + /** + Fill the canvas.
+ canvas.fill(color)
+ + @function canvas.fill + @param {Color} color The color you want to fill the canvas with. + @example + mycanvas.fill('#FF0000'); + */ + this.fill = function(color){ + var tmp = this.contex.fillStyle; + var tmp2= this.contex.globalAlpha; + this.contex.globalAlpha=1; + this.contex.fillStyle = color; + this.contex.fillRect (0, 0, this.canvas.width, this.canvas.height); + this.contex.fillStyle = tmp + this.contex.globalAlpha=tmp2; + } + + /** + Clear the canvas.
+ + @function canvas.clear + @example + mycanvas.clear(); + */ + this.clear = function(){ + this.contex.clearRect (0, 0, this.canvas.width, this.canvas.height); + } + + /** + Draw a plot on the canvas.
+ canvas.plot(x1,y1,width,color)
+ + @function canvas.plot + @param {Number in pixel} x The x coord you want to plot in the canvas. + @param {Number in pixel} y The y coord you want to plot in the canvas. + @param {Number in pixel} width The size of the plot. + @param {Color} color The color of the plot. + @example + mycanvas.plot(20,20,50,'#FF0000'); + */ + this.plot = function(x,y,width,color){ + // save old fillstyle + var oldcolor = this.contex.fillStyle ; + + this.contex.fillStyle=color; + this.contex.fillRect(x,y,width,width) ; + + // restore old fillstyle + this.contex.fillStyle=oldcolor; + } + + /** + Draw a line on the canvas.
+ canvas.line(x1,y1,x2,y2,width,color)
+ + @function canvas.line + @param {Number in pixel} x1 The x coord of the line start in the canvas. + @param {Number in pixel} y1 The y coord of the line start in the canvas. + @param {Number in pixel} x2 The x coord of the line end in the canvas. + @param {Number in pixel} y2 The y coord of the line end in the canvas. + @param {Number in pixel} width The width of the line. + @param {Color} color The color of the plot. + @example + mycanvas.line(0,0,50,50,2,'#FF0000'); + */ + this.line = function(x1,y1,x2,y2,width,color){ + var tmp=this.contex.strokeStyle; + this.contex.strokeStyle=color; + this.contex.lineWidth=width; + this.contex.beginPath(); + this.contex.moveTo(x1,y1); + this.contex.lineTo(x2,y2); + this.contex.stroke(); + this.contex.closePath(); + this.contex.strokeStyle=tmp; + } + + /** + Draw a filled triangle on the canvas.
+ canvas.triangle(x1,y1,x2,y2,x3,y3,color)
+ + @function canvas.triangle + @param {Number in pixel} x1 The x coord of the 1st edge of the triangle in the canvas. + @param {Number in pixel} y1 The y coord of the 1st edge of the triangle in the canvas. + @param {Number in pixel} x2 The x coord of the 2nd edge of the triangle in the canvas. + @param {Number in pixel} y2 The y coord of the 2nd edge of the triangle in the canvas. + @param {Number in pixel} x3 The x coord of the 3rd edge of the triangle in the canvas. + @param {Number in pixel} y3 The y coord of the 3rd edge of the triangle in the canvas. + @param {Color} color The color of the plot. + @example + mycanvas.triangle(150,150,250,250,50,250,'#FF0000'); + */ + this.triangle = function(x1,y1,x2,y2,x3,y3,color){ + this.contex.beginPath(); + this.contex.moveTo(x1,y1); + this.contex.lineTo(x2,y2); + this.contex.lineTo(x3,y3); + this.contex.closePath(); + this.contex.fillStyle=color; + this.contex.fill(); + } + + /** + Draw a filled quad on the canvas.
+
+ it can be used with 5 params :
+ canvas.quad(x1,y1,w,h,color)
+
+ or it can be used with 9 params :
+ canvas.quad(x1,y1,x2,y2,x3,y3,x4,y4,color)
+ @function canvas.quad + @param {Number in pixel} x1 The x coord of the 1st edge of the quad in the canvas. + @param {Number in pixel} y1 The y coord of the 1st edge of the quad in the canvas. + @param {Number in pixel} x2 The x coord of the 2nd edge of the quad in the canvas. + @param {Number in pixel} y2 The y coord of the 2nd edge of the quad in the canvas. + @param {Number in pixel} x3 The x coord of the 3rd edge of the quad in the canvas. + @param {Number in pixel} y3 The y coord of the 3rd edge of the quad in the canvas. + @param {Number in pixel} x4 The x coord of the 4th edge of the quad in the canvas. + @param {Number in pixel} y4 The y coord of the 4th edge of the quad in the canvas. + @param {Number in pixel} w The Width of the quad in the canvas. + @param {Number in pixel} h The Height of the quad in the canvas. + @param {Color} color The color of the plot. + @example + mycanvas.quad(150,150,250,250,'#FF0000'); + or + mycanvas.quad(0,150,300,150,250,250,50,250,'#FF0000'); + */ + this.quad = function(x1,y1,x2,y2,x3,y3,x4,y4,color){ + // save old fillstyle + var oldcolor = this.contex.fillStyle ; + + // if x1 y1 width height color + if(arguments.length==5){ + this.contex.fillStyle=x3; + this.contex.fillRect(x1,y1,x2,y2) ; + } + // if all quad coordinates + else{ + this.contex.beginPath(); + this.contex.moveTo(x1,y1); + this.contex.lineTo(x2,y2); + this.contex.lineTo(x3,y3); + this.contex.lineTo(x4,y4); + this.contex.closePath(); + this.contex.fillStyle=color; + this.contex.fill(); + } + // restore old fillstyle + this.contex.fillStyle=oldcolor; + } + + /** + Init a tileset canvas.
+ canvas.initTile(tilew,tileh, tilestart)
+ + @function canvas.initTile + @param {Number in pixel} tilew The Width of one tile. + @param {Number in pixel} tileh The Height of one tile. + @param {Number} [tilestart] The number of the first tile. (0 by default) + @example + mycanvas.initTile(32,32); + */ + this.initTile=function(tilew,tileh, tilestart){ + this.tileh=tileh; + this.tilew=tilew; + if(typeof(tilestart)!='undefined') + this.tilestart=tilestart; + } + + /** + Draw the canvas to another canvas.
+ canvas.draw(dst,x,y,alpha, rot,w,h)
+ + @function canvas.draw + @param {Object} dst The destination canvas. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord). + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [w] The normalized zoom factor on x (1 by default). + @param {Number} [h] The normalized zoom factor on y (1 by default). + @example + mycanvas.draw(destcanvas,10,10,1,0,1,1); + */ + this.draw = function(dst,x,y,alpha, rot,w,h){ + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + if(arguments.length==3 || arguments.length==4) + dst.contex.drawImage(this.canvas, x-this.handlex,y-this.handley); + else if(arguments.length==5){ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.canvas, 0,0); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else{ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.scale(w,h); + dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.canvas, 0,0); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + dst.contex.globalAlpha=tmp; + } + + /** + Draw a tile from this canvas to another canvas.
+ canvas.drawTile(dst, nb, x, y, alpha, rot, w, h)
+ + @function canvas.drawTile + @param {Object} dst The destination canvas. + @param {Number} nb the tile number. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord). + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [w] The normalized zoom factor on x (1 by default). + @param {Number} [h] The normalized zoom factor on y (1 by default). + @example + mycanvas.drawTile(destcanvas,5,10,10,1,0,1,1); + */ + this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){ + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + this.drawPart(dst,x,y,Math.floor((nb%(this.canvas.width/this.tilew)))*this.tilew,Math.floor(nb/(this.canvas.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h); + dst.contex.globalAlpha=tmp; + + } + + /** + Draw a part of this canvas to another canvas.
+ canvas.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)
+ + @function canvas.drawPart + @param {Object} dst The destination canvas. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord). + @param {Number in pixel} partx The x coord of the part in the source canvas. + @param {Number in pixel} party The y coord of the part in the source canvas. + @param {Number in pixel} partw The width of the part in the source canvas. + @param {Number in pixel} parth The height of the part in the source canvas. + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [zx] The normalized zoom factor on x (1 by default). + @param {Number} [zy] The normalized zoom factor on y (1 by default). + @example + mycanvas.drawTile(mycanvas,10,10,0,0,50,50,1,0,1,1); + */ + this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){ + if(partx<0) { + x-=partx/(this.midhandled==true?2:1); + partw+=partx; + partx=0; + } else { + if (this.midhandled==false) { + partw = Math.min(partw,this.width-partx); + } + } + if(party<0) { + y-=party/(this.midhandled==true?2:1); + parth+=party; + party=0; + } else { + if (this.midhandled==false) { + parth = Math.min(parth,this.height-party); + } + } + if(partw<=0 || parth<=0){ + return; + } + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + if(arguments.length==7 || arguments.length==8){ + dst.contex.translate(x,y); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else if(arguments.length==9){ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else{ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.scale(zx,zy); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + dst.contex.globalAlpha=tmp; + } + + /** + Set the handle coord of this canvas to the center.
+ + @function canvas.setmidhandle + @example + mycanvas.setmidhandle(); + */ + this.setmidhandle=function(){ + this.handlex=parseInt(this.canvas.width/2); + this.handley=parseInt(this.canvas.height/2); + this.midhandled=true; + } + + /** + Set the handle of the canvas.
+ canvas.sethandle(x,y)
+ + @function canvas.sethandle + @param {Number in pixel} x The x coord of the handle of the canvas. + @param {Number in pixel} y The y coord of the handle of the canvas. + @example + mycanvas.sethandle(50,50); + */ + this.sethandle=function(x,y){ + this.handlex=x; + this.handley=y; + this.midhandled=false; + } + + this.print=function(dst, str, x, y, alpha, rot, w, h){ + for(var i=0; iCreate an image object and load a remote/local png/gif/jpg in it.
+ image(img)
+ + @class image + @param {string} img local or url to an jpg/png/gif image. + @property {Object} img the dom image object. + @property {Number in pixel} handlex the x coord of the handle (0 by default). + @property {Number in pixel} handley the y coord of the handle (0 by default). + @property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset). + @property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset). + @property {Number} tilestart the number of the first tile (usefull for tileset like font). + @example + // with a local file + var mylogo = new image('logo.png'); + + // with a remote image + var mylogo = new image('http://www.myremotesite.com/logo.png'); + +*/ +function image(img){ + this.img = new Image(); + this.img.src=img; + this.handlex=0; + this.handley=0; + this.midhandled=false; + this.tilew=0; + this.tileh=0; + this.tilestart=0; + + /** + Init a tileset image.
+ image.initTile(tilew,tileh, tilestart)
+ + @function image.initTile + @param {Number in pixel} tilew The Width of one tile. + @param {Number in pixel} tileh The Height of one tile. + @param {Number} [tilestart] The number of the first tile. (0 by default) + @example + myimage.initTile(32,32); + */ + this.initTile=function(tilew,tileh,tilestart){ + this.tileh=tileh; + this.tilew=tilew; + if(typeof(tilestart)!='undefined') + this.tilestart=tilestart; + + } + +/** + Draw the image to a canvas.
+ image.draw(dst,x,y,alpha, rot,w,h)
+ + @function image.draw + @param {Object} dst The destination canvas. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image). + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [w] The normalized zoom factor on x (1 by default). + @param {Number} [h] The normalized zoom factor on y (1 by default). + @example + myimage.draw(destcanvas,10,10,1,0,1,1); + */ + this.draw = function(dst,x,y,alpha, rot,w,h){ + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + if(arguments.length==3 || arguments.length==4) + dst.contex.drawImage(this.img, x-this.handlex,y-this.handley); + else if(arguments.length==5){ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.img, 0,0); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else{ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.scale(w,h); + dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.img, 0,0); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + dst.contex.globalAlpha=tmp; + } + + /** + Draw a tile from this image to a canvas.
+ image.drawTile(dst, nb, x, y, alpha, rot, w, h)
+ + @function image.drawTile + @param {Object} dst The destination canvas. + @param {Number} nb the tile number. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image). + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [w] The normalized zoom factor on x (1 by default). + @param {Number} [h] The normalized zoom factor on y (1 by default). + @example + myimage.drawTile(destcanvas,5,10,10,1,0,1,1); + */ + this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){ + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + this.drawPart(dst,x,y,Math.floor((nb%(this.img.width/this.tilew)))*this.tilew,Math.floor(nb/(this.img.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h); + dst.contex.globalAlpha=tmp; + + } + + /** + Draw a part of this image to a canvas.
+ image.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)
+ + @function image.drawPart + @param {Object} dst The destination canvas. + @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image). + @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image). + @param {Number in pixel} partx The x coord of the part in the source canvas. + @param {Number in pixel} party The y coord of the part in the source canvas. + @param {Number in pixel} partw The width of the part in the source canvas. + @param {Number in pixel} parth The height of the part in the source canvas. + @param {Number} [alpha] The normalized value of the alpha (1 by default). + @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis). + @param {Number} [zx] The normalized zoom factor on x (1 by default). + @param {Number} [zy] The normalized zoom factor on y (1 by default). + @example + myimage.drawTile(mycanvas,10,10,0,0,50,50,1,0,1,1); + */ + this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){ + if(partx<0) { + x-=partx/(this.midhandled==true?2:1); + partw+=partx; + partx=0; + } else { + if (this.midhandled==false) { + partw = Math.min(partw,this.img.width-partx); + } + } + if(party<0) { + y-=party/(this.midhandled==true?2:1); + parth+=party; + party=0; + } else { + if (this.midhandled==false) { + parth = Math.min(parth,this.img.height-party); + } + } + if(partw<=0 || parth<=0){ + return; + } + var tmp=dst.contex.globalAlpha; + if(typeof(alpha)=='undefined') alpha=1; + dst.contex.globalAlpha=alpha; + if(arguments.length==7 || arguments.length==8){ + dst.contex.translate(x,y); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else if(arguments.length==9){ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + else{ + dst.contex.translate(x,y); + dst.contex.rotate(rot*Math.PI/180); + dst.contex.scale(zx,zy); + if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley); + dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth); + dst.contex.setTransform(1, 0, 0, 1, 0, 0); + } + dst.contex.globalAlpha=tmp; + } + + + + /** + Set the handle coord of this image to the center.
+ + @function image.setmidhandle + @example + myimage.setmidhandle(); + */ + this.setmidhandle=function(){ + this.handlex=parseInt(this.img.width/2); + this.handley=parseInt(this.img.height/2); + this.midhandled=true; + } + + /** + Set the handle of the image.
+ image.sethandle(x,y)
+ + @function image.sethandle + @param {Number in pixel} x The x coord of the handle of the image. + @param {Number in pixel} y The y coord of the handle of the image. + @example + myimage.sethandle(50,50); + */ + this.sethandle=function(x,y){ + this.handlex=x; + this.handley=y; + this.midhandled=false; + } + + this.print=function(dst, str, x, y, alpha, rot, w, h){ + for(var i=0; i y) ? 1 : 0)); +} + +function sortPosy(a, b) { + var x = a.posy; + var y = b.posy; + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); +} + +function scrolltext_horizontal(){ + this.scroffset=0; + this.oldspeed=0; + this.speed=1; + this.font; + this.letters = new Object(); + this.scrtxt=" "; + this.pausetimer=0; + this.pausedelay=0; + + this.init = function(dst, font,speed,sinparam,type){ + this.speed=speed; + this.dst=dst; + this.font=font; + this.fontw = this.font.tilew; + this.fonth = this.font.tileh; + this.fontstart = this.font.tilestart; + this.wide=Math.ceil(this.dst.canvas.width/this.fontw)+1; + for(i=0;i<=this.wide;i++){ + this.letters[i]=new ltrobj(Math.ceil((this.wide*this.fontw)+i*this.fontw),0,this.scrtxt.charCodeAt(this.scroffset)); + this.scroffset++; + } + if(typeof(sinparam)!='undefined') + this.sinparam=sinparam; + if(typeof(type)=='undefined') + this.type=0; + else + this.type=type; + } + + this.draw = function(posy){ + var prov = 0; + var temp = new Array(); + var tmp=this.dst.contex.globalAlpha; + this.dst.contex.globalAlpha=1; + var oldvalue=new Array(); + var i; + if(typeof(this.sinparam)!='undefined'){ + for(var j=0;j this.scrtxt.length-1) + this.scroffset=0; + } + } + } + if(typeof(this.sinparam)!='undefined'){ + for(var j=0;j this.scrtxt.length-1) + this.scroffset=0; + } + } + } + if(typeof(this.sinparam)!='undefined'){ + for(var j=0;jLqiJ#!!Mvv!wUw6QUeBtR|yOZRx=nF#0%!^3bX-A za29w(7Bet#3xhBt!>l=|5C}7^Gd_Zysqq>4>E5pPIf`T(rT6+%e{`}Ja>zV3HY}z;H z6_$qI);k;G4m2JgI32^uc;&n8qaV4ClJC15souHMVqSFj{7wemnjQ-|HM?(adF#5K zUwicZL;>@YQeBpS`)_alKdL-!Zfm zXHR7F$Tgp?p;gWhv4nAh2XoGuqqDxuiDQ25b;sKN`@KKc_6lB;%g=q^nDbHdu6LsU zUP+@Pi_7<2Kev72_4(cWb1r8;i0Q0;{`}tT`@75!-Fm$Ct?dL|yQS5dIeX2WPkzj{ zonPJKzU)ul-1t+n49e52pT)ID>=HkCCysr+(xc$RpRND=K6&HI&*I0QFMRwm>BQTb zI-t?le#TYp+in+k_Rp@kAg-VDFUPU0SAJA^s!9H+`0gLz4J@&+~ixu9t30-Ywb`JNbR( z=hx?z_I|TUsNTlwf40i~$#09FU(+Yrt@YGhX?b%q?=i*u#}}&cCQM{IpadlwT%{B? zXDc#PYb8x=yYlXJ?8mr@7alvA6I${wWq%h~y_Y>YKl^d;?*H!+Km16kwolv>^!#_C z`{UB6cQf{=U*B1NF@=BIJ+b4<-TvR@+$+AQ@Q?WM<*s|GW*f)dd|upNlW%+9`04ed z;-|K;-}b2faQ5o2AA7$qcrCd8*5}nJHk-~rm#fy>Ht+q+Pu{*#2~*~ONbl2*f4$?; z4exW$SAF^%e)RdiS$BP#AB$J)zxe5o))8%~^Zl28PRX(}Kk@zEXItO8*l-(yw}Jds=@Sa5*K*ZGVC5%exy_78S>z z{im39;lb>Z!kg9UJtF22t_+Rvw+$EDrX1nSAXWzqrgKjx%aPWjRpjb6!Q2I^M1d7{=5Eqy&jf!e}6x^ zu5LdY|7!c_^I3oI?YC>Y&*vWf44V13I`6aQ!D_$Jaj&+I`WLVKy!WxT%hJDk{+wbr zD*tyi|FX+|ciT^N{MGiGy}zoKU-te`wa!(oAJz7Eb^Fhne|Kqb)x$SidjJ3c0000u zf#>NDFnWWZU7wvGtVaB-k*(4FX8l-CEOtjwN8?gc|o z{YTrY**#Cac5Ur{B)@3;uJ-Hg-|PRb>R+t-&zgTxdy0;~tN&2@JL`C&{;QjOyyNWR zf3Mnq*8Dx4*?N^NkEs0PYO}^|z`ARln7omcyZrc+L8W=FocepOpg?m8&X;DLb+aXZm5Q z{#En8+w<>UPpYbnciji00000z!AtJ zu+`NfSFf+0P^uys-tQn?J#w+Chpg(X*7?=-niLa|%Byz2E|C4X-fV5@(uvX?CXNdy)E000000FK}nV%@iz T3Z-@w00000NkvXXu0mjfv;dr3 literal 0 HcmV?d00001 diff --git a/script.js b/script.js new file mode 100644 index 0000000..c37c98e --- /dev/null +++ b/script.js @@ -0,0 +1,118 @@ +// CRACKTRO MADED WITH CODEF + +var run = ""; +var replay = 1; + +var mycanvas; +var mycanvas2; +var logo = new image("res/logo3.png"); +var font = new image("res/qtxfont.png"); + +var distsin13 = []; +var distpre13 = 0; +var distcount13 = 0; +var distcount13old = 0; +var myscrolltext; + +var myscrollparam = [ + {myvalue: 0, amp: 25, inc:0.2, offset: -0.04} +]; + +var text = "YOUR HAIR IS MAD, YOUR GAMES ARE LIVE TODAY, WE WILL LEARN TO MAKE PLUTONIUM USING COMMON HOUSEHOLD ITEMS YOUR CAR IS A BABY CARRIAGE TAKING THAT MEDAL AND GIVING IT TO RALPH SINCE 2025 LOOK UP, LOOK DOWN, NOW LOOK AT MISTER FRYING PAN GET THAT CORN OUTTA MY FACE FIRST SHALT THOU TAKE OUT THE HOLY PIN, THEN SHALT THOU COUNT TO THREE, NO MORE, NO LESS, THREE SHALL BE THE NUMBER OF THE COUNTING, AND THE NUMBER OF THE COUNTING SHALL BE THREE. FOUR SHALT THOU NOT COUNT, NEITHER COUNT THOU TWO, EXCEPTING THAT THOU THEN PROCEED TO THREE. FIVE IS RIGHT OUT. ONCE THE NUMBER THREE, BEING THE THIRD NUMBER, BE REACHED, THEN LOBBEST THOU THY HOLY HAND GRENADE OF ANTIOCH TOWARDS THY FOE, WHO BEING NAUGHTY IN MY SIGHT, SHALL SNUFF IT. M00SE WAS HERE WE APOLOGIZE FOR THE FAULT IN THE SUBTITLES, THOSE RESPONSIBLE HAVE BEEN SACKED. REGRETTABLY, WE SEEM TO BE OUT OF FUNNY TEXT IN THIS SUBTITLE, I COMMEND YOUR WAITING THIS LONG "; + + + +function init() { + + mycanvas = new canvas(640, 100, "main"); + mycanvas2 = new canvas(1040, 65, "main2"); + + myscrolltext = new scrolltext_horizontal(); + myscrolltext.scrtxt = text; + font.initTile(16, 12, 32); + + myscrolltext.init(mycanvas2, font, 1, myscrollparam); + + logo.setmidhandle(); + logo.initTile(361, 1); + + for (var i = 0; i < 126 * 2; i++) { + distsin13[i] = 40 * Math.sin(i * 0.05); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 30; i++) { + distsin13[i + distpre13] = 150 * Math.sin(i * 0.05); + } + for (var i = 30; i < 80; i++) { + distsin13[i + distpre13] = 150; + } + for (var i = 30; i < 90; i++) { + distsin13[50 + i + distpre13] = 150 * Math.sin(i * 0.05); + } + for (var i = 88; i < 150; i++) { + distsin13[50 + i + distpre13] = -140; + } + for (var i = 90; i < 149; i++) { + distsin13[110 + i + distpre13] = 150 * Math.sin(9.6 + i * 0.02); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 126 * 2; i++) { + distsin13[i + distpre13] = 40 * Math.sin(i * 0.05); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 252 * 2; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.025); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 315; i++) { + distsin13[i + distpre13] = 100 * Math.sin(i * 0.02) + 5 * Math.sin(i * 0.5); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 630; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.01); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 100; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.01) + 2 * Math.sin(i * 1); + } + for (var i = 100; i < 200; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.01); + } + for (var i = 200; i < 300; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.01) + 2 * Math.sin(i * 1); + } + for (var i = 300; i < 628; i++) { + distsin13[i + distpre13] = 80 * Math.sin(i * 0.01); + } + + distpre13 = distsin13.length; + for (var i = 0; i < 200; i++) { + distsin13[i + distpre13] = 40 * Math.sin(i * 0.05); + } + + eval(run); + go(); +} +function go() { + mycanvas.clear(); + mycanvas2.clear(); + myscrolltext.draw(25); + + distcount13old = distcount13; + for (var i = 0; i < 170; i++) { + logo.drawTile(mycanvas, i, 320 + distsin13[distcount13 % distsin13.length], i); + distcount13++; + } + distcount13 = distcount13old + 1; + if (replay == 1) + requestAnimFrame(go); +} + +// innit, bruv +init(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9733ef3 --- /dev/null +++ b/style.css @@ -0,0 +1,270 @@ +:root { + --bg: #0a0a0a; + --bg2: rgba(10,10,10,0.5);; + --card: #1a1a1a; + --text: #ff4d4d; + --text-muted: #ff9999; + --accent: #ff1a1a; + --hair: #ff3333; + --shadow: rgba(255, 50, 50, 0.3); + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background: var(--bg); + color: var(--text-muted); + font-family: 'Courier New', monospace; + line-height: 1.6; + overflow-x: hidden; + } + + ul > li > ul { + margin-left: 10px; + } + + .glitch { + position: relative; + display: inline-block; + color: var(--hair); + font-weight: bold; + font-size: 2.5rem; + letter-spacing: 2px; + text-shadow: + 2px 2px 0 #ff1a1a, + -2px -2px 0 #ff1a1a, + 0 0 10px rgba(255, 50, 50, 0.8); + animation: glitch 2s infinite; + } + + @keyframes glitch { + 0%, 100% { text-shadow: 2px 2px 0 #ff1a1a, -2px -2px 0 #ff1a1a, 0 0 10px rgba(255,50,50,0.8); } + 14% { text-shadow: -2px -2px 0 #ff1a1a, 2px 2px 0 #ff1a1a, 0 0 15px rgba(255,50,50,1); } + 15% { text-shadow: 3px -3px 0 #ff1a1a, -3px 3px 0 #ff1a1a, 0 0 20px rgba(255,50,50,1); } + 16% { text-shadow: none; } + 17% { text-shadow: 2px 2px 0 #ff1a1a, -2px -2px 0 #ff1a1a, 0 0 10px rgba(255,50,50,0.8); } + } + + header { + text-align: center; + padding: 0rem 1rem; + background: linear-gradient(to bottom, #1a0000, var(--bg2)); + border-bottom: 3px dashed var(--accent); + position: fixed; + top:0; + left:0; + z-index:1; + width:100%; + backdrop-filter: blur(10px); + overflow: hidden; + } + + header::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(255, 50, 50, 0.05) 10px, + rgba(255, 50, 50, 0.05) 20px + ); + pointer-events: none; + } + + h1 { + font-size: 3.5rem; + margin-bottom: 0.5rem; + color: var(--hair); + } + + .tagline { + font-size: 1.3rem; + color: #ff6666; + text-transform: uppercase; + letter-spacing: 3px; + margin-top: 1rem; + } + + main { + max-width: 900px; + margin: 1rem auto; + padding: 0 1rem; + } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; + margin-top: 15rem; + } + + .game-card { + background: var(--card); + border: 2px solid var(--accent); + border-radius: 8px; + padding: 1.5rem; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + box-shadow: 0 0 15px var(--shadow); + } + + .game-card:hover { + transform: translateY(-8px); + box-shadow: 0 0 25px rgba(255, 50, 50, 0.6); + border-color: #ff6666; + } + + .game-card::before { + content: "🔥"; + position: absolute; + top: -10px; + right: -10px; + font-size: 2rem; + opacity: 0.3; + transform: rotate(15deg); + } + + .game-title { + font-size: 1.5rem; + color: var(--hair); + margin-bottom: 0.5rem; + font-weight: bold; + text-transform: uppercase; + } + + .game-info { + margin-top: 1rem; + font-size: 0.95rem; + color: var(--text-muted); + } + + .fancy-btn { + display: inline-block; + background: linear-gradient(to bottom, #1a0000, var(--bg2)); + color: white; + padding: 0.6rem 1.2rem; + border-radius: 4px; + text-decoration: none; + font-weight: bold; + font-size: 1.2rem; + transition: 0.3s; + margin-top: 0.5rem; + box-shadow: 0 0 10px rgba(255, 26, 26, 0.5); + text-align:center; + user-select: none; + } + + .fancy-btn h1 { + font-size: 10rem; + } + + .fancy-btn:hover { + background: #ff3333; + transform: scale(1.05); + box-shadow: 0 0 20px rgba(255, 51, 51, 0.8); + } + + .fancy-btn:active { + transform: scale(0.95); + } + + .instructions { + font-size: 0.85rem; + background: rgba(255, 50, 50, 0.1); + padding: 0.8rem; + border-left: 3px solid var(--hair); + border-radius: 0 4px 4px 0; + } + + footer { + text-align: center; + padding: 2rem 1rem; + margin-top: 3rem; + color: #993333; + font-size: 0.9rem; + border-top: 1px dashed var(--accent); + } + + .hair-rage { + font-size: 1.8rem; + animation: rage 1.5s infinite; + } + + @keyframes rage { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(5deg); } + 75% { transform: rotate(-5deg); } + } + + @media (max-width: 600px) { + h1 { font-size: 2.5rem; } + .glitch { font-size: 2rem; } + .grid { grid-template-columns: 1fr; } + } + + /* ----- Accordion container ----- */ + .game-section { + border: 1px solid #ccc; + margin-bottom: 1rem; + border-radius: 6px; + overflow: hidden; + background: var(--card); + border: 2px solid var(--accent); + border-radius: 8px; + padding: 1.5rem; + transition: all 0.3s ease; + box-shadow: 0 0 15px var(--shadow); + position: relative; + } + + .game-header::before { + content: "🔥"; + position: absolute; + top: -10px; + right: -10px; + font-size: 2rem; + opacity: 0.3; + transform: rotate(15deg); + } + + /* ----- Header (clickable) ----- */ + .game-header { + padding: 1rem; + cursor: pointer; + font-weight: bold; + display: flex; + justify-content: space-between; + align-items: center; + user-select: none; + transition: background 0.2s; + font-size: 125%; + } + .game-header:hover { background: #040404; } + + .game-header::after { + content: "▼"; + font-size: 0.8rem; + transition: transform 0.25s; + } + .game-section.open .game-header::after { + transform: rotate(180deg); + } + + /* ----- Content (hidden by default) ----- */ + .game-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.35s ease; + padding: 0 1rem; + } + .game-section.open .game-content { + max-height: 1500px; /* big enough for any realistic content */ + padding: 1rem; + }