finished extra features on i, object assignment
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 882 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 921 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 93 KiB |
@@ -4,17 +4,69 @@ class Robot
|
|||||||
private $model;
|
private $model;
|
||||||
private $color;
|
private $color;
|
||||||
private $os;
|
private $os;
|
||||||
|
private $image;
|
||||||
|
private $size;
|
||||||
|
private $laws;
|
||||||
|
|
||||||
public function __construct($model, $color, $os)
|
public function __construct($model, $color, $os, $image, $size, $laws = '')
|
||||||
{
|
{
|
||||||
$this->set_model($model);
|
$this->set_model($model);
|
||||||
$this->set_color($color);
|
$this->set_color($color);
|
||||||
$this->set_os($os);
|
$this->set_os($os);
|
||||||
|
$this->set_image($image);
|
||||||
|
$this->set_size($size);
|
||||||
|
$this->set_laws($laws);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function __toString()
|
public function __toString()
|
||||||
{
|
{
|
||||||
return '<p>Your ' . $this->get_color() . ' <em>' . $this->get_model() . '</em> running <em>' . $this->get_os() . '</em> will be built shortly. Thank you.</p>';
|
$string = '
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="' . $this->get_image() . '">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p>Your ' . $this->get_size() . ' sized ' . $this->get_color() . ' <em>' . $this->get_model() . '</em> running <em>' . $this->get_os() . '</em> will be built shortly. Thank you.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
$laws = $this->get_laws();
|
||||||
|
if (!empty($laws)) {
|
||||||
|
$string .= '
|
||||||
|
<p>Your robot will obey the following laws:</p>
|
||||||
|
<ul>
|
||||||
|
';
|
||||||
|
|
||||||
|
for ($i = 0; $i < count($laws); $i++) {
|
||||||
|
$l = '';
|
||||||
|
switch ($i) {
|
||||||
|
case 0:
|
||||||
|
$l = 'First';
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
$l = 'Second';
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
$l = 'Third';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
$string .= '<li><strong>' . $l . ' Law:</strong>' . $laws[$i] . '</li>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$string .= '
|
||||||
|
</ul>
|
||||||
|
';
|
||||||
|
} else {
|
||||||
|
$string .= '<p>Your robot has no rules.</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$string .= '
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $string;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function get_model()
|
public function get_model()
|
||||||
@@ -46,8 +98,52 @@ class Robot
|
|||||||
{
|
{
|
||||||
$this->os = $os;
|
$this->os = $os;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function get_image()
|
||||||
|
{
|
||||||
|
return $this->image;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function set_image($image)
|
||||||
|
{
|
||||||
|
$this->image = $image;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function get_size()
|
||||||
|
{
|
||||||
|
return $this->size;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function set_size($size)
|
||||||
|
{
|
||||||
|
$this->size = $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function get_laws()
|
||||||
|
{
|
||||||
|
return $this->laws;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function set_laws($laws)
|
||||||
|
{
|
||||||
|
$this->laws = $laws;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$models = [
|
||||||
|
'Sonny' => 'img/sonny.jpg',
|
||||||
|
'Rosey' => 'img/rosey.jpeg',
|
||||||
|
'SICO' => 'img/sico.jpeg',
|
||||||
|
'Data' => 'img/data.jpeg',
|
||||||
|
'Gort' => 'img/gort.png',
|
||||||
|
'Wall-E' => 'img/walle.png',
|
||||||
|
'Optimus Prime' => 'img/optimus.png',
|
||||||
|
'Hal 9000' => 'img/hal.png',
|
||||||
|
'Twiki' => 'img/twiki.jpg',
|
||||||
|
'Bender' => 'img/bender.png',
|
||||||
|
'Johnny 5' => 'img/johnny.png',
|
||||||
|
];
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@@ -55,40 +151,235 @@ class Robot
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Robot</title>
|
<title>Robot</title>
|
||||||
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
<style>
|
||||||
<script src="js/index.js"></script>
|
@font-face {
|
||||||
|
font-family: 'Hack Nerd Font Mono';
|
||||||
|
src: url('/includes/HackNerdFontMono-Regular.woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #FED766;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5vw;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 3vw;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
option,
|
||||||
|
input {
|
||||||
|
font-size: 1.75vw;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 1.25vw;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 1vw;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
option {
|
||||||
|
width: 300px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-color: #F4F4F8;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
width: 80%;
|
||||||
|
background-color: #2AB7CA;
|
||||||
|
color: black;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 0px 5px 0px;
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"]:hover {
|
||||||
|
background-color: #FED766;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-color: #F4F4F8;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font: inherit;
|
||||||
|
color: #F4F4F8;
|
||||||
|
width: 1.15em;
|
||||||
|
height: 1.15em;
|
||||||
|
border: 0.15em solid black;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
margin-top: 1.5em;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]::before {
|
||||||
|
content: "";
|
||||||
|
width: 0.65em;
|
||||||
|
height: 0.65em;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: scale(0);
|
||||||
|
transition: 400ms transform ease-in-out;
|
||||||
|
box-shadow: inset 1em 1em #FE4A49;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:checked::before {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-color: #F4F4F8;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font: inherit;
|
||||||
|
color: #F4F4F8;
|
||||||
|
width: 1.15em;
|
||||||
|
height: 1.15em;
|
||||||
|
border: 0.15em solid black;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
margin-top: 1.5em;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]::before {
|
||||||
|
content: "";
|
||||||
|
width: 0.65em;
|
||||||
|
height: 0.65em;
|
||||||
|
transform: scale(0);
|
||||||
|
transition: 400ms transform ease-in-out;
|
||||||
|
box-shadow: inset 1em 1em #FE4A49;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked::before {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 50px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
width: 40%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #E6E6EA;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.space_between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tooltip text */
|
||||||
|
.tooltip .tooltip_text {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
width: 550px;
|
||||||
|
background-color: black;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
/* Position the tooltip text - see examples below! */
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: -8px;
|
||||||
|
left: 110%;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
transition: visibility 0s, opacity 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the tooltip text when you mouse over the tooltip container */
|
||||||
|
.tooltip:hover .tooltip_text {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 150px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>I, Object</h1>
|
<h1>I, Object</h1>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
if (!isset($_POST['model']))
|
if (!isset($_POST['model']))
|
||||||
echo form();
|
echo form($models);
|
||||||
else
|
else
|
||||||
echo message();
|
echo message($models);
|
||||||
?>
|
?>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
function form()
|
function form($models)
|
||||||
{
|
{
|
||||||
$models = [
|
|
||||||
'Sonny',
|
|
||||||
'Rosey',
|
|
||||||
'SICO',
|
|
||||||
'Data',
|
|
||||||
'Gort',
|
|
||||||
'Wall-E',
|
|
||||||
'Optimus Prime',
|
|
||||||
'Hal 9000',
|
|
||||||
'Twiki',
|
|
||||||
'Bender',
|
|
||||||
'Johnny 5',
|
|
||||||
];
|
|
||||||
|
|
||||||
$colors = [
|
$colors = [
|
||||||
'Shiny',
|
'Shiny',
|
||||||
'Chrome',
|
'Chrome',
|
||||||
@@ -106,19 +397,28 @@ function form()
|
|||||||
'Tiny Hamsters',
|
'Tiny Hamsters',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
$laws = [
|
||||||
|
'first' => 'A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
|
||||||
|
'second' => 'A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',
|
||||||
|
'third' => 'A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',
|
||||||
|
];
|
||||||
|
|
||||||
$form = '
|
$form = '
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<form method="post">
|
<form method="post" class="column center">
|
||||||
|
<div class="row space_between">
|
||||||
<label for="model">Model:</label>
|
<label for="model">Model:</label>
|
||||||
<select id="model" name="model" required>
|
<select id="model" name="model" required>
|
||||||
';
|
';
|
||||||
|
|
||||||
foreach ($models as $m)
|
foreach (array_keys($models) as $m)
|
||||||
$form .= '<option value="' . $m . '">' . ucwords($m) . '</option>';
|
$form .= '<option value="' . $m . '">' . ucwords($m) . '</option>';
|
||||||
|
|
||||||
$form .= '
|
$form .= '
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row space_between">
|
||||||
<label for="color">Color:</label>
|
<label for="color">Color:</label>
|
||||||
<select id="color" name="color" required>
|
<select id="color" name="color" required>
|
||||||
';
|
';
|
||||||
@@ -128,7 +428,9 @@ function form()
|
|||||||
|
|
||||||
$form .= '
|
$form .= '
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row space_between">
|
||||||
<label for="os">OS:</label>
|
<label for="os">OS:</label>
|
||||||
<select id="os" name="os" required>
|
<select id="os" name="os" required>
|
||||||
';
|
';
|
||||||
@@ -137,6 +439,44 @@ function form()
|
|||||||
|
|
||||||
$form .= '
|
$form .= '
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row space_between">
|
||||||
|
<div class="column">
|
||||||
|
<label>Size:</label>
|
||||||
|
<div class="row">
|
||||||
|
<input id="size_nano" type="radio" name="size" value="nano" required>
|
||||||
|
<label for="size_nano">Nano</label>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<input id="size_normal" type="radio" name="size" value="normal" required>
|
||||||
|
<label for="size_normal">Normal</label>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<input id="size_giant" type="radio" name="size" value="giant" required>
|
||||||
|
<label for="size_giant">Giant</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<label>Asimov\'s Laws:</label>
|
||||||
|
';
|
||||||
|
|
||||||
|
foreach ($laws as $key => $law) {
|
||||||
|
$form .= '
|
||||||
|
<div class="row space_between tooltip">
|
||||||
|
<label for="' . $key . '_law">' . ucwords($key) . ' Law</label>
|
||||||
|
<input id="' . $key . '_law" type="checkbox" name="laws[]" value="' . $law . '">
|
||||||
|
|
||||||
|
<div class="tooltip_text">
|
||||||
|
<p>' . $law . '</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
}
|
||||||
|
|
||||||
|
$form .= '
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="submit" value="Build Robot">
|
<input type="submit" value="Build Robot">
|
||||||
</form>
|
</form>
|
||||||
@@ -146,10 +486,10 @@ function form()
|
|||||||
return $form;
|
return $form;
|
||||||
}
|
}
|
||||||
|
|
||||||
function message()
|
function message($models)
|
||||||
{
|
{
|
||||||
if (isset($_POST['model']) && isset($_POST['color']) && isset($_POST['os']))
|
if (isset($_POST['model']) && isset($_POST['color']) && isset($_POST['os']) & isset($_POST['size']))
|
||||||
$robot = new Robot($_POST['model'], $_POST['color'], $_POST['os']);
|
$robot = new Robot($_POST['model'], $_POST['color'], $_POST['os'], $models[$_POST['model']], $_POST['size'], isset($_POST['laws']) ? $_POST['laws'] : '');
|
||||||
|
|
||||||
if (!$robot)
|
if (!$robot)
|
||||||
return form();
|
return form();
|
||||||
@@ -162,13 +502,15 @@ function message()
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Processing...</h3>
|
<h3>Processing...</h3>
|
||||||
' . $robot->__toString() . '
|
' . $robot->__toString() . '
|
||||||
<pre>
|
<div class="column">
|
||||||
|
<pre>
|
||||||
';
|
';
|
||||||
|
|
||||||
$msg .= $dump;
|
$msg .= $dump;
|
||||||
|
|
||||||
$msg .= '
|
$msg .= '
|
||||||
</pre>
|
</pre>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
';
|
';
|
||||||
|
|
||||||
|
|||||||