Skip to content

Commit dcae481

Browse files
si-mooonsi-mooon
committed
added new design
1 parent 4a67b78 commit dcae481

1 file changed

Lines changed: 62 additions & 46 deletions

File tree

‎src/components/LevelComponent.tsx‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { useState, useEffect, useRef } from 'react'
22

33
export default function LevelComponent() {
4-
const [code, setCode] = useState("Enter code here!")
4+
const [code, setCode] = useState("")
55
const [output, setOutput] = useState("")
66
const [pyodideReady, setPyodideReady] = useState(false)
77
const pyodideRef = useRef<any>(null)
88

9-
// Load Pyodide on mount
109
useEffect(() => {
1110
const loadPyodide = async () => {
1211
// @ts-ignore
@@ -18,14 +17,10 @@ export default function LevelComponent() {
1817

1918
const runCode = async () => {
2019
if (!pyodideRef.current) return
21-
22-
// Capture stdout
2320
await pyodideRef.current.runPythonAsync(`
24-
import sys
25-
import io
21+
import sys, io
2622
sys.stdout = io.StringIO()
2723
`)
28-
2924
try {
3025
await pyodideRef.current.runPythonAsync(code)
3126
const result = await pyodideRef.current.runPythonAsync(`sys.stdout.getvalue()`)
@@ -49,67 +44,88 @@ export default function LevelComponent() {
4944
}
5045

5146
return (
52-
<div className="w-screen h-screen grid grid-cols-2 font-mono bg-gray-100">
47+
<div className="w-screen h-screen flex gap-4 p-4 bg-[#0a0f2e] font-mono overflow-hidden">
5348

5449
{/* Left panel */}
55-
<div className="flex flex-col gap-3 p-4">
50+
<div className="flex-1 bg-[#2a2a2a] rounded-2xl p-5 flex flex-col gap-4">
51+
52+
{/* Title */}
53+
<h1 className="text-center text-2xl font-black tracking-widest text-green-400"
54+
style={{ textShadow: "2px 2px 0px #166534, -1px -1px 0px #166534, 1px -1px 0px #166534, -1px 1px 0px #166534" }}>
55+
ALIEN PYTHON
56+
</h1>
57+
58+
{/* Code panels */}
5659
<div className="flex gap-3">
57-
<div className="flex-1 bg-green-950 border-2 border-white rounded-2xl p-3 text-white">
58-
<div className="italic font-bold mb-2">PYTHON CODE</div>
59-
<pre className="text-sm leading-relaxed m-0">
60-
{`nums = [1,2,3]
60+
{/* Python */}
61+
<div className="flex-1 bg-[#3a7bd5] rounded-2xl overflow-hidden">
62+
<div className="bg-[#2d5fa8] text-white text-xs text-center py-2 tracking-widest font-bold">
63+
*** PYTHON CODE ***
64+
</div>
65+
<div className="bg-[#4a8be0] m-2 rounded-xl p-3">
66+
<pre className="text-white text-xs leading-relaxed m-0">{`nums = [1,2,3]
6167
sum = 0
6268
for i in nums:
63-
sum += i
64-
print(sum)`}
65-
</pre>
69+
sum += i
70+
print(sum)`}</pre>
71+
</div>
6672
</div>
67-
<div className="flex-1 bg-green-950 border-[3px] border-white rounded-2xl p-3 text-white">
68-
<div className="italic font-bold mb-2">ALIEN CODE</div>
69-
<pre className="text-sm leading-relaxed m-0">
70-
{`plz make nums [1,2,3] ty
71-
plz make sums 0 ty
72-
plz i go through nums ty
73-
plz add i to sum ty
74-
plz print sum ty`}
75-
</pre>
73+
74+
{/* Alien */}
75+
<div className="flex-1 bg-[#2d7a3a] rounded-2xl overflow-hidden">
76+
<div className="bg-[#1f5c29] text-white text-xs text-center py-2 tracking-widest font-bold">
77+
*** ALIEN CODE ***
78+
</div>
79+
<div className="bg-[#3a9447] m-2 rounded-xl p-3">
80+
<pre className="text-white text-xs leading-relaxed m-0">{`nums eats [1,2,3]
81+
sum eats 0
82+
i eats nums slowly:
83+
sum eats more i
84+
print eats sum`}</pre>
85+
</div>
7686
</div>
7787
</div>
78-
<div className="bg-green-950 rounded-lg px-5 py-4 text-white text-sm">
79-
GOAL: IN <strong className="font-mono">ALIEN CODE</strong>, print the square of all numbers.
80-
</div>
8188

82-
{/* Output */}
83-
<div className="bg-zinc-900 rounded-lg p-4 text-green-400 text-sm font-mono h-32 overflow-auto">
84-
<div className="text-zinc-500 mb-1">Output:</div>
85-
<pre>{output}</pre>
89+
{/* Goal text */}
90+
<div className="text-gray-300 text-xs leading-relaxed">
91+
<p className="mb-2">The code above are equivalent.</p>
92+
<p className="mb-2">YOUR GOAL: Write a program in<br />
93+
ALIEN CODE that outputs the<br />
94+
SQUARE OF THE LENGTH OF nums.</p>
95+
<p className="mb-2">Assume nums is already defined.</p>
96+
<p>(Hint: you cannot use any +-*/ or **)</p>
8697
</div>
87-
98+
8899
</div>
89100

90101
{/* Right panel */}
91-
<div className="flex flex-col gap-3 m-4">
102+
<div className="flex-1 bg-[#2a2a2a] rounded-2xl p-5 flex flex-col gap-3">
92103

93104
{/* Editor */}
94-
<div className="flex-1 bg-zinc-700 rounded-lg overflow-hidden">
95-
<textarea
96-
value={code}
97-
onChange={(e) => setCode(e.target.value)}
98-
onKeyDown={handleKeyDown}
99-
spellCheck={false}
100-
className="w-full h-full bg-transparent text-white text-sm font-mono p-4 resize-none outline-none"
101-
/>
102-
</div>
105+
<textarea
106+
value={code}
107+
onChange={(e) => setCode(e.target.value)}
108+
onKeyDown={handleKeyDown}
109+
spellCheck={false}
110+
placeholder="write code here!"
111+
className="flex-1 bg-[#3a3a3a] text-gray-300 text-sm font-mono p-4 rounded-xl resize-none outline-none placeholder-gray-500"
112+
/>
103113

104-
{/* Run button */}
114+
{/* Submit button */}
105115
<button
106116
onClick={runCode}
107117
disabled={!pyodideReady}
108-
className="bg-green-700 hover:bg-green-600 disabled:bg-zinc-500 text-white font-bold py-2 rounded-lg"
118+
className="bg-green-600 hover:bg-green-500 disabled:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg text-sm w-fit"
109119
>
110-
{pyodideReady ? "Run" : "Loading Python..."}
120+
{pyodideReady ? "submit" : "loading python..."}
111121
</button>
112122

123+
{/* Output */}
124+
<div className="text-gray-300 text-sm font-bold tracking-widest">OUTPUT:</div>
125+
<div className="bg-[#3a3a3a] rounded-xl p-4 text-gray-400 text-sm font-mono min-h-[60px]">
126+
{output || <span className="text-gray-600">output</span>}
127+
</div>
128+
113129
</div>
114130

115131
</div>

0 commit comments

Comments
 (0)