ONO::FW::Edu::Apps::Modules::SolarSystem
package ONO::FW::Edu::Apps::Modules::SolarSystem;
################################################################################
# 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::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::Render;
use ONO::IO;
use ONO::Lib::Web::Client;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
my %vars = %$vars_ref;
my ($BLK_ref,$UCBLK_ref) = ONO::Lib::Lang::LangKitEdu->get($vars{'app_lang'},$vars_ref);
my %BLK = %$BLK_ref;
my %UCBLK = %$UCBLK_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("","solarsystem",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# GAME
###################################################################
my @names = (
"Sun",
"Mercury",
"Venus",
"Earth",
"Mars",
"Jupiter",
"Saturn",
"Uranus",
"Neptune",
"",
"Speed",
"Size",
"Distance",
);
if ($vars{'app_lang'} eq "de" || $vars{'app_lang'} eq "lu") {
@names = (
"Sonne",
"Merkur",
"Venus",
"Erde",
"Mars",
"Jupiter",
"Saturn",
"Uranus",
"Neptun",
"",
"Umlauf",
"Größe",
"Distanz",
);
}
my $CSSJS = ONO::Render->cssjs($BASE);
# <h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank">\@JulianGarnier</a></span></h1>
my $SOL = qq~ <div id="navbar">
<div class="hide"><a id="toggle-data" href="#data"><span class="icon-data"></span>Data</a></div>
<div class="hide"><a id="toggle-controls" href="#controls"><span class="icon-controls"></span>Controls</a></div>
</div>
<div id="data">
<a class="sun" title="sun" href="#sunspeed">$names[0]</a>
<a class="mercury" title="mercury" href="#mercuryspeed">$names[1]</a>
<a class="venus" title="venus" href="#venusspeed">$names[2]</a>
<a class="earth active" title="earth" href="#earthspeed">$names[3]</a>
<a class="mars" title="mars" href="#marsspeed">$names[4]</a>
<a class="jupiter" title="jupiter" href="#jupiterspeed">$names[5]</a>
<a class="saturn" title="saturn" href="#saturnspeed">$names[6]</a>
<a class="uranus" title="uranus" href="#uranusspeed">$names[7]</a>
<a class="neptune" title="neptune" href="#neptunespeed">$names[8]</a>
</div>
<div id="controls">
<label class="set-view">
<input type="checkbox"><!-- disable_deprecated_checkbox_checking -->
</label>
<label class="set-zoom">
<input type="checkbox"><!-- disable_deprecated_checkbox_checking -->
</label>
<label>
<input type="radio" class="set-speed" name="scale" checked>
<span>$names[10]</span>
</label>
<label>
<input type="radio" class="set-size" name="scale">
<span>$names[11]</span>
</label>
<label>
<input type="radio" class="set-distance" name="scale">
<span>$names[12]</span>
</label>
</div>
<div id="universe" class="scale-stretched">
<div id="galaxy">
<div id="solar-system" class="earth">
<div id="mercury" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[1]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="venus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[2]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="earth" class="orbit">
<div class="pos">
<div class="orbit">
<div class="pos">
<div class="moon"></div>
</div>
</div>
<div class="planet">
<dl class="infos">
<dt>$names[3]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mars" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[4]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="jupiter" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[5]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="saturn" class="orbit">
<div class="pos">
<div class="planet">
<div class="ring"></div>
<dl class="infos">
<dt>$names[6]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="uranus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[7]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="neptune" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[8]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="sun">
<dl class="infos">
<dt>$names[0]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
</div>
<script src="$BASE/ono/osr/javascript/jquery/jquery.js"></script>
</body>
<!-- partial -->
<script src="$BASE/media/morzino/apps/css-3d-solar-system/dist/script.js"></script>
~;
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
$CSSJS
<link rel="stylesheet" href="$BASE/media/morzino/apps/css-3d-solar-system/dist/style.css">
</head>
<body class="opening hide-UI view-2D zoom-large data-open controls-open">
$SOL
</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::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::Render;
use ONO::IO;
use ONO::Lib::Web::Client;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
my %vars = %$vars_ref;
my ($BLK_ref,$UCBLK_ref) = ONO::Lib::Lang::LangKitEdu->get($vars{'app_lang'},$vars_ref);
my %BLK = %$BLK_ref;
my %UCBLK = %$UCBLK_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("","solarsystem",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# GAME
###################################################################
my @names = (
"Sun",
"Mercury",
"Venus",
"Earth",
"Mars",
"Jupiter",
"Saturn",
"Uranus",
"Neptune",
"",
"Speed",
"Size",
"Distance",
);
if ($vars{'app_lang'} eq "de" || $vars{'app_lang'} eq "lu") {
@names = (
"Sonne",
"Merkur",
"Venus",
"Erde",
"Mars",
"Jupiter",
"Saturn",
"Uranus",
"Neptun",
"",
"Umlauf",
"Größe",
"Distanz",
);
}
my $CSSJS = ONO::Render->cssjs($BASE);
# <h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank">\@JulianGarnier</a></span></h1>
my $SOL = qq~ <div id="navbar">
<div class="hide"><a id="toggle-data" href="#data"><span class="icon-data"></span>Data</a></div>
<div class="hide"><a id="toggle-controls" href="#controls"><span class="icon-controls"></span>Controls</a></div>
</div>
<div id="data">
<a class="sun" title="sun" href="#sunspeed">$names[0]</a>
<a class="mercury" title="mercury" href="#mercuryspeed">$names[1]</a>
<a class="venus" title="venus" href="#venusspeed">$names[2]</a>
<a class="earth active" title="earth" href="#earthspeed">$names[3]</a>
<a class="mars" title="mars" href="#marsspeed">$names[4]</a>
<a class="jupiter" title="jupiter" href="#jupiterspeed">$names[5]</a>
<a class="saturn" title="saturn" href="#saturnspeed">$names[6]</a>
<a class="uranus" title="uranus" href="#uranusspeed">$names[7]</a>
<a class="neptune" title="neptune" href="#neptunespeed">$names[8]</a>
</div>
<div id="controls">
<label class="set-view">
<input type="checkbox"><!-- disable_deprecated_checkbox_checking -->
</label>
<label class="set-zoom">
<input type="checkbox"><!-- disable_deprecated_checkbox_checking -->
</label>
<label>
<input type="radio" class="set-speed" name="scale" checked>
<span>$names[10]</span>
</label>
<label>
<input type="radio" class="set-size" name="scale">
<span>$names[11]</span>
</label>
<label>
<input type="radio" class="set-distance" name="scale">
<span>$names[12]</span>
</label>
</div>
<div id="universe" class="scale-stretched">
<div id="galaxy">
<div id="solar-system" class="earth">
<div id="mercury" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[1]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="venus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[2]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="earth" class="orbit">
<div class="pos">
<div class="orbit">
<div class="pos">
<div class="moon"></div>
</div>
</div>
<div class="planet">
<dl class="infos">
<dt>$names[3]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mars" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[4]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="jupiter" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[5]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="saturn" class="orbit">
<div class="pos">
<div class="planet">
<div class="ring"></div>
<dl class="infos">
<dt>$names[6]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="uranus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[7]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="neptune" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>$names[8]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="sun">
<dl class="infos">
<dt>$names[0]</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
</div>
<script src="$BASE/ono/osr/javascript/jquery/jquery.js"></script>
</body>
<!-- partial -->
<script src="$BASE/media/morzino/apps/css-3d-solar-system/dist/script.js"></script>
~;
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
$CSSJS
<link rel="stylesheet" href="$BASE/media/morzino/apps/css-3d-solar-system/dist/style.css">
</head>
<body class="opening hide-UI view-2D zoom-large data-open controls-open">
$SOL
</body>
</html>
~;
}
###################################################################
#### THAT'S IT :-D
###################################################################
1;
__END__