finished extra features on i, object assignment

This commit is contained in:
2025-04-19 11:39:00 -06:00
parent e183f22d97
commit b6008d462e
12 changed files with 371 additions and 29 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 882 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 921 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

+369 -27
View File
@@ -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,6 +502,7 @@ function message()
<div class="card"> <div class="card">
<h3>Processing...</h3> <h3>Processing...</h3>
' . $robot->__toString() . ' ' . $robot->__toString() . '
<div class="column">
<pre> <pre>
'; ';
@@ -170,6 +511,7 @@ function message()
$msg .= ' $msg .= '
</pre> </pre>
</div> </div>
</div>
'; ';
return $msg; return $msg;