angry.hair/Website
2
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source
This commit is contained in:
OriginalUsername843 2026-05-26 12:19:08 -06:00
commit 771f354d74
10 changed files with 1885 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
games.html Normal file
View file

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>angry.hair | Game Server Fury</title>
<meta name="description" content="Home-hosted game servers with attitude. Join the rage. Connect to Minecraft, WoW, UT2004, BF1942 Desert Combat, and Valheim." />
<!-- Favicon (optional angry hair icon) -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💇🏽‍♂️</text></svg>">
<!--libcodef-->
<script src="lib/codef_core.js"></script>
<script src="lib/codef_scrolltext.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<div id="main"></div>
<div id="main2"></div>
<p class="glitch" style="margin-top: 1rem; font-size: 1.1rem; color: #ff9999;">
Self-Hosted Game Servers.
</p>
</header>
<main>
<section class="game-section" style="margin-top:15rem">
<div class="game-header">
<span>Minecraft</span>
</div>
<div class="game-content">
<div class="instructions">
<strong>IP:</strong> <code>angry.hair</code><br>
<strong>Port:</strong> <code>DEFAULT</code><br>
<strong>Client Compatibility:</strong> Use either Java or Bedrock clients
</div>
<div class="game-info">
<strong>Status:</strong> <span id="mc-status" style="color:#ff4d4d;">ONLINE</span><br>
<strong>Players:</strong> <span id="mc-players">0 / 50</span><br>
<strong>Version:</strong> <span id="mc-version">1.20.4 (Paper)</span>
</div>
</div>
</section>
<section class="game-section">
<div class="game-header">
<span>World of Warcraft</span>
</div>
<div class="game-content">
<div class="instructions">
<strong>Account creation and instructions: <a href="https://wowweb.angry.hair">CLICK HERE</a></strong>
</div>
<div class="game-info">
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span><br>
<strong>Expansion:</strong> Wrath of the Lich King (3.3.5a)<br>
<strong>Server:</strong> wow.angry.hair<br>
<strong>Realm:</strong> Angry Haircraft
</div>
</div>
</section>
<section class="game-section">
<div class="game-header">
<span>BF1942 + Desert Combat</div>
</div>
<div class="game-content">
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:14567</code><br>
Install DC Final + hotfixes. Pure rage.
</div>
<div class="game-info">
<strong>Mod:</strong> Desert Combat 0.7<br>
<strong>Map:</strong> Baghdad Nights<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">OFFLINE</span>
</div>
</div>
</section>
<section class="game-section">
<div class="game-header">
<span>Unreal Tournament 2004</div>
</div>
<div class="game-content">
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:7777</code><br>
Patch to 3369. All bots. Pure skill.
</div>
<div class="game-info">
<strong>Mode:</strong> CTF<br>
<strong>Map:</strong> Face3<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
</div>
</section>
<section class="game-section">
<div class="game-header">
<span>Valheim</span>
</div>
<div class="game-content">
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:2456</code><br>
Password: <code>badhairday</code><br>
Vanilla+ mods. Vikings welcome.
</div>
<div class="game-info">
<strong>World:</strong> FuryViking<br>
<strong>Seed:</strong> ANGRYHAIR<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">OFFLINE</span>
</div>
</div>
</section>
</main>
<footer>
<p>angry dot hair • Hosted from the closet using UPDOG&trade; technology. UPDOG&trade; is a GeoCities Brand • <span style="color:#ff4d4d;">No support. Only play.</span></p>
<p style="margin-top: 0.5rem; font-size: 0.8rem; color: #660000;">
Uptime not guaranteed. Hair may explode.
</p>
</footer>
<script src="script.js"></script>
<script>
// Open/close on click
document.querySelectorAll('.game-header').forEach(header => {
header.addEventListener('click', () => {
const section = header.parentElement;
section.classList.toggle('open');
});
});
</script>
<script>
async function updateMCStatus() {
try {
const response = await fetch('https://api.mcsrvstat.us/3/angry.hair');
const data = await response.json();
document.getElementById('mc-status').textContent = data.online ? 'ONLINE' : 'OFFLINE';
document.getElementById('mc-status').className = data.online ? 'status-online' : 'status-offline'; // Optional: Add CSS classes for styling (e.g., green/red)
if (data.online) {
document.getElementById('mc-version').textContent = data.version || 'Unknown';
document.getElementById('mc-players').textContent = `${data.players?.online || 0} / ${data.players?.max || 50}`;
document.getElementById('mc-players').style.display = 'inline'; // Show if hidden
} else {
document.getElementById('mc-version').textContent = 'N/A';
document.getElementById('mc-players').textContent = 'Server offline';
document.getElementById('mc-players').style.display = 'inline';
}
} catch (error) {
console.error('Error fetching MC status:', error);
// Fallback to static or error message
document.getElementById('mc-status').textContent = 'ERROR';
}
}
// Initial load and refresh every 30 seconds
updateMCStatus();
setInterval(updateMCStatus, 30000);
</script>
</body>
</html>

