rdiedrich/exponential-chicken-egg
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sprites relative positioning

Browse Source
This commit is contained in:
Rüdiger Diedrich 2023-04-19 13:47:14 +02:00
parent 06cbfc78fc
commit a14c56092c
5 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/app.css
View File

@ -2,4 +2,6 @@
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
/* This file is for your main application CSS */ body {
@apply overflow-hidden;
}

4
lib/chicken_egg_web/components/chicken_components.ex
View File

@ -3,7 +3,7 @@ defmodule ChickenEggWeb.ChickenComponents do
def chicken(assigns) do def chicken(assigns) do
~H""" ~H"""
<div class="w-32 h-32 absolute" style={"top: #{@y}px; left: #{@x}px;"}> <div class="z-0 max-w-[144px] h-auto absolute" style={"width: 12%; top: #{@y}%; left: #{@x}%;"}>
<img src={~p"/images/chicken.svg"} /> <img src={~p"/images/chicken.svg"} />
</div> </div>
""" """
@ -11,7 +11,7 @@ defmodule ChickenEggWeb.ChickenComponents do
def egg(assigns) do def egg(assigns) do
~H""" ~H"""
<div class="w-12 h-12 absolute" style={"top: #{@y}px; left: #{@x}px;"}> <div class="z-10 max-w-[48px] h-auto absolute" style={"width: 4%; top: #{@y}%; left: #{@x}%;"}>
<img src={~p"/images/egg.svg"} /> <img src={~p"/images/egg.svg"} />
</div> </div>
""" """

4
lib/chicken_egg_web/components/layouts/app.html.heex
View File

@ -1,7 +1,5 @@
<header class="px-4 sm:px-6 lg:px-8 p-0"></header> <header class="px-4 sm:px-6 lg:px-8 p-0"></header>
<main class=""> <main>
<div class="">
<.flash_group flash={@flash} /> <.flash_group flash={@flash} />
<%= @inner_content %> <%= @inner_content %>
</div>
</main> </main>

2
lib/chicken_egg_web/components/layouts/root.html.heex
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style="scrollbar-gutter: stable;"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

10
lib/chicken_egg_web/live/index_live.ex
View File

@ -5,11 +5,7 @@ defmodule ChickenEggWeb.IndexLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div <div class="board relative bg-green-700 w-screen h-screen" phx-window-keyup="boak" phx-key=" ">
class="board relative overflow-hidden bg-green-200 w-screen h-screen"
phx-window-keyup="boak"
phx-key=" "
>
<ChickenComponents.chicken x={@chicken.x} y={@chicken.y} /> <ChickenComponents.chicken x={@chicken.x} y={@chicken.y} />
<div id="chicken-eggs" phx-update="stream"> <div id="chicken-eggs" phx-update="stream">
@ -26,13 +22,13 @@ defmodule ChickenEggWeb.IndexLive do
{:ok, {:ok,
socket socket
|> assign(:chicken, %{x: 300, y: 200}) |> assign(:chicken, %{x: 42, y: 47})
|> stream(:eggs, eggs)} |> stream(:eggs, eggs)}
end end
def handle_event("boak", _params, socket) do def handle_event("boak", _params, socket) do
%{x: cx, y: cy} = socket.assigns.chicken %{x: cx, y: cy} = socket.assigns.chicken
new_chicken = %{x: Enum.random(1..800), y: Enum.random(1..600)} new_chicken = %{x: Enum.random(1..100), y: Enum.random(1..100)}
new_egg = new_egg =
%{id: "egg#{cx}#{cy}", x: cx, y: cy} %{id: "egg#{cx}#{cy}", x: cx, y: cy}