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

Compare commits

base: rdiedrich:44c3790ddf3bad4bac83d45760fdc5a7bd25020b
Branches Tags
rdiedrich:main
..
compare: rdiedrich:66cc647a5265f5d53ba9d503071b950261427a5c
Branches Tags
rdiedrich:main

3 Commits
44c3790ddf ... 66cc647a52

Author SHA1 Message Date
Rüdiger Diedrich
66cc647a52 score and mobile 2023-04-19 15:17:33 +02:00
Rüdiger Diedrich
a14c56092c sprites relative positioning 2023-04-19 13:59:02 +02:00
Rüdiger Diedrich
06cbfc78fc ignore generated assets 2023-04-19 13:46:14 +02:00
9 changed files with 45 additions and 7429 deletions
Expand all files Collapse all files

2
.gitignore vendored
View File

@ -9,4 +9,4 @@ erl_crash.dump
*.beam *.beam
/config/*.secret.exs /config/*.secret.exs
.elixir_ls/ .elixir_ls/
/priv/static/assets

14
assets/css/app.css
View File

@ -2,4 +2,16 @@
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
/* This file is for your main application CSS */ @layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px #000;
}
.text-outline {
text-shadow: 2px 2px 2px #801B71, -2px 2px 2px #801B71, 2px -2px 2px #801B71, -2px -2px 2px #801B71;
}
}
body {
@apply overflow-hidden;
}

12
assets/js/app.js
View File

@ -22,8 +22,18 @@ import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view" import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar" import topbar from "../vendor/topbar"
let Hooks = {}
Hooks.ChickenEgg = {
mounted() {
this.el.addEventListener("touchstart", _e => {
this.pushEvent("boak", {})
})
}
}
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
// Show progress bar on live navigation and form submits // Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

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>
""" """

8
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" />

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

@ -6,10 +6,16 @@ defmodule ChickenEggWeb.IndexLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div <div
class="board relative overflow-hidden bg-green-200 w-screen h-screen" class="board relative bg-green-700 w-screen h-screen select-none"
id="chicken-egg"
phx-window-keyup="boak" phx-window-keyup="boak"
phx-key=" " phx-key=" "
phx-hook="ChickenEgg"
> >
<div class="score absolute right-0 z-50 text-fuchsia-50 text-4xl font-semibold p-4 text-outline">
<%= @score %>
</div>
<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">
@ -22,25 +28,24 @@ defmodule ChickenEggWeb.IndexLive do
end end
def mount(_params, _session, socket) do def mount(_params, _session, socket) do
eggs = []
{:ok, {:ok,
socket socket
|> assign(:chicken, %{x: 300, y: 200}) |> assign(:chicken, %{x: 42, y: 47})
|> stream(:eggs, eggs)} |> assign(:score, 0)
|> stream(:eggs, [])}
end end
def handle_event("boak", _params, socket) do def handle_event("boak", _params, socket) do
score = socket.assigns.score
%{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_egg = new_egg = %{id: "egg#{cx}#{cy}", x: cx, y: cy}
%{id: "egg#{cx}#{cy}", x: cx, y: cy} new_chicken = %{x: Enum.random(1..99), y: Enum.random(1..99)}
|> IO.inspect()
{:noreply, {:noreply,
socket socket
|> assign(:chicken, new_chicken) |> assign(:chicken, new_chicken)
|> assign(:score, score + 1)
|> stream_insert(:eggs, new_egg)} |> stream_insert(:eggs, new_egg)}
end end
end end

1876
priv/static/assets/app.css
View File

File diff suppressed because it is too large Load Diff

5533
priv/static/assets/app.js
View File

File diff suppressed because one or more lines are too long