43
index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>angry.hair | Self-hosted Server Fury</title>
<meta name="description" content="Home-hosted servers with attitude. Join the rage. Connect to Forgejo, Immich, Minecraft, and more." />
<!-- Favicon (optional angry hair icon) -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💇🏽‍♂️</text></svg>">
<!--libcodef-->
<script src="lib/codef_core.js"></script>
<script src="lib/codef_scrolltext.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="main"></div>
<div id="main2"></div>
<p class="glitch" style="margin-top: 1rem; font-size: 1.1rem; color: #ff9999;">
Self-Hosted Stuff.
</p>
</header>
<main>
<div class="grid">
<a title="Public game servers" class="fancy-btn" href="games.html"><h1>🎮</h1><br/>Game Servers</a>
<a title="Self-hosted services available via invite" class="fancy-btn" href="https://angry.hair"><h1>⚙️</h1><br/>Self-hosted Services</a>
</div>
</main>
<footer>
<p>angry dot hair • Hosted from the closet using UPDOG&trade; technology. UPDOG&trade; is a GeoCities Brand • <span style="color:#ff4d4d;">No support. Only play.</span></p>
<p style="margin-top: 0.5rem; font-size: 0.8rem; color: #660000;">
Uptime not guaranteed. Hair may explode.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

322
index.html.251031 Normal file
View file

