ONO::FW::Edu::Apps::Modules::PixelArtPainter
package ONO::FW::Edu::Apps::Modules::PixelArtPainter;
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2022-2026 Jos Kirps and The Joopita Project [ASBL]
# Copyright (C) 2011-2022 Jos Kirps and Joopita Research ASBL
# Copyright (C) 2006-2011 Jos Kirps and The Joopita Project
# Copyright (C) 2001-2006 Jos Kirps and The WobbleWolf Project
#
# This file, as well as many other parts of the ONO Software Project or
# related elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
#: This module is a front end application module wrapper that has been
#: created for the Morzino Project (morzino.com) and that has been released
#: as Open Source software.
#:
#: Note that this is NOT a self-contained application, it is only a wrapper
#: that makes heavy use of the ONO Perl Framework application engine.
use strict;
use Encode;
use ONO::Render;
use ONO::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::Lib::DateTime::ToolBox;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::IO;
use ONO::DB;
use ONO::Lib::Basic;
use ONO::FW::Game::Nav;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
################################################################
# INIT - BEGIN
################################################################
my (
$db,
$community,
$action_url,
$form,
$format,
$canvas,
$pdfkey,
$sec,$min,$hour,
$mday,$mon,$year,
$wday,$yday,$timestamp,
$lang,
$BLK_ref,
$vars_ref,
) = ONO::FW::Apps::Core->init($vars_ref);
my %vars = %$vars_ref;
my %BLK = %$BLK_ref;
my ($HEAD,$WEB);
my (
$vpath,
$lang,$domain,$community,
$sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$timestamp,
$script_url,$action_url,$form
) = ONO::FW::User::Init->getvar(\%vars);
ONO::FW::Apps::Core->now("","chess",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# GAME
###################################################################
my $CSSJS = ONO::Render->cssjs($BASE);
my @COLS = (
qq~"#000000",
"#555555",
"#aaaaaa",
"#ffffff",
"#990000",
"#cc3333",
"#ff9999",
"#009900",
"#33cc33",
"#99ff99",
"#000099",
"#3333cc",
"#9999ff",
"#995533",
"#dd7733",
"#ffff00",
~,
qq~"#000000",
"#444444",
"#888888",
"#cccccc",
"#FFFFFF",
"#e04040",
"#ff00ff",
"#64cca8",
"#40e040",
"#0088fc",
"#0000cc",
"#fcfc00",
"#ff8888",
"#d17f30",
"#915f33",
"#602c00",
~,
qq~"#000000",
"#555555",
"#aaaaaa",
"#ffffff",
"#aa0003",
"#ff5551",
"#00aa03",
"#55ff56",
"#0000aa",
"#5455ff",
"#01a9ac",
"#56feff",
"#aca800",
"#ffff55",
"#aa00a9",
"#ff55fe",
~,
qq~"#000000",
"#7f7f7f",
"#bebebe",
"#ffffff",
"#99035f",
"#f05c00",
"#007310",
"#12ca07",
"#51f595",
"#4204e1",
"#2497ff",
"#aaa2ff",
"#ced413",
"#ff85e1",
"#ca13fe",
"#4f5101",
~,
qq~"#000000",
"#555555",
"#AAAAAA",
"#FFFFFF",
"#AA0000",
"#FF5555",
"#00AA00",
"#55FF55",
"#0000AA",
"#5555FF",
"#00AAAA",
"#55FFFF",
"#AA5500",
"#FFFF55",
"#AA00AA",
"#FF55FF",
~,
qq~"#000000",
"#a7a8a8",
"#ffffff",
"#ff3276",
"#ff3e00",
"#3c5800",
"#00780f",
"#00a720",
"#6ccd30",
"#c9d464",
"#002dff",
"#5acbff",
"#ffa600",
"#faea27",
"#c81a7d",
"#bd95ff",
~,
qq~"#000000",
"#111111",
"#222222",
"#333333",
"#444444",
"#555555",
"#666666",
"#777777",
"#888888",
"#999999",
"#aaaaaa",
"#bbbbbb",
"#cccccc",
"#dddddd",
"#eeeeee",
"#ffffff",
~,
);
my $DRAW = qq~<div class="bg_fabric rel" style="width:920px;height:64px">
<div class="abs" style="top:10px;right:10px"><a href="$action_url" class="button_green">$BLK{'new'}</a></div>
<div class="abs" style="top:10px;right:100px">
<div class="select"><select id="colorModeSelector" name="" onchange="colorMode();">
<option value="oli">Oli ($BLK{'default'})</option>
<option value="c64">C64 (VIC-II)</option>
<option value="c128">C128 (VDC)</option>
<option value="appleii">Apple II</option>
<option value="cga">CGA (IBM PC)</option>
<option value="intellivision">Intellivision</option>
<option value="grey">Greyscale</option>
</select></div>
</div>
<div class="abs" style="top:10px;left:10px">
<div id="current-color-display" class="block40 bo"></div>
</div>
<div id="palette" class="abs" style="top:10px;left:100px">
</div>
</div>
<div id="canvas"></div>
<script>
var colorArray0 = [$COLS[0]]
var colorArray1 = [$COLS[1]]
var colorArray2 = [$COLS[2]]
var colorArray3 = [$COLS[3]]
var colorArray4 = [$COLS[4]]
var colorArray5 = [$COLS[5]]
var colorArray6 = [$COLS[6]]
var colorArray = colorArray0;
var savedColor
var drag = false
var eraser = false
function colorMode(mode) {
if (mode == 'oli') {
colorArray = colorArray0;
}
if (mode == 'c64') {
colorArray = colorArray1;
}
if (mode == 'c128') {
colorArray = colorArray2;
}
if (mode == 'appleii') {
colorArray = colorArray3;
}
if (mode == 'cga') {
colorArray = colorArray4;
}
if (mode == 'intellivision') {
colorArray = colorArray5;
}
if (mode == 'grey') {
colorArray = colorArray6;
}
const myNode = document.querySelector("#palette").innerHTML = '';
createPalette();
document.getElementById('current-color-display').style.backgroundColor = colorArray[0];
savedColor = colorArray[0];
}
var element = document.getElementById("colorModeSelector");
element.addEventListener("change", () => {colorMode(element.value)});
function createCanvas(){
for (var i=0; i<=Math.round(window.innerWidth/16); i++){
var pixelColumn = document.createElement("div")
pixelColumn.id = i
var tempId = i
document.querySelector("#canvas").appendChild(pixelColumn)
for (var j=0; j<=Math.round(window.innerHeight/16); j++){
var pixel = document.createElement("div")
pixel.id = i + " + " + j
createPixel(pixel)
pixel.addEventListener("mousedown", colorClick)
pixel.addEventListener("mouseover", colorDrag)
document.getElementById(tempId).appendChild(pixel)
}
}
}
createCanvas()
function createPixel(pixel){
pixel.style.border = "1px #cccccc solid"
pixel.style.backgroundColor = "white"
pixel.style.width = "16px"
pixel.style.height = "16px"
}
function newScreenSize(){
window.addEventListener("resize", function(){
document.querySelector("#canvas").innerHTML = ""
createCanvas()
})
}
newScreenSize()
function dragChange(){
document.querySelector("#canvas").addEventListener("mousedown", function(){
drag = true
})
window.addEventListener("mouseup", function(){
drag = false
document.querySelector("#canvas").style.cursor = "default"
})
}
dragChange()
function colorClick(e){
if(eraser === false){
e.target.style.backgroundColor = savedColor
e.target.style.borderColor = savedColor
} else if(eraser === true) {
e.target.style.border = "1px #cccccc solid"
e.target.style.backgroundColor = "white"
}
}
function colorDrag(e){
if(eraser === false && drag === true && e.target.style.backgroundColor === "white" && e.target.style.borderColor === "black") {
document.querySelector("#canvas").style.cursor = "crosshair"
e.target.style.backgroundColor = savedColor
e.target.style.borderColor = savedColor
} else if(eraser === true && drag === true){
e.target.style.backgroundColor = "white"
e.target.style.border = "1px #cccccc solid"
}
}
function createPalette(){
for (var i=0; i<colorArray.length; i++){
var paletteColor = document.createElement("div")
paletteColor.id = colorArray[i]
paletteColor.style.backgroundColor = colorArray[i]
paletteColor.style.width = "20px"
paletteColor.style.height = "20px"
paletteColor.style.border = "1px solid #cccccc"
paletteColor.style.margin = "5px"
paletteColor.style.float = "left"
paletteColor.addEventListener("click", colorSelected)
document.querySelector("#palette").appendChild(paletteColor)
}
}
createPalette()
function colorSelected(event){
savedColor = event.target.id
eraser = false
var currentColor = document.createElement("div")
currentColor.id = "current-color"
currentColor.style.backgroundColor = event.target.id
document.getElementById('current-color-display').style.backgroundColor=savedColor;
}
document.getElementById('current-color-display').style.backgroundColor=colorArray[0];
savedColor=colorArray[0];
function eraserSelected(){
eraser = true
var tempEraser = document.createElement("img")
document.getElementById('current-color-display').style.backgroundColor='white';
}
</script>
~;
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Generator" content="ONO App Engine">
$CSSJS
<style>
#canvas {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
</style>
</head>
<body style="margin:0px;padding:0px">
<div style="width:920px;height:480px;overflow:hidden">$DRAW</div>
</body>
</html>
~;
}
###################################################################
#### THAT'S IT :-D
###################################################################
1;
__END__
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2022-2026 Jos Kirps and The Joopita Project [ASBL]
# Copyright (C) 2011-2022 Jos Kirps and Joopita Research ASBL
# Copyright (C) 2006-2011 Jos Kirps and The Joopita Project
# Copyright (C) 2001-2006 Jos Kirps and The WobbleWolf Project
#
# This file, as well as many other parts of the ONO Software Project or
# related elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
#: This module is a front end application module wrapper that has been
#: created for the Morzino Project (morzino.com) and that has been released
#: as Open Source software.
#:
#: Note that this is NOT a self-contained application, it is only a wrapper
#: that makes heavy use of the ONO Perl Framework application engine.
use strict;
use Encode;
use ONO::Render;
use ONO::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::Lib::DateTime::ToolBox;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::IO;
use ONO::DB;
use ONO::Lib::Basic;
use ONO::FW::Game::Nav;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
################################################################
# INIT - BEGIN
################################################################
my (
$db,
$community,
$action_url,
$form,
$format,
$canvas,
$pdfkey,
$sec,$min,$hour,
$mday,$mon,$year,
$wday,$yday,$timestamp,
$lang,
$BLK_ref,
$vars_ref,
) = ONO::FW::Apps::Core->init($vars_ref);
my %vars = %$vars_ref;
my %BLK = %$BLK_ref;
my ($HEAD,$WEB);
my (
$vpath,
$lang,$domain,$community,
$sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$timestamp,
$script_url,$action_url,$form
) = ONO::FW::User::Init->getvar(\%vars);
ONO::FW::Apps::Core->now("","chess",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# GAME
###################################################################
my $CSSJS = ONO::Render->cssjs($BASE);
my @COLS = (
qq~"#000000",
"#555555",
"#aaaaaa",
"#ffffff",
"#990000",
"#cc3333",
"#ff9999",
"#009900",
"#33cc33",
"#99ff99",
"#000099",
"#3333cc",
"#9999ff",
"#995533",
"#dd7733",
"#ffff00",
~,
qq~"#000000",
"#444444",
"#888888",
"#cccccc",
"#FFFFFF",
"#e04040",
"#ff00ff",
"#64cca8",
"#40e040",
"#0088fc",
"#0000cc",
"#fcfc00",
"#ff8888",
"#d17f30",
"#915f33",
"#602c00",
~,
qq~"#000000",
"#555555",
"#aaaaaa",
"#ffffff",
"#aa0003",
"#ff5551",
"#00aa03",
"#55ff56",
"#0000aa",
"#5455ff",
"#01a9ac",
"#56feff",
"#aca800",
"#ffff55",
"#aa00a9",
"#ff55fe",
~,
qq~"#000000",
"#7f7f7f",
"#bebebe",
"#ffffff",
"#99035f",
"#f05c00",
"#007310",
"#12ca07",
"#51f595",
"#4204e1",
"#2497ff",
"#aaa2ff",
"#ced413",
"#ff85e1",
"#ca13fe",
"#4f5101",
~,
qq~"#000000",
"#555555",
"#AAAAAA",
"#FFFFFF",
"#AA0000",
"#FF5555",
"#00AA00",
"#55FF55",
"#0000AA",
"#5555FF",
"#00AAAA",
"#55FFFF",
"#AA5500",
"#FFFF55",
"#AA00AA",
"#FF55FF",
~,
qq~"#000000",
"#a7a8a8",
"#ffffff",
"#ff3276",
"#ff3e00",
"#3c5800",
"#00780f",
"#00a720",
"#6ccd30",
"#c9d464",
"#002dff",
"#5acbff",
"#ffa600",
"#faea27",
"#c81a7d",
"#bd95ff",
~,
qq~"#000000",
"#111111",
"#222222",
"#333333",
"#444444",
"#555555",
"#666666",
"#777777",
"#888888",
"#999999",
"#aaaaaa",
"#bbbbbb",
"#cccccc",
"#dddddd",
"#eeeeee",
"#ffffff",
~,
);
my $DRAW = qq~<div class="bg_fabric rel" style="width:920px;height:64px">
<div class="abs" style="top:10px;right:10px"><a href="$action_url" class="button_green">$BLK{'new'}</a></div>
<div class="abs" style="top:10px;right:100px">
<div class="select"><select id="colorModeSelector" name="" onchange="colorMode();">
<option value="oli">Oli ($BLK{'default'})</option>
<option value="c64">C64 (VIC-II)</option>
<option value="c128">C128 (VDC)</option>
<option value="appleii">Apple II</option>
<option value="cga">CGA (IBM PC)</option>
<option value="intellivision">Intellivision</option>
<option value="grey">Greyscale</option>
</select></div>
</div>
<div class="abs" style="top:10px;left:10px">
<div id="current-color-display" class="block40 bo"></div>
</div>
<div id="palette" class="abs" style="top:10px;left:100px">
</div>
</div>
<div id="canvas"></div>
<script>
var colorArray0 = [$COLS[0]]
var colorArray1 = [$COLS[1]]
var colorArray2 = [$COLS[2]]
var colorArray3 = [$COLS[3]]
var colorArray4 = [$COLS[4]]
var colorArray5 = [$COLS[5]]
var colorArray6 = [$COLS[6]]
var colorArray = colorArray0;
var savedColor
var drag = false
var eraser = false
function colorMode(mode) {
if (mode == 'oli') {
colorArray = colorArray0;
}
if (mode == 'c64') {
colorArray = colorArray1;
}
if (mode == 'c128') {
colorArray = colorArray2;
}
if (mode == 'appleii') {
colorArray = colorArray3;
}
if (mode == 'cga') {
colorArray = colorArray4;
}
if (mode == 'intellivision') {
colorArray = colorArray5;
}
if (mode == 'grey') {
colorArray = colorArray6;
}
const myNode = document.querySelector("#palette").innerHTML = '';
createPalette();
document.getElementById('current-color-display').style.backgroundColor = colorArray[0];
savedColor = colorArray[0];
}
var element = document.getElementById("colorModeSelector");
element.addEventListener("change", () => {colorMode(element.value)});
function createCanvas(){
for (var i=0; i<=Math.round(window.innerWidth/16); i++){
var pixelColumn = document.createElement("div")
pixelColumn.id = i
var tempId = i
document.querySelector("#canvas").appendChild(pixelColumn)
for (var j=0; j<=Math.round(window.innerHeight/16); j++){
var pixel = document.createElement("div")
pixel.id = i + " + " + j
createPixel(pixel)
pixel.addEventListener("mousedown", colorClick)
pixel.addEventListener("mouseover", colorDrag)
document.getElementById(tempId).appendChild(pixel)
}
}
}
createCanvas()
function createPixel(pixel){
pixel.style.border = "1px #cccccc solid"
pixel.style.backgroundColor = "white"
pixel.style.width = "16px"
pixel.style.height = "16px"
}
function newScreenSize(){
window.addEventListener("resize", function(){
document.querySelector("#canvas").innerHTML = ""
createCanvas()
})
}
newScreenSize()
function dragChange(){
document.querySelector("#canvas").addEventListener("mousedown", function(){
drag = true
})
window.addEventListener("mouseup", function(){
drag = false
document.querySelector("#canvas").style.cursor = "default"
})
}
dragChange()
function colorClick(e){
if(eraser === false){
e.target.style.backgroundColor = savedColor
e.target.style.borderColor = savedColor
} else if(eraser === true) {
e.target.style.border = "1px #cccccc solid"
e.target.style.backgroundColor = "white"
}
}
function colorDrag(e){
if(eraser === false && drag === true && e.target.style.backgroundColor === "white" && e.target.style.borderColor === "black") {
document.querySelector("#canvas").style.cursor = "crosshair"
e.target.style.backgroundColor = savedColor
e.target.style.borderColor = savedColor
} else if(eraser === true && drag === true){
e.target.style.backgroundColor = "white"
e.target.style.border = "1px #cccccc solid"
}
}
function createPalette(){
for (var i=0; i<colorArray.length; i++){
var paletteColor = document.createElement("div")
paletteColor.id = colorArray[i]
paletteColor.style.backgroundColor = colorArray[i]
paletteColor.style.width = "20px"
paletteColor.style.height = "20px"
paletteColor.style.border = "1px solid #cccccc"
paletteColor.style.margin = "5px"
paletteColor.style.float = "left"
paletteColor.addEventListener("click", colorSelected)
document.querySelector("#palette").appendChild(paletteColor)
}
}
createPalette()
function colorSelected(event){
savedColor = event.target.id
eraser = false
var currentColor = document.createElement("div")
currentColor.id = "current-color"
currentColor.style.backgroundColor = event.target.id
document.getElementById('current-color-display').style.backgroundColor=savedColor;
}
document.getElementById('current-color-display').style.backgroundColor=colorArray[0];
savedColor=colorArray[0];
function eraserSelected(){
eraser = true
var tempEraser = document.createElement("img")
document.getElementById('current-color-display').style.backgroundColor='white';
}
</script>
~;
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Generator" content="ONO App Engine">
$CSSJS
<style>
#canvas {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
</style>
</head>
<body style="margin:0px;padding:0px">
<div style="width:920px;height:480px;overflow:hidden">$DRAW</div>
</body>
</html>
~;
}
###################################################################
#### THAT'S IT :-D
###################################################################
1;
__END__