Compare commits

...

3 Commits

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

2
.gitignore vendored
View File

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

View File

@ -2,4 +2,16 @@
@import "tailwindcss/components";
@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;
}

View File

@ -22,8 +22,18 @@ import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
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 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
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

View File

@ -3,7 +3,7 @@ defmodule ChickenEggWeb.ChickenComponents do
def chicken(assigns) do
~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"} />
</div>
"""
@ -11,7 +11,7 @@ defmodule ChickenEggWeb.ChickenComponents do
def egg(assigns) do
~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"} />
</div>
"""

View File

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

View File

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

View File

@ -6,10 +6,16 @@ defmodule ChickenEggWeb.IndexLive do
def render(assigns) do
~H"""
<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-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} />
<div id="chicken-eggs" phx-update="stream">
@ -22,25 +28,24 @@ defmodule ChickenEggWeb.IndexLive do
end
def mount(_params, _session, socket) do
eggs = []
{:ok,
socket
|> assign(:chicken, %{x: 300, y: 200})
|> stream(:eggs, eggs)}
|> assign(:chicken, %{x: 42, y: 47})
|> assign(:score, 0)
|> stream(:eggs, [])}
end
def handle_event("boak", _params, socket) do
score = socket.assigns.score
%{x: cx, y: cy} = socket.assigns.chicken
new_chicken = %{x: Enum.random(1..800), y: Enum.random(1..600)}
new_egg =
%{id: "egg#{cx}#{cy}", x: cx, y: cy}
|> IO.inspect()
new_egg = %{id: "egg#{cx}#{cy}", x: cx, y: cy}
new_chicken = %{x: Enum.random(1..99), y: Enum.random(1..99)}
{:noreply,
socket
|> assign(:chicken, new_chicken)
|> assign(:score, score + 1)
|> stream_insert(:eggs, new_egg)}
end
end

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long