@ -0,0 +1,322 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>angry.hair | Game Server Fury</title>
<meta name="description" content="Home-hosted game servers with attitude. Join the rage. Connect to Minecraft, WoW, UT2004, BF1942 Desert Combat, and Valheim." />
<!-- Favicon (optional angry hair icon) -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💇🏽‍♂️</text></svg>">
<!--libcodef-->
<script src="lib/codef_core.js"></script>
<script src="lib/codef_scrolltext.js"></script>
<style>
: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;
}
.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;
}
.game-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 20rem;
}
.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 {
font-size: 0.95rem;
margin-bottom: 1rem;
color: var(--text-muted);
}
.connect-btn {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
font-size: 0.9rem;
transition: 0.3s;
margin-top: 0.5rem;
box-shadow: 0 0 10px rgba(255, 26, 26, 0.5);
}
.connect-btn:hover {
background: #ff3333;
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 51, 51, 0.8);
}
.instructions {
margin-top: 1rem;
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; }
.game-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<div id="main"></div>
<div id="main2"></div>
<p class="glitch" style="margin-top: 1rem; font-size: 1.1rem; color: #ff9999;">
Self-Hosted Servers.
</p>
</header>
<main>
<section class="game-grid">
<!-- Minecraft -->
<div class="game-card">
<div class="game-title">Minecraft</div>
<div class="game-info">
<strong>Version:</strong> 1.20.4 (Paper)<br>
<strong>Players:</strong> 3000 / 20<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
<a href="#" onclick="alert('Connect to angry.hair in Minecraft.')" class="connect-btn">CONNECT</a>
<div class="instructions">
<strong>IP:</strong> <code>angry.hair</code><br>
<strong>Port:</strong> <code>DEFAULT</code><br>
<a href="mailto:david.n.mitchell@gmail.com">Request an invite</a>: Mail david.n.mitchell@gmail.com<br>
Use either Java or Bedrock clients
</div>
</div>
<!-- World of Warcraft -->
<div class="game-card">
<div class="game-title">World of Warcraft</div>
<div class="game-info">
<strong>Expansion:</strong> Wrath of the Lich King<br>
<strong>Realm:</strong> Angry Haircraft<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
<a href="/windows/World%20of%20Warcraft/AngryHaircraft_3.3.5a.zip" class="connect-btn">DOWNLOAD CLIENT</a>
<a href="/windows/World%20of%20Warcraft/AngryHaircraft_HD_3.3.5a.zip" class="connect-btn">DOWNLOAD CLIENT (HD)</a>
<div class="instructions">
1. Email <a href="mailto:david.n.mitchell@gmail.com">Dave</a> to request an account:<br>
&nbsp;- include your preferred username<br>
&nbsp;- include the password that you will use<br>
2. You will get a password in the email response so you can download one of the clients above<br>
3. Unzip client, run wow.exe, and use credentials from email<br>
4. ???<br>
5. Profit
</div>
</div>
<!-- BF1942 Desert Combat -->
<div class="game-card">
<div class="game-title">BF1942 + Desert Combat</div>
<div class="game-info">
<strong>Mod:</strong> Desert Combat 0.7<br>
<strong>Map:</strong> Baghdad Nights<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
<a href="bf1942://angry.hair:14567" class="connect-btn">JOIN SERVER</a>
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:14567</code><br>
Install DC Final + hotfixes. Pure rage.
</div>
</div>
<!-- Unreal Tournament 2004 -->
<div class="game-card">
<div class="game-title">UT2004</div>
<div class="game-info">
<strong>Mode:</strong> Onslaught<br>
<strong>Map:</strong> ONS-Torlan<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
<a href="ut2004://angry.hair:7777" class="connect-btn">LAUNCH</a>
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:7777</code><br>
Patch to 3369. All bots. Pure skill.
</div>
</div>
<!-- Valheim -->
<div class="game-card">
<div class="game-title">Valheim</div>
<div class="game-info">
<strong>World:</strong> FuryViking<br>
<strong>Seed:</strong> ANGRYHAIR<br>
<strong>Status:</strong> <span style="color:#ff4d4d;">ONLINE</span>
</div>
<a href="steam://connect/angry.hair:2456" class="connect-btn">JOIN WORLD</a>
<div class="instructions">
<strong>IP:</strong> <code>angry.hair:2456</code><br>
Password: <code>badhairday</code><br>
Vanilla+ mods. Vikings welcome.
</div>
</div>
</section>
</main>
<footer>
<p>angry dot hair • Hosted from the closet using UPDOG&trade; technology, a GeoCities Brand • <span style="color:#ff4d4d;">No support. Only play.</span></p>
<p style="margin-top: 0.5rem; font-size: 0.8rem; color: #660000;">
Uptime not guaranteed. Hair may explode.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

15
index.html.old Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Angry Hair</title>
</head>
<body>
<center>
<h1>Angery Hair</h1>
<a href="./windows">Winders</a>
</center>
</body>
</html>

649
lib/codef_core.js Normal file
View file

@ -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);
};
})();
/**
<b>Create a new canvas object.</b><br>
canvas(w, h, divname)<br>
@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;
/**
<b>Fill the canvas.</b><br>
canvas.fill(color)<br>
@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;
}
/**
<b>Clear the canvas.</b><br>
@function canvas.clear
@example
mycanvas.clear();
*/
this.clear = function(){
this.contex.clearRect (0, 0, this.canvas.width, this.canvas.height);
}
/**
<b>Draw a plot on the canvas.</b><br>
canvas.plot(x1,y1,width,color)<br>
@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;
}
/**
<b>Draw a line on the canvas.</b><br>
canvas.line(x1,y1,x2,y2,width,color)<br>
@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;
}
/**
<b>Draw a filled triangle on the canvas.</b><br>
canvas.triangle(x1,y1,x2,y2,x3,y3,color)<br>
@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();
}
/**
<b>Draw a filled quad on the canvas.</b><br>
<br>
it can be used with 5 params : <br>
canvas.quad(x1,y1,w,h,color)<br>
<br>
or it can be used with 9 params : <br>
canvas.quad(x1,y1,x2,y2,x3,y3,x4,y4,color)<br>
@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;
}
/**
<b>Init a tileset canvas.</b><br>
canvas.initTile(tilew,tileh, tilestart)<br>
@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;
}
/**
<b>Draw the canvas to another canvas.</b><br>
canvas.draw(dst,x,y,alpha, rot,w,h)<br>
@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;
}
/**
<b>Draw a tile from this canvas to another canvas.</b><br>
canvas.drawTile(dst, nb, x, y, alpha, rot, w, h)<br>
@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;
}
/**
<b>Draw a part of this canvas to another canvas.</b><br>
canvas.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)<br>
@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;
}
/**
<b>Set the handle coord of this canvas to the center.</b><br>
@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;
}
/**
<b>Set the handle of the canvas.</b><br>
canvas.sethandle(x,y)<br>
@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; i<str.length; i++){
if(typeof(w)!='undefined')
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
else
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
}
}
return this;
}
/**
<b>Create an image object and load a remote/local png/gif/jpg in it.</b><br>
image(img)<br>
@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;
/**
<b>Init a tileset image.</b><br>
image.initTile(tilew,tileh, tilestart)<br>
@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;
}
/**
<b>Draw the image to a canvas.</b><br>
image.draw(dst,x,y,alpha, rot,w,h)<br>
@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;
}
/**
<b>Draw a tile from this image to a canvas.</b><br>
image.drawTile(dst, nb, x, y, alpha, rot, w, h)<br>
@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;
}
/**
<b>Draw a part of this image to a canvas.</b><br>
image.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)<br>
@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;
}
/**
<b>Set the handle coord of this image to the center.</b><br>
@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;
}
/**
<b>Set the handle of the image.</b><br>
image.sethandle(x,y)<br>
@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<str.length; i++){
if(typeof(w)!='undefined')
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
else
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
}
}
return this;
}

303
lib/codef_scrolltext.js Normal file
View file

@ -0,0 +1,303 @@
/*------------------------------------------------------------------------------
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.
------------------------------------------------------------------------------*/
function ltrobj(posx,posy,ltr){
this.posx=posx;
this.posy=posy;
this.ltr=ltr;
return this;
}
function sortPosx(a, b) {
var x = a.posx;
var y = b.posx;
return ((x < y) ? -1 : ((x > 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.sinparam.length;j++){
oldvalue[j]=this.sinparam[j].myvalue;
}
}
if(this.speed==0){
this.pausetimer+=1;
if(this.pausetimer==60*this.pausedelay){
this.speed=this.oldspeed;
}
}
var speed=this.speed;
for(i=0;i<=this.wide;i++){
this.letters[i].posx-=speed;
if(this.letters[i].posx<=-this.fontw){
if(this.scrtxt.charAt(this.scroffset) =="^"){
if(this.scrtxt.charAt(this.scroffset+1) =="P"){
this.pausedelay=this.scrtxt.charAt(this.scroffset+2);
this.pausetimer=0;
this.oldspeed=this.speed;
this.speed=0;
this.scroffset+=3;
}
else if(this.scrtxt.charAt(this.scroffset+1) =="S"){
this.speed=this.scrtxt.charAt(this.scroffset+2);
this.scroffset+=3;
}
//
// ADDON by Robert Annett
//
else if(this.scrtxt.charAt(this.scroffset+1) =="C"){
var end = this.scrtxt.indexOf(';', this.scroffset+2);
var functionName = this.scrtxt.substring(this.scroffset+2, end);
window[functionName]();
this.scroffset+=(end-this.scroffset)+1;
}
}else{
this.letters[i].posx=this.wide*this.fontw+(this.letters[i].posx+this.fontw);
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
oldvalue[j]+=this.sinparam[j].inc;
}
}
this.letters[i].ltr=this.scrtxt.charCodeAt(this.scroffset);
this.scroffset++;
if(this.scroffset> this.scrtxt.length-1)
this.scroffset=0;
}
}
}
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue=oldvalue[j];
}
}
for(j=0;j<=this.wide;j++){
temp[j]={indice:j, posx:this.letters[j].posx};
}
temp.sort(sortPosx);
for(i=0;i<=this.wide;i++){
if(typeof(this.sinparam)!='undefined'){
prov = 0;
for(var j=0;j<this.sinparam.length;j++){
if(this.type==0)
prov += Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp;
if(this.type==1)
prov += -Math.abs(Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp);
if(this.type==2)
prov += Math.abs(Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp);
}
}
this.font.drawTile(this.dst,this.letters[temp[i].indice].ltr-this.fontstart,this.letters[temp[i].indice].posx,prov+posy);
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue+=this.sinparam[j].inc;
}
}
}
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue=oldvalue[j]+this.sinparam[j].offset;
}
}
this.dst.contex.globalAlpha=tmp;
}
return this;
}
function scrolltext_vertical(){
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.height/this.fonth)+1;
for(i=0;i<=this.wide;i++){
this.letters[i]=new ltrobj(0,Math.ceil((this.wide*this.fonth)+i*this.fonth),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(posx){
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.sinparam.length;j++){
oldvalue[j]=this.sinparam[j].myvalue;
}
}
if(this.speed==0){
this.pausetimer+=1;
if(this.pausetimer==60*this.pausedelay){
this.speed=this.oldspeed;
}
}
var speed=this.speed;
for(i=0;i<=this.wide;i++){
this.letters[i].posy-=speed;
if(this.letters[i].posy<=-this.fonth){
if(this.scrtxt.charAt(this.scroffset) =="^"){
if(this.scrtxt.charAt(this.scroffset+1) =="P"){
this.pausedelay=this.scrtxt.charAt(this.scroffset+2);
this.pausetimer=0;
this.oldspeed=this.speed;
this.speed=0;
this.scroffset+=3;
}
else if(this.scrtxt.charAt(this.scroffset+1) =="S"){
this.speed=this.scrtxt.charAt(this.scroffset+2);
this.scroffset+=3;
}
//
// ADDON by Robert Annett
//
else if(this.scrtxt.charAt(this.scroffset+1) =="C"){
var end = this.scrtxt.indexOf(';', this.scroffset+2);
var functionName = this.scrtxt.substring(this.scroffset+2, end);
window[functionName]();
this.scroffset+=(end-this.scroffset)+1;
}
}else{
this.letters[i].posy=this.wide*this.fonth+(this.letters[i].posy+this.fonth);
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
oldvalue[j]+=this.sinparam[j].inc;
}
}
this.letters[i].ltr=this.scrtxt.charCodeAt(this.scroffset);
this.scroffset++;
if(this.scroffset> this.scrtxt.length-1)
this.scroffset=0;
}
}
}
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue=oldvalue[j];
}
}
for(j=0;j<=this.wide;j++){
temp[j]={indice:j, posy:this.letters[j].posy};
}
temp.sort(sortPosy);
for(i=0;i<=this.wide;i++){
if(typeof(this.sinparam)!='undefined'){
prov = 0;
for(var j=0;j<this.sinparam.length;j++){
if(this.type==0)
prov += Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp;
if(this.type==1)
prov += -Math.abs(Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp);
if(this.type==2)
prov += Math.abs(Math.sin(this.sinparam[j].myvalue)*this.sinparam[j].amp);
}
}
this.font.drawTile(this.dst,this.letters[temp[i].indice].ltr-this.fontstart,prov+posx,this.letters[temp[i].indice].posy);
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue+=this.sinparam[j].inc;
}
}
}
if(typeof(this.sinparam)!='undefined'){
for(var j=0;j<this.sinparam.length;j++){
this.sinparam[j].myvalue=oldvalue[j]+this.sinparam[j].offset;
}
}
this.dst.contex.globalAlpha=tmp;
}
return this;
}

BIN
res/logo3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
res/qtxfont.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 789 B

118
script.js Normal file
View file

@ -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();

270
style.css Normal file
View file

@ -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;
}